/* recycle.auction - Neomorphic Terracotta Auction Platform */
/* Colors: #1a1a2e (deep base), #4a90d9 (primary blue), #f5f0e8 (warm off-white), #e8b84b (accent gold), #6c757d (muted gray) */
/* Fonts: Inter, DM Sans */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
--deep-base:#1a1a2e;
--primary-blue:#4a90d9;
--warm-white:#f5f0e8;
--accent-gold:#e8b84b;
--muted-gray:#6c757d;
--terracotta:#c4704b;
--shadow-light:rgba(255,255,255,0.12);
--shadow-dark:rgba(0,0,0,0.35);
}

html{scroll-behavior:smooth}
body{
font-family:'Inter','DM Sans',sans-serif;
background:var(--warm-white);
color:var(--deep-base);
overflow-x:hidden;
line-height:1.6;
}

/* Grain Overlay */
#grain-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
pointer-events:none;z-index:9999;opacity:0.08;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:256px 256px;
}

/* Cultural Pattern Borders */
.cultural-pattern-border{
height:12px;
background:repeating-linear-gradient(
90deg,
var(--accent-gold) 0px,var(--accent-gold) 8px,
transparent 8px,transparent 16px,
var(--primary-blue) 16px,var(--primary-blue) 24px,
transparent 24px,transparent 32px,
var(--deep-base) 32px,var(--deep-base) 36px,
transparent 36px,transparent 44px
);
opacity:0.6;
}
.cultural-pattern-border.top{margin-bottom:0}
.cultural-pattern-border.bottom{margin-top:0}

.cultural-divider{
width:80px;height:4px;
background:linear-gradient(90deg,var(--accent-gold),var(--primary-blue));
margin:0 auto 40px;
border-radius:2px;
}

/* Navigation */
#main-nav{
position:fixed;top:0;left:0;width:100%;z-index:1000;
background:rgba(245,240,232,0.92);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(26,26,46,0.08);
transition:all 0.3s ease;
}
#main-nav.scrolled{
background:rgba(245,240,232,0.98);
box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.nav-inner{
max-width:1200px;margin:0 auto;
padding:16px 24px;
display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
display:flex;align-items:center;gap:10px;
text-decoration:none;color:var(--deep-base);
font-weight:700;font-size:1.25rem;
}
.logo-dot{color:var(--accent-gold)}
.nav-links{display:flex;gap:28px}
.nav-link{
text-decoration:none;color:var(--muted-gray);
font-weight:500;font-size:0.95rem;
transition:color 0.3s ease;
position:relative;
}
.nav-link::after{
content:'';position:absolute;bottom:-4px;left:0;
width:0;height:2px;background:var(--accent-gold);
transition:width 0.3s ease;
}
.nav-link:hover{color:var(--deep-base)}
.nav-link:hover::after{width:100%}

/* Neomorphic Buttons */
.neu-button{
border:none;cursor:pointer;
font-family:'Inter',sans-serif;font-weight:600;
font-size:0.95rem;
padding:12px 28px;border-radius:12px;
transition:all 0.3s ease;
background:var(--warm-white);
color:var(--deep-base);
box-shadow:6px 6px 12px rgba(0,0,0,0.1),-6px -6px 12px rgba(255,255,255,0.8);
}
.neu-button:hover{
box-shadow:4px 4px 8px rgba(0,0,0,0.12),-4px -4px 8px rgba(255,255,255,0.9);
transform:translateY(-1px);
}
.neu-button:active{
box-shadow:inset 3px 3px 6px rgba(0,0,0,0.1),inset -3px -3px 6px rgba(255,255,255,0.7);
transform:translateY(0);
}
.neu-button.primary{
background:var(--accent-gold);color:#fff;
box-shadow:6px 6px 12px rgba(232,184,75,0.3),-6px -6px 12px rgba(255,255,255,0.5);
}
.neu-button.primary:hover{
background:#d4a43f;
box-shadow:4px 4px 8px rgba(232,184,75,0.4),-4px -4px 8px rgba(255,255,255,0.6);
}
.neu-button.secondary{
background:transparent;
border:2px solid var(--accent-gold);color:var(--accent-gold);
box-shadow:none;
}
.neu-button.secondary:hover{background:rgba(232,184,75,0.08)}
.neu-button.small{padding:8px 20px;font-size:0.85rem;border-radius:8px}

/* Neomorphic Cards */
.neu-card{
background:var(--warm-white);
border-radius:16px;
box-shadow:8px 8px 16px rgba(0,0,0,0.08),-8px -8px 16px rgba(255,255,255,0.9);
transition:all 0.3s ease;
}
.neu-card:hover{
box-shadow:10px 10px 20px rgba(0,0,0,0.1),-10px -10px 20px rgba(255,255,255,1);
transform:translateY(-4px);
}

/* Neomorphic Input */
.neu-input{
border:none;outline:none;
font-family:'Inter',sans-serif;
font-size:1rem;padding:14px 20px;
border-radius:12px;width:100%;
background:var(--warm-white);
color:var(--deep-base);
box-shadow:inset 4px 4px 8px rgba(0,0,0,0.06),inset -4px -4px 8px rgba(255,255,255,0.8);
}
.neu-input::placeholder{color:var(--muted-gray)}

/* Hero Section */
#hero{
min-height:100vh;display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;
background:var(--deep-base);
}
#hero .parallax-bg{
position:absolute;top:0;left:0;width:100%;height:120%;
background:
radial-gradient(ellipse at 20% 50%,rgba(74,144,217,0.15) 0%,transparent 60%),
radial-gradient(ellipse at 80% 30%,rgba(232,184,75,0.12) 0%,transparent 50%),
radial-gradient(ellipse at 50% 80%,rgba(196,112,75,0.1) 0%,transparent 50%),
var(--deep-base);
will-change:transform;
}
.hero-content{
position:relative;z-index:2;text-align:center;
max-width:800px;padding:120px 24px 80px;margin:0 auto;
}
.hero-badge{
display:inline-block;
padding:8px 20px;border-radius:24px;
background:rgba(232,184,75,0.15);
color:var(--accent-gold);
font-weight:600;font-size:0.85rem;
letter-spacing:1px;text-transform:uppercase;
margin-bottom:24px;
border:1px solid rgba(232,184,75,0.3);
}
.hero-title{
font-size:clamp(2.5rem,6vw,4.5rem);
font-weight:700;color:#fff;
line-height:1.1;margin-bottom:24px;
}
.hero-title .highlight{
color:var(--accent-gold);
text-shadow:0 0 40px rgba(232,184,75,0.3);
}
.hero-subtitle{
font-size:1.15rem;color:rgba(255,255,255,0.7);
max-width:560px;margin:0 auto 36px;
line-height:1.7;
}
.hero-actions{display:flex;gap:16px;justify-content:center;margin-bottom:60px;flex-wrap:wrap}
.hero-stats{display:flex;gap:48px;justify-content:center;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-number{
display:block;font-size:2.2rem;font-weight:700;
color:var(--accent-gold);line-height:1.2;
}
.stat-label{font-size:0.85rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:1px}

/* Section Styling */
.section-inner{max-width:1200px;margin:0 auto;padding:80px 24px}
.section-header{text-align:center;margin-bottom:16px}
.section-title{
font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;
color:var(--deep-base);margin-bottom:12px;
}
.section-desc{
font-size:1.05rem;color:var(--muted-gray);
max-width:500px;margin:0 auto;
}

/* Featured Section */
#featured{
position:relative;overflow:hidden;
background:linear-gradient(180deg,var(--deep-base) 0%,#232348 100%);
}
#featured .parallax-bg{
position:absolute;top:0;left:0;width:100%;height:120%;
background:
radial-gradient(ellipse at 30% 20%,rgba(232,184,75,0.08) 0%,transparent 50%),
radial-gradient(ellipse at 70% 70%,rgba(74,144,217,0.06) 0%,transparent 50%);
will-change:transform;
}
#featured .section-inner{position:relative;z-index:2}
#featured .section-title{color:#fff}
#featured .section-desc{color:rgba(255,255,255,0.6)}
#featured .cultural-divider{
background:linear-gradient(90deg,var(--accent-gold),var(--primary-blue));
}

.auction-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:28px;
}

/* Flip Cards */
.flip-card{
perspective:1000px;
height:380px;
cursor:pointer;
}
.flip-card-inner{
position:relative;width:100%;height:100%;
transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);
transform-style:preserve-3d;
}
.flip-card.flipped .flip-card-inner{
transform:rotateY(180deg);
}
.flip-card-front,.flip-card-back{
position:absolute;top:0;left:0;width:100%;height:100%;
backface-visibility:hidden;
border-radius:16px;overflow:hidden;
}
.flip-card-front{
background:var(--warm-white);
box-shadow:8px 8px 16px rgba(0,0,0,0.15),-4px -4px 12px rgba(255,255,255,0.05);
display:flex;flex-direction:column;
}
.flip-card-back{
background:var(--warm-white);
transform:rotateY(180deg);
padding:28px;
display:flex;flex-direction:column;justify-content:center;
box-shadow:8px 8px 16px rgba(0,0,0,0.15),-4px -4px 12px rgba(255,255,255,0.05);
}
.card-image{flex:1;overflow:hidden}
.card-image svg{width:100%;height:100%;display:block}
.card-illustration{width:100%;height:100%}
.card-badge{
position:absolute;top:12px;right:12px;
padding:4px 12px;border-radius:6px;
background:var(--accent-gold);color:#fff;
font-size:0.75rem;font-weight:700;text-transform:uppercase;
}
.card-badge.trending{background:var(--primary-blue)}
.card-badge.new{background:#2d8a4e}
.card-info{padding:16px 20px}
.card-info h3{font-size:1.05rem;margin-bottom:8px;color:var(--deep-base)}
.card-price{display:flex;align-items:baseline;gap:8px}
.current-bid{font-size:1.3rem;font-weight:700;color:var(--accent-gold)}
.bid-label{font-size:0.8rem;color:var(--muted-gray)}
.card-flip-hint{
padding:0 20px 14px;
font-size:0.75rem;color:var(--muted-gray);
opacity:0.7;
}
.flip-card-back h3{font-size:1.15rem;margin-bottom:12px;color:var(--deep-base)}
.back-description{font-size:0.9rem;color:var(--muted-gray);margin-bottom:20px;line-height:1.5}
.back-details{margin-bottom:20px}
.detail-row{
display:flex;justify-content:space-between;
padding:8px 0;
border-bottom:1px solid rgba(26,26,46,0.06);
}
.detail-label{font-size:0.85rem;color:var(--muted-gray)}
.detail-value{font-size:0.85rem;font-weight:600;color:var(--deep-base)}

/* Categories */
#categories{background:var(--warm-white);position:relative}
.categories-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:24px;
}
.category-card{
padding:28px 20px;text-align:center;
cursor:pointer;
}
.category-icon{margin-bottom:16px}
.category-card h3{font-size:1rem;margin-bottom:6px;color:var(--deep-base)}
.category-count{font-size:0.8rem;color:var(--muted-gray)}

/* Live Auctions */
#live-auctions{
position:relative;overflow:hidden;
background:var(--deep-base);
}
#live-auctions .parallax-bg{
position:absolute;top:0;left:0;width:100%;height:120%;
background:
radial-gradient(ellipse at 60% 40%,rgba(232,184,75,0.06) 0%,transparent 50%),
var(--deep-base);
will-change:transform;
}
#live-auctions .section-inner{position:relative;z-index:2}
#live-auctions .section-title{color:#fff}
#live-auctions .section-desc{color:rgba(255,255,255,0.6)}

.live-indicator{
display:inline-flex;align-items:center;gap:8px;
margin-top:16px;
color:#ff4444;font-weight:700;font-size:0.85rem;
letter-spacing:2px;
}
.live-dot{
width:10px;height:10px;border-radius:50%;
background:#ff4444;
animation:livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.5;transform:scale(1.3)}
}

.live-auction-list{display:flex;flex-direction:column;gap:16px}
.live-auction-item{
display:grid;
grid-template-columns:1fr auto auto auto;
align-items:center;gap:24px;
padding:20px 28px;
background:rgba(245,240,232,0.04);
border:1px solid rgba(245,240,232,0.08);
border-radius:16px;
box-shadow:none;
transition:all 0.3s ease;
}
.live-auction-item:hover{
background:rgba(245,240,232,0.08);
border-color:rgba(232,184,75,0.2);
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
.live-item-info h3{font-size:1rem;color:#fff;margin-bottom:4px}
.live-item-info p{font-size:0.85rem;color:rgba(255,255,255,0.5)}
.bid-amount{display:block;font-size:1.2rem;font-weight:700;color:var(--accent-gold)}
.bid-count{font-size:0.8rem;color:rgba(255,255,255,0.4)}
.timer-display{
display:flex;align-items:center;gap:2px;
font-size:1.4rem;font-weight:700;
font-variant-numeric:tabular-nums;
}
.timer-num{color:var(--primary-blue)}
.timer-sep{color:rgba(255,255,255,0.3)}
.timer-label{font-size:0.7rem;color:rgba(255,255,255,0.4);text-align:center}

/* How It Works */
#how-it-works{background:var(--warm-white);position:relative}
.steps-grid{
display:flex;align-items:center;justify-content:center;
gap:0;flex-wrap:wrap;
}
.step-card{
padding:36px 28px;text-align:center;
flex:0 0 260px;position:relative;
}
.step-number{
font-size:3rem;font-weight:800;
color:rgba(232,184,75,0.15);
line-height:1;margin-bottom:16px;
}
.step-icon{margin-bottom:20px}
.step-card h3{font-size:1.1rem;margin-bottom:10px;color:var(--deep-base)}
.step-card p{font-size:0.9rem;color:var(--muted-gray);line-height:1.5}
.step-connector{
flex:0 0 80px;display:flex;align-items:center;justify-content:center;
}

/* CTA Section */
#cta-section{
background:linear-gradient(135deg,var(--deep-base) 0%,#2a2a4e 100%);
padding:80px 0;
}
.cta-container{
max-width:600px;margin:0 auto;
padding:48px 40px;text-align:center;
background:rgba(245,240,232,0.06);
border:1px solid rgba(245,240,232,0.1);
box-shadow:none;
}
.cta-container:hover{box-shadow:none;transform:none}
.cta-container h2{
font-size:1.8rem;color:#fff;margin-bottom:12px;
}
.cta-container p{
font-size:1rem;color:rgba(255,255,255,0.6);margin-bottom:28px;
}
.cta-form{
display:flex;gap:12px;margin-bottom:12px;
}
.cta-form .neu-input{
background:rgba(255,255,255,0.08);color:#fff;
box-shadow:none;border:1px solid rgba(255,255,255,0.12);
}
.cta-form .neu-input::placeholder{color:rgba(255,255,255,0.4)}
.cta-note{font-size:0.8rem;color:rgba(255,255,255,0.35)}

/* Footer */
#site-footer{background:var(--deep-base)}
.footer-inner{
max-width:1200px;margin:0 auto;padding:60px 24px 30px;
}
.footer-brand{margin-bottom:40px}
.footer-brand .nav-logo span{color:#fff}
.footer-tagline{
font-size:0.9rem;color:rgba(255,255,255,0.45);
margin-top:12px;max-width:300px;
}
.footer-links{
display:grid;grid-template-columns:repeat(3,1fr);
gap:32px;margin-bottom:40px;
}
.footer-col h4{
font-size:0.85rem;color:var(--accent-gold);
text-transform:uppercase;letter-spacing:1px;
margin-bottom:16px;
}
.footer-col a{
display:block;text-decoration:none;
font-size:0.9rem;color:rgba(255,255,255,0.5);
padding:4px 0;transition:color 0.3s ease;
}
.footer-col a:hover{color:#fff}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;
padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);
}
.footer-bottom span{font-size:0.85rem;color:rgba(255,255,255,0.35)}
.footer-social{display:flex;gap:16px}
.social-link{
color:rgba(255,255,255,0.4);
transition:color 0.3s ease;
display:flex;align-items:center;
}
.social-link:hover{color:var(--accent-gold)}

/* Animations */
.fade-in-up{
opacity:0;transform:translateY(30px);
transition:opacity 0.6s ease,transform 0.6s ease;
}
.fade-in-up.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
.nav-links{display:none}
.nav-cta{display:none}
.hero-stats{gap:24px}
.auction-grid{grid-template-columns:1fr}
.live-auction-item{
grid-template-columns:1fr;
gap:12px;text-align:center;
}
.steps-grid{flex-direction:column}
.step-connector{transform:rotate(90deg)}
.footer-links{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;gap:16px;text-align:center}
.cta-form{flex-direction:column}
.categories-grid{grid-template-columns:repeat(2,1fr)}
}