/* ============================================================
   RIMAN — game page (Sakiyama)
   ============================================================ */

:root{ --ember:#FFB36B; --danger:#FF4F6D; }

/* breadcrumbs */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
}
.crumbs a{ color:var(--ink-dim); transition:color .3s; }
.crumbs a:hover{ color:var(--cyan); }
.crumbs [aria-current]{ color:var(--cyan); }

/* ---------------------------------------------------------- hero */
.ghero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:calc(var(--header-h) + clamp(1rem,3vh,2.5rem));
  padding-bottom:clamp(1.2rem,2.2vh,2rem);
  overflow:hidden; isolation:isolate;
}
.ghero__media{ position:absolute; inset:0; z-index:-4; overflow:hidden; }
.ghero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.18);
  filter:saturate(.7) brightness(.62) contrast(1.1);
  animation:kenburns 26s var(--ease-io) infinite alternate;
}
@keyframes kenburns{
  0%{ transform:scale(1.18) translate3d(0,0,0); }
  100%{ transform:scale(1.3) translate3d(-2.5%,-2%,0); }
}
.ghero__veil{
  position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(80% 60% at 70% 30%, transparent 0%, rgba(5,6,10,.55) 70%),
    linear-gradient(180deg, rgba(5,6,10,.6) 0%, rgba(5,6,10,.15) 35%, rgba(5,6,10,.7) 75%, var(--bg) 100%);
}
.ghero .hero__bg{ z-index:-2; }
.ghero__inner{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1rem,2.4vh,2.2rem);
}

.glitch{ position:relative; display:inline-block; }
.ghero__title{
  font-size:clamp(3rem, min(14.5vw, 22vh), 15rem);
  line-height:.85; letter-spacing:-.06em; font-weight:900;
  text-transform:uppercase;
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  font:inherit; font-family:var(--display); font-weight:900;
  font-size:clamp(3rem, min(14.5vw, 22vh), 15rem);
  line-height:.85; letter-spacing:-.06em; text-transform:uppercase;
  pointer-events:none; opacity:0;
}
.glitch::before{ color:var(--cyan); mix-blend-mode:screen; }
.glitch::after{ color:var(--danger); mix-blend-mode:screen; }
.glitch.is-live::before{ animation:glitchA 5.5s steps(1) infinite; }
.glitch.is-live::after{ animation:glitchB 5.5s steps(1) infinite; }
@keyframes glitchA{
  0%,91%,100%{ opacity:0; transform:none; clip-path:inset(0 0 0 0); }
  92%{ opacity:.8; transform:translate(-6px,2px); clip-path:inset(12% 0 62% 0); }
  94%{ opacity:.8; transform:translate(5px,-2px); clip-path:inset(58% 0 18% 0); }
  96%{ opacity:.6; transform:translate(-3px,0); clip-path:inset(30% 0 44% 0); }
}
@keyframes glitchB{
  0%,91%,100%{ opacity:0; transform:none; }
  92%{ opacity:.7; transform:translate(6px,-1px); clip-path:inset(64% 0 10% 0); }
  95%{ opacity:.7; transform:translate(-5px,3px); clip-path:inset(8% 0 70% 0); }
}

.ghero__lead{
  max-width:46ch; color:var(--ink-dim);
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.6;
}
.ghero__lead b{ color:var(--ink); }
.ghero__meta{ display:flex; gap:clamp(1.2rem,4vw,3.4rem); flex-wrap:wrap; }
@media (max-height:700px){
  .ghero__lead{ font-size:.92rem; }
  .ghero__title,.glitch::before,.glitch::after{ font-size:clamp(2.6rem, min(12vw, 17vh), 9rem); }
}

/* ---------------------------------------------------------- statement / mission */
.g-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(2rem,6vw,6rem); align-items:center;
}
@media (max-width:960px){ .g-grid{ grid-template-columns:1fr; } }
.g-statement{
  font-family:var(--display);
  font-size:clamp(1.3rem,2.7vw,2.35rem);
  line-height:1.24; letter-spacing:-.03em; font-weight:500;
  color:rgba(237,240,248,.45);
}
.g-statement b{ color:var(--ink); font-weight:700; }
.g-statement .hl{ color:var(--cyan); }

.dangers{ list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:0; border-top:1px solid var(--line); }
.danger{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:clamp(1.05rem,2vw,1.5rem); letter-spacing:-.03em;
  position:relative; overflow:hidden;
}
.danger::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,79,109,.14),transparent 60%);
  transform:translateX(-101%); transition:transform .7s var(--ease);
}
.danger:hover::before{ transform:none; }
.danger span{ position:relative; }
.danger i{
  position:relative; font-style:normal;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  color:var(--danger); text-transform:uppercase;
  display:flex; align-items:center; gap:.5rem;
}
.danger i::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--danger);
  animation:blink 1.4s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:.15; } }

/* gameplay loop ring */
.loop{ position:relative; width:min(100%,460px); aspect-ratio:1; margin-inline:auto; }
.loop svg{ width:100%; height:100%; overflow:visible; }
.loop__track{ fill:none; stroke:rgba(233,238,255,.1); stroke-width:.4; }
.loop__dash{
  fill:none; stroke:url(#loopGrad); stroke-width:.8; stroke-linecap:round;
  stroke-dasharray:18 140; transform-origin:50px 50px;
  animation:spin 7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loop__core{
  position:absolute; inset:32%; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle,rgba(79,240,224,.16),transparent 70%);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim);
}
.loop__core b{ display:block; font-family:var(--display); font-size:clamp(1rem,2vw,1.4rem); letter-spacing:-.03em; color:var(--ink); text-transform:none; margin-bottom:.2rem; }
.loop__node{
  position:absolute; transform:translate(-50%,-50%);
  padding:.55rem .9rem; border-radius:99px;
  background:rgba(8,10,17,.85); border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);
  font-size:.74rem; font-weight:700; white-space:nowrap;
  transition:border-color .4s, color .4s, box-shadow .4s;
}
.loop__node.is-on{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 30px -6px rgba(79,240,224,.6); }
.loop__node:nth-of-type(1){ left:50%; top:2%; }
.loop__node:nth-of-type(2){ left:92%; top:50%; }
.loop__node:nth-of-type(3){ left:50%; top:98%; }
.loop__node:nth-of-type(4){ left:8%; top:50%; }
/* keep long labels inside the viewport on narrow screens */
.loop{ padding:clamp(2.2rem,7vw,3.4rem) 0; }
@media (max-width:680px){
  .loop{ width:min(100%,320px); padding:2.6rem 0; }
  .loop__node{ font-size:.6rem; padding:.35rem .6rem; transform:none; }
  .loop__node:nth-of-type(2){ left:auto; right:0; translate:0 -50%; }
  .loop__node:nth-of-type(4){ left:0; translate:0 -50%; }
  .loop__node:nth-of-type(1){ left:50%; top:0; translate:-50% 0; }
  .loop__node:nth-of-type(3){ left:50%; top:auto; bottom:0; translate:-50% 0; }
}

/* ---------------------------------------------------------- whistler */
.whistler-sec{ background:var(--bg-soft); border-block:1px solid var(--line); overflow:hidden; }
.wgrid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,6rem); align-items:center;
}
@media (max-width:960px){ .wgrid{ grid-template-columns:1fr; } }
.orb-stage{ position:relative; aspect-ratio:1; width:min(100%,440px); margin-inline:auto; display:grid; place-items:center; }
.orb{
  width:26%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#bafff7 18%,var(--cyan) 42%,rgba(79,240,224,0) 72%);
  box-shadow:0 0 80px 20px rgba(79,240,224,.35), 0 0 160px 60px rgba(124,92,255,.18);
  animation:bob 4s var(--ease-io) infinite alternate;
}
@keyframes bob{ to{ transform:translateY(-14px) scale(1.04); } }
.orb-ring{
  position:absolute; inset:var(--in); border-radius:50%;
  border:1px solid rgba(79,240,224,var(--a));
  animation:spin var(--t) linear infinite;
}
.orb-ring::after{
  content:""; position:absolute; top:-4px; left:50%; width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 14px var(--cyan); translate:-50% 0;
}
.orb-ring--1{ --in:22%; --a:.35; --t:9s; }
.orb-ring--2{ --in:10%; --a:.2;  --t:16s; animation-direction:reverse; }
.orb-ring--3{ --in:0%;  --a:.1;  --t:26s; }
.orb-ring--3::after{ background:var(--violet); box-shadow:0 0 14px var(--violet); }

.abilities{ display:grid; gap:clamp(.7rem,1.4vw,1rem); margin-top:clamp(1.6rem,3vw,2.4rem); }
.ability{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center;
  padding:clamp(1rem,2vw,1.4rem);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
  transition:border-color .45s, background .45s, transform .6s var(--ease);
}
.ability:hover{ border-color:rgba(79,240,224,.45); background:rgba(79,240,224,.05); transform:translateX(8px); }
.ability__ico{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; position:relative; overflow:hidden;
  border:1px solid var(--line-strong); color:var(--cyan);
}
.ability__ico svg{ width:22px; height:22px; position:relative; z-index:1; }
.ability__ico--radar::before{
  content:""; position:absolute; inset:-50%;
  background:conic-gradient(from 0deg,rgba(79,240,224,.45),transparent 25%);
  animation:spin 2.6s linear infinite;
}
.ability__ico--path svg{ animation:nudge 2.2s var(--ease-io) infinite; }
@keyframes nudge{ 50%{ transform:translate(3px,-3px) rotate(8deg); } }
.ability__ico--shield::before{
  content:""; position:absolute; inset:8px; border-radius:50%;
  border:1px solid var(--cyan); animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{ 0%{ transform:scale(.5); opacity:.9; } 100%{ transform:scale(1.6); opacity:0; } }
.ability h3{ font-size:clamp(1rem,1.6vw,1.2rem); letter-spacing:-.02em; margin-bottom:.25rem; }
.ability p{ font-size:.84rem; color:var(--ink-mute); }

/* ---------------------------------------------------------- world (sticky scrollytelling) */
.world{ position:relative; height:280vh; --p:0; --out:0; --dark:0; }
.world__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center; gap:clamp(1rem,4vw,4rem);
  padding:calc(var(--header-h) + 1rem) var(--pad-x) 2rem;
  max-width:1560px; margin-inline:auto;
}
@media (max-width:900px){
  .world__stage{ grid-template-columns:1fr; grid-template-rows:auto 1fr; align-items:start; gap:1rem; }
}
.world__text{ position:relative; z-index:3; }
.world__text h2{ font-size:clamp(2rem,4.6vw,4rem); letter-spacing:-.045em; margin:.6rem 0 1.2rem; }
.world__text p{ color:var(--ink-dim); font-size:clamp(.92rem,1.1vw,1.04rem); }
.world__text .btn{ margin-top:1.6rem; }
@media (max-width:900px){
  .world__text p{ font-size:.86rem; }
  .world__text h2{ margin-bottom:.6rem; }
  .world__text .btn{ margin-top:1rem; }
}

.world__map{
  position:relative; width:100%; max-width:640px; aspect-ratio:1; justify-self:center;
  perspective:1000px;
}
@media (max-width:900px){ .world__map{ max-width:min(92vw,52svh); } }
.world__plane{
  position:absolute; inset:0;
  transform:rotateX(52deg) rotateZ(calc(-18deg + var(--p) * 30deg));
  transform-style:preserve-3d;
  transition:transform .2s linear;
}
.world__plane svg{ width:100%; height:100%; overflow:visible; }
.wm-grid{ stroke:rgba(233,238,255,.07); stroke-width:.2; }
.wm-bound{
  fill:rgba(79,240,224,.04); stroke:var(--cyan); stroke-width:.45;
  stroke-dasharray:2 1.6; animation:spin 40s linear infinite; transform-origin:50px 50px;
}
.wm-bound-pulse{ fill:none; stroke:rgba(79,240,224,.5); stroke-width:.3; transform-origin:50px 50px; animation:boundPulse 3s var(--ease) infinite; }
@keyframes boundPulse{ 0%{ transform:scale(.9); opacity:.8; } 100%{ transform:scale(1.15); opacity:0; } }
.wm-player{ fill:#fff; filter:drop-shadow(0 0 2px #fff); }
.wm-trail{ fill:none; stroke:rgba(255,255,255,.35); stroke-width:.35; stroke-dasharray:1 1.2; }
.wm-orb{ fill:var(--cyan); filter:drop-shadow(0 0 2.5px var(--cyan)); }

.world__dark{
  position:absolute; inset:-10%; z-index:2; pointer-events:none;
  background:radial-gradient(circle at 62% 55%,
     transparent calc(62% - var(--dark) * 50%),
     rgba(2,2,5,calc(.35 + var(--dark) * .6)) calc(80% - var(--dark) * 44%));
}
.world__tendrils{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:calc(var(--dark) * .9);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size:600px 600px;
  animation:fog 22s linear infinite;
  mask-image:radial-gradient(circle at 62% 55%, transparent 25%, #000 75%);
}
@keyframes fog{ to{ background-position:600px 300px; } }

.hud{
  position:absolute; z-index:4; right:var(--pad-x); top:calc(var(--header-h) + 1rem);
  display:flex; flex-direction:column; gap:.55rem; align-items:flex-end;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
}
.hud__zone{ padding:.4rem .75rem; border-radius:99px; border:1px solid rgba(79,240,224,.4); color:var(--cyan); background:rgba(5,6,10,.6); transition:all .4s; }
.world.is-out .hud__zone{ border-color:var(--danger); color:var(--danger); }
.hud__timer{
  font-family:var(--display); font-size:clamp(1.8rem,4vw,3.2rem); letter-spacing:-.04em;
  color:var(--ink); opacity:var(--out); font-variant-numeric:tabular-nums; text-transform:none;
}
.world.is-critical .hud__timer{ color:var(--danger); animation:blink .5s steps(2) infinite; }
.hud__hp{ width:160px; height:4px; border-radius:99px; background:rgba(233,238,255,.12); overflow:hidden; }
.hud__hp span{
  display:block; height:100%; border-radius:inherit;
  width:calc(100% - var(--dark) * 85%);
  background:linear-gradient(90deg,var(--danger),var(--ember));
}
@media (max-width:900px){ .hud{ top:auto; bottom:1.5rem; } }
.world__warn{
  position:absolute; z-index:4; left:50%; bottom:clamp(1.5rem,6vh,4rem); translate:-50% 0;
  font-family:var(--display); font-size:clamp(1rem,2.4vw,1.8rem); letter-spacing:-.03em;
  color:var(--danger); text-transform:uppercase; white-space:nowrap;
  opacity:0; transition:opacity .4s;
}
.world.is-critical .world__warn{ opacity:1; }
@media (max-width:900px){ .world__warn{ bottom:calc(1.5rem + 96px); font-size:.9rem; } }

/* ---------------------------------------------------------- spotlights */
.spot{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem); align-items:center;
}
.spot--rev .spot__media{ order:2; }
@media (max-width:900px){ .spot{ grid-template-columns:1fr; } .spot--rev .spot__media{ order:0; } }
.spot__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); aspect-ratio:576/515; margin:0;
}
.spot__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) brightness(.82) contrast(1.06);
  transition:filter .8s var(--ease);
}
.spot__media:hover img{ filter:saturate(1.05) brightness(.95); }
.spot__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(5,6,10,.7));
}
.spot__tag{
  position:absolute; left:1rem; top:1rem; z-index:2;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:99px; background:rgba(5,6,10,.55);
  border:1px solid rgba(233,238,255,.18); backdrop-filter:blur(6px);
}
.spot__tag--danger{ color:var(--danger); border-color:rgba(255,79,109,.4); }
.spot__tag--ember{ color:var(--ember); border-color:rgba(255,179,107,.4); }
.spot__body h2{ font-size:clamp(2.2rem,5.2vw,4.4rem); letter-spacing:-.045em; margin:.6rem 0 1.3rem; }
.spot__body p{ color:var(--ink-dim); font-size:clamp(.94rem,1.12vw,1.04rem); }
.spot__body p + p{ margin-top:1rem; }
.spot__kicker{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }

.zones{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:clamp(1.6rem,3vw,2.2rem); }
@media (max-width:520px){ .zones{ grid-template-columns:1fr; } }
.zone{
  padding:1rem; border-radius:var(--r-md);
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:.7rem;
  transition:border-color .4s, background .4s, transform .5s var(--ease);
}
.zone:hover{ border-color:rgba(255,79,109,.5); background:rgba(255,79,109,.06); transform:translateY(-4px); }
.zone__ico{ width:34px; height:34px; color:var(--danger); }
.zone__ico svg{ width:100%; height:100%; }
.zone b{ font-family:var(--display); font-size:.95rem; letter-spacing:-.02em; }
.zone span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.zone--ground .zone__ico svg{ animation:crawl 2.4s var(--ease-io) infinite; }
.zone--sky .zone__ico svg{ animation:fly 3s var(--ease-io) infinite; }
.zone--under .zone__ico svg{ animation:burrow 2.8s var(--ease-io) infinite; }
@keyframes crawl{ 50%{ transform:translateX(5px); } }
@keyframes fly{ 50%{ transform:translateY(-5px) rotate(-6deg); } }
@keyframes burrow{ 0%,100%{ transform:translateY(3px); opacity:.5; } 50%{ transform:translateY(-2px); opacity:1; } }
.warnline{
  margin-top:1.4rem; display:flex; align-items:center; gap:.7rem;
  font-weight:700; color:var(--ink);
}
.warnline::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--danger); animation:blink 1.4s steps(2) infinite; flex-shrink:0; }

/* quest card (traders) */
.quest{
  margin-top:clamp(1.6rem,3vw,2.2rem);
  border:1px solid rgba(255,179,107,.3); border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(255,179,107,.07),rgba(255,255,255,.01));
  overflow:hidden;
}
.quest__head{
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:.8rem 1.1rem; border-bottom:1px dashed rgba(255,179,107,.3);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember);
}
.quest__head i{ font-style:normal; color:var(--ink-mute); }
.quest__body{ padding:1rem 1.1rem; display:grid; gap:.6rem; }
.quest__row{ display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; }
.quest__row span{ color:var(--ink-mute); }
.quest__row b{ font-weight:700; text-align:right; }
.quest__row b.no{ color:var(--danger); }
.quest__btns{ display:flex; gap:.5rem; padding:0 1.1rem 1.1rem; }
.qbtn{
  flex:1; padding:.7rem; border-radius:10px; font-size:.78rem; font-weight:700;
  border:1px solid var(--line-strong); transition:all .3s;
}
.qbtn--yes{ background:var(--ember); color:#1a0f04; border-color:transparent; }
.qbtn--yes:hover{ filter:brightness(1.1); }
.qbtn--no{ position:relative; }
.qbtn--no.is-denied{ animation:shake .45s; border-color:var(--danger); color:var(--danger); }
@keyframes shake{ 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }
.quest__msg{ padding:0 1.1rem 1rem; font-size:.78rem; color:var(--ember); min-height:1.2em; }

/* ---------------------------------------------------------- finale */
.finale{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:92svh; display:flex; align-items:center;
  border-top:1px solid var(--line);
}
.finale__bg{ position:absolute; inset:-12% 0; z-index:-2; }
.finale__bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.45); }
.finale::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(5,6,10,.35) 30%,rgba(5,6,10,.5) 70%,var(--bg) 100%);
}
.finale__inner{ padding-block:clamp(5rem,12vw,9rem); }
.finale__quote{
  font-size:clamp(2.2rem,6.4vw,6rem); line-height:.98; letter-spacing:-.05em;
  max-width:16ch;
}
.finale p{ margin-top:clamp(1.4rem,3vw,2rem); color:var(--ink-dim); font-size:clamp(.95rem,1.2vw,1.1rem); max-width:52ch; }
.finale__cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:clamp(1.8rem,3.4vw,2.6rem); }

/* next project */
.next{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1rem,4vw,3rem);
  padding-block:clamp(2.4rem,5vw,4rem);
  border-top:1px solid var(--line);
  position:relative; overflow:hidden; isolation:isolate;
}
.next__img{
  position:absolute; inset:0; z-index:-1; opacity:0;
  transition:opacity .7s var(--ease);
}
.next__img img{ width:100%; height:100%; object-fit:cover; filter:brightness(.35) saturate(.8); transform:scale(1.1); transition:transform 1.2s var(--ease); }
.next:hover .next__img{ opacity:1; }
.next:hover .next__img img{ transform:scale(1); }
.next__label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.next__title{ font-family:var(--display); font-size:clamp(2rem,6vw,5rem); font-weight:800; letter-spacing:-.05em; line-height:1; transition:transform .6s var(--ease); }
.next:hover .next__title{ transform:translateX(14px); }
.next__arrow{
  width:clamp(52px,6vw,76px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--line-strong); display:grid; place-items:center;
  transition:background .4s, color .4s, transform .6s var(--ease);
}
.next__arrow svg{ width:40%; height:40%; }
.next:hover .next__arrow{ background:var(--cyan); color:#04121a; transform:rotate(-45deg); }
@media (max-width:600px){ .next{ grid-template-columns:1fr auto; } .next__label{ grid-column:1 / -1; } }

/* ---------------------------------------------------------- companion orb (follows cursor) */
.companion{
  position:fixed; top:0; left:0; z-index:5000; pointer-events:none;
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#bafff7 30%,var(--cyan) 60%,transparent 72%);
  box-shadow:0 0 22px 6px rgba(79,240,224,.45);
  transition:background .4s, box-shadow .4s, opacity .4s;
  will-change:transform;
}
.companion.is-alert{
  background:radial-gradient(circle at 35% 30%,#fff,#ffc0cb 30%,var(--danger) 60%,transparent 72%);
  box-shadow:0 0 26px 8px rgba(255,79,109,.5);
}
.companion__tip{
  position:absolute; left:24px; top:-6px; white-space:nowrap;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); opacity:0; transition:opacity .3s;
}
.companion.is-alert .companion__tip{ color:var(--danger); opacity:1; }
@media (hover:none),(max-width:900px){ .companion{ display:none; } }

/* ---------------------------------------------------------- lightbox + toast */
.lightbox{
  position:fixed; inset:0; z-index:9200;
  display:grid; place-items:center; padding:var(--pad-x);
  background:rgba(2,3,6,.88); backdrop-filter:blur(12px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s linear .4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .4s, visibility 0s; }
.lightbox__frame{
  width:min(1100px,100%); aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line-strong); background:#000;
  transform:scale(.94); transition:transform .5s var(--ease);
}
.lightbox.is-open .lightbox__frame{ transform:none; }
.lightbox__frame iframe{ width:100%; height:100%; border:0; display:block; }
.lightbox__close{
  position:absolute; top:1.2rem; right:1.2rem; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-strong); display:grid; place-items:center; background:rgba(5,6,10,.6);
}
.lightbox__close:hover{ background:var(--cyan); color:#04121a; }
.toast{
  position:fixed; left:50%; bottom:2rem; z-index:9300; translate:-50% 20px;
  padding:.85rem 1.2rem; border-radius:99px;
  background:rgba(11,14,22,.95); border:1px solid var(--line-strong);
  font-size:.82rem; opacity:0; pointer-events:none;
  transition:opacity .35s, translate .45s var(--ease);
}
.toast.is-on{ opacity:1; translate:-50% 0; }

@media (prefers-reduced-motion:reduce){
  .world{ height:auto; }
  .world__stage{ position:relative; height:auto; min-height:100svh; }
  .companion{ display:none; }
}