/* gamelicensor.info -- wabi-sabi water descent */
/* Palette: #D4A44C, #B8864A, #8C5A32, #5C2E1A, #1A0D08, #0D0604, #F0E4D0, #C4B8A0, #7A8A5C, #A0452A */

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

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

body{
    background:linear-gradient(
        to bottom,
        #D4A44C 0%,
        #B8864A 15%,
        #8C5A32 30%,
        #5C2E1A 50%,
        #1A0D08 75%,
        #0D0604 100%
    );
    background-attachment:fixed;
    color:#F0E4D0;
    font-family:'Lora','Georgia',serif;
    font-weight:400;
    font-size:clamp(1rem,2vw,1.35rem);
    line-height:1.85;
    overflow-x:hidden;
    position:relative;
}

/* Noise overlay */
.noise-filter{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:9999;
    opacity:0.05;
    mix-blend-mode:overlay;
}

/* Bubble field */
.bubble-field{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:10;
    overflow:hidden;
}

.bubble{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(ellipse at 30% 30%,rgba(240,228,208,0.35),rgba(212,164,76,0.08) 70%,transparent);
    pointer-events:none;
    will-change:transform;
    animation:rise var(--rise-dur) ease-in-out var(--rise-delay) infinite;
}

@keyframes rise{
    0%{
        transform:translateY(0) translateX(0);
        opacity:0;
    }
    10%{opacity:0.7}
    25%{transform:translateY(-25vh) translateX(calc(var(--drift-x) * 1px))}
    50%{transform:translateY(-55vh) translateX(calc(var(--drift-x) * -0.5px))}
    75%{transform:translateY(-80vh) translateX(calc(var(--drift-x) * 0.8px))}
    90%{opacity:0.5}
    100%{
        transform:translateY(-110vh) translateX(calc(var(--drift-x) * -0.3px));
        opacity:0;
    }
}

/* Strata */
.stratum{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.stratum-content{
    position:relative;
    z-index:5;
    max-width:900px;
    width:100%;
    padding:0 clamp(1.5rem,4vw,3rem);
}

/* Reveal animation */
[data-reveal]{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 1s cubic-bezier(0.25,0.1,0.25,1),transform 1s cubic-bezier(0.25,0.1,0.25,1);
}

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

/* Stratum I: Surface */
.stratum-surface{
    min-height:100svh;
    padding:2rem;
}

.water-surface{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:60px;
    background:
        radial-gradient(ellipse at 20% 50%,rgba(212,164,76,0.4),transparent 60%),
        radial-gradient(ellipse at 60% 50%,rgba(184,134,74,0.3),transparent 50%),
        radial-gradient(ellipse at 80% 50%,rgba(212,164,76,0.35),transparent 55%);
    animation:shimmer 8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes shimmer{
    0%,100%{filter:hue-rotate(0deg)}
    50%{filter:hue-rotate(2deg)}
}

.surface-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:80vh;
    justify-content:center;
}

.surface-title{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:clamp(3.5rem,10vw,9rem);
    letter-spacing:0.08em;
    line-height:1.05;
    color:#D4A44C;
}

.title-dot{
    color:#A0452A;
}

.surface-sub{
    margin-top:1.5rem;
}

.mono-accent{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.75rem,1.2vw,0.95rem);
    letter-spacing:0.15em;
    color:#C4B8A0;
    text-shadow:1px 1px 0 rgba(13,6,4,0.3);
}

/* Stratum II: Shallows */
.stratum-shallows{
    min-height:150svh;
    padding:clamp(4rem,8vw,8rem) clamp(1.5rem,4vw,3rem);
    gap:clamp(3rem,6vw,6rem);
}

.leaf-panel{
    max-width:500px;
    padding:clamp(2rem,4vw,3rem);
    background:rgba(140,90,50,0.15);
    box-shadow:0 0 20px rgba(196,162,101,0.08);
    position:relative;
}

.leaf-1{
    clip-path:polygon(50% 0%,85% 12%,98% 45%,88% 78%,55% 100%,20% 82%,2% 50%,10% 18%);
    align-self:flex-start;
}

.leaf-2{
    clip-path:polygon(45% 0%,80% 10%,95% 40%,90% 75%,60% 100%,25% 85%,5% 55%,8% 20%);
    align-self:flex-end;
}

.leaf-3{
    clip-path:polygon(52% 0%,88% 15%,96% 48%,85% 80%,50% 100%,18% 78%,4% 45%,12% 15%);
    align-self:flex-start;
}

.leaf-text{
    max-width:38ch;
}

/* Stratum III: Midwater */
.stratum-midwater{
    min-height:150svh;
    padding:clamp(4rem,8vw,8rem) clamp(1.5rem,4vw,3rem);
    color:#C4B8A0;
}

.midwater-cols{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:clamp(2rem,4vw,4rem);
    align-items:start;
}

.vertical-text{
    writing-mode:vertical-rl;
    text-orientation:mixed;
}

.stratum-heading{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:clamp(2rem,5vw,4.5rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#D4A44C;
}

.body-text{
    max-width:38ch;
    margin-bottom:1.5rem;
}

.stratum-code{
    margin-top:2rem;
}

/* Leaf veins */
.leaf-vein{
    position:absolute;
    width:200px;
    height:400px;
    pointer-events:none;
    z-index:1;
    opacity:0.25;
}

.vein-1{
    right:10%;
    top:20%;
}

.vein-2{
    left:5%;
    top:15%;
}

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

.leaf-vein.drawn .vein-path{
    stroke-dashoffset:0;
}

/* Stratum IV: Depths */
.stratum-depths{
    min-height:150svh;
    padding:clamp(4rem,8vw,8rem) clamp(1.5rem,4vw,3rem);
    color:#C4B8A0;
}

.depths-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.seal-container{
    width:clamp(160px,30vmin,250px);
    margin-bottom:3rem;
}

.seal-svg{
    width:100%;
    height:auto;
}

.seal-outer{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 2s ease;
}

.seal-container.revealed .seal-outer{
    stroke-dashoffset:0;
}

.seal-container{
    animation:sealGlow 5s ease-in-out infinite;
}

@keyframes sealGlow{
    0%,100%{filter:drop-shadow(0 0 15px rgba(160,69,42,0.3))}
    50%{filter:drop-shadow(0 0 40px rgba(160,69,42,0.15))}
}

.depths-text{
    font-family:'Lora',serif;
    font-style:italic;
    font-size:clamp(1.1rem,2vw,1.5rem);
    max-width:38ch;
    margin-bottom:1.5rem;
    line-height:1.7;
}

/* Stratum V: Floor */
.stratum-floor{
    min-height:100svh;
    padding:clamp(4rem,8vw,8rem) clamp(1.5rem,4vw,3rem);
    color:#C4B8A0;
}

.fallen-leaves{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:200px;
    pointer-events:none;
    z-index:1;
}

.fallen-leaf{
    position:absolute;
    width:60px;
    height:80px;
    transform:rotate(var(--leaf-angle));
}

.floor-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:60vh;
    justify-content:center;
}

.floor-text{
    max-width:38ch;
    margin-bottom:2rem;
    font-style:italic;
}

.floor-domain{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.08em;
    color:#D4A44C;
    opacity:0.6;
}

.ascend-bubble{
    width:12px;
    height:12px;
    border-radius:50%;
    background:radial-gradient(ellipse at 30% 30%,rgba(240,228,208,0.5),transparent);
    margin-top:3rem;
    animation:ascendBounce 3s ease-in-out infinite;
}

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

/* Responsive */
@media(max-width:768px){
    .midwater-cols{
        grid-template-columns:1fr;
    }
    .vertical-text{
        writing-mode:horizontal-tb;
    }
    .leaf-vein{
        display:none;
    }
    .leaf-1,.leaf-2,.leaf-3{
        clip-path:none;
        border-radius:4px;
        align-self:center;
    }
}

@media(prefers-reduced-motion:reduce){
    [data-reveal]{opacity:1;transform:none;transition:none}
    .bubble{animation:none;display:none}
    .water-surface{animation:none}
    .seal-container{animation:none}
    .ascend-bubble{animation:none}
    .vein-path{stroke-dashoffset:0;transition:none}
    .seal-outer{stroke-dashoffset:0;transition:none}
}