/* Shared parts of the project animations ("reels"). Each project adds only its own background, interface and story.
   Everything is sized in cqw, so a reel scales like an image and stays sharp. Light only, like a screenshot */

/* the 16:10 frame, as wide as the column */
.reel-frame { position: relative; margin-top: 24px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; container-type: inline-size; }

/* ---------- unbranded phone, notch generation (2018–2022) ----------
   The project sets --phone-w (in cqw of the frame) and the position. Thin metal rim, black bezel, side buttons, no logo */
.reel-phone {
  position: absolute; width: var(--phone-w); aspect-ratio: 9 / 18.5;
  border-radius: calc(var(--phone-w) * .155); padding: calc(var(--phone-w) * .03); background: #0C0C0E;
  box-shadow: inset 0 0 0 calc(var(--phone-w) * .007) #5A5A61, inset 0 0 0 calc(var(--phone-w) * .011) #1B1B1F, 0 1.6cqw 4cqw rgba(0, 0, 0, .35);
  will-change: transform;
}
.reel-phone__btn { position: absolute; width: calc(var(--phone-w) * .013); border-radius: .3cqw; background: #48484E; }
.reel-phone__btn--mute { left: calc(var(--phone-w) * -.009); top: 16%; height: calc(var(--phone-w) * .06); }
.reel-phone__btn--up { left: calc(var(--phone-w) * -.009); top: 23%; height: calc(var(--phone-w) * .13); }
.reel-phone__btn--down { left: calc(var(--phone-w) * -.009); top: 31%; height: calc(var(--phone-w) * .13); }
.reel-phone__btn--side { right: calc(var(--phone-w) * -.009); top: 26%; height: calc(var(--phone-w) * .21); }
/* the screen is a size container too: inside it, 1cqw = 1% of the screen width */
.reel-phone__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--phone-w) * .125); overflow: hidden; container-type: inline-size; background: #FAFAFB; }
.reel-phone__notch { position: absolute; top: 0; left: 50%; width: 42cqw; height: 8cqw; margin-left: -21cqw; border-radius: 0 0 4.6cqw 4.6cqw; background: #0C0C0E; z-index: 30; }
.reel-phone__home { position: absolute; left: 50%; bottom: 2cqw; width: 36cqw; height: 1.4cqw; margin-left: -18cqw; border-radius: 1cqw; background: #111; z-index: 30; }
/* latest generation (Dynamic Island): add .reel-phone--island. Taller screen, thinner bezel, rounder corners, titanium rim,
   an action button on the left and the camera control on the right. Use .reel-phone__island instead of the notch */
.reel-phone--island { aspect-ratio: 9 / 19.5; border-radius: calc(var(--phone-w) * .175); padding: calc(var(--phone-w) * .021); background: #0B0B0D;
  box-shadow: inset 0 0 0 calc(var(--phone-w) * .006) #A3A3A9, inset 0 0 0 calc(var(--phone-w) * .01) #3A3A3F, inset 0 0 0 calc(var(--phone-w) * .013) #111114, 0 1.6cqw 4cqw rgba(0, 0, 0, .3); }
.reel-phone--island .reel-phone__screen { border-radius: calc(var(--phone-w) * .155); }
.reel-phone--island .reel-phone__btn { background: #8E8E94; }
.reel-phone--island .reel-phone__btn--mute { top: 17%; height: calc(var(--phone-w) * .07); }
.reel-phone--island .reel-phone__btn--up { top: 25%; }
.reel-phone--island .reel-phone__btn--down { top: 33%; }
.reel-phone--island .reel-phone__btn--side { top: 27%; height: calc(var(--phone-w) * .2); }
.reel-phone__btn--cam { right: calc(var(--phone-w) * -.008); top: 55%; height: calc(var(--phone-w) * .1); }
.reel-phone__island { position: absolute; top: 2.8cqw; left: 50%; width: 32cqw; height: 9.4cqw; margin-left: -16cqw; border-radius: 4.7cqw; background: #000; z-index: 30; }
.reel-phone--island .reel-phone__status { --pt: calc(100cqw / 393); height: 15cqw; padding: 0; grid-template-columns: 1fr 34cqw 1fr; }
.reel-phone--island .reel-phone__home { bottom: 2.2cqw; width: 35cqw; margin-left: -17.5cqw; height: 1.3cqw; }
/* status bar, iOS rules: the time centred in the left "ear", the icons centred in the right one (never a fixed margin from the edge).
   iOS also keeps both ears clear of the rounded corners, hence the side padding: the battery ends about 7% from the edge, like a real iPhone 13.
   System font (SF on Apple devices) at 17pt semibold, icons at their iOS point sizes and 5pt apart. 1pt = 100/390 cqw */
.reel-phone__status { --pt: calc(100cqw / 390); position: absolute; left: 0; right: 0; top: 0; height: 9cqw; padding: 0 2.9cqw; box-sizing: border-box; display: grid; grid-template-columns: 1fr 42cqw 1fr; align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.02em; color: #22222A; z-index: 31; }
.reel-phone__status > span { justify-self: center; }
.reel-phone__icons { display: flex; align-items: center; gap: calc(5 * var(--pt)); }
.reel-phone__icons svg { display: block; width: auto; }
.reel-phone__icons .sb-cell { height: calc(10.7 * var(--pt)); }
.reel-phone__icons .sb-wifi { height: calc(11 * var(--pt)); }
.reel-phone__icons .sb-batt { height: calc(13 * var(--pt)); }
.reel-phone__icons svg:not([class]) { height: 3cqw; }   /* old previews with hand-written icons */

/* touch indicator: a soft ring where the finger lands */
.reel-tap { position: absolute; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw; border-radius: 50%; background: rgba(30, 30, 36, .22); box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .7); opacity: 0; pointer-events: none; z-index: 20; }