/* Shared primitives: the big generic phone, and full-bleed "stage" sections.
   Loaded after screens.css. v3: the phone is the ONE pinned tour phone (partials/tour-phone.html, sized and placed by css/tour.css, which sets its --pw);
   the four steps are .step bands (tour.css), NOT .stage. The .stage field below is now only used by the Grown-ups block.

   THE PHONE (v3.5): a black phone drawn from flat shapes (steel edge, glass bezel, an island, side buttons), our own drawing and not Apple's
   artwork. The app screen (.scr) sits inside it and scales with it (the screen's units are container-query based, so any phone width works).

   Markup:
     <div class="bigphone" style="--r:-2deg">
       <div class="bigphone-body"><div class="scr ...">...</div></div>
     </div>
   Size it with --pw on the element or a parent (default: fits a 900px-high laptop screen). */

.bigphone{
  --pw:min(clamp(300px,26vw,600px),80vw);   /* scales with the screen: ~375px at 1440, ~500px at 1920, 600px from 2300 up */
  --rim:calc(var(--pw) * .008);             /* the steel edge */
  --edge:calc(var(--pw) * .024);            /* the black glass bezel round the screen */
  --depth:calc(var(--pw) * .036);           /* how far the island hangs into the screen */
  --glass:#050606;--steel:#3B4240;
  position:relative;width:var(--pw);margin-inline:auto;
  transform:rotate(var(--r,0deg));
}
/* v3.5 (the owner's call): a BLACK phone. A thin graphite steel edge, a black glass bezel, a soft see-through shadow (no hard offset any more), and an island
   that hangs from the top bezel and holds the speaker and the lens. Drawn here from flat shapes, no Apple artwork. Side buttons kept (steel bars).
   Total height = pw * 1.8840 (the screen is 360 x 700 inside a .936 pw wide window): tour.css's --k/--kc use that. */
.bigphone-body{
  position:relative;background:var(--glass);border:var(--rim) solid var(--steel);border-radius:calc(var(--pw) * .15);padding:var(--edge);
  box-shadow:0 calc(var(--pw) * .05) calc(var(--pw) * .11) calc(var(--pw) * -.02) rgba(8,12,10,.42),0 calc(var(--pw) * .012) calc(var(--pw) * .03) rgba(8,12,10,.24);
}
.bigphone .scr{border-radius:calc(var(--pw) * .118)}   /* concentric with the frame: .15 minus rim and bezel */
/* the island: part of the black bezel, hanging into the top of the screen; fillets where it meets the screen's top edge */
.bp-island{position:absolute;z-index:6;left:50%;top:0;translate:-50% 0;width:calc(var(--pw) * .285);height:calc(var(--edge) + var(--depth));background:var(--glass);
  border-radius:0 0 calc(var(--pw) * .026) calc(var(--pw) * .026);pointer-events:none}
.bp-island::before,.bp-island::after{content:"";position:absolute;top:var(--edge);width:calc(var(--pw) * .02);aspect-ratio:1;pointer-events:none}
.bp-island::before{right:calc(100% - 1px);background:radial-gradient(circle at 0 100%,transparent calc(var(--pw) * .02 - .5px),var(--glass) calc(var(--pw) * .02))}
.bp-island::after{left:calc(100% - 1px);background:radial-gradient(circle at 100% 100%,transparent calc(var(--pw) * .02 - .5px),var(--glass) calc(var(--pw) * .02))}
/* the speaker slot and the lens (a teal ring, a pink glint off register) sit as one group centred in the WHOLE black island, the bezel strip above the screen included (.13 + .03 gap + .0285 = .1885 wide) */
.bp-speaker,.bp-lens{position:absolute;display:block}
.bp-speaker{left:calc(50% - var(--pw) * .09425);top:calc((var(--edge) + var(--depth) - var(--pw) * .0125) / 2);width:calc(var(--pw) * .13);height:calc(var(--pw) * .0125);border-radius:99px;background:#2E3432}
.bp-lens{left:calc(50% + var(--pw) * .06575);top:calc((var(--edge) + var(--depth) - var(--pw) * .0285) / 2);width:calc(var(--pw) * .0285);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--pink) 0 13%,transparent 15%),#0A0D0C;box-shadow:inset 0 0 0 calc(var(--pw) * .0055) var(--teal)}
/* side buttons: steel bars stuck to the outer edge (left: action key and two volume keys; right: the power key) */
.bp-btn{position:absolute;z-index:2;pointer-events:none;width:calc(var(--pw) * .0165);background:var(--steel);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.bp-btn.l{right:100%;border-radius:calc(var(--pw) * .008) 0 0 calc(var(--pw) * .008);margin-right:calc(var(--rim) * -1)}
.bp-btn.r{left:100%;border-radius:0 calc(var(--pw) * .008) calc(var(--pw) * .008) 0;margin-left:calc(var(--rim) * -1)}
.bp-btn.s1{top:11%;height:3.2%}.bp-btn.s2{top:17.5%;height:6.2%}.bp-btn.s3{top:25.5%;height:6.2%}.bp-btn.s4{top:20%;height:9.5%}

/* Full-bleed colour sections (now the Grown-ups block only). Objects may overflow them: the section never clips, the page clips sideways only. */
.stage{position:relative;isolation:isolate;padding:clamp(64px,8vw,128px) clamp(16px,4vw,48px);overflow:visible}
.stage.on-blue{background:var(--blue);color:var(--paper)}
.stage.on-pink{background:var(--pink);color:var(--ink)}
.stage.on-mint{background:var(--mint);color:var(--ink)}
.stage.on-teal{background:var(--teal);color:var(--ink)}
.stage.on-paper{background:var(--paper);color:var(--ink)}
/* paper-coloured halftone for colour fields (assets/brand/halftone-paper.svg): ::before, feathered, never behind text */
.stage-dots{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.stage-dots::before{content:"";position:absolute;right:-4%;top:-6%;width:min(70vw,980px);aspect-ratio:1.6;background:url(/assets/brand/halftone-paper.svg) center/contain no-repeat;opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side at 70% 30%,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side at 70% 30%,#000 30%,transparent 100%)}
/* a satellite: anything that sits around the phone and may poke out over a seam */
.sat{position:absolute;z-index:3;pointer-events:none}
.sat.live{pointer-events:auto}
/* rise: pull an object up over the seam into the previous section (set --rise) */
.rise{position:relative;z-index:4;margin-top:calc(var(--rise,120px) * -1)}

@media (prefers-reduced-motion:reduce){.bigphone{transition:none}}