/* ═══════════════════════════════════════════════════════
   LEMONFLY — STORIA · Cinematic Experience v2
   A technical masterpiece. Zero compromises.
   ═══════════════════════════════════════════════════════ */

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

:root{
    --navy:      #0a1628;
    --navy-deep: #060e1a;
    --navy-mid:  #0e1f3d;
    --navy-lit:  #132a4a;
    --gold:      #b8860b;
    --gold-lit:  #d4a017;
    --gold-dim:  rgba(184,134,11,.15);
    --gold-glow: rgba(184,134,11,.35);
    --gold-faint:rgba(184,134,11,.06);
    --white:     #ffffff;
    --white-90:  rgba(255,255,255,.9);
    --white-70:  rgba(255,255,255,.7);
    --white-50:  rgba(255,255,255,.5);
    --white-20:  rgba(255,255,255,.2);
    --white-08:  rgba(255,255,255,.08);
    --white-04:  rgba(255,255,255,.04);
    --font:      'Roboto', sans-serif;
    --font-d:    'Roboto Condensed', sans-serif;
    --ease:      cubic-bezier(.4,0,.2,1);
    --ease-out:  cubic-bezier(.16,1,.3,1);
    --ease-expo: cubic-bezier(.19,1,.22,1);
}

html{scroll-behavior:smooth}

body{
    font-family:var(--font);
    background:var(--navy-deep);
    color:var(--white);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    cursor:default;
}

/* ── SYSTEM LAYERS ──────────────────────────────────── */

#cosmos{
    position:fixed;inset:0;z-index:0;
    pointer-events:none;
}

.grain{
    position:fixed;inset:-50%;z-index:9990;
    pointer-events:none;
    background-repeat:repeat;
    background-size:256px 256px;
    opacity:1;
    animation:grain-drift .8s steps(6) infinite;
}

@keyframes grain-drift{
    0%{transform:translate(0,0)}
    15%{transform:translate(-3%,-2%)}
    30%{transform:translate(2%,3%)}
    45%{transform:translate(-1%,-3%)}
    60%{transform:translate(3%,1%)}
    75%{transform:translate(-2%,2%)}
    100%{transform:translate(0,0)}
}

.cursor-glow{
    position:fixed;z-index:1;
    width:700px;height:700px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(184,134,11,.05) 0%,transparent 65%);
    pointer-events:none;
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity .4s;
}

.cursor-glow.is-active{opacity:1}

.scroll-progress{
    position:fixed;top:0;left:0;height:2px;
    background:linear-gradient(90deg,var(--gold),var(--gold-lit),var(--gold));
    background-size:200% 100%;
    width:0;z-index:9999;
    animation:progress-shimmer 3s ease infinite;
}

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

/* ── HERO ────────────────────────────────────────────── */

.act--hero{
    position:relative;z-index:1;
    min-height:100vh;min-height:100dvh;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    padding:0 6%;
}

.act--hero::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:40vh;
    background:linear-gradient(transparent,var(--navy-deep));
    pointer-events:none;
}

.hero-inner{
    position:relative;max-width:1100px;
    will-change:transform,opacity;
}

.hero-overline{
    font-size:.72rem;letter-spacing:6px;text-transform:uppercase;
    color:var(--gold);margin-bottom:44px;font-weight:400;
}

.hero-title{
    font-family:var(--font-d);font-weight:900;
    font-size:clamp(2.8rem,8vw,7rem);
    line-height:1.02;letter-spacing:4px;
    margin-bottom:44px;
    overflow:hidden;
}

.hero-line{
    display:block;
    color:var(--white);
    opacity:.95;
}

.hero-line.accent{
    background:linear-gradient(90deg,var(--white),var(--gold),var(--gold-lit),var(--white));
    background-size:300% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer-wide 6s ease-in-out infinite;
}

@keyframes shimmer-wide{
    0%,100%{background-position:0% center}
    50%{background-position:100% center}
}

/* Split text characters */
.hero-line .char{
    display:inline-block;
    opacity:0;
    transform:translateY(120%) rotateX(-80deg);
    transform-origin:bottom center;
    transition:transform .9s var(--ease-out),opacity .9s var(--ease-out);
}

.hero-line.split-active .char{
    opacity:1;
    transform:translateY(0) rotateX(0deg);
}

.hero-body{
    font-size:clamp(1rem,1.8vw,1.25rem);
    color:var(--white-70);font-weight:300;line-height:2;
    max-width:620px;margin:0 auto 64px;
}

.scroll-cue{
    display:flex;flex-direction:column;align-items:center;gap:16px;
    color:var(--white-50);font-size:.65rem;letter-spacing:4px;text-transform:uppercase;
}

.scroll-cue-line{
    width:1px;height:72px;position:relative;overflow:hidden;
    background:var(--white-08);
}

.scroll-cue-line::after{
    content:'';position:absolute;top:-100%;left:0;
    width:100%;height:100%;
    background:linear-gradient(to bottom,transparent,var(--gold),transparent);
    animation:line-drop 2.4s ease-in-out infinite;
}

@keyframes line-drop{
    0%{top:-100%}
    100%{top:200%}
}

/* ── SHARED ACT STYLES ──────────────────────────────── */

.act{
    position:relative;z-index:1;
    padding:clamp(100px,15vh,200px) 6%;
}

.act-inner{max-width:900px;margin:0 auto}

.act-label{
    font-size:.68rem;letter-spacing:5px;text-transform:uppercase;
    color:var(--gold);margin-bottom:20px;text-align:center;font-weight:400;
}

.act-heading{
    font-family:var(--font-d);font-weight:900;
    font-size:clamp(2.2rem,5.5vw,4.2rem);letter-spacing:3px;
    text-align:center;margin-bottom:32px;line-height:1.1;
}

.act-heading em{
    font-style:normal;
    background:linear-gradient(90deg,var(--gold),var(--gold-lit));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}

.act-body{
    max-width:740px;margin:0 auto 20px;text-align:center;
    font-size:1.05rem;line-height:2;color:var(--white-70);font-weight:300;
}

.act-sub{
    text-align:center;font-size:1rem;color:var(--white-50);
    font-weight:300;max-width:560px;margin:0 auto;line-height:1.9;
}

/* ── VISION ─────────────────────────────────────────── */

.act--vision{
    background:radial-gradient(ellipse at 50% 0%,rgba(184,134,11,.025),transparent 55%);
}

/* ── METRICS ────────────────────────────────────────── */

.act--metrics{
    padding-top:clamp(60px,8vh,100px);
    padding-bottom:clamp(60px,8vh,100px);
}

.metrics-row{
    max-width:1200px;margin:0 auto;
    display:flex;justify-content:center;
}

.metric-block{
    flex:1;text-align:center;
    padding:60px 20px;
    position:relative;
}

.metric-block+.metric-block::before{
    content:'';position:absolute;left:0;top:20%;height:60%;width:1px;
    background:linear-gradient(to bottom,transparent,var(--gold-dim),transparent);
}

.metric-num{
    font-family:var(--font-d);font-weight:900;
    font-size:clamp(3rem,7vw,5.5rem);
    color:var(--gold);line-height:1;
    display:inline;
}

.metric-suf{
    font-family:var(--font-d);font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--gold);
}

.metric-label{
    margin-top:14px;font-size:.72rem;letter-spacing:3px;
    text-transform:uppercase;color:var(--white-50);font-weight:300;
}

/* ── TIMELINE ───────────────────────────────────────── */

.act--journey{
    padding-bottom:clamp(140px,18vh,240px);
}

.act--journey .act-inner{margin-bottom:90px}

.timeline{
    position:relative;max-width:1000px;margin:0 auto;
}

.tl-track{
    position:absolute;left:50%;transform:translateX(-50%);
    top:0;bottom:0;width:2px;
    background:var(--white-04);
}

.tl-fill{
    width:100%;height:0;
    background:linear-gradient(180deg,var(--gold),rgba(184,134,11,.15));
    transition:height .05s linear;
    position:relative;
}

.tl-fill::after{
    content:'';position:absolute;bottom:-4px;left:50%;
    transform:translateX(-50%);
    width:8px;height:8px;border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 20px var(--gold-glow),0 0 60px var(--gold-faint);
}

.epoch{
    display:grid;
    grid-template-columns:1fr 60px 1fr;
    margin-bottom:80px;
    position:relative;
}

.epoch:last-of-type{margin-bottom:0}

.epoch-marker{
    grid-column:2;
    display:flex;flex-direction:column;align-items:center;
    gap:8px;padding-top:4px;
    z-index:2;
}

.epoch-yr{
    font-family:var(--font-d);font-weight:900;
    font-size:.8rem;letter-spacing:3px;
    color:var(--gold);opacity:.5;
    transition:opacity .6s;
}

.epoch.is-active .epoch-yr{opacity:1}

.epoch-dot{
    width:16px;height:16px;border-radius:50%;
    background:var(--navy-deep);
    border:2px solid var(--white-20);
    transition:all .6s var(--ease-out);
}

.epoch.is-active .epoch-dot{
    border-color:var(--gold);background:var(--gold);
    box-shadow:0 0 24px var(--gold-glow),0 0 60px var(--gold-faint);
    transform:scale(1.3);
}

.epoch-content{
    padding:0 40px;
    transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}

/* Odd epochs: content on right, slides in from right */
.epoch:nth-of-type(odd) .epoch-content{
    grid-column:3;grid-row:1;
    opacity:0;
    transform:translateX(40px);
}

/* Even epochs: content on left, slides in from left */
.epoch:nth-of-type(even) .epoch-content{
    grid-column:1;grid-row:1;
    text-align:right;
    opacity:0;
    transform:translateX(-40px);
}

/* Reveal tied to epoch activation (scroll-driven) */
.epoch.is-active .epoch-content{
    opacity:1;
    transform:translateX(0);
}

.epoch-content h3{
    font-family:var(--font-d);font-weight:700;
    font-size:1.3rem;letter-spacing:1.5px;
    color:var(--white-90);margin-bottom:12px;
    transition:color .5s;
}

.epoch.is-active .epoch-content h3{color:var(--gold)}

.epoch-content p{
    font-size:.92rem;line-height:1.9;color:var(--white-70);font-weight:300;
}

/* ── VALUES ─────────────────────────────────────────── */

.act--values{
    background:radial-gradient(ellipse at 50% 100%,rgba(184,134,11,.025),transparent 55%);
}

.act--values .act-inner{margin-bottom:70px}

.values-mosaic{
    max-width:1100px;margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}

.val{
    text-align:center;padding:48px 28px;
    border:1px solid var(--white-04);
    background:var(--white-04);
    backdrop-filter:blur(12px);
    transition:all .7s var(--ease-out);
    position:relative;overflow:hidden;
    will-change:transform;
}

.val::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,var(--gold-dim),transparent 70%);
    opacity:0;transition:opacity .6s;
}

.val:hover{
    border-color:rgba(184,134,11,.3);
    box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 40px var(--gold-faint);
}

.val:hover::before{opacity:1}

.val-icon{
    width:52px;height:52px;margin:0 auto 24px;
    color:var(--gold);position:relative;z-index:1;
    transition:transform .7s var(--ease-out);
    filter:drop-shadow(0 4px 12px var(--gold-faint));
}

.val:hover .val-icon{transform:scale(1.2) translateY(-4px)}

.val-icon svg{width:100%;height:100%}

.val h3{
    font-family:var(--font-d);font-weight:700;
    font-size:1.1rem;letter-spacing:2.5px;text-transform:uppercase;
    margin-bottom:14px;color:var(--gold);
    position:relative;z-index:1;
}

.val p{
    font-size:.88rem;line-height:1.8;color:var(--white-70);font-weight:300;
    position:relative;z-index:1;
}

/* ── LEADERSHIP ─────────────────────────────────────── */

.act--leadership .act-inner{margin-bottom:70px}

.leaders-stage{max-width:1000px;margin:0 auto}

.leader-prime{
    display:grid;grid-template-columns:auto 1fr;gap:50px;
    align-items:center;
    background:var(--white-04);
    border:1px solid rgba(184,134,11,.15);
    backdrop-filter:blur(12px);
    padding:56px;margin-bottom:32px;
    transition:all .7s var(--ease-out);
    position:relative;overflow:hidden;
    will-change:transform;
}

.leader-prime::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 0% 50%,var(--gold-faint),transparent 60%);
    opacity:0;transition:opacity .6s;
}

.leader-prime:hover{
    border-color:var(--gold);
    box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 40px var(--gold-faint);
}

.leader-prime:hover::before{opacity:1}

.leader-avatar{
    width:160px;height:160px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold-dim),var(--gold-faint));
    border:2px solid rgba(184,134,11,.4);
    display:flex;align-items:center;justify-content:center;
    transition:all .7s var(--ease-out);
    position:relative;z-index:1;
}

.leader-prime:hover .leader-avatar{
    transform:scale(1.06);
    box-shadow:0 12px 48px var(--gold-glow);
    border-color:var(--gold);
}

.leader-avatar span{
    font-family:var(--font-d);font-weight:900;
    font-size:3.2rem;color:var(--gold);
}

.leader-avatar.sm{
    width:100px;height:100px;margin:0 auto 18px;
}

.leader-avatar.sm span{font-size:2rem}

.leader-info{position:relative;z-index:1}

.leader-title{
    font-size:.68rem;letter-spacing:3.5px;text-transform:uppercase;
    color:var(--gold);margin-bottom:10px;
}

.leader-info h3,
.leader-card h3{
    font-family:var(--font-d);font-weight:700;
    font-size:2rem;letter-spacing:1px;margin-bottom:16px;
}

.leader-card h3{font-size:1.3rem;margin-bottom:12px}

.leader-info p,
.leader-card p{
    font-size:.92rem;line-height:1.9;color:var(--white-70);
    font-weight:300;margin-bottom:24px;
}

.leader-card p{margin-bottom:0}

.leader-stats{display:flex;gap:40px}

.stat{display:flex;flex-direction:column;gap:4px}

.stat strong{
    font-family:var(--font-d);font-weight:900;
    font-size:1.9rem;color:var(--gold);
}

.stat span{
    font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--white-50);
}

.leader-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}

.leader-card{
    background:var(--white-04);
    border:1px solid var(--white-04);
    backdrop-filter:blur(12px);
    padding:40px;text-align:center;
    transition:all .7s var(--ease-out);
    position:relative;overflow:hidden;
    will-change:transform;
}

.leader-card::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,var(--gold-faint),transparent 70%);
    opacity:0;transition:opacity .6s;
}

.leader-card:hover{
    border-color:rgba(184,134,11,.3);
    box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 30px var(--gold-faint);
}

.leader-card:hover::before{opacity:1}

.leader-card:hover .leader-avatar.sm{
    border-color:var(--gold);
    box-shadow:0 8px 30px var(--gold-glow);
}

.leader-card .leader-title{margin-top:4px}

/* ── FINALE ─────────────────────────────────────────── */

.act--finale{
    padding:clamp(120px,20vh,260px) 6%;
}

.finale-stage{
    max-width:800px;margin:0 auto;text-align:center;
    background:var(--white-04);
    backdrop-filter:blur(16px);
    border:1px solid rgba(184,134,11,.2);
    padding:clamp(56px,9vw,90px) clamp(32px,6vw,64px);
    position:relative;overflow:hidden;
}

.finale-glow{
    position:absolute;inset:-2px;z-index:0;
    background:conic-gradient(from 0deg,var(--gold),transparent,var(--gold),transparent,var(--gold));
    opacity:.15;filter:blur(20px);
    animation:glow-rotate 8s linear infinite;
}

@keyframes glow-rotate{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

.finale-icon{
    width:72px;height:72px;margin:0 auto 30px;
    color:var(--gold);position:relative;z-index:1;
    filter:drop-shadow(0 10px 30px var(--gold-glow));
    animation:float-icon 5s ease-in-out infinite;
}

.finale-icon svg{width:100%;height:100%}

@keyframes float-icon{
    0%,100%{transform:translateY(0) rotate(0deg)}
    25%{transform:translateY(-10px) rotate(2deg)}
    75%{transform:translateY(-14px) rotate(-2deg)}
}

.finale-stage h2{
    font-family:var(--font-d);font-weight:900;
    font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:3px;
    margin-bottom:24px;position:relative;z-index:1;
    background:linear-gradient(90deg,var(--white),var(--gold),var(--gold-lit),var(--white));
    background-size:300% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer-wide 5s ease-in-out infinite;
}

.finale-stage p{
    font-size:1.1rem;line-height:2.1;color:var(--white-70);
    font-weight:300;margin-bottom:44px;position:relative;z-index:1;
}

.cta-btn{
    display:inline-block;position:relative;z-index:1;
    padding:18px 56px;
    background:transparent;color:var(--gold);
    text-decoration:none;
    font-family:var(--font-d);
    font-size:.78rem;letter-spacing:4px;text-transform:uppercase;font-weight:700;
    border:1.5px solid var(--gold);
    transition:all .5s var(--ease-out);
    overflow:hidden;
}

.cta-btn::before{
    content:'';position:absolute;inset:0;
    background:var(--gold);
    transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--ease-out);
    z-index:-1;
}

.cta-btn:hover{
    color:var(--navy-deep);
    box-shadow:0 16px 48px var(--gold-glow);
    transform:translateY(-3px);
}

.cta-btn:hover::before{transform:scaleX(1)}
.cta-btn span{position:relative;z-index:1}

/* ── REVEAL ANIMATIONS ──────────────────────────────── */

[data-reveal]{
    opacity:0;
    will-change:opacity,transform;
}

[data-reveal].is-visible{
    opacity:1 !important;
    transform:none !important;
}

[data-reveal="fade"]{
    transform:translateY(40px);
    transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}

[data-reveal="rise"]{
    transform:translateY(60px);
    transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out);
}

[data-reveal="scale"]{
    transform:scale(.88);
    transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}



/* ── RESPONSIVE ─────────────────────────────────────── */

@media(max-width:1100px){
    .values-mosaic{grid-template-columns:repeat(2,1fr)}
    .metrics-row{flex-wrap:wrap}
    .metric-block{flex:0 0 50%}
    .metric-block:nth-child(3)::before{display:none}
    .leader-row{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
    .hero-title{letter-spacing:2px}

    .metrics-row{flex-direction:column;max-width:400px;margin:0 auto}
    .metric-block+.metric-block::before{
        left:15%;top:0;height:1px;width:70%;
        background:linear-gradient(to right,transparent,var(--gold-dim),transparent);
    }
    .metric-block{padding:40px 20px}

    .values-mosaic{grid-template-columns:1fr;max-width:400px;margin:0 auto}

    /* Timeline: collapse to left-aligned */
    .timeline{padding-left:40px}
    .tl-track{left:14px;transform:none}
    .epoch{
        display:block;
        margin-bottom:60px;
    }
    .epoch-marker{
        position:absolute;left:-40px;top:0;
        flex-direction:column;align-items:center;
    }
    .epoch-yr{font-size:.65rem}
    .epoch-dot{width:12px;height:12px}
    .epoch-content,
    .epoch:nth-of-type(even) .epoch-content{
        text-align:left !important;
        padding:0 !important;
        grid-column:auto;grid-row:auto;
        transform:translateX(20px);
        opacity:0;
    }
    .epoch.is-active .epoch-content{
        transform:translateX(0);
        opacity:1;
    }

    .leader-prime{grid-template-columns:1fr;text-align:center;padding:36px 28px;gap:28px}
    .leader-avatar{margin:0 auto}
    .leader-stats{justify-content:center}
    .leader-row{grid-template-columns:1fr}

    .finale-stage{padding:40px 24px}

    .cursor-glow{display:none}
}

@media(max-width:480px){
    .hero-body br{display:none}
    .act-heading{letter-spacing:1px}
}