/* badge.bar - Chrome Trophy Case Badge Forge */

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

:root{
    --obsidian:#0B0B0F;
    --gunmetal:#1E1E28;
    --platinum:#E8E8EC;
    --sterling:#A8A9AD;
    --pewter:#5A5B61;
    --gold:#D4A017;
    --copper:#B87333;
    --cobalt:#3D5AFE;
    --red:#E53935;
    --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
}

html{scroll-behavior:smooth}

body{
    background:var(--obsidian);
    color:var(--platinum);
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(0.875rem,1.1vw,1.125rem);
    line-height:1.6;
    letter-spacing:0.02em;
    overflow-x:hidden;
}

/* SVG defs hidden */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Metal grain overlay */
.metal-grain{
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    filter:url(#grain);
    mix-blend-mode:overlay;
    opacity:0.03;
}

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

/* Section title */
.section-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.5rem,3vw,3.5rem);
    letter-spacing:0.12em;
    line-height:0.95;
    color:var(--platinum);
    margin-bottom:3rem;
    text-align:center;
}

/* Bounce-in animation */
.bounce-in{
    opacity:0;
    transform:translateY(30px) scale(0.95);
    transition:opacity 400ms var(--ease-bounce),transform 400ms var(--ease-bounce);
}

.bounce-in.visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* ==============================
   Section 1: The Stamp
   ============================== */
.section-stamp{
    background:var(--obsidian);
}

.stamp-content{
    position:relative;
    text-align:center;
    overflow:hidden;
}

.hero-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(3rem,8vw,10rem);
    letter-spacing:0.12em;
    line-height:0.95;
    color:var(--platinum);
    display:inline-flex;
    position:relative;
    /* Emboss effect */
    text-shadow:
        0 2px 4px rgba(255,255,255,0.15),
        0 -1px 2px rgba(0,0,0,0.4);
}

.stamp-char{
    display:inline-block;
    opacity:0;
    transform:translateY(40px) scale(1.1);
    animation:stampLand 400ms var(--ease-bounce) forwards;
    animation-delay:calc(var(--i)*80ms + 200ms);
}

@keyframes stampLand{
    from{opacity:0;transform:translateY(40px) scale(1.1)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.chrome-sweep{
    position:absolute;
    top:0;left:-100%;
    width:50%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
    animation:chromeSweep 3s ease 1.5s forwards;
    pointer-events:none;
}

@keyframes chromeSweep{
    from{left:-100%}
    to{left:200%}
}

.hero-tagline{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,1vw,0.9rem);
    letter-spacing:0.15em;
    font-variant:small-caps;
    color:var(--sterling);
    margin-top:1.5rem;
    opacity:0;
    animation:fadeIn 800ms ease 1.5s forwards;
}

@keyframes fadeIn{to{opacity:1}}

.scroll-chevron{
    position:absolute;
    bottom:40px;
    color:var(--sterling);
    animation:chevronPulse 2s ease-in-out infinite;
}

@keyframes chevronPulse{
    0%,100%{opacity:0.6;transform:scale(1)}
    50%{opacity:1;transform:scale(1.15)}
}

/* ==============================
   Section 2: The Collection
   ============================== */
.section-collection{
    background:var(--obsidian);
}

.bento-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:2px;
    max-width:1100px;
    width:100%;
    background:rgba(168,169,173,0.08);
}

.bento-cell{
    background:var(--gunmetal);
    padding:clamp(20px,3vw,32px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05),
        0 4px 12px rgba(0,0,0,0.5),
        0 12px 40px rgba(0,0,0,0.3);
    transition:transform 300ms ease,box-shadow 300ms ease;
    cursor:default;
}

.bento-cell:hover{
    transform:translateY(-8px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08),
        0 8px 20px rgba(0,0,0,0.6),
        0 20px 60px rgba(0,0,0,0.4);
}

.cell-lg{
    grid-column:span 2;
    grid-row:span 2;
}

.cell-wide{
    grid-column:span 2;
}

/* Badge specimen */
.badge-specimen{
    width:80px;
    height:80px;
    border-radius:50%;
    border:3px solid var(--sterling);
    background:radial-gradient(circle at 40% 35%,rgba(232,232,236,0.15),rgba(11,11,15,0.3));
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
    position:relative;
    transition:transform 300ms ease;
    perspective:800px;
}

.cell-lg .badge-specimen{
    width:120px;
    height:120px;
}

.badge-specimen.shield{
    border-radius:10%;
}

.bento-cell:hover .badge-specimen{
    transform:rotateY(8deg) rotateX(-4deg);
}

.badge-icon{
    width:40px;
    height:40px;
}

.cell-lg .badge-icon{
    width:56px;
    height:56px;
}

/* Tier ribbon */
.tier-ribbon{
    position:absolute;
    top:-4px;
    right:-4px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.5rem;
    letter-spacing:0.08em;
    padding:2px 6px;
    transform:rotate(12deg);
    color:var(--obsidian);
    font-weight:700;
}

.tier-ribbon.gold{background:var(--gold)}
.tier-ribbon.cobalt{background:var(--cobalt);color:var(--platinum)}

/* Cell text */
.cell-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1rem,1.5vw,1.3rem);
    letter-spacing:0.12em;
    margin-bottom:4px;
}

.cell-desc{
    font-size:clamp(0.8rem,0.9vw,0.9rem);
    color:var(--sterling);
    max-width:30ch;
    margin-bottom:8px;
}

.badge-serial{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.55rem,0.7vw,0.65rem);
    letter-spacing:0.08em;
    color:var(--pewter);
}

/* ==============================
   Section 3: The Forge
   ============================== */
.section-forge{
    background:var(--obsidian);
}

.forge-steps{
    max-width:720px;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:clamp(24px,4vw,40px);
}

.forge-step{
    border-left:2px solid var(--sterling);
    padding-left:clamp(16px,3vw,32px);
}

.step-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.12em;
    color:var(--gold);
    margin-bottom:0.5rem;
}

.step-body{
    color:rgba(168,169,173,0.85);
    max-width:55ch;
}

/* ==============================
   Section 4: The Counter
   ============================== */
.section-counter{
    background:var(--gunmetal);
    min-height:60vh;
}

.counter-content{
    text-align:center;
}

.counter-closing{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--sterling);
    max-width:40ch;
    margin:0 auto 2rem;
}

.counter-mark{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2rem,4vw,4rem);
    letter-spacing:0.12em;
    color:var(--gold);
}

/* Responsive */
@media(max-width:768px){
    .bento-grid{
        grid-template-columns:1fr 1fr;
    }

    .cell-lg{
        grid-column:span 2;
        grid-row:span 1;
    }

    .cell-wide{
        grid-column:span 2;
    }
}

@media(max-width:480px){
    .bento-grid{
        grid-template-columns:1fr;
    }

    .cell-lg,.cell-wide{
        grid-column:1/-1;
    }
}