/* ============ MXON 2026 — Seleção Brasileira de Motocross ============ */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Saira:wght@400;500;600;700&display=swap');

:root{
  --navy:#13225f;        /* brand deep blue */
  --navy-deep:#0b1444;   /* darker bg */
  --green:#1ba94c;       /* brand green */
  --green-bright:#26c258;
  --yellow:#ffce00;      /* brand yellow */
  --paper:#f3f2ec;       /* warm white */
  --paper-2:#e9e8df;
  --ink:#0a1138;
  --line:rgba(255,255,255,.16);
}

*{box-sizing:border-box;margin:0;padding:0;}
deck-stage:not(:defined){visibility:hidden;}
deck-stage{background:#05081f;}

section{
  font-family:'Saira',system-ui,sans-serif;
  color:#fff;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shared backgrounds ---------- */
.bg-navy{background:radial-gradient(120% 120% at 70% 0%, #1a2c78 0%, var(--navy) 42%, var(--navy-deep) 100%);}
.bg-paper{background:var(--paper);}
.bg-flat-navy{background:var(--navy-deep);}

/* star field layer */
.stars{
  position:absolute; inset:-6%; pointer-events:none;
  background:url('images/stars.png') center/cover no-repeat;
}
.stars.white{filter:brightness(0) invert(1); opacity:.10;}
.stars.navy{opacity:.07;}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .stars.drift{animation:starDrift 26s ease-in-out infinite alternate;}
}
@keyframes starDrift{from{transform:translate3d(0,0,0) scale(1.02);}to{transform:translate3d(-2.2%,1.6%,0) scale(1.06);}}

/* diagonal speed cut */
.cut{position:absolute;inset:0;pointer-events:none;}

/* ---------- type system ---------- */
.eyebrow{
  font-family:'Saira',sans-serif; font-weight:700;
  letter-spacing:.42em; text-transform:uppercase; font-size:24px;
  color:var(--green-bright); display:flex; align-items:center; gap:18px;
}
.eyebrow.gold{color:var(--yellow);}
.eyebrow::before{content:"";width:54px;height:3px;background:currentColor;display:inline-block;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{width:40px;}

.title{
  font-family:'Saira Condensed',sans-serif; font-weight:800;
  text-transform:uppercase; line-height:.92; letter-spacing:.005em;
}
.title.xl{font-size:142px;white-space:nowrap;}
.title.lg{font-size:118px;}
.title.md{font-size:84px;}

.lead{font-size:34px;font-weight:500;line-height:1.32;color:rgba(255,255,255,.86);}
.lead.dark{color:#3a4068;}
.title.dark{color:var(--ink);}
.kicker-dark{color:#5b6080;}

/* footer chrome on every slide */
.foot{
  position:absolute; left:78px; right:78px; bottom:46px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Saira Condensed',sans-serif; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; font-size:24px;
}
.foot .brandmark{display:flex;align-items:center;gap:14px;color:#fff;opacity:.82;}
.foot .pg{color:var(--yellow);font-variant-numeric:tabular-nums;}
.foot.dark .brandmark{color:var(--navy);} 
.foot .dot{width:9px;height:9px;background:var(--green);transform:rotate(45deg);}
.foot.dark .dot{background:var(--green);}

/* mini diamond chevron mark (CSS) */
.mark{position:relative;width:34px;height:34px;flex:0 0 auto;}
.mark::before,.mark::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;border:3px solid var(--yellow);transform:translate(-50%,-50%) rotate(45deg);border-right:0;border-bottom:0;}
.mark::after{border:3px solid var(--green);border-left:0;border-top:0;}

/* bullets */
.blist{list-style:none;display:flex;flex-direction:column;gap:22px;}
.blist li{display:flex;gap:18px;align-items:flex-start;font-size:30px;font-weight:500;line-height:1.25;}
.blist li::before{content:"";flex:0 0 auto;margin-top:.55em;width:16px;height:16px;background:var(--green);transform:rotate(45deg);}
.blist.gold li::before{background:var(--yellow);}
.blist.dark li{color:#2c3258;}

/* ---------------- animations ---------------- */
.an{will-change:transform,opacity;}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .a-rise{animation:aRise .8s cubic-bezier(.2,.85,.25,1) both; animation-delay:var(--d,0s);}
  [data-deck-active] .a-fade{animation:aFade .9s ease both; animation-delay:var(--d,0s);}
  [data-deck-active] .a-pop{animation:aPop .85s cubic-bezier(.18,1.1,.3,1) both; animation-delay:var(--d,0s);}
  [data-deck-active] .a-left{animation:aLeft .85s cubic-bezier(.2,.85,.25,1) both; animation-delay:var(--d,0s);}
  [data-deck-active] .a-right{animation:aRight .85s cubic-bezier(.2,.85,.25,1) both; animation-delay:var(--d,0s);}
  [data-deck-active] .a-clip{animation:aClip 1s cubic-bezier(.6,0,.1,1) both; animation-delay:var(--d,0s);}
  [data-deck-active] .a-wipe{animation:aWipe .95s cubic-bezier(.6,0,.1,1) both; animation-delay:var(--d,0s);}
  [data-deck-active] .a-grow{animation:aGrow .9s cubic-bezier(.2,.85,.25,1) both; animation-delay:var(--d,0s);transform-origin:left center;}
  [data-deck-active] .a-spin{animation:aSpin 1.1s cubic-bezier(.18,.9,.25,1) both; animation-delay:var(--d,0s);}
}
@keyframes aRise{from{opacity:0;transform:translateY(46px);}to{opacity:1;transform:none;}}
@keyframes aFade{from{opacity:0;}to{opacity:1;}}
@keyframes aPop{from{opacity:0;transform:scale(.84);}to{opacity:1;transform:none;}}
@keyframes aLeft{from{opacity:0;transform:translateX(-70px);}to{opacity:1;transform:none;}}
@keyframes aRight{from{opacity:0;transform:translateX(70px);}to{opacity:1;transform:none;}}
@keyframes aClip{from{opacity:.2;clip-path:inset(0 0 100% 0);}to{opacity:1;clip-path:inset(0 0 0 0);}}
@keyframes aWipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes aGrow{from{transform:scaleX(0);opacity:.4;}to{transform:scaleX(1);opacity:1;}}
@keyframes aSpin{from{opacity:0;transform:rotate(-22deg) scale(.7);}to{opacity:1;transform:none;}}

/* layout helpers */
.pad{position:absolute;inset:0;padding:90px 78px 120px;}
.stack{display:flex;flex-direction:column;}
.center-col{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 90px;}
/* white monochrome shield for dark hero backgrounds */
.shield-light{filter:brightness(0) invert(1);}
/* keep centered titles full-width so flex doesn't shrink text to min-content */
.center-col > *{max-width:100%;}
.center-col .title{width:100%;}
.grow-line{height:4px;background:linear-gradient(90deg,var(--green),var(--yellow));border:0;}
img{display:block;}

/* ============ yellow scene + monochrome shields ============ */
.bg-yellow{background:radial-gradient(120% 130% at 72% 8%, #ffff5c 0%, #ffff00 44%, #ffe400 100%);}
.stars.navy-soft{opacity:.10;filter:brightness(0) saturate(100%) invert(11%) sepia(43%) saturate(2800%) hue-rotate(218deg) brightness(70%);}
.shield-navy{filter:brightness(0) saturate(100%) invert(11%) sepia(43%) saturate(2800%) hue-rotate(218deg) brightness(70%);}
.shield-white{filter:brightness(0) invert(1);}
.shield-greenf{filter:brightness(0) saturate(100%) invert(48%) sepia(86%) saturate(420%) hue-rotate(86deg) brightness(94%) contrast(88%);}

/* ============ expressive entrances ============ */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .a-morph{animation:aMorph 1.05s cubic-bezier(.2,.85,.2,1) both;animation-delay:var(--d,0s);}
  [data-deck-active] .a-xray{animation:aXray 1.15s ease both;animation-delay:var(--d,0s);}
  [data-deck-active] .a-flip{animation:aFlipX .9s cubic-bezier(.2,.85,.25,1) both;animation-delay:var(--d,0s);transform-origin:top center;}
  [data-deck-active] .a-unfold{animation:aUnfold .85s cubic-bezier(.2,.85,.25,1) both;animation-delay:var(--d,0s);}
  [data-deck-active] .a-word{display:inline-block;animation:aWordUp .85s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--d,0s);}
  [data-deck-active] .a-blur{animation:aBlurFade 1s ease both;animation-delay:var(--d,0s);}
  [data-deck-active] .a-punch{animation:aPunch .75s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--d,0s);}
  [data-deck-active] .a-swing{animation:aSwing 1s cubic-bezier(.3,.9,.3,1) both;animation-delay:var(--d,0s);transform-origin:top center;}
  [data-deck-active] .a-far{animation:aFar .9s cubic-bezier(.18,.85,.24,1) both;animation-delay:var(--d,0s);transform-origin:center;}
  [data-deck-active] .a-sketch{animation:aSketch 1.7s ease both;animation-delay:var(--d,0s);}
  /* comet stars: fly across, settle, trail fades */
  [data-deck-active] .comet{animation:cometFly 1.5s cubic-bezier(.16,.7,.2,1) both;animation-delay:var(--d,0s);}
  [data-deck-active] .comet .tail{animation:cometTail 1.6s ease both;animation-delay:var(--d,0s);}
}
@keyframes aMorph{0%{opacity:0;transform:scale(.5) rotate(-16deg);filter:blur(16px);}55%{opacity:1;filter:blur(0);}100%{opacity:1;transform:none;}}
@keyframes aXray{0%{opacity:0;filter:invert(1) brightness(2.4) hue-rotate(180deg);clip-path:inset(0 0 100% 0);}28%{opacity:1;}58%{filter:invert(.35) brightness(1.5);clip-path:inset(0);}100%{opacity:1;filter:none;clip-path:inset(0);}}
@keyframes aFlipX{0%{opacity:0;transform:perspective(1000px) rotateX(82deg);}100%{opacity:1;transform:perspective(1000px) rotateX(0);}}
@keyframes aUnfold{0%{opacity:0;transform:scaleY(.04);}60%{opacity:1;}100%{opacity:1;transform:none;}}
@keyframes aWordUp{0%{opacity:0;transform:translateY(115%) skewY(7deg);}100%{opacity:1;transform:none;}}
@keyframes aBlurFade{0%{opacity:0;filter:blur(22px);letter-spacing:.42em;}100%{opacity:1;filter:blur(0);}}
@keyframes aPunch{0%{opacity:0;transform:scale(1.7);filter:blur(7px);}100%{opacity:1;transform:none;filter:blur(0);}}
@keyframes aSwing{0%{opacity:0;transform:rotate(-9deg) translateY(-40px);}60%{opacity:1;transform:rotate(3deg);}100%{opacity:1;transform:none;}}
@keyframes aFar{0%{opacity:0;transform:scale(5.5);}55%{opacity:1;}100%{opacity:1;transform:scale(1);}}
@keyframes aSketch{0%{opacity:0;filter:grayscale(1) contrast(2.4) brightness(1.45);clip-path:inset(0 100% 0 0);}16%{opacity:1;}46%{clip-path:inset(0 0 0 0);filter:grayscale(1) contrast(2) brightness(1.3);}74%{filter:grayscale(.45) contrast(1.25) brightness(1.08);}100%{opacity:1;filter:none;clip-path:inset(0 0 0 0);}}
@keyframes cometFly{0%{opacity:0;transform:translate(var(--fx,-60vw),var(--fy,40vh)) scale(.5);}12%{opacity:1;}88%{opacity:1;}100%{opacity:1;transform:translate(0,0) scale(1);}}
@keyframes cometTail{0%,12%{opacity:.9;width:var(--tw,220px);}70%{opacity:.5;}100%{opacity:0;width:0;}}

/* comet element */
.comet{position:absolute;pointer-events:none;width:22px;height:22px;}
.comet .head{width:100%;height:100%;background:currentColor;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.comet .tail{position:absolute;top:50%;right:60%;height:3px;transform:translateY(-50%) rotate(var(--ta,18deg));transform-origin:right center;background:linear-gradient(270deg,currentColor,transparent);border-radius:3px;}

/* ============ infographic icons ============ */
.ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ico svg{width:100%;height:100%;display:block;}
.statchip{display:flex;align-items:center;gap:22px;}
.statnum{font-family:'Saira Condensed';font-weight:800;line-height:.9;font-variant-numeric:tabular-nums;}