/* ==========================================================================
   LUSH ∞ LACED — screen.css  ·  the ProductScreen system
   ──────────────────────────────────────────────────────────────────────────
   Every product capture on the site passes through this one component.
   The artwork never decides its own size; the layout does.

     <figure class="ps" data-screen="capacity" data-r>
       <img src="brand/screen-capacity.png" alt="…" loading="lazy" />
       <figcaption class="ps__cap">Capacity</figcaption>
     </figure>

   app.js upgrades every .ps into the same iPhone hardware used by the
   cinematic tour (static/device.css). The device is sized from the width of
   the .ps box via container-query units, so a screen is 300px wide because
   the layout said so — never because of the PNG's pixel dimensions.

   The captures are 9:16. Inside the glass the art sits at full width and
   the two bands a real phone adds — the status-bar region beneath the
   Dynamic Island and the home-indicator region at the foot — are painted in
   the screen's own header / footer tone (registry: static/screens.js). A
   0.8% overscan trims the one-pixel capture edges without touching the art.

   Sizes are tokens. Groups are flex rows that wrap whole items: three
   screens sit side by side only when three fit at full size, otherwise
   they stack — never squeeze, never crop, never scroll sideways.
   ========================================================================== */

:root{
  --ps-w: 300px;                            /* THE screen width — every capture, one size  */
  --ps-gap: 20px;                           /* horizontal gap between screens              */
  --ps-sb: .150;                            /* status-bar height ÷ display width (59/393)  */
}
@media (min-width:1000px) and (max-width:1279px){ :root{ --ps-w:260px; } }
@media (min-width:1280px){ :root{ --ps-w:clamp(280px, 20.8vw, 300px); } }

/* ---- the component ------------------------------------------------------ */
.ps{
  position:relative; isolation:isolate; margin:0; min-width:0;
  width:100%; max-width:var(--ps-w);
  /* inline-size containment: the box is sized by the layout, never by the
     device inside it — which is what lets the same PNG be 300px on a
     desktop and 276px on a 320px phone without a feedback loop. */
  container-type:inline-size;
}
/* no-JS / pre-upgrade fallback: the capture as a clean 9:16 slab */
.ps > img{
  width:100%; aspect-ratio:9 / 16; object-fit:cover; object-position:center;
  border-radius:36px; border-radius:12cqw; background:#0B0B0D;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 26px 54px -18px rgba(0,0,0,.8);
}
.ps .device{ --lx:.42; margin:0 auto; }   /* --dw is set from the .ps width by app.js */
.ps .device .slot{ opacity:1; transform:none; filter:none; clip-path:none; transition:none; }

.ps__cap{
  margin:clamp(14px, 2vh, 20px) 0 0; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
  color:var(--text-dim);
}
.ps__cap b{ font-weight:600; color:var(--teal-soft); }
.ps--gold .ps__cap b{ color:var(--gold-soft); }
.ps__cap span{ display:block; margin:7px auto 0; max-width:22em; font-size:13px; font-weight:400;
  letter-spacing:.01em; text-transform:none; color:var(--text-mid); line-height:1.5; }

/* ---- the artwork inside the display ------------------------------------ */
.slot{
  background:linear-gradient(to bottom, var(--top, #0B0B0D) 0 50%, var(--bot, #0B0B0D) 50% 100%);
}
.ps__art{
  position:absolute; left:0; right:0;
  top:calc(var(--dw) * var(--ps-sb));
  aspect-ratio:9 / 16; overflow:hidden;
}
.ps__art img{
  position:absolute; left:-.8%; top:-.8%; width:101.6%; height:101.6%; max-width:none;
  object-fit:cover; object-position:center; display:block;
}
/* the last scrolled line dissolves into the home-indicator region */
.ps__art::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.6%; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bot, #0B0B0D) 70%);
}
.device__home{
  position:absolute; z-index:7; left:50%; bottom:calc(var(--dw) * .0215);
  transform:translateX(-50%);
  width:calc(var(--dw) * .34); height:calc(var(--dw) * .0125); border-radius:999px;
  background:rgba(245,242,235,.62);
}

/* ---- ambient lighting per screen --------------------------------------- */
.ps::before{
  content:""; position:absolute; z-index:-1; left:50%; top:52%;
  width:150%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,151,154,.16), transparent 70%);
  filter:blur(28px);
}
.ps--gold::before{ background:radial-gradient(closest-side, rgba(209,170,42,.13), transparent 70%); }
.ps--quiet::before{ background:radial-gradient(closest-side, rgba(77,215,217,.09), transparent 70%); }

/* ---- groups: equal size, equal gap, one centreline ---------------------
   Column counts are explicit per tier and were sized to fit the container,
   so nothing is ever squeezed or cropped; minmax(0,…) is the belt-and-braces
   guarantee that a group can never push the page wider than the viewport. */
.psgroup{
  display:grid; justify-content:center; justify-items:center; align-items:start;
  grid-template-columns:minmax(0, var(--ps-w));
  gap:clamp(48px, 8vh, 80px) var(--ps-gap);
  width:100%; margin:clamp(52px, 9vh, 104px) auto 0; padding:0; list-style:none;
}
.psgroup > *{ width:100%; min-width:0; }
.psgroup--1{ margin-top:clamp(44px, 7vh, 80px); }
@media (min-width:700px){
  .psgroup--2, .psgroup--4{ grid-template-columns:repeat(2, minmax(0, var(--ps-w))); }
}
@media (min-width:1000px){
  .psgroup--3{ grid-template-columns:repeat(3, minmax(0, calc(var(--ps-w) + 28px))); }
}
@media (min-width:1280px){
  .psgroup--4{ grid-template-columns:repeat(4, minmax(0, var(--ps-w))); }
}

/* a beat = one screen with its own title and explanation, centred beneath it */
.beat{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
.beat .ps{ margin-bottom:clamp(24px, 3.6vh, 36px); }
.beat__k{ margin:0 0 10px; font-size:9.5px; font-weight:700; letter-spacing:.30em;
  text-transform:uppercase; color:var(--teal-soft); }
.beat--gold .beat__k{ color:var(--gold-soft); }
.beat__h{ margin:0 0 12px; max-width:13em; font-family:var(--serif); font-weight:300;
  font-size:clamp(23px, 2.3vw, 29px); line-height:1.16; color:var(--cream); text-wrap:balance; }
.beat__d{ margin:0; max-width:27em; font-size:14.5px; line-height:1.66; color:var(--text-mid); text-wrap:pretty; }
.beat__d + .beat__d{ margin-top:10px; }
.beat__d q{ quotes:"\201C" "\201D"; font-family:var(--serif); font-style:italic; font-size:1.12em; color:var(--cream); }

/* ---- the Sensory Shield pair breathes ---------------------------------- */
.breath .ps:nth-child(1) .device{ animation:breathIn 11s ease-in-out infinite; }
.breath .ps:nth-child(2) .device{ animation:breathOut 11s ease-in-out infinite; }
.breath .ps::before{ animation:breathGlow 11s ease-in-out infinite; }
.breath .ps:nth-child(2)::before{ animation-delay:-5.5s; }
@keyframes breathIn { 0%,100%{ transform:scale(1);    filter:brightness(1);   } 50%{ transform:scale(.982); filter:brightness(.78); } }
@keyframes breathOut{ 0%,100%{ transform:scale(.982); filter:brightness(.78); } 50%{ transform:scale(1);    filter:brightness(1);   } }
@keyframes breathGlow{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---- staggered arrival inside groups ----------------------------------- */
.psgroup > :nth-child(2)[data-r], .psgroup > :nth-child(2) [data-r]{ transition-delay:.10s; }
.psgroup > :nth-child(3)[data-r], .psgroup > :nth-child(3) [data-r]{ transition-delay:.20s; }
.psgroup > :nth-child(4)[data-r], .psgroup > :nth-child(4) [data-r]{ transition-delay:.30s; }

/* ---- hover: the glass catches the light, nothing else moves ------------- */
@media (hover:hover) and (pointer:fine){
  .ps .device{ transition:transform .6s var(--e-out), --lx .6s; }
  .ps:hover .device{ transform:translateY(-4px); --lx:.58; }
}
@media (prefers-reduced-motion:reduce){
  .breath .ps .device, .breath .ps::before{ animation:none!important; }
  .ps:hover .device{ transform:none; }
  .psgroup > *[data-r], .psgroup > * [data-r]{ transition-delay:0s!important; }
}