/* gamelicensor.pro -- inflated 3D magazine-spread */
/* Palette: #C45B28 (Burnt Sienna), #3B2314 (Charred Umber), #F5EDE0 (Parchment Cream), #7A9E7E (Oxidized Copper), #E88C3A (Ember Glow), #2A1F18 (Kiln Ash), #D4845A (Fired Clay) */

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

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    background:#F5EDE0;
    color:#3B2314;
    font-family:'Source Serif 4','Georgia',serif;
    font-weight:400;
    font-size:clamp(1rem,1.1vw,1.25rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Floating TOC */
.float-toc{
    position:fixed;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    opacity:0;
    transition:opacity 0.4s ease;
}

.float-toc.visible{
    opacity:1;
}

.toc-item{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.65rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#D4845A;
    text-decoration:none;
    transition:color 0.3s ease;
}

.toc-item:hover{
    color:#C45B28;
}

/* Spreads */
.spread{
    min-height:100svh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:800px;
}

.spread-grid{
    display:grid;
    grid-template-columns:2fr 5fr 5fr 2fr;
    max-width:1200px;
    width:100%;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
    z-index:2;
}

.spread-inner{
    grid-column:2/4;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.margin-left{
    grid-column:1/3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:1rem;
}

.content-main{
    grid-column:2/4;
    padding:clamp(1rem,2vw,2rem);
}

.reverse .margin-left{
    grid-column:1/2;
}

.reverse .content-main{
    grid-column:2/4;
}

.margin-right{
    grid-column:4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:1rem;
}

/* Reveal */
[data-reveal]{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

[data-reveal].revealed{
    opacity:1;
    transform:translateY(0);
}

/* Cover */
.cover-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(4rem,12vw,10rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:transparent;
    background:linear-gradient(135deg,#F5EDE0,#D4845A);
    -webkit-background-clip:text;
    background-clip:text;
    text-shadow:
        -1px -1px 0 rgba(245,237,224,0.5),
        2px 2px 0 rgba(42,31,24,0.3);
    line-height:1;
}

.dot{
    color:#C45B28;
}

.cover-sub{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.2rem,2vw,2rem);
    color:#D4845A;
    margin-top:1rem;
    letter-spacing:0.03em;
}

/* Section titles */
.section-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.5rem,8vw,5rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#C45B28;
    margin-bottom:1.5rem;
    line-height:1.05;
}

.section-title.centered{
    text-align:center;
}

.body-text{
    max-width:60ch;
    margin-bottom:1.2rem;
}

/* Pull quotes */
.pull-quote{
    padding:1.5rem 0 1.5rem 1.5rem;
    border-left:4px solid #D4845A;
    margin:2rem 0;
}

.pull-quote p{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.3rem,2.5vw,2rem);
    color:#3B2314;
    line-height:1.4;
}

/* Underline draw */
.underline-draw{
    position:relative;
    display:inline;
}

.underline-draw::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:3px;
    background:#C45B28;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.6s ease-out;
}

.underline-draw.drawn::after{
    transform:scaleX(1);
}

/* Inflated 3D Stamps */
.stamp{
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(ellipse at 35% 30%,#E88C3A,#C45B28 50%,#3B2314 100%);
    box-shadow:
        0 2px 4px rgba(42,31,24,0.4),
        0 8px 16px rgba(42,31,24,0.3),
        0 30px 60px rgba(42,31,24,0.2);
    cursor:default;
    transition:transform 0.3s ease,box-shadow 0.3s ease;
}

.stamp:hover{
    transform:scale(0.96);
    box-shadow:
        0 1px 2px rgba(42,31,24,0.5),
        0 4px 8px rgba(42,31,24,0.35),
        0 12px 24px rgba(42,31,24,0.2);
}

.stamp-label{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1rem,3vw,2rem);
    letter-spacing:0.08em;
    color:#F5EDE0;
    text-shadow:0 1px 3px rgba(42,31,24,0.4);
}

.stamp-pro{
    position:absolute;
    bottom:10vh;
    right:8vw;
    width:clamp(120px,18vw,220px);
    height:clamp(120px,18vw,220px);
    transform:rotate(12deg);
    z-index:3;
}

/* Giant stamp (interstitial) */
.stamp-giant{
    width:min(80vw,500px);
    height:min(80vw,500px);
    animation:breathe 4s ease-in-out infinite;
}

.stamp-giant .stamp-label{
    font-size:clamp(2rem,6vw,5rem);
}

@keyframes breathe{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.03)}
}

/* Small stamps */
.stamp-small{
    width:clamp(100px,15vw,180px);
    height:clamp(100px,15vw,180px);
    animation:stampBounce 3s ease-in-out infinite;
}

@keyframes stampBounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

.stamp-row{
    display:flex;
    gap:clamp(1.5rem,3vw,3rem);
    margin-top:3rem;
    justify-content:center;
    flex-wrap:wrap;
}

/* Final title */
.final-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.5rem,6vw,5rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#C45B28;
    line-height:1.1;
}

/* Botanical SVGs */
.botanical-svg{
    width:100%;
    max-width:250px;
    height:auto;
}

.botanical-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

.draw-path{
    stroke-dasharray:800;
    stroke-dashoffset:800;
    transition:stroke-dashoffset 2.5s ease-in-out;
}

.botanical-svg.drawn .draw-path,
.herb-icon.drawn .draw-path{
    stroke-dashoffset:0;
}

.specimen-name{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.75rem;
    letter-spacing:0.12em;
    color:#7A9E7E;
    margin-top:0.5rem;
    text-align:center;
}

/* Spread interstitial bg */
.spread-interstitial{
    background:#F5EDE0;
}

/* Herbarium grid */
.herb-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(1.5rem,3vw,3rem);
    margin-top:2rem;
    width:100%;
    max-width:800px;
}

.herb-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:1.5rem;
    border:1px solid #D4845A;
    transition:border-color 0.3s ease;
}

.herb-card:hover{
    border-color:#C45B28;
}

.herb-icon{
    width:80px;
    height:100px;
}

.herb-latin{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:#7A9E7E;
    letter-spacing:0.08em;
    margin-top:0.75rem;
}

.herb-concept{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:0.9rem;
    color:#3B2314;
    letter-spacing:0.05em;
    text-transform:uppercase;
    margin-top:0.25rem;
}

/* Responsive */
@media(max-width:768px){
    .spread-grid{
        grid-template-columns:1fr;
    }
    .margin-left,.margin-right{
        grid-column:1;
        padding:1rem 0;
    }
    .content-main,.spread-inner{
        grid-column:1;
    }
    .reverse .margin-left,.reverse .content-main{
        grid-column:1;
    }
    .float-toc{
        display:none;
    }
    .stamp-pro{
        position:relative;
        bottom:auto;
        right:auto;
        margin:2rem auto;
        transform:rotate(0);
    }
    .herb-grid{
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce){
    [data-reveal]{opacity:1;transform:none;transition:none}
    .stamp-giant{animation:none}
    .stamp-small{animation:none}
    .draw-path{stroke-dashoffset:0;transition:none}
    .underline-draw::after{transform:scaleX(1);transition:none}
}