/* Phone mockup: dark frame, notch, 9:19.5 screen (the approved isolated look). Video, drawn reel or placeholder inside.
   Width: set --phone-w on the phone (or a parent) to override; else the size class decides. */
.phone {
  position: relative;
  width: var(--phone-w, var(--size-phone-md));
  margin-inline: auto;
  padding: 8px;
  border-radius: 36px;
  background: var(--color-phone);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-phone) 20%, transparent), var(--shadow-phone);
  flex: none;
}
.phone--lg { width: var(--phone-w, var(--size-phone-lg)); }
.phone--sm { width: var(--phone-w, var(--size-phone-sm)); }
.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  border-radius: 29px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-night) 82%, var(--color-white)), var(--color-night));
}
.phone__screen::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 28%;
  height: 7px;
  margin-left: -14%;
  background: var(--color-phone);
  border-radius: 6px;
  z-index: 5;
  pointer-events: none;
}
.phone__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__placeholder {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14%;
  text-align: center;
  background: linear-gradient(160deg, var(--color-screen-from), var(--color-screen-to));
}
.phone__placeholder-text { font-size: var(--size-text-xs); line-height: 1.4; color: var(--color-ink-2); }

/* Drawn cover: soft background pair, drawing, "stories" row on top, caption chip at the bottom. */
.phone__placeholder--base { background: linear-gradient(165deg, var(--color-peach), var(--color-lavender)); }
.phone__placeholder--hero { background: linear-gradient(165deg, var(--color-peach), var(--color-lavender)); }
.phone__placeholder--g1 { background: linear-gradient(165deg, var(--color-pink), var(--color-peach)); }
.phone__placeholder--g2 { background: linear-gradient(165deg, var(--color-lavender), var(--color-warm)); }
.phone__placeholder--g3 { background: linear-gradient(165deg, var(--color-warm), var(--color-pink)); }
.phone__placeholder--g4 { background: linear-gradient(165deg, var(--color-peach), var(--color-pink)); }
.phone__placeholder--g5 { background: linear-gradient(165deg, var(--color-lavender), var(--color-peach)); }
.phone__placeholder--g6 { background: linear-gradient(165deg, var(--color-warm), var(--color-lavender)); }
.phone__placeholder[class*="phone__placeholder--"] { padding: 0; }
.phone__art { position: absolute; inset: 0; color: var(--color-ink); }
.phone__art svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.phone__art path, .phone__art circle, .phone__art rect, .phone__art ellipse {
  stroke: var(--color-ink);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.phone__art .phone__ns { stroke: none; }
.phone__art defs rect { stroke: none; }
.phone__art .phone__accent { stroke: var(--color-accent); }
.phone__art .phone__steam { stroke: var(--color-ink-2); stroke-width: 2.4px; }
.phone__c-peach { color: var(--color-peach); }
.phone__c-pink { color: var(--color-pink); }
.phone__c-lavender { color: var(--color-lavender); }
.phone__c-warm { color: var(--color-warm); }
.phone__c-white { color: var(--color-white); }

.phone__stories {
  position: absolute;
  top: 6%;
  left: 12%;
  right: 12%;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.phone__stories i {
  position: relative;
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: var(--size-radius-pill);
  background: var(--color-white);
  opacity: .6;
}
.phone__stories i:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-ink-2);
  transform-origin: left center;
  transform: scaleX(.4);
}
.phone__placeholder[class*="phone__placeholder--"] .phone__placeholder-text {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6%;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--color-white);
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
}
.phone__placeholder[class*="phone__placeholder--"]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, var(--color-white), transparent);
  opacity: .3;
  transform: translateX(-120%);
}

/* Static designed state first; loops only move/fade it. */
.phone__cap { opacity: 1; }
.phone__sun, .phone__spark, .phone__bar, .phone__zoom { transform-box: fill-box; transform-origin: center; }
.phone__light { opacity: .7; }
.phone__steam { opacity: .7; }

@media (prefers-reduced-motion: no-preference) {
  .phone__placeholder[class*="phone__placeholder--"]::after { animation: phone-sweep 7s var(--ease-inout) infinite; }
  .phone__stories i:first-child::after { animation: phone-story 5s linear infinite; }

  .phone__placeholder--hero .phone__zoom { animation: phone-zoom 9s var(--ease-inout) infinite alternate; }
  .phone__cap--a { animation: phone-cap 4s var(--ease-inout) infinite; }
  .phone__cap--b { animation: phone-cap 4s var(--ease-inout) -2s infinite; }

  .phone__placeholder--g1 .phone__spark { animation: phone-spark 2.8s var(--ease-inout) -.6s infinite; }
  .phone__placeholder--g1 .phone__spark--s { animation-delay: -2s; animation-duration: 3.4s; }

  .phone__placeholder--g2 .phone__bar { animation: phone-bar 1.6s var(--ease-inout) infinite alternate; }
  .phone__placeholder--g2 .phone__bar:nth-of-type(2) { animation-delay: -.3s; }
  .phone__placeholder--g2 .phone__bar:nth-of-type(3) { animation-delay: -.6s; }
  .phone__placeholder--g2 .phone__bar:nth-of-type(4) { animation-delay: -.9s; }
  .phone__placeholder--g2 .phone__bar:nth-of-type(5) { animation-delay: -1.2s; }

  .phone__placeholder--g3 .phone__steam { animation: phone-steam 3.6s var(--ease-inout) -1s infinite; }
  .phone__placeholder--g3 .phone__steam--b { animation-delay: -2.2s; }
  .phone__placeholder--g3 .phone__steam--c { animation-delay: -3.2s; }

  .phone__placeholder--g4 .phone__cloud { animation: phone-drift 7s var(--ease-inout) -3s infinite alternate; }

  .phone__placeholder--g5 .phone__light { animation: phone-pulse 3.5s var(--ease-inout) -1.4s infinite alternate; }

  .phone__placeholder--g6 .phone__sway { animation: phone-sway 4.5s var(--ease-inout) -1.8s infinite alternate; transform-origin: 90px 290px; }

  .phone__placeholder--hero::after { animation-delay: -1s; }
  .phone__placeholder--g1::after { animation-delay: -2.5s; }
  .phone__placeholder--g2::after { animation-delay: -4s; }
  .phone__placeholder--g3::after { animation-delay: -5.5s; }
  .phone__placeholder--g4::after { animation-delay: -.5s; }
  .phone__placeholder--g5::after { animation-delay: -3.3s; }
  .phone__placeholder--g6::after { animation-delay: -6.2s; }
  .phone__placeholder--g2 .phone__stories i:first-child::after { animation-delay: -1.7s; }
  .phone__placeholder--g4 .phone__stories i:first-child::after { animation-delay: -3.2s; }
  .phone__placeholder--g6 .phone__stories i:first-child::after { animation-delay: -4.1s; }
}

@keyframes phone-sweep {
  0% { transform: translateX(-120%); }
  23%, 100% { transform: translateX(220%); }
}
@keyframes phone-story {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes phone-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@keyframes phone-cap {
  0%, 100% { opacity: 0; }
  20%, 70% { opacity: 1; }
}
@keyframes phone-spark {
  0%, 100% { transform: scale(.8); }
  50% { transform: scale(1.1); }
}
@keyframes phone-bar {
  from { transform: scaleY(.45); }
  to { transform: scaleY(1); }
}
@keyframes phone-steam {
  0% { transform: translateY(14px); opacity: 0; }
  35%, 65% { opacity: .8; }
  100% { transform: translateY(-14px); opacity: 0; }
}
@keyframes phone-drift {
  from { transform: translateX(-10px); }
  to { transform: translateX(10px); }
}
@keyframes phone-pulse {
  from { opacity: .5; }
  to { opacity: .9; }
}
@keyframes phone-sway {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* ---------- drawn reels (.reel), ported from the isolated screens.css; sizes in cqw so a scene looks the same at any width ---------- */
.reel {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.reel * { box-sizing: border-box; }
.reel {
  background: var(--color-night);
  color: var(--color-white);
    -webkit-user-select: none;
  user-select: none;
  isolation: isolate;
}
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- scene building blocks ---------- */
.rl-scene { position: absolute; inset: 0; overflow: hidden; }
.ly, .rl-cam, .sh, .zm { position: absolute; inset: 0; }
.ly svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sh { opacity: 0; }
.sh:first-child { opacity: 1; }
.fb { transform-box: fill-box; transform-origin: 50% 50%; }

.rl-cam { animation: rl-zoom 6s ease-in-out infinite alternate; }
@keyframes rl-zoom { to { transform: scale(var(--z, 1.07)) translate(var(--tx, 0px), var(--ty, 0px)); } }
.rl-pan { animation: rl-pank 7s ease-in-out infinite alternate; }
@keyframes rl-pank { to { transform: translateX(var(--px, -4cqw)); } }

/* waves move exactly one period, so they loop without a seam */
.rl-wv { animation: rl-wvk linear infinite; }
@keyframes rl-wvk { to { transform: translateX(calc(var(--p) * var(--s, 1) * -1px)); } }

.rl-st { fill: none; stroke: var(--color-white); stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: rl-steam 3s ease-in-out infinite; }
@keyframes rl-steam { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-10px); } }
.rl-sp { transform-box: fill-box; transform-origin: 50% 50%; animation: rl-spk 2.4s ease-in-out infinite; }
@keyframes rl-spk { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } }
.rl-bk { animation: rl-bob 5s ease-in-out infinite alternate; }
@keyframes rl-bob { to { transform: translateY(-4px); } }
.rl-tw { animation: rl-twk 2.6s ease-in-out infinite; }
@keyframes rl-twk { 0%, 100% { opacity: .3; transform: scaleX(.75); } 50% { opacity: .85; transform: scaleX(1.1); } }
.rl-drift { animation: rl-dr 6s ease-in-out infinite alternate; }
@keyframes rl-dr { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
.rl-beam { transform-origin: 0% 50%; animation: rl-sweep 4.2s ease-in-out infinite alternate; }
.rl-beam--b { animation-duration: 5.4s; animation-delay: -1.5s; }
@keyframes rl-sweep { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
.rl-spin { animation: rl-rot 40s linear infinite; }
.rl-spin2 { animation: rl-rot 5s linear infinite; }
@keyframes rl-rot { to { transform: rotate(360deg); } }
.rl-puff { animation: rl-pf 4s ease-out infinite; }
@keyframes rl-pf { 0% { opacity: .55; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-14px) scale(1.8); } }
.rl-moss { transform-box: fill-box; transform-origin: 50% 0%; animation: rl-sway 4s ease-in-out infinite alternate; }
@keyframes rl-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.rl-rot { animation: rl-rotx 6s ease-in-out infinite alternate; }
@keyframes rl-rotx { from { transform: scaleX(1); } to { transform: scaleX(.9); } }
@keyframes rl-hl { from { transform: translateX(0); } to { transform: translateX(30px); } }
.rl-dash { transform-origin: 50% 0%; animation: rl-ds 1.65s cubic-bezier(.5, 0, 1, .8) infinite; }
@keyframes rl-ds { 0% { opacity: 0; transform: translateY(0) scale(.15); } 8% { opacity: 1; } 100% { opacity: 1; transform: translateY(94px) scale(1.7); } }
.rl-glow { animation: rl-gw 3s ease-in-out infinite alternate; }
@keyframes rl-gw { from { opacity: .5; } to { opacity: 1; } }
.rl-rip { animation: rl-rp 3.2s ease-out infinite; }
@keyframes rl-rp { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
.rl-rip2 { animation: rl-r2 3s ease-in-out infinite alternate; }
@keyframes rl-r2 { from { transform: scaleX(.8); } to { transform: scaleX(1.12); } }
.rl-bub { animation: rl-bb 2.6s ease-in infinite; }
@keyframes rl-bb { 0% { transform: translateY(3px) scale(.4); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-6px) scale(1.2); opacity: 0; } }

/* ---------- overlays: shade, captions, progress, tag, sound ---------- */
.rl-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-night) 42%, transparent)); }

.rl-caps { position: absolute; left: 0; right: 0; top: 62%; height: 0; pointer-events: none; z-index: 2; }
.cap { position: absolute; left: 5cqw; right: 5cqw; top: 0; text-align: center; opacity: 0; transform-origin: 50% 50%; }
.cap span {
  display: inline-block;
  background: color-mix(in srgb, var(--color-phone) 55%, transparent);
  color: var(--color-white);
  padding: 1.5cqw 3cqw;
  border-radius: 3.2cqw;
  font: 800 6.4cqw/1.16 var(--font-body);
  text-wrap: balance;
}
.rl-caps--sm { top: 87%; }
.rl-caps--sm .cap span { font-size: 4cqw; line-height: 1.2; padding: .9cqw 2cqw; border-radius: 1.6cqw; background: color-mix(in srgb, var(--color-phone) 50%, transparent); }
.rl-caps--big { top: 54%; }
.rl-caps--big .cap { left: 3cqw; right: 3cqw; }
.rl-caps--big .cap span { font-size: 7.8cqw; line-height: 1.14; padding: 2cqw 3.4cqw; border-radius: 4cqw; }

.rl-prog { position: absolute; left: 3cqw; right: 3cqw; top: 1.8cqw; height: max(1.2cqw, 2px); border-radius: 2cqw; background: color-mix(in srgb, var(--color-white) 35%, transparent); overflow: hidden; z-index: 3; pointer-events: none; }
.rl-prog i { display: block; height: 100%; background: var(--color-white); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(.35); }
.rl-ai { position: absolute; left: 4cqw; bottom: 4cqw; z-index: 3; font: 700 4cqw/1 var(--font-body); color: color-mix(in srgb, var(--color-white) 70%, transparent); background: color-mix(in srgb, var(--color-night) 30%, transparent); padding: 1.3cqw 2.6cqw; border-radius: 99px; pointer-events: none; }

.rl-tagx { position: absolute; z-index: 2; opacity: 0; pointer-events: none; }
.rl-tagx--l { left: 5cqw; top: 25%; }
.rl-tagx--r { right: 5cqw; top: 42%; }
.rl-tagx span {
  display: inline-flex; align-items: center; gap: 1.6cqw;
  background: var(--color-white); color: var(--color-ink);
  font: 800 4.6cqw/1 var(--font-body);
  padding: 2cqw 3.6cqw; border-radius: 99px;
  box-shadow: 0 1.2cqw 3cqw color-mix(in srgb, var(--color-night) 25%, transparent);
  animation: rl-bob2 3s ease-in-out infinite alternate;
}
.rl-tagx span::before { content: ""; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--color-accent); }
.rl-tagx--r span { animation-delay: -1.2s; }
@keyframes rl-bob2 { to { transform: translateY(-1.6cqw); } }

.rl-quote { position: absolute; left: 6cqw; right: 6cqw; top: 17%; z-index: 2; text-align: center; color: var(--color-white); text-shadow: 0 .6cqw 2.6cqw color-mix(in srgb, var(--color-night) 50%, transparent); pointer-events: none; }
.rl-q1 { margin: 0; font: 800 11.5cqw/1.1 var(--font-body); }
.rl-q2 { margin: 4cqw 0 0; font: 700 6.2cqw/1.2 var(--font-body); color: color-mix(in srgb, var(--color-sun) 30%, var(--color-white)); }
.rl-w { display: inline-block; }


/* Static state before JS draws the scene (and without JS): night gradient with the first caption. */
.reel__static {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-weight: 800;
  font-size: 7cqw;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--color-white);
}
.reel:not(.reel--ready) { background: linear-gradient(160deg, color-mix(in srgb, var(--color-night) 82%, var(--color-white)), var(--color-night)); }

/* reduced motion: no movement, one composed still frame with the first caption visible */
@media (prefers-reduced-motion: reduce) {
  .reel *, .reel *::before, .reel *::after { animation: none !important; transition: none !important; }
  .reel .cap:first-child { opacity: 1; }
  .reel .rl-prog i { transform: scaleX(.4); }
  .reel .rl-w { opacity: 1; }
}