:root{
  --bg:#bdbdb9;
  --bg-soft:#d6d6d2;
  --ink:#111312;
  --muted:#676964;
  --line:rgba(17,19,18,.24);
  --paper:#e4e4e0;
  --shadow:0 24px 70px rgba(14,15,14,.20);
  --radius:28px;
  --pad:clamp(22px,4vw,76px);
  --display:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Black",sans-serif;
  --body:Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 5%,rgba(255,255,255,.56),transparent 27%),
    radial-gradient(circle at 85% 35%,rgba(255,255,255,.20),transparent 25%),
    linear-gradient(135deg,#c7c7c3,#aaa9a6 62%,#c4c4c0);
  font-family:var(--body);
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
::selection{background:#101211;color:#efefeb}
a{color:inherit;text-decoration:none}
button,a{font:inherit}
button{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{
  overflow-wrap:normal;
  word-break:normal;
}
code{font-size:.92em}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:100;
  opacity:.16;mix-blend-mode:multiply;
  background-image:url("assets/backgrounds/grain.svg");
  background-size:170px 170px;
}
.cursor-blob{
  position:fixed;z-index:-1;width:38vw;height:38vw;border-radius:50%;
  background:rgba(255,255,255,.13);filter:blur(42px);pointer-events:none;
  transform:translate(-50%,-50%);left:50%;top:20%;transition:opacity .3s;
}
.topbar{
  position:fixed;z-index:80;left:24px;right:24px;top:20px;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px 0 10px;border:1px solid rgba(17,19,18,.19);
  background:rgba(210,210,206,.74);backdrop-filter:blur(16px);
  border-radius:999px;box-shadow:0 10px 36px rgba(0,0,0,.07);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.08em;font-size:13px}
.brand-mark{
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:#eee;
  display:grid;place-items:center;font-family:var(--display);font-size:19px;letter-spacing:.02em;
}
.desktop-nav{display:flex;align-items:center;gap:4px}
.desktop-nav a{
  padding:12px 14px;border-radius:999px;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;transition:.2s ease;
}
.desktop-nav a:hover{background:rgba(17,19,18,.09);transform:translateY(-1px)}
.menu-button{
  display:none;background:var(--ink);color:#efefeb;border:0;border-radius:999px;
  padding:10px 14px;font-size:12px;font-weight:900;letter-spacing:.06em;
}
.mobile-menu{
  position:fixed;z-index:70;inset:0;background:rgba(197,197,193,.96);
  backdrop-filter:blur(18px);display:grid;align-content:center;justify-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:.25s ease;
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{
  font-family:var(--display);font-size:clamp(42px,10vw,72px);line-height:.92;text-transform:uppercase;
}

.section{
  position:relative;min-height:100vh;
  padding:clamp(110px,12vh,150px) var(--pad) clamp(70px,9vh,110px);
  border-bottom:1px solid rgba(17,19,18,.16);
  isolation:isolate;overflow:hidden;
}
@media (min-width:1500px) and (min-height:850px){
  .section{min-height:1000px}
}
.section::after{
  content:"";position:absolute;inset:0;z-index:-3;
  background-image:url("assets/backgrounds/fence.svg");background-size:480px 480px;
  opacity:.035;mix-blend-mode:multiply;pointer-events:none;
}
.section-head{max-width:1450px;margin:0 auto 56px}
.section-no{
  margin:0 0 12px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}
.section h2{
  margin:0;font-family:var(--display);font-size:clamp(54px,7vw,130px);
  line-height:.92;letter-spacing:.025em;text-transform:uppercase;
  font-kerning:normal;font-variant-ligatures:none;
}
.section-intro{
  max-width:560px;margin:22px 0 0;font-size:clamp(17px,1.35vw,24px);line-height:1.3;font-weight:700;
}
.split-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end}
.split-head .section-intro{max-width:440px;margin:0 0 4px}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* HERO */
.hero{padding-top:95px;padding-bottom:90px;display:flex;align-items:stretch}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-4;
  background:
    linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:72px 72px;opacity:.28;
  mask-image:linear-gradient(to bottom,transparent,black 20%,black 75%,transparent);
}
.hero-grid{
  width:min(1800px,100%);margin:auto;display:grid;
  grid-template-columns:minmax(500px,.82fr) minmax(760px,1.18fr) 72px;
  align-items:center;gap:28px;
}
.eyebrow{
  display:flex;align-items:center;gap:9px;margin:0 0 22px;
  font-size:12px;font-weight:900;letter-spacing:.17em;
}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:pulse 1.4s infinite}
.hero-title{
  position:relative;margin:0;font-family:var(--display);font-size:clamp(88px,9.3vw,178px);
  line-height:.84;letter-spacing:.035em;text-transform:uppercase;
  font-kerning:normal;font-variant-ligatures:none;
  filter:drop-shadow(0 12px 0 rgba(255,255,255,.14));
}
.hero-title span{display:block;white-space:nowrap}
.hero-title span + span{margin-top:.035em}
.hero-title span:last-child{
  color:transparent;-webkit-text-stroke:3px var(--ink);text-stroke:3px var(--ink);
  transform:translateX(7%);
}
.ticker-row{display:flex;align-items:center;gap:16px;margin:28px 0 18px}
.ticker{
  font-family:var(--display);font-size:34px;background:var(--ink);color:#efefeb;
  padding:8px 14px 5px;transform:rotate(-1deg);
}
.hero-rule{width:68px;height:2px;background:var(--ink)}
.micro{font-size:11px;letter-spacing:.17em;font-weight:900}
.hero-lead{margin:0 0 26px;font-weight:800;font-size:clamp(19px,1.4vw,26px);max-width:540px}
.cta-row{display:flex;flex-wrap:wrap;gap:9px}
.button{
  min-height:48px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);border-radius:4px;background:rgba(230,230,226,.46);
  font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.button:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);background:#ecece8}
.button-dark{background:var(--ink);color:#eee}
.button-dark:hover{background:#252725}
.button-copy span{font-size:10px;margin-right:5px;opacity:.65}
.hero-stage{
  position:relative;min-height:720px;height:min(78vh,850px);display:flex;align-items:flex-end;justify-content:center;
  perspective:1100px;
}
.hero-animal{
  position:absolute;bottom:5%;height:70%;width:auto;object-fit:contain;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.19));
  transform-origin:50% 100%;will-change:transform;
}
.animal-main{
  left:50%;right:auto;height:76%;z-index:5;
  animation:float-main 4.4s ease-in-out infinite;
}
.animal-elephant{
  left:5%;right:auto;height:44%;z-index:2;
  transform:translateX(-50%) rotate(-4deg);
  animation:float-side 5.2s ease-in-out infinite;
}
.animal-owl{
  left:27%;right:auto;height:40%;z-index:3;
  transform:translateX(-50%) rotate(2deg);
  animation:float-side 4.8s .3s ease-in-out infinite reverse;
}
.animal-rhino{
  left:73%;right:auto;height:43%;z-index:3;
  transform:translateX(-50%) rotate(-1deg);
  animation:float-side 5s .6s ease-in-out infinite;
}
.animal-penguin{
  left:95%;right:auto;height:40%;z-index:2;
  transform:translateX(-50%) rotate(4deg);
  animation:float-side 5.6s .8s ease-in-out infinite reverse;
}
.hero-shadow{
  position:absolute;bottom:2%;left:1%;right:1%;height:64px;border-radius:50%;
  background:rgba(0,0,0,.17);filter:blur(18px);transform:rotate(-1deg);z-index:0;
}
.stamp{
  position:absolute;z-index:10;font-family:var(--display);letter-spacing:.08em;
  border:3px solid var(--ink);padding:9px 13px 6px;background:rgba(225,225,221,.82);
  box-shadow:5px 5px 0 var(--ink);
}
.stamp-one{left:7%;top:9%;transform:rotate(-8deg)}
.stamp-two{right:4%;top:20%;transform:rotate(7deg)}
.hero-side-note{
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.hero-side-note strong{font-size:12px}
.ticker-tape{
  position:absolute;left:-2%;right:-2%;bottom:0;height:48px;background:var(--ink);color:#efefeb;
  overflow:hidden;display:flex;align-items:center;transform:rotate(-.35deg);
}
.ticker-tape-track{
  display:flex;align-items:center;gap:28px;white-space:nowrap;min-width:max-content;
  animation:marquee 24s linear infinite;font-family:var(--display);font-size:21px;letter-spacing:.05em;
}
.ticker-tape i{font-style:normal;font-size:14px}

/* LORE */
.lore-section{
  background:
    radial-gradient(circle at 12% 50%,rgba(255,255,255,.46),transparent 28%),
    linear-gradient(115deg,#c9c9c5 0 44%,#aaa9a6 44% 100%);
}
.lore-layout{
  width:min(1550px,100%);margin:auto;display:grid;grid-template-columns:.88fr 1.12fr;gap:64px;align-items:center;
}
.lore-animal-wrap{
  position:relative;height:590px;display:flex;align-items:flex-end;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:rgba(232,232,228,.23);box-shadow:var(--shadow);
}
.lore-animal{height:95%;object-fit:contain;filter:drop-shadow(0 25px 24px rgba(0,0,0,.18));transition:.35s ease}
.lore-animal-wrap:hover .lore-animal{transform:scale(1.04) rotate(-1deg)}
.specimen-label{
  position:absolute;left:22px;bottom:22px;background:var(--ink);color:#eee;
  padding:15px 17px;display:grid;gap:3px;box-shadow:6px 6px 0 rgba(255,255,255,.42);
}
.specimen-label span,.specimen-label small{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.specimen-label strong{font-family:var(--display);font-size:23px;letter-spacing:.03em}
.chapters{display:grid;border-top:1px solid var(--ink)}
.chapter{
  display:grid;grid-template-columns:80px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--ink);
}
.chapter-number{font-family:var(--display);font-size:58px;line-height:.9;color:rgba(17,19,18,.33)}
.chapter h3{margin:0 0 8px;font-family:var(--display);font-size:clamp(30px,2.5vw,48px);line-height:1.02;letter-spacing:.045em;font-variant-ligatures:none}
.chapter p{margin:0;max-width:720px;font-size:17px;line-height:1.52;font-weight:650}

/* LINEUP */
.lineup-section{background:linear-gradient(180deg,#b2b2ae,#cdcdc8)}
.lineup-stage{
  width:min(1700px,100%);margin:auto;display:grid;grid-template-columns:430px 1fr;gap:24px;align-items:stretch;
}
.spotlight-card{
  position:relative;min-height:590px;border:1px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  background:rgba(236,236,232,.38);box-shadow:10px 10px 0 rgba(17,19,18,.92);
}
.spotlight-card::before{
  content:"";position:absolute;inset:-15%;background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.72),transparent 43%);z-index:0;
}
.spotlight-card img{
  position:absolute;z-index:1;left:50%;top:48%;transform:translate(-50%,-50%);
  height:72%;width:auto;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(0,0,0,.19));
  transition:opacity .2s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.spotlight-card.swapping img{opacity:0;transform:translate(-50%,-45%) scale(.94)}
.spotlight-meta{
  position:absolute;z-index:3;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;
  font-size:10px;font-weight:900;letter-spacing:.14em;
}
.spotlight-copy{
  position:absolute;z-index:3;left:18px;right:18px;bottom:18px;background:rgba(18,20,18,.95);color:#eee;
  padding:17px;border-radius:16px;
}
.spotlight-copy p{margin:0;font-size:10px;letter-spacing:.13em;font-weight:900;text-transform:uppercase}
.spotlight-copy h3{margin:7px 0 7px;font-family:var(--display);font-size:29px;line-height:1.04;letter-spacing:.045em;font-variant-ligatures:none}
.spotlight-copy p:last-child{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;opacity:.8}
.gallery-window{
  min-width:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  overflow:hidden;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);
}
.gallery-track{
  display:flex;gap:18px;width:max-content;align-items:stretch;
  animation:gallery-flow 34s linear infinite;padding:34px 0;
}
.gallery-window:hover .gallery-track{animation-play-state:paused}
.resident-card{
  width:250px;height:460px;flex:0 0 auto;position:relative;overflow:hidden;cursor:pointer;
  border:1px solid rgba(17,19,18,.44);border-radius:22px;background:rgba(238,238,234,.23);padding:0;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
.resident-card::after{
  content:"";position:absolute;inset:auto -20% -20% -20%;height:44%;
  background:radial-gradient(circle,rgba(255,255,255,.54),transparent 64%);pointer-events:none;
}
.resident-card:hover{transform:translateY(-12px) rotate(-1deg);background:rgba(239,239,235,.5);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.resident-card img{
  height:86%;width:100%;object-fit:contain;padding:24px 14px 0;filter:drop-shadow(0 18px 16px rgba(0,0,0,.15));
  transition:transform .25s ease;
}
.resident-card:hover img{transform:scale(1.07)}
.resident-card span{
  position:absolute;z-index:3;left:14px;bottom:13px;font-family:var(--display);font-size:26px;letter-spacing:.04em;
}

/* MODES */
.modes-section{background:linear-gradient(130deg,#cbcbc7,#acaca8)}
.mode-grid{
  width:min(1600px,100%);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.mode-card{
  position:relative;min-height:600px;border:1px solid var(--ink);border-radius:24px;overflow:hidden;
  background:rgba(229,229,225,.32);transition:.28s cubic-bezier(.2,.8,.2,1);
}
.mode-card:nth-child(even){transform:translateY(28px)}
.mode-card:hover{
  transform:translateY(-12px) rotate(-.7deg)!important;background:rgba(239,239,235,.55);
  box-shadow:12px 12px 0 var(--ink);
}
.mode-card img{
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:90%;height:70%;object-fit:contain;
  filter:drop-shadow(0 20px 20px rgba(0,0,0,.16));transition:transform .3s ease;
}
.mode-card:hover img{transform:translate(-50%,-54%) scale(1.06)}
.mode-index{
  position:absolute;right:15px;top:10px;font-family:var(--display);font-size:58px;color:rgba(17,19,18,.18);
}
.mode-text{
  position:absolute;z-index:3;left:15px;right:15px;bottom:15px;background:var(--ink);color:#eee;
  border-radius:14px;padding:14px 15px 16px;
}
.mode-text span{font-size:9px;letter-spacing:.14em;font-weight:900}
.mode-text h3{font-family:var(--display);font-size:25px;line-height:1.05;letter-spacing:.045em;margin:7px 0;font-variant-ligatures:none}
.mode-text p{font-size:12px;line-height:1.38;margin:0;opacity:.78}

/* ENERGY */
.energy-section{
  background:#b5b5b1;
  display:flex;flex-direction:column;justify-content:center;
}
.energy-title{width:min(1500px,100%);margin:0 auto 42px}
.energy-grid{
  width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.energy-card{
  position:relative;min-height:210px;border:1px solid rgba(17,19,18,.75);padding:22px;
  background:rgba(231,231,227,.2);transition:.22s ease;overflow:hidden;
}
.energy-card::after{
  content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-80px;bottom:-80px;
  border:1px solid rgba(17,19,18,.22);transition:.25s ease;
}
.energy-card:hover{background:var(--ink);color:#eee;transform:translateY(-5px)}
.energy-card:hover::after{transform:scale(1.5);border-color:rgba(255,255,255,.16)}
.energy-card span{font-family:var(--display);font-size:34px;opacity:.38}
.energy-card h3{font-family:var(--display);font-size:29px;line-height:1.05;letter-spacing:.045em;margin:21px 0 8px;font-variant-ligatures:none}
.energy-card p{margin:0;font-size:14px;line-height:1.4;max-width:330px;font-weight:650}
.big-word{
  position:absolute;z-index:-1;left:50%;bottom:-7vw;transform:translateX(-50%);
  font-family:var(--display);font-size:31vw;line-height:.65;color:rgba(255,255,255,.10);
  white-space:nowrap;pointer-events:none;
}

/* ROADMAP */
.roadmap-section{background:linear-gradient(180deg,#cacac6,#b1b1ad)}
.roadmap{width:min(1500px,100%);margin:auto;border-top:1px solid var(--ink)}
.road-step{
  display:grid;grid-template-columns:100px 1fr 1.6fr;gap:28px;align-items:center;
  min-height:150px;border-bottom:1px solid var(--ink);transition:.2s ease;
}
.road-step:hover{background:rgba(239,239,235,.26);padding-left:14px;padding-right:14px}
.road-number{font-family:var(--display);font-size:52px;color:rgba(17,19,18,.28)}
.road-line{height:1px;background:var(--ink);position:relative}
.road-line::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;border-radius:50%;background:var(--ink);transform:translateY(-50%)}
.road-copy{padding:18px 0}
.road-copy span{font-size:9px;font-weight:900;letter-spacing:.15em}
.road-copy h3{font-family:var(--display);font-size:40px;line-height:1.05;letter-spacing:.05em;margin:6px 0;font-variant-ligatures:none}
.road-copy p{margin:0;max-width:650px;font-size:14px;line-height:1.45;font-weight:650}

/* FINAL */
.final-section{
  padding-bottom:35px;background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.38),transparent 25%),
    linear-gradient(145deg,#c7c7c3,#aaa9a6);
}
.final-grid{
  width:min(1600px,100%);margin:auto;display:grid;grid-template-columns:.88fr 1.12fr;gap:36px;align-items:center;
}
.final-copy h2{font-size:clamp(58px,6.8vw,120px)}
.final-copy>p:not(.section-no){font-size:18px;line-height:1.45;max-width:600px;font-weight:700}
.contract-bar{
  margin-top:18px;width:100%;max-width:680px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  background:transparent;border:1px solid var(--ink);padding:14px 15px;cursor:pointer;text-align:left;
  box-shadow:5px 5px 0 var(--ink);transition:.18s ease;
}
.contract-bar:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.contract-bar span,.contract-bar em{font-size:9px;font-weight:900;letter-spacing:.14em;font-style:normal}
.contract-bar strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-shell{
  border:1px solid var(--ink);border-radius:24px;overflow:hidden;background:rgba(229,229,225,.28);
  box-shadow:12px 12px 0 var(--ink);
}
.chart-topbar{
  height:48px;padding:0 16px;border-bottom:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;
  font-size:10px;font-weight:900;letter-spacing:.13em;
}
.chart-status{display:flex;align-items:center;gap:7px}
.chart-status i{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:pulse 1.3s infinite}
.chart-mount{height:560px;position:relative}
.chart-mount iframe{width:100%;height:100%;border:0}
.chart-placeholder{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:35px;
  background:
    linear-gradient(90deg,rgba(17,19,18,.09) 1px,transparent 1px),
    linear-gradient(rgba(17,19,18,.09) 1px,transparent 1px);
  background-size:42px 42px;
}
.chart-placeholder::after{
  content:"";position:absolute;left:10%;right:10%;top:52%;height:2px;background:var(--ink);
  transform:rotate(-7deg);box-shadow:80px -45px 0 -0.5px var(--ink),170px 26px 0 -0.5px var(--ink);
}
.chart-placeholder>*{position:relative;z-index:2}
.chart-crosshair{font-family:var(--display);font-size:70px;line-height:.7;opacity:.22}
.chart-placeholder strong{font-family:var(--display);font-size:46px;line-height:1.05;letter-spacing:.045em;font-variant-ligatures:none}
.chart-placeholder p{margin:8px 0 16px;font-weight:700}
.chart-placeholder a{text-decoration:underline;font-size:11px;font-weight:900;letter-spacing:.12em}
.final-lineup{
  width:min(1550px,100%);margin:62px auto 18px;display:flex;align-items:flex-end;justify-content:center;
  height:160px;border-bottom:1px solid rgba(17,19,18,.42);overflow:hidden;
}
.final-lineup img{height:160px;width:12.5%;object-fit:contain;object-position:bottom;filter:grayscale(.16) drop-shadow(0 8px 7px rgba(0,0,0,.12));transition:.2s ease}
.final-lineup img:hover{transform:translateY(-13px) scale(1.05);filter:grayscale(0) drop-shadow(0 12px 10px rgba(0,0,0,.16))}
footer{
  width:min(1600px,100%);margin:auto;display:flex;justify-content:space-between;gap:20px;
  padding-top:18px;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.toast{
  position:fixed;z-index:120;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:var(--ink);color:#eee;padding:12px 16px;border-radius:4px;
  font-size:11px;font-weight:900;letter-spacing:.09em;opacity:0;pointer-events:none;transition:.22s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes float-main{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-.5deg)}
  50%{transform:translateX(-50%) translateY(-15px) rotate(.7deg)}
}
@keyframes float-side{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes gallery-flow{to{transform:translateX(-50%)}}

@media (max-width:1250px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-side-note{display:none}
  .hero-stage{min-height:650px}
  .animal-elephant{left:4%;right:auto}
  .animal-owl{left:27%;right:auto}
  .animal-main{left:50%;right:auto}
  .animal-rhino{left:73%;right:auto}
  .animal-penguin{left:96%;right:auto}
  .lineup-stage{grid-template-columns:370px 1fr}
  .mode-grid{grid-template-columns:repeat(2,1fr)}
  .mode-card{min-height:520px}
  .mode-card:nth-child(even){transform:none}
}
@media (max-width:900px){
  .topbar{left:12px;right:12px;top:12px}
  .desktop-nav{display:none}.menu-button{display:block}
  .section{padding:100px 18px 68px;min-height:auto}
  .split-head{display:block}.split-head .section-intro{margin-top:18px}
  .hero{padding-top:96px;min-height:100svh}
  .hero-grid{grid-template-columns:1fr;align-content:start}
  .hero-copy{z-index:10}
  .hero-title{font-size:clamp(82px,23vw,150px)}
  .hero-title span:last-child{transform:none}
  .hero-stage{height:500px;min-height:500px;margin-top:-12px}
  .animal-main{height:88%}
  .animal-elephant{left:5%;right:auto;height:34%}
  .animal-owl{left:28%;right:auto;height:32%}
  .animal-main{left:50%;right:auto;height:72%}
  .animal-rhino{left:73%;right:auto;height:34%}
  .animal-penguin{left:95%;right:auto;height:31%}
  .stamp{font-size:10px}.stamp-two{top:25%}
  .ticker-tape{height:43px}
  .lore-layout,.final-grid{grid-template-columns:1fr}
  .lore-animal-wrap{height:500px}
  .lineup-stage{grid-template-columns:1fr}
  .spotlight-card{min-height:500px}
  .gallery-window{min-height:400px}
  .resident-card{width:220px;height:390px}
  .energy-grid{grid-template-columns:repeat(2,1fr)}
  .road-step{grid-template-columns:70px 1fr}
  .road-line{display:none}
  .road-copy{padding:21px 0}
  .chart-mount{height:460px}
  .final-lineup{height:110px}
  .final-lineup img{height:110px}
  footer{flex-direction:column}
}
@media (max-width:600px){
  .brand span:last-child{display:none}
  .hero-lead{font-size:18px}
  .cta-row{display:grid;grid-template-columns:repeat(2,1fr)}
  .button{width:100%;padding:0 12px}
  .button-copy{grid-column:1/-1}
  .hero-stage{height:430px;min-height:430px}
  .animal-main{left:50%;height:70%}
  .animal-elephant{left:5%;height:31%}
  .animal-owl{left:28%;height:29%}
  .animal-rhino{left:73%;height:31%}
  .animal-penguin{left:95%;height:28%}
  .stamp-one{top:2%}.stamp-two{top:18%;right:0}
  .section h2{font-size:clamp(46px,14.5vw,78px);line-height:.98;letter-spacing:.018em}
  .chapter{grid-template-columns:46px 1fr;gap:12px}
  .chapter-number{font-size:40px}.chapter p{font-size:14px}
  .lore-animal-wrap{height:410px}
  .spotlight-card{min-height:450px}
  .gallery-window{min-height:350px}
  .resident-card{width:190px;height:330px}
  .mode-grid,.energy-grid{grid-template-columns:1fr}
  .mode-card{min-height:500px}
  .energy-card{min-height:170px}
  .road-step{grid-template-columns:56px 1fr;gap:12px}
  .road-number{font-size:36px}.road-copy h3{font-size:31px}
  .contract-bar{grid-template-columns:1fr auto}.contract-bar span{grid-column:1/-1}
  .chart-mount{height:390px}
  .chart-placeholder strong{font-size:34px}
  .final-lineup{height:84px;margin-top:45px}
  .final-lineup img{height:84px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* =========================================================
   MONOCHROME AMBIENT BACKGROUND / PARALLAX
   One base tone across the entire site. Motion creates depth.
   ========================================================= */
:root{
  --bg:#b9b9b5;
  --bg-scroll:0px;
  --bg-x:0px;
  --bg-y:0px;
}
html,body{background:var(--bg)}
body{
  background:var(--bg)!important;
  position:relative;
}
main{position:relative;z-index:1}
.noise{opacity:.075}
.cursor-blob{
  z-index:0;
  width:42vw;height:42vw;
  background:rgba(255,255,255,.10);
  filter:blur(70px);
  mix-blend-mode:soft-light;
}

/* Every content section shares exactly the same base color. */
.section,
.lore-section,
.lineup-section,
.modes-section,
.energy-section,
.roadmap-section,
.final-section{
  background:transparent!important;
}
.section::after{background:none!important}
.hero::before{background:none!important}

.ambient-bg{
  position:fixed;
  z-index:0;
  inset:-18vh -10vw;
  pointer-events:none;
  overflow:hidden;
  background:var(--bg);
  contain:paint;
}
.ambient-orb,
.ambient-ring,
.ambient-line{
  position:absolute;
  will-change:transform;
  pointer-events:none;
}
.ambient-orb{
  border-radius:50%;
  background:rgba(255,255,255,.075);
  box-shadow:0 50px 120px rgba(17,19,18,.055), inset 0 0 0 1px rgba(255,255,255,.10);
}
.ambient-orb-a{
  width:54vw;height:54vw;min-width:620px;min-height:620px;
  left:-15vw;top:-9vh;
  transform:translate3d(calc(var(--bg-x) * .30),calc(var(--bg-y) * .24 + var(--bg-scroll) * -.08),0);
  animation:ambient-drift-a 18s ease-in-out infinite alternate;
}
.ambient-orb-b{
  width:42vw;height:42vw;min-width:480px;min-height:480px;
  right:-10vw;bottom:-10vh;
  background:rgba(17,19,18,.025);
  box-shadow:0 -35px 100px rgba(255,255,255,.08), inset 0 0 0 1px rgba(17,19,18,.045);
  transform:translate3d(calc(var(--bg-x) * -.42),calc(var(--bg-y) * -.30 + var(--bg-scroll) * -.14),0);
  animation:ambient-drift-b 22s ease-in-out infinite alternate;
}
.ambient-ring{
  border:1px solid rgba(17,19,18,.075);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(255,255,255,.017),0 0 0 76px rgba(17,19,18,.012);
}
.ambient-ring-a{
  width:34vw;height:34vw;min-width:420px;min-height:420px;
  right:18vw;top:12vh;
  transform:translate3d(calc(var(--bg-x) * -.70),calc(var(--bg-y) * -.55 + var(--bg-scroll) * -.20),0) rotate(12deg);
  animation:ring-breathe 12s ease-in-out infinite;
}
.ambient-ring-b{
  width:25vw;height:25vw;min-width:320px;min-height:320px;
  left:22vw;bottom:8vh;
  border-color:rgba(255,255,255,.14);
  transform:translate3d(calc(var(--bg-x) * .62),calc(var(--bg-y) * .46 + var(--bg-scroll) * -.11),0);
  animation:ring-breathe 15s 2s ease-in-out infinite reverse;
}
.ambient-line{
  height:1px;width:72vw;
  background:rgba(17,19,18,.065);
  transform-origin:center;
}
.ambient-line-a{
  left:-12vw;top:40vh;
  transform:translate3d(calc(var(--bg-x) * .18),calc(var(--bg-y) * .15 + var(--bg-scroll) * -.05),0) rotate(-7deg);
}
.ambient-line-b{
  right:-14vw;bottom:28vh;
  background:rgba(255,255,255,.13);
  transform:translate3d(calc(var(--bg-x) * -.24),calc(var(--bg-y) * -.18 + var(--bg-scroll) * -.09),0) rotate(9deg);
}

/* Gentle section depth without changing the background color. */
.section{border-bottom-color:rgba(17,19,18,.13)}
.section::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:46vw;height:46vw;
  right:-28vw;top:18%;
  border:1px solid rgba(17,19,18,.045);
  border-radius:50%;
  pointer-events:none;
  transform:translateY(calc(var(--bg-scroll) * -.025));
}
.section:nth-of-type(even)::before{
  right:auto;left:-30vw;
  border-color:rgba(255,255,255,.10);
}

@keyframes ambient-drift-a{
  from{margin-left:-1.5vw;margin-top:-1vh}
  to{margin-left:2.5vw;margin-top:2vh}
}
@keyframes ambient-drift-b{
  from{margin-right:-1vw;margin-bottom:-1vh}
  to{margin-right:2vw;margin-bottom:2.5vh}
}
@keyframes ring-breathe{
  0%,100%{scale:1;opacity:.68}
  50%{scale:1.045;opacity:1}
}

@media (max-width:900px){
  .ambient-orb-a{left:-55vw}
  .ambient-orb-b{right:-55vw}
  .ambient-ring-a{right:-34vw}
  .ambient-ring-b{left:-38vw}
  .ambient-line{width:120vw}
}
@media (prefers-reduced-motion:reduce){
  .ambient-orb,.ambient-ring{animation:none!important}
  .ambient-orb,.ambient-ring,.ambient-line{transform:none!important}
}


/* --- REAL ANIMAL SOUND INTERACTION --- */
.animal-sound-target {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.animal-sound-target:hover {
  filter: brightness(1.025) drop-shadow(0 10px 18px rgba(17, 19, 18, .08));
}

.animal-is-sounding {
  animation: animal-sound-pulse .62s cubic-bezier(.2,.8,.2,1);
}

@keyframes animal-sound-pulse {
  0%   { filter: brightness(1) drop-shadow(0 0 0 rgba(17,19,18,0)); }
  38%  { filter: brightness(1.09) drop-shadow(0 12px 20px rgba(17,19,18,.22)); }
  72%  { filter: brightness(1.025) drop-shadow(0 5px 10px rgba(17,19,18,.12)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(17,19,18,0)); }
}

.animal-audio-frame {
  position: fixed;
  width: 2px;
  height: 2px;
  left: -20px;
  bottom: -20px;
  opacity: .001;
  pointer-events: none;
  border: 0;
  z-index: -1;
}