/* ═══════════════════════════════════════════
   WWII — A Guerra Que Mudou o Mundo
   v3 · Awwwards-level design
   ═══════════════════════════════════════════ */

/* ─── RESET & TOKENS ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:       #2C2923;
    --bg-warm:  #332F28;
    --bg-card:  #3A352D;
    --fg:       #E6DFD1;
    --fg-dim:   #A29A8A;
    --fg-muted: #6E685C;
    --accent:   #C4A882;

    /* palette */
    --olive:    #8FA94E;
    --navy:     #5B82B8;
    --amber:    #E4A840;
    --steel:    #8E9BA6;
    --warm:     #D47A58;
    --sepia:    #C4A882;
    --crimson:  #B44040;

    /* type */
    --serif:    'Cormorant Garamond', Georgia, serif;
    --sans:     'Outfit', system-ui, sans-serif;
    --mono:     'JetBrains Mono', monospace;

    --ease:     cubic-bezier(.22,1,.36,1);
    --easeOut:  cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;background:var(--bg)}
::selection{background:var(--accent);color:#1a1a1a}
body{
    font-family:var(--sans);
    color:var(--fg);
    background:var(--bg);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
    font-weight:300;
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%23C0392B' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23C0392B'/%3E%3Cline x1='16' y1='2' x2='16' y2='8' stroke='%23C0392B' stroke-width='1.5'/%3E%3Cline x1='16' y1='24' x2='16' y2='30' stroke='%23C0392B' stroke-width='1.5'/%3E%3Cline x1='2' y1='16' x2='8' y2='16' stroke='%23C0392B' stroke-width='1.5'/%3E%3Cline x1='24' y1='16' x2='30' y2='16' stroke='%23C0392B' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, crosshair;
}
*{cursor:inherit}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* ─── GRAIN ─── */
.grain{
    position:fixed;inset:0;z-index:9999;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    opacity:.3;
}

/* ─── PROGRESS BAR ─── */
.progress-bar{
    position:fixed;top:0;left:0;height:2px;
    background:linear-gradient(90deg, var(--amber), var(--warm));
    z-index:10001;width:0;transition:none;
    box-shadow:0 1px 4px rgba(0,0,0,.15);
}

/* ─── NAV ─── */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:10000;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.2rem 3rem;
    background:linear-gradient(180deg, rgba(44,41,35,.92) 0%, transparent 100%);
    transition:background .4s;
}
.nav.scrolled{background:rgba(44,41,35,.96);backdrop-filter:blur(12px);box-shadow:0 1px 8px rgba(0,0,0,.2)}
.nav-brand{font-family:var(--mono);font-size:1.05rem;letter-spacing:.1em;color:var(--accent);font-weight:600;text-shadow:0 0 12px rgba(196,168,130,.3)}
.nav-brand span{color:var(--fg-muted)}
.nav-links{display:flex;gap:2rem}
.nav-links a{
    font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--fg-dim);transition:color .3s, background .3s, transform .3s;
    padding:.45rem .9rem;border-radius:3px;
    border:1px solid transparent;
    position:relative;
}
.nav-links a:hover{
    color:var(--fg);
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.08);
    transform:translateY(-1px);
}
.nav-links a::after{
    content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;
    background:var(--accent);transition:width .3s var(--ease), left .3s var(--ease);
}
.nav-links a:hover::after{width:60%;left:20%}

/* burger */
.nav-burger{display:none;background:none;border:none;width:28px;height:20px;position:relative;cursor:pointer}
.nav-burger i{display:block;width:100%;height:1.5px;background:var(--fg);position:absolute;left:0;transition:.3s}
.nav-burger i:first-child{top:0}
.nav-burger i:last-child{bottom:0}
.nav-burger.open i:first-child{top:50%;transform:translateY(-50%) rotate(45deg)}
.nav-burger.open i:last-child{bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}

/* mobile overlay */
.mob-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(44,41,35,.97);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
    opacity:0;pointer-events:none;transition:.4s var(--ease);
}
.mob-overlay.open{opacity:1;pointer-events:auto}
.mob-overlay a{font-family:var(--serif);font-size:2rem;color:var(--fg);transition:color .3s}
.mob-overlay a:hover{color:var(--accent)}

/* ─── CONTAINER ─── */
.container{max-width:1200px;margin:0 auto;padding:0 3rem}

/* ─── HERO ─── */
.hero{
    position:relative;
    min-height:100vh;min-height:100dvh;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    background:var(--bg);
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.35}
.hero-inner{position:relative;z-index:2;text-align:center;padding:2rem}
.hero-tag{
    font-family:var(--mono);
    font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
    color:var(--fg-dim);margin-bottom:2.5rem;
}
.hero-title{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(3.2rem,8vw,8rem);
    line-height:.92;
    color:transparent;
    margin-bottom:3rem;
    background:linear-gradient(180deg, #E6DFD1 0%, #C0392B 60%, #7B1A1A 100%);
    -webkit-background-clip:text;
    background-clip:text;
    text-shadow:none;
    filter:drop-shadow(0 4px 20px rgba(192,57,43,.25));
}
.ht-row{display:block}
.ht-word{display:inline-block;opacity:0;transform:translateY(80px) rotate(3deg);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.ht-word.visible{opacity:1;transform:none}
.ht-italic{
    font-style:italic;font-weight:300;
    -webkit-text-fill-color:transparent;
    background:linear-gradient(180deg, #E74C3C 0%, #7B1A1A 100%);
    -webkit-background-clip:text;
    background-clip:text;
    filter:drop-shadow(0 0 30px rgba(231,76,60,.3));
}

.hero-strip{
    display:flex;align-items:center;justify-content:center;gap:2.5rem;
    margin-top:1.5rem;padding-bottom:4rem;opacity:0;transform:translateY(30px);
    transition:opacity 1s .6s, transform 1s .6s var(--ease);
}
.hero-strip.visible{opacity:1;transform:none}
.hs-item{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.hs-big{font-family:var(--mono);font-size:1.6rem;color:var(--accent);letter-spacing:.06em}
.hs-sub{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted)}
.hs-line{width:40px;height:1px;background:var(--fg-muted);opacity:.4}

/* scroll indicator */
.hero-scroll{
    position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:2;
}
.hero-scroll span{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-muted)}
.scroll-bar{width:1px;height:40px;background:var(--fg-muted);position:relative;overflow:hidden}
.scroll-bar::after{
    content:'';position:absolute;top:-100%;left:0;width:100%;height:50%;
    background:var(--accent);animation:scrollPulse 2s infinite;
}
@keyframes scrollPulse{0%{top:-50%}100%{top:150%}}

/* ─── EPIGRAPH ─── */
.epi{
    padding:8rem 3rem;
    max-width:800px;margin:0 auto;
}
.epi-inner{
    font-family:var(--serif);
    font-size:clamp(1.1rem,2.2vw,1.5rem);
    line-height:1.8;
    color:var(--fg-dim);
    font-weight:300;
    text-align:center;
}
.epi-inner em{color:var(--accent);font-style:normal;font-weight:600}

/* ─── SECTION HEADER (shared) ─── */
.oh-head{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:5rem}
.oh-num{
    font-family:var(--mono);font-size:6rem;font-weight:200;
    line-height:.8;color:var(--fg-muted);opacity:.18;
    flex-shrink:0;
}
.oh-tag{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
    color:var(--accent);display:block;margin-bottom:.8rem;
}
.oh-title{
    font-family:var(--serif);font-weight:600;
    font-size:clamp(2.4rem,5.5vw,4.5rem);
    line-height:1.05;color:var(--fg);
    letter-spacing:-.02em;
}

/* Section title colors */
.origens .oh-title{color:#A4C639;text-shadow:0 0 40px rgba(164,198,57,.25)}
.cronologia .crono-title{color:#F5B731;text-shadow:0 0 40px rgba(245,183,49,.25)}
.nacoes .oh-title{color:#4A90D9;text-shadow:0 0 40px rgba(74,144,217,.25)}
.custo .oh-title{color:#E85D4A;text-shadow:0 0 40px rgba(232,93,74,.25)}
.mapa .oh-title{color:#D94040;text-shadow:0 0 40px rgba(217,64,64,.25)}

/* ─── ORIGENS ─── */
.origens{padding:6rem 0 8rem;background:var(--bg)}

/* Staggered cause flow */
.cause-flow{display:flex;flex-direction:column;gap:0}
.cf-item{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:2rem;
    padding:3rem 2.5rem;
    position:relative;
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:background .5s, transform .4s var(--ease), box-shadow .4s;
}
.cf-item:hover{background:rgba(255,255,255,.03);transform:translateX(8px)}

.cf-num{
    font-family:var(--mono);font-size:2.5rem;font-weight:700;
    letter-spacing:.05em;align-self:start;padding-top:.2rem;
    opacity:.15;
}
[data-color="olive"] .cf-num{color:var(--olive)}
[data-color="navy"] .cf-num{color:var(--navy)}
[data-color="amber"] .cf-num{color:var(--amber)}
[data-color="steel"] .cf-num{color:var(--steel)}
[data-color="warm"] .cf-num{color:var(--warm)}

.cf-content{max-width:560px}
.cf-year{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
    text-transform:uppercase;margin-bottom:.6rem;
    font-weight:500;
}
.cf-content h3{
    font-family:var(--serif);font-size:1.8rem;font-weight:600;
    margin-bottom:.8rem;
}
[data-color="olive"] .cf-content h3{color:var(--olive)}
[data-color="navy"] .cf-content h3{color:var(--navy)}
[data-color="amber"] .cf-content h3{color:var(--amber)}
[data-color="steel"] .cf-content h3{color:var(--steel)}
[data-color="warm"] .cf-content h3{color:var(--warm)}

.cf-content p{font-size:.9rem;color:var(--fg-dim);line-height:1.75}

.cf-accent{width:4px;height:100%;border-radius:2px;align-self:stretch;opacity:.6;transition:opacity .4s, box-shadow .4s}
.cf-item:hover .cf-accent{opacity:1;box-shadow:0 0 12px currentColor}
[data-color="olive"] .cf-accent,[data-color="olive"] .cf-year{color:var(--olive); background:var(--olive)}
[data-color="navy"] .cf-accent,[data-color="navy"] .cf-year{color:var(--navy);background:var(--navy)}
[data-color="amber"] .cf-accent,[data-color="amber"] .cf-year{color:var(--amber);background:var(--amber)}
[data-color="steel"] .cf-accent,[data-color="steel"] .cf-year{color:var(--steel);background:var(--steel)}
[data-color="warm"] .cf-accent,[data-color="warm"] .cf-year{color:var(--warm);background:var(--warm)}
/* only accent bar should have bg, year text only color */
.cf-year{background:none !important}

.cf-left{justify-items:start}
.cf-right .cf-content{margin-left:auto;text-align:right}

/* ─── CRONOLOGIA  ─── */
.cronologia{
    position:relative;
    height:400vh; /* pin height */
}
.crono-sticky{
    position:sticky;top:0;
    height:100vh;
    display:flex;flex-direction:column;
    justify-content:center;
    overflow:hidden;
    background:var(--bg-warm);
    padding:2rem 3rem;
}
.crono-head{margin-bottom:2rem}
.crono-title{
    font-family:var(--serif);font-weight:200;
    font-size:clamp(2rem,5vw,4rem);color:var(--fg);
}
.crono-track{
    display:flex;gap:2rem;
    transition:transform .1s linear;
    will-change:transform;
}
.ct-card{
    flex-shrink:0;
    width:clamp(280px,26vw,360px);
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.06);
    border-radius:3px;
    padding:2rem 2rem 2.5rem;
    position:relative;
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.15);
    transition:transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.ct-card:hover{
    transform:translateY(-5px) scale(1.02);
    border-color:var(--cc, var(--amber));
    box-shadow:0 12px 35px rgba(0,0,0,.25), 0 0 20px color-mix(in srgb, var(--cc, var(--amber)) 20%, transparent);
}
.ct-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--cc, var(--amber));
    transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.ct-card.active::before{transform:scaleX(1)}
.ct-card::after{
    content:'';position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(180deg, var(--cc, var(--amber)) 0%, transparent 50%);
    opacity:0;transition:opacity .5s;pointer-events:none;
}
.ct-card.active::after{opacity:.06}
.ct-year{
    font-family:var(--serif);font-size:6rem;font-weight:700;
    color:var(--cc, var(--amber));opacity:.2;line-height:.85;
    margin-bottom:.5rem;
    text-shadow:0 0 30px color-mix(in srgb, var(--cc, var(--amber)) 30%, transparent);
}
.ct-body h3{
    font-family:var(--serif);font-size:1.35rem;font-weight:600;
    color:var(--cc, var(--fg));margin-bottom:.7rem;
}
.ct-body p{font-size:.82rem;color:var(--fg-dim);line-height:1.7}

.crono-progress{
    width:100%;height:2px;background:rgba(255,255,255,.06);
    margin-top:2rem;border-radius:2px;overflow:hidden;
}
.crono-bar{height:100%;background:var(--amber);width:0%;transition:width .1s}

/* ─── NAÇÕES ─── */
.nacoes{padding:8rem 0;background:var(--bg)}
.factions{display:flex;flex-direction:column;gap:2rem}
.f-label{
    font-family:var(--serif);font-size:2rem;font-weight:300;
    color:var(--fg);margin-bottom:1.5rem;padding-left:.5rem;
    border-left:3px solid var(--olive);
}
[data-side="axis"] .f-label{border-color:var(--crimson)}

.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.f-card{
    display:flex;gap:1.2rem;align-items:flex-start;
    padding:1.4rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.05);
    border-left:3px solid var(--fc, rgba(255,255,255,.1));
    border-radius:2px;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition:border-color .4s, transform .4s var(--ease), box-shadow .4s, background .4s;
    position:relative;
    overflow:hidden;
}
.f-card::before{
    content:'';position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(135deg, var(--fc, transparent) 0%, transparent 60%);
    opacity:0;transition:opacity .4s;
    pointer-events:none;
}
.f-card::after{
    content:'';position:absolute;top:-10%;right:-10%;
    width:120%;height:120%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:.12;
    pointer-events:none;
    mask-image:linear-gradient(to left, rgba(0,0,0,.6) 0%, transparent 70%);
    -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,.6) 0%, transparent 70%);
    transition:opacity .4s, transform .4s var(--ease);
    transform-origin:left center;
}
.f-card:hover::after{
    opacity:.25;
    animation:flagWave 3s ease-in-out infinite;
}
@keyframes flagWave{
    0%  {transform:perspective(400px) rotateY(0deg)}
    25% {transform:perspective(400px) rotateY(3deg)}
    50% {transform:perspective(400px) rotateY(-2deg)}
    75% {transform:perspective(400px) rotateY(1.5deg)}
    100%{transform:perspective(400px) rotateY(0deg)}
}
.f-card[data-flag="gb"]::after{background-image:url('https://flagcdn.com/w640/gb.png')}
.f-card[data-flag="us"]::after{background-image:url('https://flagcdn.com/w640/us.png')}
.f-card[data-flag="ru"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Crect width='640' height='480' fill='%23cc0000'/%3E%3Cg fill='%23ff0' transform='translate(120,80)'%3E%3Cpath d='M150 0l9.3 28.5H189l-24 17.5 9.2 28.5L150 57l-24.2 17.5 9.2-28.5-24-17.5h29.7z'/%3E%3Cpath d='M92 88c-7-2-14 2-17 8l-6 14c-2 5 0 12 5 15l50 36c3 2 4 6 2 9l-22 56c-2 4 1 9 5 10 2 1 5 0 7-2l48-42c3-3 8-3 11 0l20 18 12-14-20-18c-11-10-28-10-39 1l-24 21 11-28c5-13-1-28-14-35l-50-36 4-9c1-2 3-2 5-2l0 0z'/%3E%3Cpath d='M168 103c-4-6-12-8-18-4l-13 8c-5 3-7 10-4 15l30 54c2 3 0 7-3 8l-58 18c-5 1-7 6-6 10 1 3 4 5 7 5l63-6c5 0 9 3 10 7l6 26 18-4-6-26c-3-15-16-25-31-24l-32 3 29-9c13-4 21-18 17-32l-30-54 7-5c2-1 4 0 5 1l0 0z'/%3E%3C/g%3E%3C/svg%3E")}

.f-card[data-flag="fr"]::after{background-image:url('https://flagcdn.com/w640/fr.png')}
.f-card[data-flag="cn"]::after{background-image:url('https://flagcdn.com/w640/cn.png')}
.f-card[data-flag="br"]::after{background-image:url('https://flagcdn.com/w640/br.png')}
.f-card[data-flag="ca"]::after{background-image:url('https://flagcdn.com/w640/ca.png')}
.f-card[data-flag="au"]::after{background-image:url('https://flagcdn.com/w640/au.png')}
.f-card[data-flag="de"]::after{background-image:url('https://flagcdn.com/w640/de.png')}
.f-card[data-flag="jp"]::after{background-image:url('https://flagcdn.com/w640/jp.png')}
.f-card[data-flag="it"]::after{background-image:url('https://flagcdn.com/w640/it.png')}
.f-card[data-flag="hu"]::after{background-image:url('https://flagcdn.com/w640/hu.png')}
.f-card[data-flag="ro"]::after{background-image:url('https://flagcdn.com/w640/ro.png')}
.f-card[data-flag="bg"]::after{background-image:url('https://flagcdn.com/w640/bg.png')}
.f-card[data-flag="fi"]::after{background-image:url('https://flagcdn.com/w640/fi.png')}
.f-card[data-flag="th"]::after{background-image:url('https://flagcdn.com/w640/th.png')}
.f-card:hover::before{opacity:.08}
.f-card:hover{border-color:var(--fc, rgba(255,255,255,.1));transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.2),0 0 15px color-mix(in srgb, var(--fc) 20%, transparent)}
.fc-flag{font-size:2.4rem;flex-shrink:0;line-height:1}
.f-card strong{display:block;font-weight:600;margin-bottom:.3rem;font-size:.95rem;color:var(--fc, var(--fg))}
.f-card p{font-size:.78rem;color:var(--fg-dim);line-height:1.55}

/* VS divider */
.factions-divider{display:flex;align-items:center;gap:1.2rem;padding:2rem 0}
.fd-line{flex:1;height:1px;background:rgba(255,255,255,.08)}
.fd-vs{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;
    color:var(--fg-muted);padding:.4rem .8rem;
    border:1px solid rgba(255,255,255,.08);border-radius:2px;
}

/* ─── CUSTO HUMANO ─── */
.custo{padding:8rem 0;background:var(--bg-warm)}

.impact{text-align:center;margin-bottom:5rem}
.impact-num{
    font-family:var(--serif);
    font-size:clamp(6rem,16vw,14rem);
    font-weight:200;
    color:var(--fg);
    line-height:.85;
}
.impact-label{
    font-family:var(--serif);font-size:clamp(1.1rem,2.5vw,1.6rem);letter-spacing:.08em;
    text-transform:uppercase;color:var(--warm);margin-top:2rem;font-weight:300;
}
.impact-sub{font-family:var(--sans);font-size:.85rem;color:var(--fg-muted);margin-top:.6rem;letter-spacing:.04em;font-weight:300}

/* Mosaic */
.mosaic{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-bottom:5rem;
}
.m-cell{
    padding:2.2rem 1.8rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.05);
    border-radius:2px;
    position:relative;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.m-cell:hover{border-color:rgba(255,255,255,.1);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.m-cell::before{
    content:'';position:absolute;top:0;left:0;width:100%;height:2px;
}
.m-cell[data-color="navy"]::before{background:var(--navy)}
.m-cell[data-color="olive"]::before{background:var(--olive)}
.m-cell[data-color="amber"]::before{background:var(--amber)}
.m-cell[data-color="warm"]::before{background:var(--warm)}
.m-cell[data-color="steel"]::before{background:var(--steel)}
.m-big{grid-column:span 2}
.mc-num{
    font-family:var(--serif);font-size:2.5rem;font-weight:300;
    color:var(--fg);display:block;margin-bottom:.3rem;
}
.mc-label{font-size:.78rem;color:var(--fg-dim)}

/* Loss chart — editorial premium */
.losses{max-width:900px}
.losses-h{
    font-family:var(--serif);font-size:2rem;font-weight:600;
    margin-bottom:3rem;color:var(--warm);
    text-shadow:0 0 30px rgba(212,122,88,.2);
}
.loss-chart{display:flex;flex-direction:column;gap:0}

.lc-row{
    padding:1.6rem 0;
    border-bottom:1px solid rgba(255,255,255,.05);
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.lc-row:first-child{border-top:1px solid rgba(255,255,255,.05)}
.lc-row.visible{opacity:1;transform:translateY(0)}
.lc-row:hover .lc-name{color:var(--lc)}
.lc-row:hover .lc-fill{filter:brightness(1.3)}

.lc-top{
    display:flex;align-items:baseline;gap:1rem;
    margin-bottom:.8rem;
}
.lc-flag{font-size:1.6rem;line-height:1;position:relative;top:3px}
.lc-name{
    font-family:var(--sans);font-size:1.1rem;font-weight:500;
    color:var(--fg);letter-spacing:.02em;
    transition:color .3s;
    flex:1;
}
.lc-num{
    font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:300;
    color:var(--lc);
    line-height:1;
    letter-spacing:-.02em;
    opacity:0;
    transform:translateX(10px);
    transition:opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s;
}
.lc-row.visible .lc-num{opacity:1;transform:translateX(0)}

.lc-track{
    width:100%;height:4px;
    background:rgba(255,255,255,.04);
    border-radius:2px;
    overflow:hidden;
    position:relative;
}
.lc-fill{
    height:100%;width:0;
    border-radius:2px;
    background:linear-gradient(90deg, var(--lc), color-mix(in srgb, var(--lc) 50%, #FFC857));
    box-shadow:0 0 12px color-mix(in srgb, var(--lc) 50%, transparent);
    transition:width 1.8s var(--easeOut);
    position:relative;
}
.lc-fill::after{
    content:'';position:absolute;top:-3px;right:-1px;
    width:10px;height:10px;
    background:var(--lc);
    border-radius:50%;
    box-shadow:0 0 10px var(--lc), 0 0 20px color-mix(in srgb, var(--lc) 40%, transparent);
    opacity:0;
    transition:opacity .4s;
}
.lc-row.visible .lc-fill{width:0;transition:width .6s ease-in}
.lc-row.visible:hover .lc-fill{width:calc(var(--pct) * 1%);transition:width 1.8s var(--easeOut)}
.lc-row.visible:hover .lc-fill::after{opacity:1;animation:dotPulse 2s ease-in-out .5s infinite}

@keyframes dotPulse{
    0%,100%{transform:scale(1);opacity:.8}
    50%{transform:scale(1.6);opacity:.3}
}

/* ─── MAP ─── */
.mapa{padding:8rem 0 4rem;background:var(--bg)}
.map-wrap{
    max-width:1200px;margin:0 auto;padding:0 3rem;
}
.leaflet-container-custom{
    width:100%;
    height:clamp(400px,55vh,650px);
    border-radius:3px;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 4px 20px rgba(0,0,0,.2);
    z-index:1;
}
/* Override leaflet default styles for dark theme */
.leaflet-container-custom .leaflet-control-zoom a{
    background:var(--bg-card) !important;
    color:var(--fg) !important;
    border-color:rgba(255,255,255,.1) !important;
}
.leaflet-container-custom .leaflet-control-attribution{
    background:rgba(44,41,35,.85) !important;
    color:var(--fg-muted) !important;
    font-size:.6rem !important;
}
.leaflet-container-custom .leaflet-control-attribution a{color:var(--fg-dim) !important}
.leaflet-container-custom .leaflet-popup-content-wrapper{
    background:var(--bg-card) !important;
    color:var(--fg) !important;
    border-radius:3px !important;
    box-shadow:0 8px 30px rgba(0,0,0,.4) !important;
    border:1px solid rgba(255,255,255,.08) !important;
}
.leaflet-container-custom .leaflet-popup-tip{background:var(--bg-card) !important}
.leaflet-container-custom .leaflet-popup-content{
    font-family:var(--sans) !important;
    font-size:.82rem !important;
    color:var(--fg-dim) !important;
    line-height:1.5 !important;
}
.leaflet-container-custom .leaflet-popup-content strong{
    color:var(--fg) !important;
    font-family:var(--serif) !important;
    font-size:1rem !important;
    display:block !important;
    margin-bottom:.3rem !important;
}
.leaflet-container-custom .leaflet-popup-content .popup-year{
    font-family:var(--mono);
    font-size:.65rem;
    letter-spacing:.15em;
    color:var(--accent);
    display:block;
    margin-bottom:.4rem;
}

/* Continent labels */
.continent-label span{
    font-family:var(--sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(230,223,209,.25);
    white-space:nowrap;
    pointer-events:none;
    text-shadow:0 0 8px rgba(0,0,0,.6);
}

.map-legend{
    display:flex;flex-wrap:wrap;gap:1.5rem;
    margin-top:1rem;padding:.8rem 0;
}
.map-legend span{
    display:flex;align-items:center;gap:.5rem;
    font-size:.72rem;color:var(--fg-dim);
}
.map-legend i{
    width:10px;height:10px;border-radius:50%;flex-shrink:0;
}

/* ─── CLOSING ─── */
.closing{
    padding:10rem 3rem;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-warm);
    text-align:center;
}
.close-inner{max-width:700px}
.close-quote p{
    font-family:var(--serif);
    font-size:clamp(1.3rem,3vw,2rem);
    font-weight:300;
    line-height:1.5;
    color:var(--fg);
    font-style:italic;
}
.close-quote cite{
    display:block;margin-top:1rem;
    font-family:var(--mono);font-size:.72rem;
    letter-spacing:.15em;color:var(--fg-muted);font-style:normal;
}
.close-msg{
    font-size:.88rem;color:var(--fg-dim);
    margin-top:3rem;line-height:1.8;
}
.close-years{
    display:flex;align-items:center;gap:1.5rem;
    justify-content:center;margin-top:3rem;
}
.close-years span{font-family:var(--mono);font-size:1.2rem;color:var(--accent);letter-spacing:.1em}
.cy-line{width:60px;height:1px;background:var(--fg-muted);opacity:.3}

/* ─── FOOTER ─── */
.footer{
    padding:3rem;text-align:center;
    border-top:1px solid rgba(255,255,255,.04);
}
.footer p{font-size:.78rem;color:var(--fg-dim)}
.footer small{font-size:.65rem;color:var(--fg-muted);display:block;margin-top:.3rem}

/* ═══ ANIMATIONS ═══ */
[data-anim]{opacity:0;transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-anim="fade"]{transform:translateY(30px)}
[data-anim="slide-right"]{transform:translateX(-60px)}
[data-anim="slide-left"]{transform:translateX(60px)}
[data-anim].visible{opacity:1;transform:none}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
    .nav-links{display:none}
    .nav-burger{display:block}
    .container{padding:0 1.5rem}
    .oh-head{flex-direction:column;gap:.6rem}
    .oh-num{font-size:3.5rem}
    .mosaic{grid-template-columns:1fr}
    .m-big{grid-column:span 1}
    .lc-top{flex-wrap:wrap;gap:.5rem}
    .lc-name{font-size:.95rem}
    .lc-num{font-size:1.6rem}
    .cf-item{grid-template-columns:1fr;gap:1rem;padding:2rem 1.5rem}
    .cf-right .cf-content{margin-left:0;text-align:left}
    .cf-num{display:none}
    .cf-accent{width:100%;height:3px;order:-1}
    .crono-sticky{padding:1.5rem}
    .map-wrap{padding:0 1.5rem}
    .nav{padding:1rem 1.5rem}
    .epi{padding:5rem 1.5rem}
}
@media(max-width:480px){
    .hero-strip{flex-direction:column;gap:1rem}
    .hs-line{width:1px;height:20px}
    .f-grid{grid-template-columns:1fr}
    .close-quote p{font-size:1.1rem}
}