/* ============================================================
   SQUIDSHOT - v2 · staged on the real key art
   Page 1 · Hero: the city, mid-swing
   ============================================================ */

:root{
  --orange:#ff6a1e;
  --orange-deep:#e8460c;
  --steam:#1b6fc4;
  --steam-deep:#1567b0;
  --ink:#1b1030;
  --cream:#fff4e2;

  --font-display:"Baloo 2","Fredoka",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;font-family:var(--font-body);font-weight:700;
  color:#fff;background:var(--cream);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:8px}

/* ---------- buttons - chunky, uppercase, goo-fill hover ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1;
  letter-spacing:.01em;
  padding:.85em 1.5em;border-radius:16px;cursor:pointer;border:0;color:#fff;
  background:linear-gradient(180deg,#ff9346,#f3610e);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 #cf4d08,0 12px 24px rgba(120,45,10,.35);
  transition:transform .2s var(--pop),box-shadow .2s var(--ease);
}
.btn>*{position:relative;z-index:1}
/* liquid fill rising from the bottom on hover */
.btn::before{
  content:"";position:absolute;left:50%;bottom:-45%;z-index:0;
  width:150%;aspect-ratio:1;border-radius:44%;
  background:var(--fill,rgba(0,0,0,.22));
  transform:translateX(-50%) scale(0);
  transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateX(-50%) scale(1)}
.btn:hover{transform:translateY(-2px) rotate(-1deg) scale(1.03)}
.btn:active{transform:translateY(2px) scale(.97);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 #cf4d08,0 6px 14px rgba(120,45,10,.3)}
.btn--lg{font-size:1.35rem;padding:.95em 1.6em;border-radius:20px}
.btn--sm{font-size:.92rem;padding:.62em 1.1em;border-radius:12px}
/* primary - sunny orange, like the key art props */
.btn--steam{--fill:rgba(175,55,5,.4)}
/* secondary - white card with an orange play badge */
.btn--light{
  background:#fff;color:#143a52;--fill:rgba(255,150,70,.28);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 4px 0 rgba(20,40,60,.18),0 12px 24px rgba(20,30,60,.3);
}
.btn--light:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 2px 0 rgba(20,40,60,.18),0 6px 14px rgba(20,30,60,.25)}
.btn--light svg{
  width:30px;height:30px;padding:7px;box-sizing:border-box;
  background:linear-gradient(180deg,#ff8a3c,#f3610e);color:#fff;border-radius:50%;
  box-shadow:0 2px 6px rgba(180,70,10,.4);
}

/* shine sweep on the primary CTA */
.btn--shine{position:relative;overflow:hidden}
.btn--shine::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:btnShine 5s ease-in-out infinite;
}
@keyframes btnShine{0%,22%{left:-60%}48%,100%{left:135%}}

/* ============================================================
   NAV - floats over the scene
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:linear-gradient(180deg,rgba(15,8,32,.5),transparent);  /* hero scrim */
  transition:box-shadow .45s var(--ease);
}
.nav>*{position:relative;z-index:1}
/* once scrolled, the cream bar SLIDES + FADES down into place (smooth appearance) */
.nav::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#fff8ee,#fff2e0);
  opacity:0;transform:translateY(-100%);
  transition:opacity .4s var(--ease),transform .55s var(--ease);
}
.nav--solid::before{opacity:1;transform:translateY(0)}
.nav--solid{box-shadow:0 6px 22px rgba(120,60,20,.16)}
.nav__brand{display:flex;align-items:center}
.nav__logo{
  height:clamp(44px,5vw,56px);width:auto;display:block;
  filter:drop-shadow(0 2px 5px rgba(10,5,25,.35));
}

/* menu links pushed to the end, grouped just before the Wishlist CTA */
.nav__links{margin-inline-start:auto;display:flex;justify-content:flex-end;align-items:center;gap:clamp(1.1rem,2.3vw,2.1rem)}
.nav__links > a{
  position:relative;padding:.3em 0;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:#fff;
  text-shadow:0 2px 8px rgba(10,5,25,.55);transition:color .4s var(--ease),text-shadow .4s var(--ease);
}
.nav__links > a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:3px;border-radius:3px;
  background:var(--orange);transition:right .25s var(--ease);
}
.nav__links > a:hover::after{right:0}
.nav--solid .nav__links > a{color:#5a3a1e;text-shadow:none}
.nav--solid .nav__links > a:hover{color:var(--orange-deep)}

/* social accounts in the menu */
.nav__socials{
  display:flex;align-items:center;gap:.55rem;
  margin-inline-start:.4rem;padding-inline-start:.95rem;border-inline-start:1px solid rgba(255,255,255,.28);
}
.nav--solid .nav__socials{border-inline-start-color:rgba(120,60,20,.2)}
/* language toggle button */
.nav__lang{
  border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer;
  font-family:"Cairo","Baloo 2",sans-serif;font-weight:700;font-size:.85rem;line-height:1;
  padding:.55em .85em;border-radius:999px;white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .2s var(--ease);
}
.nav--solid .nav__lang{color:#3a2314;border-color:rgba(120,60,20,.35)}
.nav__lang:hover{background:rgba(255,255,255,.15)}
.nav--solid .nav__lang:hover{background:rgba(120,60,20,.08)}
.nav__social{display:inline-flex;color:#fff;transition:color .3s var(--ease),transform .2s var(--pop)}
.nav__social svg{width:20px;height:20px;fill:currentColor;filter:drop-shadow(0 2px 5px rgba(10,5,25,.4))}
.nav--solid .nav__social{color:#6a4830}
.nav--solid .nav__social svg{filter:none}
.nav__social:hover{color:var(--orange);transform:translateY(-2px)}

.nav__actions{display:flex;align-items:center;gap:.7rem}
.nav__cta{transition:transform .25s var(--pop),box-shadow .2s var(--ease)}

/* hamburger (mobile) */
.nav__burger{
  display:none;width:44px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
}
.nav__burger span{display:block;width:24px;height:3px;margin:0 auto;border-radius:3px;background:#fff;
  transition:background .4s var(--ease),transform .25s var(--ease),opacity .2s var(--ease)}
.nav--solid .nav__burger span{background:#3a2314}
.nav--open .nav__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav--open .nav__burger span:nth-child(2){opacity:0}
.nav--open .nav__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* keep section headings clear of the fixed nav when jumped to */
#kitchen,#moves,#foes,#loot,#wishlist{scroll-margin-top:88px}

@media (max-width:860px){
  .nav__burger{display:flex}
  /* links become a dropdown (out of the row), so push the buttons to the end */
  .nav__actions{margin-inline-start:auto}
  /* links drop down as a panel */
  .nav__links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    padding:.4rem clamp(1rem,4vw,2.4rem) 1rem;
    background:linear-gradient(180deg,#fff8ee,#fff2e0);box-shadow:0 14px 30px rgba(120,60,20,.2);
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .3s var(--ease),opacity .3s var(--ease);
  }
  .nav__links > a{
    width:100%;padding:.9rem .2rem;color:#3a2314;text-shadow:none;font-size:1.18rem;
    border-bottom:1px solid rgba(120,60,20,.1);
  }
  .nav__links > a::after{display:none}
  /* socials become a centered row under the links */
  .nav__socials{
    width:100%;justify-content:center;gap:1.6rem;
    margin:.3rem 0 0;padding:1.1rem 0 .3rem;border-inline-start:0;border-top:1px solid rgba(120,60,20,.12);
  }
  .nav__social{color:#3a2314}
  .nav__social svg{width:26px;height:26px;filter:none}
  .nav--open .nav__links{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  /* when the menu is open, the bar itself goes solid */
  .nav--open{background:linear-gradient(180deg,#fff8ee,#fff2e0);box-shadow:0 6px 22px rgba(120,60,20,.14)}
  .nav--open .nav__brand{color:#3a2314;text-shadow:none}
  .nav--open .nav__burger span{background:#3a2314}
}
@media (max-width:420px){ .nav__logo{height:38px} }

/* ============================================================
   HERO - full-bleed key art, logo staged in the scene
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  /* extra bottom room so the tentacle divider never reaches the buttons */
  padding:0 clamp(1.2rem,4vw,2.5rem) clamp(8.5rem,17vw,15rem) clamp(1.2rem,5vw,4.5rem);
}

/* ---- the scene ---- */
.hero__scene{position:absolute;inset:-4%;z-index:1;pointer-events:none;will-change:transform}
.hero__art{
  width:100%;height:100%;object-fit:cover;object-position:44% 38%;
  animation:artSettle 2.4s var(--ease) both;
}
@keyframes artSettle{
  from{transform:scale(1.09);opacity:.55}
  to{transform:scale(1);opacity:1}
}

/* ---- lighting pass ---- */
/* warm sun bloom, top right (screen blend = additive light) */
.light-sun{
  position:absolute;inset:0;z-index:2;mix-blend-mode:screen;
  background:radial-gradient(44% 34% at 76% 4%,rgba(255,240,180,.6),rgba(255,208,110,.2) 46%,transparent 70%);
  animation:sunPulse 9s ease-in-out infinite,heroFade 1.8s ease .3s both;
}
@keyframes sunPulse{0%,100%{opacity:1}50%{opacity:.7}}
/* volumetric god rays sweeping from the sun */
.light-rays{
  position:absolute;top:-18%;right:-12%;width:95%;height:115%;z-index:2;
  transform-origin:80% 0%;mix-blend-mode:screen;
  background:repeating-linear-gradient(62deg,rgba(255,243,200,.16) 0 14px,transparent 14px 62px);
  -webkit-mask:radial-gradient(125% 100% at 80% 0%,#000 0%,rgba(0,0,0,.5) 38%,transparent 66%);
  mask:radial-gradient(125% 100% at 80% 0%,#000 0%,rgba(0,0,0,.5) 38%,transparent 66%);
  animation:raysDrift 16s ease-in-out infinite,heroFade 1.8s ease .4s both;
}
@keyframes raysDrift{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.2deg)}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}

/* floating ink motes / city dust */
.hero__motes {position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.maker__motes {position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__motes, .maker__motes {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%);
}

/* cinematic grade: corner vignette + scrim anchored to the content side.
   bottom stays light so the sunlit tentacle divider matches the scene */
.hero__vignette{
  position:absolute;inset:0;z-index:3;
  background:
    radial-gradient(120% 90% at 55% 28%,transparent 55%,rgba(16,8,36,.4) 100%),
    radial-gradient(62% 74% at 16% 82%,rgba(16,8,36,.42),transparent 62%),
    linear-gradient(180deg,transparent 58%,rgba(16,8,36,.24) 80%,rgba(16,8,36,.34) 100%);
}

/* warm haze at the bottom of the scene: the city melts into the next page,
   so nothing hard shows through the translucent tentacles */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:clamp(70px,10vw,150px);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,244,226,0),rgba(255,244,226,.55) 62%,var(--cream));
}

/* ---- content, staged lower-left so the squid owns the frame ---- */
.hero__content{
  position:relative;z-index:4;text-align:start;
  display:flex;flex-direction:column;align-items:flex-start;
  max-width:760px;
}
.hero__logo{
  width:min(600px,46vw);
  filter:drop-shadow(0 20px 34px rgba(10,5,25,.6));
  animation:logoLand .9s var(--pop) .45s both,logoFloat 6.5s ease-in-out 1.6s infinite;
}
@keyframes logoLand{from{opacity:0;transform:translateY(-46px) scale(.84)}to{opacity:1;transform:none}}
@keyframes logoFloat{50%{transform:translateY(-9px) rotate(-.8deg)}}
.hero__title{
  margin-top:1.2rem;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,4.5vw,3.7rem);line-height:1.1;
  letter-spacing:.01em;color:#fff;
  text-shadow:0 3px 0 rgba(13,42,80,.45),0 10px 24px rgba(10,25,55,.5);
  animation:rise .7s var(--ease) .75s both;
}
.hero__cta{
  display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;
  margin-top:1.7rem;
  animation:rise .7s var(--ease) .9s both;
}
.hero__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.hero__platform{
  font-family:var(--font-display);font-weight:500;font-size:.95rem;
  color:rgba(255,255,255,.85);letter-spacing:.06em;
  text-shadow:0 2px 8px rgba(10,5,25,.7);
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============================================================
   TENTACLE DIVIDER - crawls over the seam between pages,
   like Slime Rancher's cloud bands
   ============================================================ */
/* the hero → kitchen divider is the .tide--hero wave; its rules live with the
   other .tide styles further down (they must come after the .tide base). */

/* ============================================================
   ACT 1 · THE KITCHEN - next page builds here
   ============================================================ */
.act{position:relative;background:var(--cream)}

/* ---------- ACT 1 · THE KITCHEN ---------- */
.act--kitchen{
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(4rem,9vw,7rem);
  padding:clamp(5rem,10vw,8.5rem) clamp(1.2rem,4vw,3rem) clamp(6rem,11vw,9rem);
  /* the coral wave melts into warm cream: solid head = zero seam with the band */
  /* continues the wave's solid bottom (#e67041) then warms up to cream */
  background:linear-gradient(180deg,#e67041 0,#ee8352 70px,rgb(255 199 163) 240px,var(--cream) 400px);
}
/* floating doodle wallpaper framing the sides */
.act--kitchen::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;
  pointer-events:none;
  background:
    url("assets/pattern-doodles -2.png") left top repeat-y,
    url("assets/pattern-doodles -2.png") right top repeat-y;
  background-size: 360px auto;
  opacity:.16;
  /* fade the doodles in well below the wave seam so none peek into the
     transition and read as stray glitch icons */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 300px,#000 440px,#000 calc(100% - 280px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 300px,#000 440px,#000 calc(100% - 280px),transparent 100%);
}

/* section title + squid-ink drip motif */
.act__head{
  position:relative;z-index:3;width:max-content;max-width:92%;
  margin:0 auto clamp(3rem,7vw,5rem);text-align:center;
}
.act__heading{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1.04;color:#3a2314;
  text-shadow:0 2px 0 rgba(255,255,255,.4);
}
/* orange emphasis word - ties headings to the game's sunny palette */
.em{color:var(--orange-deep)}
/* ---- stage: gameplay loop playing behind the store icons ----
   Full-bleed band pulled up to the section's top edge so it starts right at
   the wave seam. The tint is opaque #e67041 at the very top (matches the
   wave's front crest = no seam) and fades to solid cream at the bottom
   (matches the kitchen bg where .about begins), so the video reads as a
   window in the gradient rather than a pasted-in box. */
.stage{
  position:relative;overflow:hidden;
  width:100vw;max-width:none;
  min-height:clamp(650px,80vh,950px);
  justify-content:center;
  /* cancel the section's top padding to meet the wave */
  margin-top:calc(-1 * clamp(5rem,10vw,8.5rem));
  padding:clamp(7rem,13vw,11rem) clamp(1.2rem,4vw,3rem) clamp(1rem,2vw,2rem);
  display:flex;flex-direction:column;align-items:center;
}
.stage__video{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;object-fit:cover;
}
.stage__tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    #e67041 0,
    rgba(230,112,65,.88) 13%,
    rgba(230,112,65,.62) 40%,
    rgba(238,140,98,.72) 68%,
    rgba(255,224,193,.95) 92%,
    var(--cream) 100%);
}
.stage>.platforms{z-index:2}
/* lift the heading off the moving footage */
.stage .act__heading{text-shadow:0 2px 16px rgba(255,236,214,.5),0 1px 0 rgba(255,255,255,.35)}

/* ---- platforms: where the game is headed (Steam + itch.io), centered ---- */
.platforms{
  position:relative;z-index:3;width:100%;max-width:880px;margin:0 auto;text-align:center;
}
.platforms .act__heading{margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.platforms__row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.2rem,3vw,2.6rem);
}
.platform{
  flex:0 1 clamp(110px,14vw,170px);
  display:flex;flex-direction:column;align-items:center;gap:0.7rem;
  padding:clamp(0.8rem,1.5vw,1.2rem) clamp(0.6rem,1.2vw,1rem);
  background:linear-gradient(180deg,#fffdf7,#fff1de);
  border-radius:12px;color:#2a1d12;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.85),0 8px 0 #edc59c,0 26px 44px rgba(120,50,10,.26);
  transition:transform .25s var(--pop),box-shadow .25s var(--ease);
}
.platform:hover{transform:translateY(-6px);box-shadow:inset 0 3px 0 rgba(255,255,255,.85),0 12px 0 #edc59c,0 30px 50px rgba(120,50,10,.32)}
.platform:active{transform:translateY(2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.85),0 4px 0 #edc59c,0 16px 30px rgba(120,50,10,.28)}
.platform__logo{width:clamp(32px,4vw,48px);height:auto;color:#2a1d12}
.platform__name{font-family:var(--font-display);font-weight:700;font-size:clamp(0.95rem,1.2vw,1.15rem);line-height:1}
@media (max-width:560px){ .platform{flex-basis:min(320px,82vw)} }

/* ---- about the game + screenshot gallery ---- */
.about{position:relative;z-index:3;max-width:720px;text-align:center}
.about .act__heading{margin-bottom:0}
/* the Steam hook line - short, punchy, sits above the pitch */
.about__hook{
  margin-top:1.1rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.25rem,2vw,1.72rem);line-height:1.25;color:#3a2314;
  text-wrap:balance;
}
.about__lead{
  margin-top:1.3rem;font-size:clamp(1.1rem,1.5vw,1.42rem);line-height:1.6;
  color:#6a4830;font-weight:700;text-wrap:pretty;
}
.shots{
  position:relative;z-index:3;width:100%;max-width:1120px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.5rem);
}
.shot{margin:0}
.shot--wide{grid-column:auto}
.shot img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:14px;border:4px solid #fffdf7;
  box-shadow:0 7px 0 #edc59c,0 18px 32px rgba(120,50,10,.24);
  transition:transform .3s var(--ease);
}
.shot:hover img{transform:translateY(-5px)}
.shot figcaption{
  margin-top:.7rem;font-family:var(--font-display);font-weight:600;
  font-size:clamp(.9rem,1.1vw,1.02rem);color:#8a5a38;text-align:center;
}
@media (max-width:720px){ .shots{grid-template-columns:1fr;max-width:440px} }

/* ---------- abilities: alternating feature rows ----------
   Hollow-Knight model: a text column that LISTS the moves as bullets,
   set beside one big clean screenshot. Rows alternate sides. No chunky
   cards: the game art is the visual. */
.moves{
  position:relative;z-index:3;width:100%;max-width:1080px;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(3rem,6.5vw,5.5rem);
}
.feature{
  display:grid;grid-template-columns:1fr 1.1fr;align-items:center;
  gap:clamp(1.8rem,4.5vw,4rem);
}
/* flipped rows put the screenshot on the left */
.feature--flip .feature__media{order:-1}
.feature__name{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.03;color:#3a2314;
  text-shadow:0 2px 0 rgba(255,255,255,.45);
}
.feature__lead{
  margin-top:1rem;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;
  color:#6a4830;font-weight:700;text-wrap:pretty;
}
/* the listed moves */
.ability-list{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.95rem}
.ability-list li{
  position:relative;padding-inline-start:1.9rem;
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5;color:#6a4830;
  font-weight:700;text-wrap:pretty;
}
.ability-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.42em;width:.7rem;height:.7rem;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px rgba(255,106,30,.16);
}
.ability-list strong{color:#3a2314;font-weight:800}
.feature__media{margin:0}
.feature__media img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:18px;border:5px solid #fffdf7;
  box-shadow:0 18px 40px rgba(120,50,10,.28);
  transition:transform .35s var(--ease);
}
.feature:hover .feature__media img{transform:translateY(-6px)}
@media (max-width:760px){
  .feature{grid-template-columns:1fr;gap:1.3rem;max-width:520px;margin:0 auto}
  .feature--flip .feature__media{order:0}
}

/* ---------- gameplay gallery: a swipeable screenshot carousel ----------
   One big cinematic shot at a time, each with its own title + blurb on a
   scrim. Chunky round arrows + dots, matches the cream-card language. */
.gallery{position:relative;z-index:3;width:100%;max-width:1080px;margin:0 auto;text-align:center}
.gallery__lead{
  margin:1rem auto 0;max-width:44em;
  font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;
  color:#6a4830;font-weight:700;text-wrap:pretty;
}
.carousel{position:relative;margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.carousel__viewport{overflow:hidden;border-radius:22px}
.carousel__track{display:flex;transition:transform .6s var(--ease);will-change:transform}
.slide{position:relative;flex:0 0 100%;margin:0;line-height:0}
.slide img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:22px;border:5px solid #fffdf7;
  box-shadow:0 18px 40px rgba(120,50,10,.28);
  -webkit-user-drag:none;user-select:none;
}
/* caption on a gradient scrim, reading-side aligned */
.slide__cap{
  position:absolute;inset-inline-start:5px;inset-block-end:5px;inset-inline-end:5px;
  text-align:start;line-height:1.2;
  padding:clamp(1.1rem,3vw,2rem) clamp(1.2rem,3vw,2.1rem) clamp(1rem,2.4vw,1.6rem);
  border-radius:0 0 17px 17px;
  background:linear-gradient(to top,rgba(12,20,28,.9),rgba(12,20,28,.55) 45%,rgba(12,20,28,0));
  color:#fff;pointer-events:none;
}
/* some shots carry their own text at the bottom (in-game dialogue) -
   lift the caption to the top so nothing collides */
.slide__cap--top{
  inset-block-start:5px;inset-block-end:auto;
  border-radius:17px 17px 0 0;
  background:linear-gradient(to bottom,rgba(12,20,28,.9),rgba(12,20,28,.5) 55%,rgba(12,20,28,0));
}
.slide__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.4rem,2.6vw,2.1rem);color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.slide__title .em{color:#ff8f4d}
.slide__text{
  margin-top:.45rem;max-width:40em;
  font-size:clamp(.98rem,1.25vw,1.16rem);line-height:1.5;
  color:rgba(255,255,255,.9);font-weight:700;text-wrap:pretty;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
/* chunky round arrows */
.carousel__arrow{
  position:absolute;top:calc(50% - 2.2rem);transform:translateY(-50%);z-index:4;
  width:clamp(42px,4.4vw,54px);height:clamp(42px,4.4vw,54px);
  display:grid;place-items:center;border:0;cursor:pointer;border-radius:50%;
  color:#fff;background:linear-gradient(180deg,#ff9346,#f3610e);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 #cf4d08,0 10px 20px rgba(120,45,10,.35);
  transition:transform .2s var(--pop),box-shadow .2s var(--ease),opacity .2s var(--ease);
}
.carousel__arrow:hover{transform:translateY(-50%) scale(1.08) rotate(-3deg)}
.carousel__arrow:active{transform:translateY(-50%) scale(.94);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 #cf4d08,0 5px 12px rgba(120,45,10,.3)}
.carousel__arrow--prev{inset-inline-start:clamp(-1.8rem,-2.5vw,-3.2rem)}
.carousel__arrow--next{inset-inline-end:clamp(-1.8rem,-2.5vw,-3.2rem)}
/* arrows point in reading order - flip the glyphs under RTL */
[dir="rtl"] .carousel__arrow svg{transform:scaleX(-1)}
/* dots */
.carousel__dots{display:flex;justify-content:center;gap:.6rem;margin-top:1.3rem}
.carousel__dot{
  width:11px;height:11px;padding:0;border:0;cursor:pointer;border-radius:50%;
  background:rgba(120,70,30,.28);transition:transform .2s var(--pop),background .2s var(--ease);
}
.carousel__dot:hover{background:rgba(120,70,30,.5)}
.carousel__dot[aria-selected="true"]{background:var(--orange);transform:scale(1.35)}
@media (max-width:600px){
  .carousel__arrow{top:auto;bottom:calc(100% + .1rem);display:none}
}

/* ---------- devlog: a shelf of the channel's latest videos ---------- */
.devlog{position:relative;z-index:3;width:100%;max-width:1120px;margin:0 auto;text-align:center}
.devlog__lead{
  margin:1rem auto 0;max-width:44em;
  font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;
  color:#6a4830;font-weight:700;text-wrap:pretty;
}
.vcarousel{position:relative;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.vcarousel__viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
  padding:.4rem;margin:-.4rem;
}
.vcarousel__viewport::-webkit-scrollbar{display:none}
.vcarousel__track{
  display:flex;gap:clamp(.9rem,1.6vw,1.3rem);margin:0;padding:0;list-style:none;
}
.vcard{
  flex:0 0 calc((100% - clamp(.9rem,1.6vw,1.3rem))/2);
  scroll-snap-align:start;min-width:0;
}
@media (max-width:640px){ .vcard{flex-basis:86%} }
.vcard__link{
  display:flex;flex-direction:column;height:100%;cursor:pointer;
  background:#fffdf7;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 24px rgba(120,50,10,.18);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.vcard__link:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(120,50,10,.28)}
.vcard__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#222}
.vcard__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vcard__play{
  position:absolute;inset:0;margin:auto;width:54px;height:54px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(243,97,14,.94);color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .22s var(--pop),background .22s var(--ease);
}
.vcard__play svg{margin-inline-start:3px}
.vcard__link:hover .vcard__play{transform:scale(1.12);background:var(--orange)}
/* runtime badge - also a visual cue that these are full videos, not Shorts */
.vcard__time{
  position:absolute;inset-block-end:.5rem;inset-inline-end:.5rem;
  padding:.15em .45em;border-radius:5px;
  background:rgba(8,14,20,.82);color:#fff;
  font-family:var(--font-body);font-weight:800;font-size:.8rem;line-height:1.35;
  letter-spacing:.01em;
}
.vcard__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding:.85rem 1rem 1rem;text-align:start;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.3;color:#3a2314;
}
/* arrows reuse .carousel__arrow; nudge them just outside the shelf */
.vcarousel__arrow--placeholder{}
.vcarousel .carousel__arrow--prev{inset-inline-start:clamp(-3rem,-4vw,-5rem)}
.vcarousel .carousel__arrow--next{inset-inline-end:clamp(-3rem,-4vw,-5rem)}
.devlog__sub{margin-top:clamp(1.6rem,3vw,2.2rem)}
@media (max-width:600px){
  .vcarousel__arrow{display:none}
}

/* lightbox */
.vlightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem)}
.vlightbox[hidden]{display:none}
.vlightbox__backdrop{position:absolute;inset:0;background:rgba(8,14,20,.82);backdrop-filter:blur(3px);animation:vlb-fade .2s var(--ease)}
.vlightbox__frame{
  position:relative;width:min(1000px,100%);aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,.55);animation:vlb-pop .28s var(--pop);
}
.vlightbox__player,.vlightbox__player iframe{width:100%;height:100%;border:0;display:block}
.vlightbox__close{
  position:absolute;top:-.2rem;inset-inline-end:-.2rem;z-index:2;transform:translate(0,-110%);
  width:42px;height:42px;display:grid;place-items:center;border:0;cursor:pointer;border-radius:50%;
  color:#3a2314;background:#fffdf7;box-shadow:0 6px 16px rgba(0,0,0,.4);
  transition:transform .2s var(--pop)}
.vlightbox__close:hover{transform:translate(0,-110%) scale(1.1) rotate(90deg)}
@media (max-width:640px){ .vlightbox__close{transform:none;top:.4rem;inset-inline-end:.4rem} .vlightbox__close:hover{transform:scale(1.1) rotate(90deg)} }
@keyframes vlb-fade{from{opacity:0}to{opacity:1}}
@keyframes vlb-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* ---------- enemies: a sunny "case file" corkboard ----------
   the hunters pinned as tilted evidence photos with handwritten dossier notes. */
.foes{position:relative;z-index:3;width:100%;max-width:1040px;margin:0 auto}
.foes__head{text-align:center;max-width:40em;margin:0 auto clamp(2.4rem,4.5vw,3.4rem)}
.foes__head .feature__name{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.foes__head .feature__lead{margin-top:.9rem}

/* the board: warm kraft panel with a stamped file tab */
.board{
  position:relative;
  padding:clamp(2.6rem,5vw,4rem) clamp(1.5rem,4vw,3rem) clamp(2.6rem,5vw,4rem);
  border-radius:22px;
  /* warm peach-coral board in the page's sunny palette (a light tint of the
     coral), with the same chunky cream-card treatment used elsewhere */
  background:linear-gradient(160deg,#ffd6b0,#f4b98d);
  box-shadow:
    inset 0 0 0 7px rgba(255,247,236,.55),
    inset 0 3px 0 rgba(255,255,255,.6),
    0 12px 0 #e79b64,
    0 30px 50px rgba(120,50,10,.26);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  justify-items:center;align-items:start;
}
.board::before{
  content:"CASE FILE";
  position:absolute;top:-15px;left:50%;transform:translateX(-50%) rotate(-1.5deg);
  font-family:var(--font-display);font-weight:800;font-size:.82rem;letter-spacing:.18em;
  color:#e8460c;background:#fff4e2;padding:.42em 1.15em;border-radius:8px;
  border:2px solid #ffb583;box-shadow:0 4px 9px rgba(120,50,10,.26);
}

/* one pinned dossier = a polaroid + a handwritten note */
.dossier{position:relative;width:min(100%,300px);display:flex;flex-direction:column;align-items:center}
.dossier--a{transform:rotate(-2.5deg)}
.dossier--b{transform:rotate(2.2deg)}
.polaroid{
  position:relative;width:100%;background:#fffdf7;padding:12px 12px 0;border-radius:4px;
  box-shadow:0 12px 24px rgba(90,50,15,.34);
}
.pin{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);z-index:3;
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff8f5f,#d6371c 68%);
  box-shadow:0 4px 6px rgba(60,20,10,.45),inset 0 -2px 3px rgba(120,20,10,.5);
}
.dossier__photo-wrap{
  position:relative;
  aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  border-radius:2px;background:radial-gradient(130% 100% at 50% 22%,#47535d,#222b33);
}
.dossier__photo{max-height:95%;width:auto;max-width:94%;filter:drop-shadow(0 8px 12px rgba(10,15,20,.5))}
/* the squid's ink, splattered over each mugshot */
/* ink splattered over each mugshot, clipped to the photo frame (photo-wrap is
   overflow:hidden). Static, no animation. */
.ink{
  position:absolute;z-index:4;pointer-events:none;
  left:-8%;top:2%;width:88%;opacity:.92;
}
.dossier--b .ink{top:6%;left:8%;width:86%}
.polaroid__name{
  display:block;text-align:center;padding:.45rem 0 .65rem;
  font-family:"Caveat",cursive;font-weight:700;font-size:1.55rem;color:#2e2016;line-height:1;
}
.note{
  margin-top:1.1rem;max-width:250px;padding:.7rem 1.05rem;border-radius:3px;
  background:#fff8e6;color:#5a3a1e;
  font-family:"Caveat",cursive;font-weight:600;font-size:1.14rem;line-height:1.28;
  box-shadow:0 7px 15px rgba(90,50,15,.22);transform:rotate(1.6deg);
}
.dossier--a .note{transform:rotate(-1.6deg)}
@media (max-width:720px){
  .board{grid-template-columns:1fr;max-width:340px;margin:0 auto;gap:clamp(2.4rem,7vw,3.2rem)}
}

/* ---------- collectables: pickup showcase ----------
   Hollow-Knight "content packs" pattern: a centered opener, then a row of
   items, each item art + name + one line. Floating item renders, no cards. */
.loot{position:relative;z-index:3;width:100%;max-width:1000px;margin:0 auto}
.loot__head{text-align:center;max-width:40em;margin:0 auto clamp(2.2rem,4.5vw,3.4rem)}
.loot__head .feature__name{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.loot__head .feature__lead{margin-top:.9rem}
.loot__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,3rem);
}
.loot__item{display:flex;flex-direction:column;align-items:center;text-align:center}
.loot__art{
  width:clamp(120px,15vw,176px);height:auto;
  filter:drop-shadow(0 16px 22px rgba(120,50,10,.32));
  animation:lootBob 4.5s ease-in-out infinite;
}
.loot__item:nth-child(2) .loot__art{animation-delay:-1.5s}
.loot__item:nth-child(3) .loot__art{animation-delay:-3s}
@keyframes lootBob{50%{transform:translateY(-12px)}}
.loot__count{
  margin-top:.6rem;font-family:var(--font-display);font-weight:800;
  font-size:1.05rem;color:#fff;background:var(--orange);
  padding:.16em .75em;border-radius:999px;
  box-shadow:0 3px 0 var(--orange-deep),0 8px 14px rgba(120,50,10,.3);
}
.loot__name{
  margin-top:1rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.15rem,1.7vw,1.45rem);color:#3a2314;line-height:1.1;
}
.loot__desc{
  margin-top:.4rem;max-width:22ch;
  font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.5;color:#6a4830;font-weight:700;
}
@media (max-width:720px){
  .loot__grid{grid-template-columns:1fr;max-width:340px;margin:0 auto;gap:2.6rem}
}
@media (prefers-reduced-motion:reduce){ .loot__art{animation:none} }

/* ============================================================
   FINALE · SEND HIM HOME - wishlist end-cap, socials, footer
   ============================================================ */
.act--sea{
  position:relative;overflow:hidden;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.2rem,4vw,3rem) clamp(3.5rem,7vw,5.5rem);
  /* the sunny city keyart sits behind everything as a texture */
  background:#c2471c url("assets/city.jpg") center/cover no-repeat;
}
/* coral wash over the city so it reads as a warm texture, not a photo;
   the wash is solid coral at the top/bottom edges so the tide + dive seams
   stay exact, and lighter in the middle where the city shows through */
.act--sea::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    #e56c3d 0,
    rgba(229,108,61,.82) 15%,
    rgba(211,84,42,.74) 50%,
    rgba(198,73,29,.84) 86%,
    #c2471c 100%);
}
/* two columns: the wishlist CTA on the left, the trailer on the right.
   wide so the pair fills the screen instead of floating in the middle;
   the trailer column is the larger one. */
.sea__grid{
  position:relative;z-index:1;
  width:100%;max-width:1360px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.28fr;align-items:center;
  gap:clamp(2.5rem,5vw,5.5rem);
}
.sea__col{display:flex;flex-direction:column;align-items:center;text-align:center}

/* trailer panel - poster + play badge (swap for a real YouTube embed later) */
.sea__trailer{width:100%}
.trailer{
  display:block;position:relative;width:100%;aspect-ratio:16/9;cursor:pointer;padding:0;
  border-radius:20px;overflow:hidden;border:5px solid #fffdf7;background:#0a2f3d;
  box-shadow:0 18px 42px rgba(90,25,5,.42);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.trailer:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(90,25,5,.48)}
.trailer__thumb{width:100%;height:100%;object-fit:cover;display:block}
.trailer__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(62px,7vw,88px);height:clamp(62px,7vw,88px);border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#ff9346,#f3610e);
  box-shadow:0 6px 0 #cf4d08,0 14px 26px rgba(120,45,10,.5);
  transition:transform .25s var(--pop);
}
.trailer:hover .trailer__play{transform:translate(-50%,-50%) scale(1.08)}
.trailer__play svg{width:42%;height:42%;margin-left:9%}
.trailer__label{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1rem .95rem;
  font-family:var(--font-display);font-weight:700;color:#fff;
  font-size:clamp(1rem,1.3vw,1.18rem);text-align:center;
  background:linear-gradient(0deg,rgba(6,22,29,.72),transparent);
}
@media (max-width:820px){
  .sea__grid{grid-template-columns:1fr;max-width:540px;gap:clamp(2.2rem,6vw,3rem)}
}

/* ---------- meet the maker - page closer (below the finale, HK-style) ----------
   the deepest water: continues from the finale's base (#c2471c) and holds the
   footer at the very bottom. */
.act--maker{
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
  padding:clamp(1.5rem,3.5vw,3rem) clamp(1.2rem,4vw,3rem) 0;
  /* the payoff: below the coral sunset, the deep sea he swims home to */
  background:linear-gradient(180deg,#0f4a5c 0,#0a2f3d 100%);
}
/* soft light glow centred behind the portrait, like sun through water */
.maker__person{position:relative}
.maker__person::before{
  content:"";position:absolute;z-index:0;left:50%;
  top:clamp(75px,10vw,105px);transform:translate(-50%,-50%);
  width:clamp(280px,38vw,400px);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(125,210,230,.34),transparent 72%);
  pointer-events:none;
}
.maker__person>*{position:relative;z-index:1}

/* ---------- dive: the coral surface breaks into the deep sea ---------- */
.dive{position:relative;z-index:2;line-height:0;background:#c2471c;margin-bottom:-1px;overflow:hidden}
.dive__svg{display:block;width:100%;height:clamp(70px,9vw,120px)}
.dive__back{fill:#1a5f72}
.dive__front{fill:#0f4a5c}
.act--maker :focus-visible{outline-color:var(--cream)}
.maker{max-width:760px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
.maker__logo{
  width:clamp(190px,25vw,310px);height:auto;
  filter:drop-shadow(0 10px 22px rgba(110,28,4,.32));
}
.maker__intro{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.7;
  color:rgba(255,255,255,.92);font-weight:700;text-wrap:pretty;
}
.maker__person{margin:clamp(2.2rem,4.5vw,3.4rem) 0 0;display:flex;flex-direction:column;align-items:center}
.maker__photo{
  width:clamp(150px,20vw,210px);height:clamp(150px,20vw,210px);
  border-radius:50%;object-fit:cover;object-position:50% 38%;
  border:5px solid var(--cream);
  box-shadow:0 18px 40px rgba(3,26,34,.55),0 0 0 1px rgba(255,106,30,.35);
  /* pull the photo's own colours toward the page palette (warm orange / teal) */
  filter:saturate(.82) contrast(1.05) sepia(.14) hue-rotate(-8deg);
}
/* soft duotone wash over the photo - orange top-left, steam blue bottom-right */
.maker__person::after{
  content:"";position:absolute;z-index:2;left:50%;top:0;
  transform:translateX(-50%);
  width:clamp(150px,20vw,210px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(155deg,rgba(255,106,30,.28),rgba(27,111,196,.30));
  mix-blend-mode:soft-light;pointer-events:none;
}
.maker__name{
  margin-top:1.2rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.3rem,2vw,1.6rem);color:#fff;
}
.maker__role{
  margin-top:.5rem;max-width:26em;
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.55;
  color:rgba(255,255,255,.85);font-weight:700;
}

/* ---------- tide: clean layered wave that rises out of the cream into the
   finale (replaces the old textured surf band) ---------- */
.tide{
  position:relative;z-index:8;line-height:0;background:var(--cream);
  margin-bottom:-1px;overflow:hidden;pointer-events:none;
}
.tide__svg{display:block;width:100%;height:clamp(90px,12vw,160px)}
/* both crests fill down to the viewBox bottom (y=160), so however the surface
   sloshes, the seam with the finale stays solid; the back crest is drawn
   oversized (-120..1560) so it never bares an edge. Motion = SMIL path morph
   in the markup; reduced-motion is handled in script.js (freezes the wave). */
.tide__back{fill:#f2946a}
.tide__front{fill:#e56c3d}

/* hero → kitchen divider: the same layered wave, pulled up over the city art.
   Transparent above the crests so the key art shows through, and the front
   crest is the kitchen's exact top colour (#e67041) = zero seam.
   (Replaced the old tentacle band - owner wanted the water animation here.)
   Reduced motion is handled in script.js, which strips `.tide animate`. */
.tide--hero{
  z-index:9;background:transparent;
  margin-top:calc(-1 * clamp(60px,7vw,110px));
}
.tide--hero .tide__svg{height:clamp(110px,14vw,190px)}
.tide--hero .tide__back{fill:#ee8352}
.tide--hero .tide__front{fill:#e67041}
.act--sea :focus-visible{outline-color:var(--cream)}
.sea__squid-wrap{line-height:0}
.sea__squid{
  width:clamp(170px,18vw,250px);
  filter:drop-shadow(0 16px 28px rgba(110,28,4,.4));
  animation:squidBob 6s ease-in-out infinite;
}
@keyframes squidBob{50%{transform:translateY(-10px) rotate(2deg)}}
.sea__heading{
  margin-top:1.5rem;color:#fff;
  text-shadow:0 3px 0 rgba(140,40,5,.35),0 10px 24px rgba(110,28,4,.3);
}
.sea__lead{
  margin-top:1rem;max-width:34em;
  font-size:clamp(1.05rem,1.4vw,1.32rem);line-height:1.6;
  color:#ffe0c9;text-wrap:pretty;
}
.sea__buttons{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:1.05rem;margin-top:2.4rem;width:100%;max-width:460px;
}
/* bigger, full-width CTA buttons in the finale column */
.sea__buttons .btn{
  width:100%;justify-content:center;
  font-size:1.55rem;padding:1.1em 1.8em;border-radius:22px;
}
/* these buttons are too wide for the round rising-liquid fill (its curved
   edge leaves the square corners uncovered), so use a full-cover fade */
.sea__buttons .btn::before{
  left:0;bottom:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;
  transform:none;opacity:0;transition:opacity .35s var(--ease);
}
.sea__buttons .btn:hover::before{transform:none;opacity:1}
.sea__socials{display:flex;gap:1.15rem;margin-top:2.8rem}
.social{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(180deg,#fffdf7,#ffedd8);color:#c2471c;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 5px 0 #953711,0 14px 24px rgba(90,25,5,.32);
  transition:transform .25s var(--pop),box-shadow .25s var(--ease);
}
.social:hover{transform:translateY(-4px) rotate(-4deg)}
.social:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 2px 0 #953711,0 8px 14px rgba(90,25,5,.28);
}
.social svg{width:31px;height:31px}

/* frosted-glass buttons + socials so the city texture shows through (finale only) */
.sea__buttons .btn--steam{
  background:linear-gradient(180deg,rgba(255,150,74,.66),rgba(240,98,20,.66));
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
  backdrop-filter:blur(9px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 rgba(179,66,12,.5),0 14px 26px rgba(120,45,10,.3);
}
.sea__buttons .btn--light{
  background:rgba(255,253,247,.5);
  border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 0 rgba(20,40,60,.13),0 14px 26px rgba(20,30,60,.24);
}
.sea__socials .social{
  background:rgba(255,253,247,.46);
  border:1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 rgba(120,45,10,.26),0 12px 20px rgba(90,25,5,.24);
}

.footer{
  width:100%;margin-top:clamp(3.2rem,6.5vw,5rem);
  padding:1.7rem 1rem 1.9rem;
  border-top:2px solid rgba(255,244,226,.18);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
.footer__credit{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:#fff}
.footer__legal{font-size:.85rem;color:rgba(255,232,214,.72)}

/* ---------- scroll reveals ----------
   Only hidden once JS confirms it will drive them (.js-reveal on <html>);
   a failsafe in script.js guarantees .in is set even if the observer never
   fires, so content is never permanently gated behind the animation. */
.js-reveal .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--rd,0s);
}
.js-reveal .reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
  /* logo goes up into the sky; copy + CTA anchor at the bottom,
     so the squid's face stays visible between them */
  .hero{align-items:center;padding-top:5.6rem;padding-bottom:clamp(6rem,16vh,8rem);padding-left:clamp(1.2rem,4vw,2.5rem)}
  .hero__content{flex:1;width:100%;align-items:center;text-align:center;max-width:none}
  .hero__art{object-position:55% 38%}
  .hero__logo{width:min(350px,84vw)}
  .hero__title{margin-top:auto;font-size:clamp(1.8rem,8.5vw,2.4rem)}
  .btn--lg{font-size:1.15rem;padding:1em 2em}
  .hero__cta{align-items:center}
  .hero__buttons{justify-content:center}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero__art,.hero__logo,.hero__title,.hero__cta{opacity:1!important;transform:none!important}
  .js-reveal .reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   ARABIC / RTL  (applied when <html dir="rtl">)
   ============================================================ */
[dir="rtl"]{
  /* swap to Arabic-script fonts (Baloo Bhaijaan 2 = the Arabic sibling of Baloo 2) */
  --font-display:"Baloo Bhaijaan 2","Cairo",sans-serif;
  --font-body:"Cairo","Nunito",sans-serif;
}
[dir="rtl"] .hero__title{letter-spacing:0}
/* the handwriting font is Latin-only, so use the Arabic body font for the notes */
[dir="rtl"] .note,[dir="rtl"] .polaroid__name{font-family:"Cairo",sans-serif}
/* translate the CSS-generated stamp */
[dir="rtl"] .board::before{content:"ملف سرّي"}
[dir="rtl"] .maker__role{max-width:34em}