/* bada.style - Y2K Chrome Maximalism */

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

:root{
    --mercury:#C0C0C8;
    --abyss:#0D0D1A;
    --violet:#7B2FBE;
    --magenta:#E03090;
    --cyan:#00D4FF;
    --bright:#F0F0F5;
    --tarnish:#8A8A9A;
    --flare:#FFFFFF;
}

html{scroll-behavior:smooth}

body{
    background:var(--abyss);
    color:var(--bright);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Chrome orbs */
.orb-layer{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.chrome-orb{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#FFFFFF,#C0C0C8 40%,#4A4A5A 80%,#0D0D1A);
    opacity:0.15;
}

.orb-1{width:180px;height:180px;animation:orbDrift1 35s ease-in-out infinite}
.orb-2{width:80px;height:80px;animation:orbDrift2 50s ease-in-out infinite}
.orb-3{width:120px;height:120px;animation:orbDrift3 42s ease-in-out infinite}
.orb-4{width:60px;height:60px;animation:orbDrift4 28s ease-in-out infinite}
.orb-5{width:200px;height:200px;animation:orbDrift5 60s ease-in-out infinite;opacity:0.08}

@keyframes orbDrift1{
    0%,100%{transform:translate(10vw,20vh)}
    33%{transform:translate(70vw,60vh)}
    66%{transform:translate(30vw,80vh)}
}
@keyframes orbDrift2{
    0%,100%{transform:translate(80vw,10vh)}
    33%{transform:translate(20vw,50vh)}
    66%{transform:translate(60vw,30vh)}
}
@keyframes orbDrift3{
    0%,100%{transform:translate(50vw,70vh)}
    33%{transform:translate(10vw,30vh)}
    66%{transform:translate(80vw,50vh)}
}
@keyframes orbDrift4{
    0%,100%{transform:translate(30vw,10vh)}
    50%{transform:translate(70vw,80vh)}
}
@keyframes orbDrift5{
    0%,100%{transform:translate(60vw,40vh)}
    50%{transform:translate(20vw,70vh)}
}

/* Navigation pill */
.nav-pill{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    z-index:50;
    display:flex;
    gap:0;
    background:linear-gradient(135deg,#E8E8E8 0%,#B0B0B0 25%,#FFFFFF 50%,#A0A0A0 75%,#D0D0D0 100%);
    border-radius:50px;
    padding:8px 16px;
    height:48px;
    align-items:center;
    transition:transform 200ms cubic-bezier(0.34,1.56,0.64,1);
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
}

.nav-pill:hover{
    transform:translateX(-50%) scale(1.05);
}

.pill-glyph{
    font-family:'Space Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.08em;
    color:var(--abyss);
    text-decoration:none;
    padding:4px 12px;
    transition:transform 150ms ease;
}

.pill-glyph:hover{
    transform:skewX(-8deg) scaleY(1.15);
}

/* Panel base */
.panel{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    overflow:hidden;
    padding:clamp(40px,8vh,80px) clamp(24px,6vw,80px);
}

/* ==============================
   Panel 1: Chrome Surface
   ============================== */
.panel-chrome{
    min-height:200vh;
    flex-direction:column;
}

.chrome-gradient{
    position:absolute;
    inset:0;
    background:conic-gradient(
        from 0deg,
        #C0C0C8,#FFFFFF,#808090,#E0E0E8,
        #909098,#F0F0F5,#A0A0B0,#C0C0C8
    );
    background-size:200% 200%;
    animation:chromeRotate 20s linear infinite;
    z-index:0;
}

@keyframes chromeRotate{
    from{background-position:0% 0%}
    to{background-position:100% 100%}
}

.hero-reveal{
    position:relative;
    z-index:2;
    text-align:center;
    margin-top:100vh;
    opacity:0;
    clip-path:circle(0% at 50% 50%);
    transition:clip-path 1.5s cubic-bezier(0.34,1.56,0.64,1),opacity 800ms ease;
}

.hero-reveal.visible{
    clip-path:circle(75% at 50% 50%);
    opacity:1;
}

.hero-title{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,9rem);
    letter-spacing:0.06em;
    line-height:1;
    text-transform:uppercase;
    background:linear-gradient(135deg,var(--mercury),var(--flare),var(--tarnish),var(--mercury));
    background-size:400% 400%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:iridText 8s ease-in-out infinite;
}

@keyframes iridText{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}

.hero-sub{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.1vw,1.1rem);
    color:var(--tarnish);
    margin-top:1.5rem;
}

/* ==============================
   Panel 2: Manifesto
   ============================== */
.panel-manifesto{
    background:var(--abyss);
}

/* Puddle cards */
.puddle-card{
    background:rgba(13,13,26,0.9);
    border:1px solid rgba(123,47,190,0.2);
    position:relative;
    padding:clamp(32px,5vw,64px);
    opacity:0;
    transform:scale(0.9);
    transition:opacity 600ms cubic-bezier(0.34,1.56,0.64,1),transform 600ms cubic-bezier(0.34,1.56,0.64,1);
}

.puddle-card.in-view{
    opacity:1;
    transform:scale(1) rotate(var(--rot,0deg));
}

.puddle-large{
    max-width:70vw;
    border-radius:60% 40% 70% 30% / 40% 60% 30% 70%;
    animation:blobMorph 12s ease-in-out infinite;
}

@keyframes blobMorph{
    0%,100%{border-radius:60% 40% 70% 30% / 40% 60% 30% 70%}
    50%{border-radius:40% 60% 30% 70% / 60% 40% 70% 30%}
}

.puddle-text{
    font-size:clamp(1rem,1.3vw,1.2rem);
    line-height:1.8;
    max-width:55ch;
    color:var(--bright);
}

/* ==============================
   Panel 3: Collection
   ============================== */
.panel-collection{
    background:var(--abyss);
}

.collection-flow{
    display:flex;
    gap:clamp(16px,3vw,32px);
    align-items:flex-start;
    flex-wrap:wrap;
    justify-content:center;
    max-width:1100px;
}

.puddle-lg{
    width:clamp(280px,50vw,500px);
    border-radius:50% 30% 60% 40% / 35% 55% 45% 65%;
    animation:blobMorph 12s ease-in-out infinite;
}

.puddle-md{
    width:clamp(200px,35vw,380px);
    border-radius:40% 60% 35% 65% / 55% 45% 60% 40%;
    animation:blobMorph 12s ease-in-out 4s infinite;
    margin-top:10vh;
}

.puddle-sm{
    width:clamp(150px,25vw,280px);
    border-radius:55% 45% 40% 60% / 50% 40% 60% 50%;
    animation:blobMorph 12s ease-in-out 8s infinite;
}

.puddle-word{
    font-family:'Outfit',sans-serif;
    font-weight:600;
    font-size:clamp(1.5rem,3vw,3rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    display:block;
    margin-bottom:1rem;
}

.puddle-desc{
    font-size:clamp(0.85rem,1vw,1rem);
    line-height:1.6;
    color:rgba(240,240,245,0.8);
}

/* Iridescent border glow on hover */
.puddle-card:hover{
    border-color:var(--accent,var(--violet));
    box-shadow:0 0 30px color-mix(in srgb,var(--accent,var(--violet)),transparent 60%);
}

/* ==============================
   Panel 4: Spectrum
   ============================== */
.panel-spectrum{
    background:var(--abyss);
    flex-direction:column;
    gap:3rem;
}

.spectrum-band{
    width:100%;
    height:30vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.spectrum-blob{
    position:absolute;
    width:clamp(200px,30vw,400px);
    height:clamp(200px,30vw,400px);
    border-radius:50%;
    filter:blur(60px);
    opacity:0.6;
}

.blob-violet{
    background:var(--violet);
    left:15%;
    animation:blobFloat 15s ease-in-out infinite;
}

.blob-magenta{
    background:var(--magenta);
    left:40%;
    animation:blobFloat 15s ease-in-out 5s infinite;
}

.blob-cyan{
    background:var(--cyan);
    left:65%;
    animation:blobFloat 15s ease-in-out 10s infinite;
}

@keyframes blobFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-20px) scale(1.1)}
}

.spectrum-labels{
    display:flex;
    gap:clamp(32px,6vw,80px);
    justify-content:center;
}

.spectrum-label{
    text-align:center;
}

.label-name{
    display:block;
    font-family:'Space Mono',monospace;
    font-size:clamp(0.65rem,0.8vw,0.8rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--tarnish);
    margin-bottom:4px;
}

.label-hex{
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    color:var(--bright);
}

/* ==============================
   Panel 5: The Depth
   ============================== */
.panel-depth{
    background:linear-gradient(180deg,var(--mercury) 0%,var(--abyss) 100%);
    min-height:120vh;
}

.depth-scatter{
    display:flex;
    flex-wrap:wrap;
    gap:clamp(16px,3vw,24px);
    justify-content:center;
    max-width:800px;
}

.puddle-frag{
    padding:clamp(16px,3vw,32px) clamp(24px,4vw,48px);
    border-radius:50% 40% 60% 30% / 45% 55% 35% 65%;
    background:rgba(13,13,26,0.7);
    border:1px solid rgba(200,200,208,0.1);
    transform:rotate(var(--rot,0deg));
}

.frag-word{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2.5vw,2rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
}

/* Glitch on scroll-enter */
.puddle-frag.glitch{
    animation:glitchFlash 200ms steps(2) forwards;
}

@keyframes glitchFlash{
    0%{text-shadow:-2px 0 var(--cyan),2px 0 var(--magenta);clip-path:inset(10% 0 80% 0)}
    33%{text-shadow:2px 0 var(--cyan),-2px 0 var(--magenta);clip-path:inset(40% 0 20% 0)}
    66%{text-shadow:-1px 0 var(--cyan),1px 0 var(--magenta);clip-path:inset(70% 0 10% 0)}
    100%{text-shadow:none;clip-path:inset(0)}
}

/* ==============================
   Panel 6: Reflection
   ============================== */
.panel-reflection{
    flex-direction:column;
}

.panel-reflection::before{
    content:'';
    position:absolute;
    inset:0;
    background:conic-gradient(
        from 0deg,
        #C0C0C8,#FFFFFF,#808090,#E0E0E8,
        #909098,#F0F0F5,#A0A0B0,#C0C0C8
    );
    background-size:200% 200%;
    animation:chromeRotate 20s linear infinite;
    opacity:0.15;
    z-index:0;
}

.reflection-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.reflection-title{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,9rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--bright);
}

.reflection-mirror{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,9rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--tarnish);
    transform:scaleY(-1) skewX(2deg);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);
    filter:blur(1px);
    animation:mirrorDrift 10s ease-in-out infinite;
    pointer-events:none;
}

@keyframes mirrorDrift{
    0%,100%{transform:scaleY(-1) skewX(2deg) translateX(0)}
    50%{transform:scaleY(-1) skewX(2deg) translateX(10px)}
}

.reflection-closing{
    font-family:'Space Mono',monospace;
    font-size:clamp(0.75rem,0.9vw,0.85rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--tarnish);
    margin-top:2rem;
}

/* Responsive */
@media(max-width:768px){
    .collection-flow{
        flex-direction:column;
        align-items:center;
    }

    .puddle-lg,.puddle-md,.puddle-sm{
        width:90%;
    }

    .puddle-md{
        margin-top:0;
    }

    .spectrum-labels{
        flex-direction:column;
        align-items:center;
        gap:16px;
    }

    .depth-scatter{
        flex-direction:column;
        align-items:center;
    }

    .nav-pill{
        height:40px;
        padding:4px 12px;
    }

    .pill-glyph{
        padding:4px 8px;
        font-size:0.7rem;
    }
}