/* ==========================================================================
   LUSH ∞ LACED — device.css
   A physical object, not a bordered screenshot: titanium rail with milled
   facets and antenna bands, a black gasket, laminated glass with a specular
   streak that tracks the device's rotation, and a two-part shadow.
   Every measurement is derived from --dw so the whole thing scales cleanly.
   ========================================================================== */

.device{
  --dw:300px;
  --dh:calc(var(--dw) * 1.944);          /* display = 9:16 capture + status band + home zone */
  --rad:calc(var(--dw) * 0.1495);
  --rail:calc(var(--dw) * 0.0128);
  --lx:0.5;                              /* light x, driven by rotation (JS) */
  position:relative;
  width:var(--dw); height:var(--dh);
  border-radius:var(--rad);
  transform-style:preserve-3d;
  isolation:isolate;
}

/* ---- shadow: tight contact + broad ambient, both under the object ------- */
.device__shadow,
.device__ao{
  position:absolute; left:50%; border-radius:50%;
  transform:translateX(-50%) translateZ(-80px);
  pointer-events:none; z-index:-2;
}
.device__ao{
  bottom:-9%; width:150%; height:22%;
  background:radial-gradient(closest-side, rgba(0,0,0,.62), transparent 76%);
  filter:blur(26px);
}
.device__shadow{
  bottom:-2.4%; width:78%; height:8%;
  background:radial-gradient(closest-side, rgba(0,0,0,.85), transparent 72%);
  filter:blur(11px);
}

/* ---- titanium rail ------------------------------------------------------ */
.device__frame{
  position:absolute; inset:0; border-radius:var(--rad);
  background:
    linear-gradient(
      calc(118deg + (var(--lx) - .5) * 26deg),
      #5c6167 0%,  #c3c8ce 4%,  #7f858c 9%,  #43474d 15%,
      #949aa1 23%, #5b6066 31%, #2f3237 40%, #868c93 50%,
      #4c5056 59%, #b0b6bc 68%, #55595f 77%, #2c2f34 86%,
      #8f959c 93%, #616669 100%);
  box-shadow:
    0 1px 1px rgba(255,255,255,.34) inset,
    0 -1px 2px rgba(0,0,0,.62) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 40px 78px -22px rgba(0,0,0,.86),
    0 14px 30px -10px rgba(0,0,0,.62),
    0 0 110px -34px rgba(0,151,154,.40);
}
/* milled chamfer catching the key light */
.device__frame::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(
    calc(118deg + (var(--lx) - .5) * 26deg),
    rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 14%,
    rgba(255,255,255,0) 78%, rgba(255,255,255,.26) 100%);
  mix-blend-mode:screen; opacity:.85;
}
/* antenna bands */
.device__band{ position:absolute; background:rgba(228,232,236,.30); pointer-events:none; }
.device__band--tl{ left:16%;  top:calc(var(--rail) * -0.2); width:1.5px; height:calc(var(--rail) * 2.4); }
.device__band--tr{ right:16%; top:calc(var(--rail) * -0.2); width:1.5px; height:calc(var(--rail) * 2.4); }
.device__band--bl{ left:16%;  bottom:calc(var(--rail) * -0.2); width:1.5px; height:calc(var(--rail) * 2.4); }
.device__band--br{ right:16%; bottom:calc(var(--rail) * -0.2); width:1.5px; height:calc(var(--rail) * 2.4); }

/* ---- gasket + laminated screen ----------------------------------------- */
.device__gasket{
  position:absolute; inset:var(--rail);
  border-radius:calc(var(--rad) - var(--rail));
  background:#050506;
  box-shadow:0 0 0 1px rgba(0,0,0,.92), 0 0 16px 3px rgba(0,0,0,.72) inset;
}
.device__screen{
  position:absolute; inset:calc(var(--rail) * 2.05);
  border-radius:calc(var(--rad) - var(--rail) * 2.05);
  overflow:hidden; background:#0B0B0D;
  box-shadow:0 0 0 1px rgba(255,255,255,.055) inset;
  transform:translateZ(0.4px);
}

/* ---- glass: specular streak tracks the rotation ------------------------- */
.device__glass{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      calc(100deg + (var(--lx) - .5) * 34deg),
      rgba(255,255,255,.15) 0%, rgba(255,255,255,.055) 11%,
      rgba(255,255,255,0) 30%, rgba(255,255,255,0) 64%,
      rgba(255,255,255,.04) 83%, rgba(255,255,255,.11) 100%),
    radial-gradient(130% 62% at calc(var(--lx) * 100%) -10%,
      rgba(216,242,255,.17), transparent 56%);
  mix-blend-mode:screen;
}
.device__glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 1px rgba(255,255,255,.11) inset;
}
/* ambient teal bounce off the environment, on the lower bezel */
.device__bounce{
  position:absolute; inset:auto 0 0 0; height:26%; z-index:5; pointer-events:none;
  border-radius:0 0 var(--rad) var(--rad);
  background:linear-gradient(to top, rgba(0,151,154,.13), transparent 78%);
  mix-blend-mode:screen;
}

/* ---- dynamic island ----------------------------------------------------- */
.device__island{
  position:absolute; z-index:7; top:calc(var(--dw) * 0.0355); left:50%;
  transform:translateX(-50%);
  width:calc(var(--dw) * 0.303); height:calc(var(--dw) * 0.0885);
  border-radius:999px; background:#000;
  box-shadow:0 0 0 .5px rgba(255,255,255,.07), 0 1px 2px rgba(255,255,255,.05);
}
.device__island::after{
  content:""; position:absolute; right:13%; top:50%; transform:translateY(-50%);
  width:calc(var(--dw) * 0.031); height:calc(var(--dw) * 0.031); border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(140,200,235,.55) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #24333f 0%, #0c1115 55%, #04060a 100%);
  box-shadow:0 0 3px rgba(90,150,190,.55), 0 0 0 .5px rgba(255,255,255,.10);
}
.device__island::before{      /* proximity / dot-projector cluster */
  content:""; position:absolute; left:22%; top:50%; transform:translateY(-50%);
  width:calc(var(--dw) * 0.016); height:calc(var(--dw) * 0.016); border-radius:50%;
  background:radial-gradient(circle,#1a2228,#07090b);
}
/* earpiece slot */
.device__ear{
  position:absolute; z-index:7; top:calc(var(--dw) * 0.0655); left:50%;
  transform:translateX(-50%);
  width:calc(var(--dw) * 0.115); height:calc(var(--dw) * 0.009);
  border-radius:999px; background:rgba(255,255,255,.055);
}

/* ---- physical buttons --------------------------------------------------- */
.device__btn{
  position:absolute;
  background:linear-gradient(180deg,#a2a8af 0%,#7a8087 18%,#43474d 62%,#2b2e33 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.6), 0 1px 1px rgba(255,255,255,.20) inset;
}
.device__btn--act{ left:calc(var(--dw) * -0.0095); top:15.4%; width:calc(var(--dw) * 0.0105); height:4.5%;  border-radius:2px 0 0 2px; }
.device__btn--vu{  left:calc(var(--dw) * -0.0095); top:23.0%; width:calc(var(--dw) * 0.0105); height:8.1%;  border-radius:2px 0 0 2px; }
.device__btn--vd{  left:calc(var(--dw) * -0.0095); top:33.3%; width:calc(var(--dw) * 0.0105); height:8.1%;  border-radius:2px 0 0 2px; }
.device__btn--pw{  right:calc(var(--dw) * -0.0095); top:26.0%; width:calc(var(--dw) * 0.0105); height:11.8%; border-radius:0 2px 2px 0; }

/* ==========================================================================
   SCREEN SLOTS
   ========================================================================== */
.slot{
  position:absolute; inset:0; opacity:0;
  will-change:transform,opacity,filter;
  /* the artwork and its system bands are laid out by static/screen.css */
}
.slot.is-on{ opacity:1; }

/* transitions — each screen arrives its own way */
.slot[data-tx="rise"]  { transform:translateY(9%)  scale(1.02); transition:opacity .5s var(--e-out), transform .78s var(--e-out); }
.slot[data-tx="slide"] { transform:translateX(16%);             transition:opacity .44s var(--e-out), transform .72s var(--e-out); }
.slot[data-tx="depth"] { transform:scale(1.14); filter:blur(9px); transition:opacity .5s var(--e-out), transform .8s var(--e-out), filter .6s var(--e-out); }
.slot[data-tx="mask"]  { clip-path:inset(0 0 100% 0); transition:opacity .3s var(--e-out), clip-path .82s var(--e-out); }
.slot[data-tx="illum"] { filter:brightness(3.4) saturate(.2); transition:opacity .42s var(--e-out), filter .86s var(--e-out); }
.slot.is-on[data-tx="rise"]  { transform:none; }
.slot.is-on[data-tx="slide"] { transform:none; }
.slot.is-on[data-tx="depth"] { transform:none; filter:none; }
.slot.is-on[data-tx="mask"]  { clip-path:inset(0 0 0 0); }
.slot.is-on[data-tx="illum"] { filter:none; }
/* outgoing screen leaves the opposite way */
.slot.is-prev[data-tx="rise"]  { transform:translateY(-7%) scale(.99); }
.slot.is-prev[data-tx="slide"] { transform:translateX(-14%); }
.slot.is-prev[data-tx="depth"] { transform:scale(.9); filter:blur(7px); }
.slot.is-prev[data-tx="mask"]  { clip-path:inset(100% 0 0 0); }

@media (prefers-reduced-motion:reduce){
  .slot{ transition:opacity .001s!important; transform:none!important;
         filter:none!important; clip-path:none!important; }
}

/* ==========================================================================
   THE SHOWCASE STAGE — one centred column: medallion · copy · device · dots
   ========================================================================== */
.show{
  position:relative;
  background:
    radial-gradient(78% 48% at 76% 16%, rgba(0,151,154,.16), transparent 62%),
    radial-gradient(66% 44% at 12% 84%, rgba(209,170,42,.085), transparent 66%),
    linear-gradient(180deg,#0B0B0D 0%, #091214 42%, #0B0B0D 100%);
}
.show__runway{ height:640vh; }
.show__sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 8px) 0
          calc(env(safe-area-inset-bottom,0px) + 10px);
}
/* studio floor sweep behind the device */
.show__env{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 40% at 50% 66%, rgba(0,151,154,.13), transparent 70%),
    linear-gradient(180deg, transparent 52%, rgba(0,0,0,.42) 100%);
  opacity:.9;
}
.show__grid{
  position:relative; flex:1; min-height:0; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-direction:column; align-items:center;
}
.show .anchor--show{ flex:none; width:clamp(40px,5vw,50px); aspect-ratio:1; margin:0 0 10px; }

.show__text{ flex:none; position:relative; width:100%; max-width:560px; min-height:172px; text-align:center; }
.show__item{
  position:absolute; inset:0 0 auto 0; opacity:0; pointer-events:none;
  transform:translateY(14px);
  transition:opacity .45s var(--e-out), transform .6s var(--e-out);
}
.show__item.is-on{ opacity:1; transform:none; pointer-events:auto; }
.show__k{ margin:0 0 10px; font-size:9.5px; font-weight:700; letter-spacing:.30em;
  text-transform:uppercase; color:var(--teal-soft); }
.show__h{ margin:0 auto 12px; max-width:15em; font-family:var(--serif); font-weight:300;
  font-size:clamp(26px,3.4vw,38px); line-height:1.13; }
.show__d{ margin:0 auto; font-size:14.5px; line-height:1.62; color:var(--text-mid); max-width:33em; }

.show__stage{
  position:relative; flex:none; display:grid; place-items:center;
  perspective:1500px; perspective-origin:50% 44%; margin-top:18px;
}
.show__pool{
  position:absolute; z-index:-1; width:min(150%,640px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,151,154,.20), transparent 70%);
  filter:blur(34px);
}

/* scrubber shows where you are in the walkthrough */
.show__dots{
  position:absolute; z-index:3; display:flex; gap:7px; list-style:none; margin:0; padding:0;
  left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
}
.show__dots li{ width:5px; height:5px; border-radius:50%; background:rgba(245,242,235,.20);
  transition:background-color .3s, transform .3s var(--e-out); }
.show__dots li.is-on{ background:var(--teal-soft); transform:scale(1.5); }

/* device sizing is capped by viewport height so it can never overflow.
   Column budget ≈ nav 84 + medallion 60 + copy 172 + gaps 18 + dots 30. */
.show .device{ --dw:min(300px, 60vw, calc((100svh - 372px) / 1.944)); }
@media (min-width:1400px) and (min-height:1000px){ .show .device{ --dw:min(330px, calc((100svh - 372px) / 1.944)); } }
@media (max-width:919px){
  .show__runway{ height:560vh; }
  .show__text{ min-height:164px; }
  .show__h{ font-size:clamp(23px,5.8vw,30px); }
  .show__d{ font-size:13.5px; max-width:30em; }
  .show__dots{ bottom:calc(env(safe-area-inset-bottom,0px) + 10px); }
}
@media (max-width:430px){
  .show__text{ min-height:148px; }
  .show__stage{ margin-top:12px; }
  .show__k{ letter-spacing:.22em; }
}
/* short viewports: the medallion spacer goes, the copy tightens */
@media (max-height:700px){
  .show .anchor--show{ display:none; }
  .show__text{ min-height:150px; }
  .show__h{ font-size:clamp(22px,3vw,30px); margin-bottom:8px; }
  .show .device{ --dw:min(300px, 60vw, calc((100svh - 300px) / 1.944)); }
}
@media (max-height:600px){
  .show .device{ --dw:min(300px, 60vw, calc((100svh - 268px) / 1.944)); }
  .show__text{ min-height:118px; } .show__d{ display:none; }
}
/* wide but short (laptops): copy and device side by side, centred as a pair */
@media (min-width:920px) and (max-height:860px){
  .show__grid{ flex-direction:row; justify-content:center; align-items:center; gap:clamp(40px,6vw,96px); padding-bottom:24px; }
  .show .anchor--show{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:clamp(40px,5vw,50px); height:auto; margin:0; }
  .show__text{ flex:0 1 420px; min-height:0; }
  .show__stage{ margin-top:0; }
  .show .device{ --dw:min(300px, calc((100svh - 196px) / 1.944)); }
}
/* landscape phones: copy beside the device */
@media (max-height:560px) and (max-width:919px) and (orientation:landscape){
  .show__grid{ flex-direction:row; justify-content:center; gap:28px; }
  .show .anchor--show, .show__dots{ display:none; }
  .show__text{ min-height:0; max-width:340px; text-align:center; } .show__d{ display:block; font-size:13px; }
  .show__stage{ margin-top:0; }
  .show .device{ --dw:min(150px, calc((100svh - 96px) / 1.944)); }
}