/* ============================================================
   DODO STUDIO · V4 — poster hero + dark minimal body
   base: reset, shell, header, hero, tape
   ============================================================ */

:root{
  /* dark body surfaces */
  --bg:      #0B1834;   /* body */
  --bg-deep: #081026;   /* footer / contact */
  --panel:   #10224A;   /* cards */
  --hair:    rgba(255,255,255,.10);
  --hair-2:  rgba(255,255,255,.18);
  --tx:      #FFFFFF;
  --tx-mut:  rgba(255,255,255,.60);
  --tx-dim:  rgba(255,255,255,.38);

  /* poster */
  --red:     #FF0060;
  --bone:    #F2F3F7;

  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 48px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ overscroll-behavior-y:none; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
a:hover{ color: var(--red); }
button{ font:inherit; border:0; background:none; cursor:pointer; color:inherit; }
::selection{ background: var(--red); color:#fff; }

.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }

/* ---------- shared type ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px; font-weight:700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--red);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{ content:""; height:1px; width:56px; background: var(--hair-2); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ content:""; height:1px; width:56px; background: var(--hair-2); }

.display{
  font-family: var(--font-body);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -0.015em;
  color: var(--tx);
  font-size: clamp(36px, 5vw, 72px);
}
.display .hl{ color: var(--red); }
.display .hl-y{ color: var(--mustard); }
.sub{
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
  color: var(--tx-mut);
  max-width: 56ch;
}
.mono{ font-family: var(--font-mono); letter-spacing:.14em; text-transform:uppercase; font-size:12px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-body); font-weight:700; font-size:16px;
  padding: 16px 30px; border-radius: 999px;
  position:relative; overflow:visible; isolation:isolate;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
/* content sits above the liquid layer */
.btn > *:not(.btn-goo){ position:relative; z-index:1; }
/* liquid-magnet layer (JS-injected): a same-colored body + a blob that
   tracks the cursor; the #gooBtn filter melds them so the button's
   background necks out toward the pointer like a magnetic fluid.
   The button's own crisp background stays underneath as the shape +
   fallback, so buttons look correct even without the effect. */
.btn-goo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  filter: url(#gooBtn);
  border-radius:inherit;
}
.btn-goo::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: var(--btnbg, transparent);
}
.btn-goo .blob{
  position:absolute; top: var(--by, 50%); left: var(--bx, 50%);
  width: 34%; aspect-ratio:1; border-radius:50%;
  background: var(--btnbg, transparent);
  transform: translate(-50%, -50%) scale(var(--bs, 0));
  transition: transform .18s var(--ease);
}
.btn .ar{ width:18px; height:18px; }
.btn-red{ background: var(--red); color:#fff; --btnbg: var(--red); }
.btn-red:hover{ background:#E00055; color:#fff; --btnbg:#E00055; }
.btn-white{ background:#fff; color: var(--navy-900); --btnbg:#fff; }
.btn-white:hover{ background:#fff; color: var(--red); }
.btn-line{ border:1px solid var(--hair-2); color:var(--tx); background:transparent; }
.btn-line:hover{ border-color:#fff; color:#fff; }
.btn-navy{ background: var(--navy-900); color:#fff; --btnbg: var(--navy-900); }
.btn-navy:hover{ color:#fff; background:#0A1530; --btnbg:#0A1530; }
.btn-lg{ padding: 19px 38px; font-size:17px; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position: fixed; inset-inline:0; top:0; z-index: 60;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.hdr-in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height: 76px;
}
.hdr-logo img{ height: 34px; width:auto; }
.hdr-logo .lg-light{ display:none; }
.hdr.scrolled .lg-light{ display:block; }
.hdr.scrolled .lg-dark{ display:none; }
.nav-links{ display:flex; gap: clamp(18px, 3vw, 40px); }
.nav-links a{
  font-size: 15px; font-weight: 600; color: var(--navy-700);
  letter-spacing:.01em;
}
.nav-links a:hover{ color: var(--red); }
.hdr.scrolled .nav-links a{ color: rgba(255,255,255,.85); }
.hdr.scrolled .nav-links a:hover{ color:#fff; }
.hdr-right{ display:flex; align-items:center; gap:18px; }
.lang{ display:flex; border:1px solid var(--navy-200); border-radius:999px; overflow:hidden; }
.lang button{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em;
  padding: 7px 12px; color: var(--navy-500);
  transition: background .2s, color .2s;
}
.lang button.on{ background: var(--navy-900); color:#fff; }
.hdr.scrolled .lang{ border-color: rgba(255,255,255,.35); }
.hdr.scrolled .lang button{ color: rgba(255,255,255,.75); }
.hdr.scrolled .lang button.on{ background:#fff; color: var(--navy-900); }
.hdr .btn{ padding: 12px 22px; font-size:14px; }
.hdr .btn-white{ background: var(--navy-900); color:#fff; --btnbg: var(--navy-900); }
.hdr .btn-white:hover{ background: var(--red); color:#fff; --btnbg: var(--red); }
.hdr.scrolled .btn-white{ background:#fff; color: var(--navy-900); --btnbg:#fff; }
.hdr.scrolled .btn-white:hover{ color: var(--red); }

.hdr.scrolled{ background: rgba(8,16,38,.86); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hair); }

/* mobile quick actions: WhatsApp + contact form */
.hdr-ic{
  display:none; align-items:center; justify-content:center;
  width: 38px; height: 38px; border-radius: 50%; flex:none;
}
.hdr-ic svg{ width: 19px; height: 19px; }
@media (max-width: 560px){
  .hdr-ic{ display:inline-flex; }
  .hdr-ic.wa{ background: #25D366; color:#fff; }
  .hdr-ic.wa:hover{ color:#fff; }
  .hdr-ic.form{ background: var(--navy-900); color:#fff; }
  .hdr-ic.form:hover{ color:#fff; }
  .hdr.scrolled .hdr-ic.form{ background:#fff; color: var(--navy-900); }
  .hdr-right{ gap: 10px; }
}

/* ============================================================
   HERO — poster: bone top / red bottom, stroked fuchsia word,
   crane building the word
   ============================================================ */
.hero{
  position: relative;
  height: 100svh;
  min-height: 700px;
  max-height: 1180px;
  background: var(--bone);
  overflow: hidden;
}
.hero-red{
  position:absolute; inset: 50% 0 0 0;
  background: var(--red);
}

/* top hashtag */
.hero-hash{
  position:absolute; top: 108px; inset-inline:0;
  display:flex; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .58em; text-indent:.58em;
  color: var(--red);
}

/* giant word — pure fuchsia, Anton, bottom just kissing the red band */
.hero-giant{
  position:absolute; top: 39%; left:50%;
  transform: translate(-50%, -50%);
  font-family: 'Anton', var(--font-display);
  font-weight: 400;
  font-size: min(22vw, 36vh, 360px);
  line-height: 1;
  letter-spacing: .005em;
  user-select:none; pointer-events:none;
  white-space: nowrap;
  color: var(--red);
}

/* the plant — the habitat growing out of the ground */
.hero-plant{
  position:absolute;
  right: clamp(30px, 11vw, 260px);
  bottom: -1%;
  height: min(60vh, 62%);
  width: auto;
  pointer-events:none;
  filter: drop-shadow(0 24px 44px rgba(80,0,30,.35));
}

/* white sprout line — draws itself in a loop */
.hero-sprout{
  position:absolute; left: clamp(28px, 9vw, 170px); bottom: 7%;
  width: clamp(70px, 7vw, 110px); height:auto;
  fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:.9;
}
.hero-sprout .sp{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: spDraw 9s var(--ease) infinite; }
.hero-sprout .s2{ animation-delay: 1s; }
.hero-sprout .s3{ animation-delay: 1.8s; }
@keyframes spDraw{
  0%{ stroke-dashoffset:1; opacity:0; }
  7%{ opacity:1; }
  40%{ stroke-dashoffset:0; }
  72%{ stroke-dashoffset:0; opacity:1; }
  86%{ opacity:0; }
  100%{ stroke-dashoffset:1; opacity:0; }
}

/* side name block (like the player name) — on the red band */
.hero-name{
  position:absolute; top: 54%; left: clamp(24px, 9vw, 150px);
  font-family: var(--font-body); font-weight: 900; line-height: .95;
  font-size: clamp(22px, 2.2vw, 34px); letter-spacing:-.01em;
}
.hero-name .a{ color: #fff; display:block; }
.hero-name .b{ color: var(--navy-900); display:block; }

/* meta block beneath the name */
.hero-meta{
  position:absolute; top: 64%; left: clamp(24px, 9vw, 150px);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.72); line-height: 2.1;
}
.hero-meta b{ color: #fff; }

/* bottom band copy */
.hero-foot{
  position:absolute; bottom: 0; inset-inline:0;
  display:flex; flex-direction:column; align-items:center; gap: 22px;
  padding-bottom: clamp(28px, 4.5vh, 52px);
  text-align:center;
}
.hero-foot h1{
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.04; letter-spacing: -0.015em;
  color: #fff;
}
.hero-foot h1 .hl{ color: var(--mustard); }
.hero-actions{ display:flex; gap: 14px; flex-wrap:wrap; justify-content:center; }
.hero-actions .btn-line{ border-color: rgba(255,255,255,.55); color: #fff; }
.hero-actions .btn-line:hover{ border-color: #fff; color: #fff; }
.hero-tag{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.34em; text-indent:.34em;
  text-transform: uppercase; color: rgba(255,255,255,.66);
}

/* hero load-in (one-time, subtle) */
@media (prefers-reduced-motion: no-preference){
  .hero-giant, .hero-plant, .hero-hash, .hero-name, .hero-meta{ animation: heroIn 1s var(--ease) both; }
  .hero-plant{ animation-delay:.15s; }
  .hero-name,.hero-meta{ animation-delay:.28s; }
  .hero-foot > *{ animation: heroIn .9s var(--ease) both; animation-delay:.38s; }
  .hero-foot > * + *{ animation-delay:.48s; }
  .hero-foot > * + * + *{ animation-delay:.58s; }
}
@keyframes heroIn{
  from{ opacity:0; transform: translate(var(--hx,0), calc(var(--hy, 0px) + 26px)); }
  to{ opacity:1; transform: translate(var(--hx,0), var(--hy, 0px)); }
}
.hero-giant{ --hx:-50%; --hy:-50%; }

/* ============================================================
   ROLL — each section rolls in over the previous (sticky stack)
   ============================================================ */
main > .roll{ position: sticky; top: 0; }
main > .roll + .roll{ box-shadow: 0 -40px 80px rgba(4,8,22,.5); }
.sec.roll{ min-height: 100svh; display:flex; flex-direction:column; }
.sec.roll > .wrap{ margin-block: auto; width: 100%; }
.cta.roll{ min-height: 100svh; display:flex; flex-direction:column; justify-content:center; }

/* ============================================================
   TAPE — mono marquee band (section divider after hero)
   ============================================================ */
.tape{
  background: var(--bg-deep);
  border-block: 1px solid var(--hair);
  overflow:hidden;
  padding-block: 20px;
}
.tape-row{
  display:flex; gap: 56px; width:max-content;
  direction: ltr;
  animation: tapeMove 46s linear infinite;
}
.tape-row .ti{
  display:flex; align-items:center; gap: 56px;
  font-family: var(--font-mono); font-size: 13px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
  color: rgba(255,255,255,.72);
}
.tape-row .ti i{
  width:8px; height:8px; border-radius:50%;
  background: var(--red); flex:none;
}
.tape-row .ti:nth-child(3n) i{ background: var(--mustard); }
.tape-row .ti:nth-child(3n+2) i{ background: var(--navy-400); }
@keyframes tapeMove{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================================================
   RESPONSIVE — header / hero
   ============================================================ */
@media (max-height: 800px){
  .hero-foot{ gap: 16px; padding-bottom: 24px; }
  .hero-foot h1{ font-size: clamp(22px, 2.6vw, 36px); }
  .hero-foot .btn-lg{ padding: 15px 30px; font-size: 15.5px; }
}
@media (max-width: 960px){
  .nav-links{ display:none; }
  .hero-name, .hero-meta{ display:none; }
  /* fuchsia band sits ABOVE the plant so the plant's base hides behind it */
  .hero-red{ z-index: 1; }
  /* DODO word: bottom edge kisses the roof of the fuchsia band (like desktop) */
  .hero-giant{ font-size: min(30vw, 30vh, 205px); top: 50%; --hy: -80%; transform: translate(-50%, -80%); z-index: 2; }
  /* plant emerges from the fuchsia: only the plant + the tip of the dirt
     show above the band; the rest of the mound is hidden behind the pink */
  .hero-plant{
    left: 50%; right: auto; bottom: 34%; top: auto;
    --hx: -50%; --hy: 0px;
    transform: translate(-50%, 0);
    height: 42vh; width: auto; max-width: 78vw; max-height: none;
    z-index: 0; opacity: 1;
    filter: drop-shadow(0 16px 30px rgba(80,0,30,.28));
  }
  .hero-sprout{ bottom: 4%; width: 54px; opacity:.6; z-index: 3; }
  /* tagline + buttons centered within the pink band (50%–100% of the hero) */
  .hero-foot{
    top: 50%; bottom: 0; inset-inline: 0;
    justify-content: center;
    gap: 20px; padding: 0 16px;
    z-index: 4;
  }
  .hero-hash{ letter-spacing:.34em; text-indent:.34em; padding-inline:16px; z-index: 3; }
}
@media (max-width: 560px){
  .hdr .btn{ display:none; }
  .hero{ min-height: 660px; }
  .hero-sprout{ display:none; }
  .hero-giant{ font-size: min(32vw, 24vh, 185px); }
  .hero-foot{ gap: 16px; }
  .hero-foot h1{ font-size: 27px; padding-inline: 14px; }
  .hero-actions{ gap: 10px; }
  .hero-actions .btn-lg{ padding: 15px 26px; font-size: 15px; }
}