/*
  Scenes: motion illustrations (HTML + CSS keyframes + inline SVG).
  Markup: src/views/partials/scene.ejs. Include with:
    include('../partials/scene', { name: 'seo', size: 'lg' })
  Loops play only while the scene or an ancestor has .is-active.
  The story scene follows data-step="1".."4" on an ancestor .story-stage (or on the scene itself).
  Every drawing is authored on a fixed stage (service scenes 600 x 400, story 396 x 780) and scaled to fit its box.
*/

@property --aud-p { syntax: '<number>'; inherits: true; initial-value: 4; }
@property --ads-n { syntax: '<integer>'; inherits: true; initial-value: 14; }

/* ============================================================
   Base
   ============================================================ */
.scene {
  --ink: var(--p-ink);
  --ink-2: var(--p-ink-2);
  --ink-3: var(--p-ink-3);
  --ink-line: rgb(255 255 255 / .10);
  --paper: var(--p-paper);
  --white: #FFFFFF;
  --text: var(--p-text);
  --text-2: var(--p-text-2);
  --text-3: var(--p-text-3);
  --line: var(--p-line);
  --accent: var(--p-accent);
  --accent-lum: var(--p-lum);
  --accent-soft: var(--p-soft);
  /* night-glass UI (service scenes) */
  --g-a: var(--p-panel-a);
  --g-b: var(--p-panel-b);
  --g-edge: rgb(255 255 255 / .11);
  --g-lit: rgb(var(--p-lum-rgb) / .6);
  --g-text: var(--p-on-ink);
  --g-text-2: var(--p-on-ink-2);
  --g-text-3: var(--p-on-ink-3);
  --g-bar: rgb(255 255 255 / .2);
  --g-bar-2: rgb(255 255 255 / .1);
  --g-field: var(--p-panel-field);

  --sc-ease: cubic-bezier(.2, .7, .2, 1);
  --sc-io: cubic-bezier(.65, 0, .35, 1);
  --sc-in: cubic-bezier(.55, 0, .9, .4);
  --sc-spring: cubic-bezier(.34, 1.45, .64, 1);
  --sc-sk: var(--line);
  --sc-sk-2: color-mix(in srgb, var(--text-3) 30%, var(--line));
  --sc-sk-ink: color-mix(in srgb, var(--text) 86%, var(--white));
  --sc-hair: color-mix(in srgb, var(--text) 7%, transparent);
  --sc-shadow:
    0 0 0 1px var(--ink-line),
    0 2px 4px color-mix(in srgb, var(--ink) 30%, transparent),
    0 22px 44px -18px color-mix(in srgb, var(--ink) 80%, transparent),
    0 60px 90px -50px color-mix(in srgb, var(--ink) 90%, transparent);
  --sc-float:
    0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent),
    0 18px 40px -14px color-mix(in srgb, var(--ink) 75%, transparent);

  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit;
  container: scene / size;
  background: var(--ink-2);
  color: var(--text);
  font-family: var(--sans, 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  pointer-events: none;
}
.scene *, .scene *::before, .scene *::after { box-sizing: border-box; }
.scene i, .scene b, .scene small { font-style: normal; }
.scene svg { overflow: visible; }

.scene .sc-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 400px;
  margin: -200px 0 0 -300px;
  transform-origin: 50% 50%;
}

/* Stage scaling: service scenes are drawn on a 600 x 400 stage and scaled to fit the box (generated steps). */
.scene:not(.scene--story) > .sc-stage { scale: 1.5; }
@container scene (width < 900px) or (height < 600px) { .scene:not(.scene--story) > .sc-stage { scale: 1.475; } }
@container scene (width < 885px) or (height < 590px) { .scene:not(.scene--story) > .sc-stage { scale: 1.45; } }
@container scene (width < 870px) or (height < 580px) { .scene:not(.scene--story) > .sc-stage { scale: 1.425; } }
@container scene (width < 855px) or (height < 570px) { .scene:not(.scene--story) > .sc-stage { scale: 1.4; } }
@container scene (width < 840px) or (height < 560px) { .scene:not(.scene--story) > .sc-stage { scale: 1.375; } }
@container scene (width < 825px) or (height < 550px) { .scene:not(.scene--story) > .sc-stage { scale: 1.35; } }
@container scene (width < 810px) or (height < 540px) { .scene:not(.scene--story) > .sc-stage { scale: 1.325; } }
@container scene (width < 795px) or (height < 530px) { .scene:not(.scene--story) > .sc-stage { scale: 1.3; } }
@container scene (width < 780px) or (height < 520px) { .scene:not(.scene--story) > .sc-stage { scale: 1.275; } }
@container scene (width < 765px) or (height < 510px) { .scene:not(.scene--story) > .sc-stage { scale: 1.25; } }
@container scene (width < 750px) or (height < 500px) { .scene:not(.scene--story) > .sc-stage { scale: 1.225; } }
@container scene (width < 735px) or (height < 490px) { .scene:not(.scene--story) > .sc-stage { scale: 1.2; } }
@container scene (width < 720px) or (height < 480px) { .scene:not(.scene--story) > .sc-stage { scale: 1.175; } }
@container scene (width < 705px) or (height < 470px) { .scene:not(.scene--story) > .sc-stage { scale: 1.15; } }
@container scene (width < 690px) or (height < 460px) { .scene:not(.scene--story) > .sc-stage { scale: 1.125; } }
@container scene (width < 675px) or (height < 450px) { .scene:not(.scene--story) > .sc-stage { scale: 1.1; } }
@container scene (width < 660px) or (height < 440px) { .scene:not(.scene--story) > .sc-stage { scale: 1.075; } }
@container scene (width < 645px) or (height < 430px) { .scene:not(.scene--story) > .sc-stage { scale: 1.05; } }
@container scene (width < 630px) or (height < 420px) { .scene:not(.scene--story) > .sc-stage { scale: 1.025; } }
@container scene (width < 615px) or (height < 410px) { .scene:not(.scene--story) > .sc-stage { scale: 1; } }
@container scene (width < 600px) or (height < 400px) { .scene:not(.scene--story) > .sc-stage { scale: 0.975; } }
@container scene (width < 585px) or (height < 390px) { .scene:not(.scene--story) > .sc-stage { scale: 0.95; } }
@container scene (width < 570px) or (height < 380px) { .scene:not(.scene--story) > .sc-stage { scale: 0.925; } }
@container scene (width < 555px) or (height < 370px) { .scene:not(.scene--story) > .sc-stage { scale: 0.9; } }
@container scene (width < 540px) or (height < 360px) { .scene:not(.scene--story) > .sc-stage { scale: 0.875; } }
@container scene (width < 525px) or (height < 350px) { .scene:not(.scene--story) > .sc-stage { scale: 0.85; } }
@container scene (width < 510px) or (height < 340px) { .scene:not(.scene--story) > .sc-stage { scale: 0.825; } }
@container scene (width < 495px) or (height < 330px) { .scene:not(.scene--story) > .sc-stage { scale: 0.8; } }
@container scene (width < 480px) or (height < 320px) { .scene:not(.scene--story) > .sc-stage { scale: 0.775; } }
@container scene (width < 465px) or (height < 310px) { .scene:not(.scene--story) > .sc-stage { scale: 0.75; } }
@container scene (width < 450px) or (height < 300px) { .scene:not(.scene--story) > .sc-stage { scale: 0.725; } }
@container scene (width < 435px) or (height < 290px) { .scene:not(.scene--story) > .sc-stage { scale: 0.7; } }
@container scene (width < 420px) or (height < 280px) { .scene:not(.scene--story) > .sc-stage { scale: 0.675; } }
@container scene (width < 405px) or (height < 270px) { .scene:not(.scene--story) > .sc-stage { scale: 0.65; } }
@container scene (width < 390px) or (height < 260px) { .scene:not(.scene--story) > .sc-stage { scale: 0.625; } }
@container scene (width < 375px) or (height < 250px) { .scene:not(.scene--story) > .sc-stage { scale: 0.6; } }
@container scene (width < 360px) or (height < 240px) { .scene:not(.scene--story) > .sc-stage { scale: 0.575; } }
@container scene (width < 345px) or (height < 230px) { .scene:not(.scene--story) > .sc-stage { scale: 0.55; } }
@container scene (width < 330px) or (height < 220px) { .scene:not(.scene--story) > .sc-stage { scale: 0.525; } }
@container scene (width < 315px) or (height < 210px) { .scene:not(.scene--story) > .sc-stage { scale: 0.5; } }
@container scene (width < 300px) or (height < 200px) { .scene:not(.scene--story) > .sc-stage { scale: 0.475; } }
@container scene (width < 285px) or (height < 190px) { .scene:not(.scene--story) > .sc-stage { scale: 0.45; } }
@container scene (width < 270px) or (height < 180px) { .scene:not(.scene--story) > .sc-stage { scale: 0.425; } }
@container scene (width < 255px) or (height < 170px) { .scene:not(.scene--story) > .sc-stage { scale: 0.4; } }
@container scene (width < 240px) or (height < 160px) { .scene:not(.scene--story) > .sc-stage { scale: 0.375; } }
@container scene (width < 225px) or (height < 150px) { .scene:not(.scene--story) > .sc-stage { scale: 0.35; } }
@container scene (width < 210px) or (height < 140px) { .scene:not(.scene--story) > .sc-stage { scale: 0.325; } }
@container scene (width < 195px) or (height < 130px) { .scene:not(.scene--story) > .sc-stage { scale: 0.3; } }
.scene--story > .sc-stage { scale: 1.4; }
@container scene (width < 558px) or (height < 1095px) { .scene--story > .sc-stage { scale: 1.38; } }
@container scene (width < 550px) or (height < 1080px) { .scene--story > .sc-stage { scale: 1.36; } }
@container scene (width < 542px) or (height < 1064px) { .scene--story > .sc-stage { scale: 1.34; } }
@container scene (width < 534px) or (height < 1048px) { .scene--story > .sc-stage { scale: 1.32; } }
@container scene (width < 526px) or (height < 1033px) { .scene--story > .sc-stage { scale: 1.3; } }
@container scene (width < 518px) or (height < 1017px) { .scene--story > .sc-stage { scale: 1.28; } }
@container scene (width < 510px) or (height < 1001px) { .scene--story > .sc-stage { scale: 1.26; } }
@container scene (width < 502px) or (height < 986px) { .scene--story > .sc-stage { scale: 1.24; } }
@container scene (width < 494px) or (height < 970px) { .scene--story > .sc-stage { scale: 1.22; } }
@container scene (width < 486px) or (height < 955px) { .scene--story > .sc-stage { scale: 1.2; } }
@container scene (width < 478px) or (height < 939px) { .scene--story > .sc-stage { scale: 1.18; } }
@container scene (width < 470px) or (height < 923px) { .scene--story > .sc-stage { scale: 1.16; } }
@container scene (width < 462px) or (height < 908px) { .scene--story > .sc-stage { scale: 1.14; } }
@container scene (width < 454px) or (height < 892px) { .scene--story > .sc-stage { scale: 1.12; } }
@container scene (width < 446px) or (height < 876px) { .scene--story > .sc-stage { scale: 1.1; } }
@container scene (width < 438px) or (height < 861px) { .scene--story > .sc-stage { scale: 1.08; } }
@container scene (width < 430px) or (height < 845px) { .scene--story > .sc-stage { scale: 1.06; } }
@container scene (width < 422px) or (height < 829px) { .scene--story > .sc-stage { scale: 1.04; } }
@container scene (width < 414px) or (height < 814px) { .scene--story > .sc-stage { scale: 1.02; } }
@container scene (width < 406px) or (height < 798px) { .scene--story > .sc-stage { scale: 1; } }
@container scene (width < 398px) or (height < 782px) { .scene--story > .sc-stage { scale: 0.98; } }
@container scene (width < 391px) or (height < 767px) { .scene--story > .sc-stage { scale: 0.96; } }
@container scene (width < 383px) or (height < 751px) { .scene--story > .sc-stage { scale: 0.94; } }
@container scene (width < 375px) or (height < 736px) { .scene--story > .sc-stage { scale: 0.92; } }
@container scene (width < 367px) or (height < 720px) { .scene--story > .sc-stage { scale: 0.9; } }
@container scene (width < 359px) or (height < 704px) { .scene--story > .sc-stage { scale: 0.88; } }
@container scene (width < 351px) or (height < 689px) { .scene--story > .sc-stage { scale: 0.86; } }
@container scene (width < 343px) or (height < 673px) { .scene--story > .sc-stage { scale: 0.84; } }
@container scene (width < 335px) or (height < 657px) { .scene--story > .sc-stage { scale: 0.82; } }
@container scene (width < 327px) or (height < 642px) { .scene--story > .sc-stage { scale: 0.8; } }
@container scene (width < 319px) or (height < 626px) { .scene--story > .sc-stage { scale: 0.78; } }
@container scene (width < 311px) or (height < 610px) { .scene--story > .sc-stage { scale: 0.76; } }
@container scene (width < 303px) or (height < 595px) { .scene--story > .sc-stage { scale: 0.74; } }
@container scene (width < 295px) or (height < 579px) { .scene--story > .sc-stage { scale: 0.72; } }
@container scene (width < 287px) or (height < 564px) { .scene--story > .sc-stage { scale: 0.7; } }
@container scene (width < 279px) or (height < 548px) { .scene--story > .sc-stage { scale: 0.68; } }
@container scene (width < 271px) or (height < 532px) { .scene--story > .sc-stage { scale: 0.66; } }
@container scene (width < 263px) or (height < 517px) { .scene--story > .sc-stage { scale: 0.64; } }
@container scene (width < 255px) or (height < 501px) { .scene--story > .sc-stage { scale: 0.62; } }
@container scene (width < 247px) or (height < 485px) { .scene--story > .sc-stage { scale: 0.6; } }
@container scene (width < 239px) or (height < 470px) { .scene--story > .sc-stage { scale: 0.58; } }
@container scene (width < 231px) or (height < 454px) { .scene--story > .sc-stage { scale: 0.56; } }
@container scene (width < 223px) or (height < 438px) { .scene--story > .sc-stage { scale: 0.54; } }
@container scene (width < 215px) or (height < 423px) { .scene--story > .sc-stage { scale: 0.52; } }
@container scene (width < 207px) or (height < 407px) { .scene--story > .sc-stage { scale: 0.5; } }
@container scene (width < 199px) or (height < 391px) { .scene--story > .sc-stage { scale: 0.48; } }
@container scene (width < 192px) or (height < 376px) { .scene--story > .sc-stage { scale: 0.46; } }
@container scene (width < 184px) or (height < 360px) { .scene--story > .sc-stage { scale: 0.44; } }
@container scene (width < 176px) or (height < 345px) { .scene--story > .sc-stage { scale: 0.42; } }
@container scene (width < 168px) or (height < 329px) { .scene--story > .sc-stage { scale: 0.4; } }
@container scene (width < 160px) or (height < 313px) { .scene--story > .sc-stage { scale: 0.38; } }
@container scene (width < 152px) or (height < 298px) { .scene--story > .sc-stage { scale: 0.36; } }
@container scene (width < 144px) or (height < 282px) { .scene--story > .sc-stage { scale: 0.34; } }
@container scene (width < 136px) or (height < 266px) { .scene--story > .sc-stage { scale: 0.32; } }
@container scene (width < 128px) or (height < 251px) { .scene--story > .sc-stage { scale: 0.3; } }
/* Exact fit where typed arithmetic is supported. */
@supports (scale: calc(10px / 5px)) {
  .scene:not(.scene--story) > .sc-stage { scale: min(1.5, calc(100cqw / 600px), calc(100cqh / 400px)); }
  .scene--story > .sc-stage { scale: min(1.4, calc(100cqw / 398px), calc(100cqh / 782px)); }
}

/* ============================================================
   Shared pieces
   ============================================================ */
.scene .sc-i { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene .sk { display: block; height: 7px; border-radius: 4px; background: var(--sc-sk); }
.scene .sk--2 { background: var(--sc-sk-2); }



.scene .sc-stars { display: inline-flex; gap: 2px; }
.scene .sc-stars svg { display: block; width: 12px; height: 12px; fill: var(--text); }

.scene .sc-peaks { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene .sc-peaks__sun { fill: var(--white); }
.scene .sc-peaks__b { fill: color-mix(in srgb, var(--accent) 15%, var(--white)); }
.scene .sc-peaks__f { fill: color-mix(in srgb, var(--accent) 28%, var(--white)); }
.scene .sc-peaks--grey .sc-peaks__b { fill: var(--line); }
.scene .sc-peaks--grey .sc-peaks__f { fill: var(--sc-sk-2); }
.scene .sc-peaks--wash .sc-peaks__sun { fill: var(--white); opacity: .85; }
.scene .sc-peaks--wash .sc-peaks__b { fill: color-mix(in srgb, var(--white) 34%, transparent); }
.scene .sc-peaks--wash .sc-peaks__f { fill: color-mix(in srgb, var(--white) 58%, transparent); }

.scene .sc-pin { display: block; width: 100%; height: 100%; }
.scene .sc-pin__body { fill: color-mix(in srgb, var(--white) 76%, var(--text-3)); }
.scene .sc-pin__dot { fill: var(--ink-3); }
.scene .sc-pin--you .sc-pin__body { fill: var(--accent); stroke: var(--accent-lum); stroke-width: 1; }
.scene .sc-pin--you .sc-pin__dot { fill: var(--white); }


@keyframes sc-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ============================================================
   Service scenes: night-glass UI on a 600 x 400 stage
   Dark glass panels, white type, one violet accent. Every loop is 8s and
   keeps the composition complete; only one thing changes at a time.
   ============================================================ */
.scene .gp { position: absolute; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, var(--g-a), var(--g-b)); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-edge), inset 0 1px 0 rgba(255, 255, 255, .08), 0 36px 70px -30px rgba(0, 0, 0, .9), 0 14px 28px -14px rgba(0, 0, 0, .6); }
.scene .gp--lit { box-shadow: inset 0 0 0 1px var(--g-lit), inset 0 1px 0 rgba(255, 255, 255, .14), 0 36px 70px -30px rgba(0, 0, 0, .9); }
.scene .gb { display: block; height: 12px; border-radius: 6px; background: var(--g-bar); }
.scene .gb--2 { background: var(--g-bar-2); }
.scene .g-chrome { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; padding: 0 18px; background: color-mix(in srgb, var(--p-panel-a) 80%, #000000); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.scene .g-dots { display: flex; gap: 7px; }
.scene .g-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.scene .g-url { position: absolute; left: 50%; top: 9px; height: 28px; translate: -50% 0; display: flex; align-items: center; gap: 7px; padding: 0 16px 0 13px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: 15px; font-weight: 500; color: var(--g-text-2); white-space: nowrap; }
.scene .g-url .sc-i { width: 13px; height: 13px; stroke-width: 2.2; color: var(--g-text-3); }
.scene .g-links { display: flex; gap: 14px; margin-left: auto; }
.scene .g-links .gb { width: 36px; height: 10px; }
.scene .g-logo { position: relative; flex: none; display: block; width: 26px; height: 26px; border-radius: 9px; background: var(--accent); }
.scene .g-logo::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--white); }
.scene .g-field { position: absolute; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-radius: 28px; background: var(--g-field); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 20px; font-weight: 500; color: var(--g-text); white-space: nowrap; }
.scene .g-field > .sc-i { width: 21px; height: 21px; color: var(--accent-lum); stroke-width: 2.2; }
.scene .g-row { position: absolute; height: 54px; border-radius: 14px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.scene .g-row > .gb { position: absolute; left: 18px; top: 15px; width: 150px; }
.scene .g-row > .gb--2 { top: 34px; width: 96px; height: 8px; }
.scene .gbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px 0 17px; border-radius: 22px; background: var(--accent); color: var(--p-on-accent); font-size: 18px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgb(var(--p-lum-rgb) / .55); }
.scene .gbtn .sc-i { width: 18px; height: 18px; stroke-width: 2.2; }
.scene .gbtn--ghost { background: rgba(255, 255, 255, .08); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-edge); }
.scene .g-ripple { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent-lum); opacity: 0; }
.scene .g-art { position: absolute; display: block; overflow: hidden; border-radius: 16px; background: var(--p-accent-deep); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.scene .sc-peaks--night .sc-peaks__sun { fill: var(--white); }
.scene .sc-peaks--night .sc-peaks__b { fill: rgb(var(--p-lum-rgb) / .45); }
.scene .sc-peaks--night .sc-peaks__f { fill: var(--p-ink-2); }
.scene .g-sheen { position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .3) 50%, transparent 58%); transform: translateX(-70%); }
.scene .g-cursor { display: block; width: 24px; height: 28px; fill: var(--white); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.scene .g-head { position: absolute; left: 20px; top: 18px; display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--g-text); }
.scene .g-head__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgb(var(--p-accent-rgb) / .45); color: var(--accent-lum); box-shadow: inset 0 0 0 1px rgb(var(--p-lum-rgb) / .35); }
.scene .g-head__ic .sc-i { width: 19px; height: 19px; stroke-width: 2.3; }
.scene .g-toast { display: flex; align-items: center; gap: 14px; padding: 0 20px 0 18px; }
.scene .g-toast__ic { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--p-on-accent); }
.scene .g-toast__ic .sc-i { width: 22px; height: 22px; stroke-width: 2.1; }
.scene .g-toast b { display: block; font-size: 20px; font-weight: 700; color: var(--g-text); }
.scene .g-toast small { display: block; margin-top: 3px; font-size: 16px; font-weight: 500; color: var(--g-text-2); }

/* ============================================================
   1. Web design: a design tool selects the headline, the call
      button, the photo and the phone layout in turn
   ============================================================ */
.scene--web-design .wd-win { left: 22px; top: 36px; width: 410px; height: 300px; }
.scene--web-design .wd-nav { position: absolute; left: 24px; right: 24px; top: 62px; display: flex; align-items: center; }
.scene--web-design .wd-title { position: absolute; left: 24px; top: 102px; width: 222px; font-size: 29px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--g-text); }
.scene--web-design .wd-btn { position: absolute; left: 24px; top: 186px; }
.scene--web-design .wd-lines { position: absolute; left: 24px; top: 250px; display: grid; gap: 10px; }
.scene--web-design .wd-lines .gb { height: 10px; width: 176px; }
.scene--web-design .wd-lines .gb + .gb { width: 120px; }
.scene--web-design .wd-art { left: 236px; top: 100px; width: 150px; height: 176px; }
.scene--web-design .wd-phone { position: absolute; left: 408px; top: 78px; width: 168px; height: 304px; padding: 7px; border-radius: 32px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 70px -30px rgba(0, 0, 0, .95); }
.scene--web-design .wd-phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgb(var(--p-lum-rgb) / .7); opacity: 0; }
.scene--web-design .wd-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, var(--g-a), var(--g-b)); }
.scene--web-design .wd-island { position: absolute; z-index: 2; left: 50%; top: 9px; width: 56px; height: 17px; margin-left: -28px; border-radius: 9px; background: var(--ink); }
.scene--web-design .wd-part { left: 12px; right: 12px; top: 34px; height: 110px; border-radius: 14px; }
.scene--web-design .wd-ptitle { position: absolute; left: 14px; right: 12px; top: 158px; font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--g-text); }
.scene--web-design .wd-pbtn { position: absolute; left: 14px; top: 236px; height: 38px; gap: 7px; padding: 0 16px 0 14px; font-size: 16px; }
.scene--web-design .wd-pbtn .sc-i { width: 16px; height: 16px; }
.scene--web-design .wd-sel { position: absolute; z-index: 5; left: 38px; top: 130px; width: 238px; height: 79px; border-radius: 10px; border: 2px solid var(--accent-lum); background: rgb(var(--p-lum-rgb) / .07); box-shadow: 0 0 0 5px rgb(var(--p-lum-rgb) / .12); }
.scene--web-design .wd-sel > i { position: absolute; width: 11px; height: 11px; border-radius: 3px; background: var(--white); box-shadow: 0 0 0 2px var(--accent-lum); }
.scene--web-design .wd-sel > i:nth-child(1) { left: -6.5px; top: -6.5px; }
.scene--web-design .wd-sel > i:nth-child(2) { right: -6.5px; top: -6.5px; }
.scene--web-design .wd-sel > i:nth-child(3) { left: -6.5px; bottom: -6.5px; }
.scene--web-design .wd-sel > i:nth-child(4) { right: -6.5px; bottom: -6.5px; }
.scene--web-design .wd-sel .g-cursor { position: absolute; right: -24px; bottom: -30px; transform-origin: 3px 3px; }

.scene--web-design .wd-sel { animation: wd-sel 8s var(--sc-io) infinite both; }
.scene--web-design .wd-sel .g-cursor { animation: wd-click 8s ease infinite both; }
.scene--web-design .wd-btn { animation: wd-press 8s ease infinite both; }
.scene--web-design .wd-btn .g-ripple, .scene--web-design .wd-pbtn .g-ripple { animation: wd-ripple 8s ease-out infinite both; }
.scene--web-design .wd-art .g-sheen { animation: wd-sheen 8s var(--sc-io) infinite both; }
.scene--web-design .wd-phone::after { animation: wd-phone 8s ease infinite both; }

@keyframes wd-sel {
  0%, 18% { left: 38px; top: 130px; width: 238px; height: 79px; }
  26%, 42% { left: 38px; top: 214px; width: var(--wd-btn-w, 156px); height: 60px; }
  50%, 66% { left: 250px; top: 128px; width: 166px; height: 192px; }
  74%, 90% { left: 400px; top: 70px; width: 184px; height: 320px; }
  100% { left: 38px; top: 130px; width: 238px; height: 79px; }
}
@keyframes wd-click { 0%, 27% { transform: none; } 29% { transform: scale(.8); } 31%, 100% { transform: none; } }
@keyframes wd-press { 0%, 27.5% { transform: none; } 29.5% { transform: scale(.95); } 32%, 100% { transform: none; } }
@keyframes wd-ripple { 0%, 28.5% { opacity: 0; transform: none; } 30% { opacity: 1; transform: none; } 42%, 100% { opacity: 0; transform: scale(1.3, 1.7); } }
@keyframes wd-sheen { 0%, 52% { transform: translateX(-70%); } 64%, 100% { transform: translateX(70%); } }
@keyframes wd-phone { 0%, 72% { opacity: 0; } 78%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ============================================================
   2. SEO: your business drops off, then climbs back to the top
   ============================================================ */
.scene--seo .seo-win { left: 24px; top: 28px; width: 372px; height: 344px; }
.scene--seo .seo-search { left: 20px; right: 20px; top: 20px; height: 54px; }
.scene--seo .seo-ranks { position: absolute; left: 20px; top: 92px; width: 28px; margin: 0; padding: 0; list-style: none; }
.scene--seo .seo-ranks li { display: flex; align-items: center; justify-content: center; height: 54px; margin-bottom: 8px; font-size: 20px; font-weight: 700; color: var(--g-text-3); }
.scene--seo .seo-ranks li:first-child { color: var(--accent-lum); }
.scene--seo .seo-row { left: 58px; right: 20px; top: 92px; }
.scene--seo .seo-row--a { transform: translateY(62px); }
.scene--seo .seo-row--b { transform: translateY(124px); }
.scene--seo .seo-row--c { transform: translateY(186px); }
.scene--seo .seo-row--you { z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 18px; background: rgb(var(--p-accent-rgb) / .4); box-shadow: inset 0 0 0 1px var(--g-lit); }
.scene--seo .seo-row--you b { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--white); }
.scene--seo .seo-row--you small { margin-top: 3px; font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--p-on-ink) 85%, transparent); }
.scene--seo .seo-chart { left: 368px; top: 166px; width: 212px; height: 196px; }
.scene--seo .seo-chart__svg { position: absolute; left: 16px; bottom: 16px; width: 180px; height: 112px; }
.scene--seo .seo-chart__grid { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.scene--seo .seo-chart__area { fill: rgb(var(--p-lum-rgb) / .16); }
.scene--seo .seo-chart__line { fill: none; stroke: var(--accent-lum); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgb(var(--p-lum-rgb) / .8)); }
.scene--seo .seo-chart__pt { transform-box: fill-box; transform-origin: center; }
.scene--seo .seo-chart__dot { fill: var(--white); }
.scene--seo .seo-chart__ring { fill: none; stroke: var(--accent-lum); stroke-width: 2; transform-box: fill-box; transform-origin: center; }

.scene--seo .seo-row--you { animation: seo-you 8s var(--sc-io) infinite both; }
.scene--seo .seo-row--a { animation: seo-a 8s var(--sc-io) infinite both; }
.scene--seo .seo-row--b { animation: seo-b 8s var(--sc-io) infinite both; }
.scene--seo .seo-row--c { animation: seo-c 8s var(--sc-io) infinite both; }
.scene--seo .seo-ranks li:first-child { animation: seo-r1 8s ease infinite both; }
.scene--seo .seo-chart__line { animation: seo-line 8s var(--sc-io) infinite both; }
.scene--seo .seo-chart__area { animation: seo-area 8s ease infinite both; }
.scene--seo .seo-chart__pt { animation: seo-pt 8s var(--sc-ease) infinite both; }
.scene--seo .seo-chart__ring { animation: sc-ping 2s ease-out infinite; }

@keyframes seo-you {
  0%, 30% { transform: translateY(0); opacity: 1; }
  34% { transform: translateY(0); opacity: 0; }
  35% { transform: translateY(186px); opacity: 0; }
  40%, 46% { transform: translateY(186px); opacity: 1; }
  54%, 60% { transform: translateY(124px); opacity: 1; }
  68%, 74% { transform: translateY(62px); opacity: 1; }
  82%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes seo-a { 0%, 32% { transform: translateY(62px); } 38%, 74% { transform: translateY(0); } 82%, 100% { transform: translateY(62px); } }
@keyframes seo-b { 0%, 32% { transform: translateY(124px); } 38%, 60% { transform: translateY(62px); } 68%, 100% { transform: translateY(124px); } }
@keyframes seo-c { 0%, 32% { transform: translateY(186px); } 38%, 46% { transform: translateY(124px); } 54%, 100% { transform: translateY(186px); } }
@keyframes seo-r1 { 0%, 31% { color: var(--accent-lum); } 35%, 80% { color: var(--g-text-3); } 84%, 100% { color: var(--accent-lum); } }
@keyframes seo-line { 0%, 32% { stroke-dashoffset: 0; opacity: 1; } 36% { stroke-dashoffset: 0; opacity: 0; } 37% { stroke-dashoffset: 1; opacity: 0; } 40% { stroke-dashoffset: 1; opacity: 1; } 82%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes seo-area { 0%, 32% { opacity: 1; } 36%, 70% { opacity: 0; } 84%, 100% { opacity: 1; } }
@keyframes seo-pt { 0%, 32% { opacity: 1; transform: none; } 36%, 80% { opacity: 0; transform: scale(.4); } 84% { opacity: 1; transform: scale(1.35); } 88%, 100% { opacity: 1; transform: none; } }
@keyframes sc-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

/* ============================================================
   3. Local map listing: the route lights up, your pin drops in
      with a pulse and the listing card slides up
   ============================================================ */
.scene--local-map-listing .map-panel { left: 16px; top: 16px; width: 568px; height: 368px; background: var(--p-ink-2); }
.scene--local-map-listing .map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene--local-map-listing .map-water { fill: rgb(var(--p-accent-rgb) / .2); }
.scene--local-map-listing .map-park { fill: rgb(var(--p-lum-rgb) / .1); }
.scene--local-map-listing .map-minor { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 6; }
.scene--local-map-listing .map-major { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 12; }
.scene--local-map-listing .map-ave { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 9; }
.scene--local-map-listing .map-route { fill: none; stroke: var(--accent-lum); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgb(var(--p-lum-rgb) / .9)); }
.scene--local-map-listing .map-here { fill: var(--white); stroke: var(--accent); stroke-width: 4; }
.scene--local-map-listing .map-pin { position: absolute; width: 30px; height: 38px; }
.scene--local-map-listing .map-pin .sc-pin__body { fill: rgba(255, 255, 255, .5); }
.scene--local-map-listing .map-pin .sc-pin__dot { fill: var(--p-ink-2); }
.scene--local-map-listing .map-pin--1 { left: 109px; top: 138px; }
.scene--local-map-listing .map-pin--2 { left: 289px; top: 138px; }
.scene--local-map-listing .map-pin--3 { left: 469px; top: 234px; }
.scene--local-map-listing .map-you { position: absolute; inset: 0; }
.scene--local-map-listing .map-pin--you { left: 401px; top: 58px; width: 46px; height: 58px; transform-origin: 50% 100%; }
.scene--local-map-listing .map-pin--you .sc-pin__body { fill: var(--accent); stroke: var(--accent-lum); stroke-width: 1.2; }
.scene--local-map-listing .map-pin--you .sc-pin__dot { fill: var(--white); }
.scene--local-map-listing .map-rings { position: absolute; left: 354px; top: 86px; width: 140px; height: 60px; }
.scene--local-map-listing .map-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-lum); background: rgb(var(--p-lum-rgb) / .1); opacity: 0; }
.scene--local-map-listing .map-card { left: 24px; top: 214px; width: 330px; height: 130px; }
.scene--local-map-listing .map-thumb { left: 16px; top: 16px; width: 98px; height: 98px; border-radius: 14px; }
.scene--local-map-listing .map-info { position: absolute; left: 130px; top: 16px; right: 14px; display: flex; flex-direction: column; align-items: flex-start; }
.scene--local-map-listing .map-info b { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--white); }
.scene--local-map-listing .map-open { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--accent-lum); }
.scene--local-map-listing .map-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-lum); box-shadow: 0 0 10px var(--accent-lum); }
.scene--local-map-listing .map-acts { display: flex; gap: 8px; margin-top: 12px; }
.scene--local-map-listing .map-acts .gbtn { height: 38px; padding: 0 16px 0 14px; font-size: 16px; }
.scene--local-map-listing .map-acts .gbtn .sc-i { width: 16px; height: 16px; }
.scene--local-map-listing .map-nav { width: 38px; padding: 0; justify-content: center; }

.scene--local-map-listing .map-route { animation: map-route 8s var(--sc-io) infinite both; }
.scene--local-map-listing .map-you { animation: map-you 8s var(--sc-ease) infinite both; }
.scene--local-map-listing .map-rings i { animation: map-ring 2.4s ease-out infinite; }
.scene--local-map-listing .map-rings i + i { animation-delay: 1.2s; }
.scene--local-map-listing .map-pin--1, .scene--local-map-listing .map-pin--2, .scene--local-map-listing .map-pin--3 { animation: map-bob 3.2s ease-in-out infinite; }
.scene--local-map-listing .map-pin--2 { animation-delay: -1.1s; }
.scene--local-map-listing .map-pin--3 { animation-delay: -2.2s; }
.scene--local-map-listing .map-card { animation: map-card 8s var(--sc-io) infinite both; }

@keyframes map-route { 0%, 6% { stroke-dashoffset: 1; opacity: 1; } 34%, 62% { stroke-dashoffset: 0; opacity: 1; } 68%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes map-you {
  0%, 72% { transform: none; opacity: 1; }
  75% { transform: translateY(-24px); opacity: 0; }
  78% { transform: translateY(-110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  84% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
  87% { transform: translateY(-12px); animation-timing-function: ease-in; }
  90%, 100% { transform: none; opacity: 1; }
}
@keyframes map-ring { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes map-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@keyframes map-card { 0%, 70% { transform: none; opacity: 1; } 74%, 82% { transform: translateY(40px); opacity: 0; } 89%, 100% { transform: none; opacity: 1; } }

/* ============================================================
   4. Google Ads: the query is typed, your ad lands on top,
      someone taps Call and the phone rings
   ============================================================ */
.scene--google-ads .ads-win { left: 24px; top: 26px; width: 392px; height: 348px; }
.scene--google-ads .ads-search { left: 20px; right: 20px; top: 20px; height: 56px; gap: 12px; }
.scene--google-ads .ads-q { display: inline-flex; white-space: pre; }
.scene--google-ads .ads-ch { display: inline-block; overflow: hidden; max-width: calc(clamp(0, var(--ads-n) - var(--i), 1) * 1em); }
.scene--google-ads .ads-caret { display: inline-block; width: 2px; height: 24px; margin-left: -10px; background: var(--accent-lum); animation: sc-blink 1s steps(1) infinite; }
.scene--google-ads .ads-row { left: 20px; right: 20px; top: 94px; --ry0: 0px; --ry1: 128px; transform: translateY(var(--ry1)); }
.scene--google-ads .ads-row--2 { --ry0: 62px; --ry1: 190px; }
.scene--google-ads .ads-row--3 { --ry0: 124px; --ry1: 252px; }
.scene--google-ads .ads-ad { position: absolute; z-index: 2; left: 20px; right: 20px; top: 94px; height: 116px; padding: 16px 20px; border-radius: 16px; background: rgb(var(--p-accent-rgb) / .34); box-shadow: inset 0 0 0 1px var(--g-lit); }
.scene--google-ads .ads-tag { display: block; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--p-on-ink) 75%, transparent); }
.scene--google-ads .ads-ad b { display: block; margin-top: 6px; font-size: 23px; font-weight: 700; color: var(--white); }
.scene--google-ads .ads-ad small { display: block; margin-top: 3px; font-size: 16px; font-weight: 500; color: color-mix(in srgb, var(--p-on-ink) 85%, transparent); }
.scene--google-ads .ads-call { position: absolute; right: 18px; top: 36px; }
.scene--google-ads .ads-toast { left: 344px; top: 240px; width: 236px; height: 90px; }
.scene--google-ads .ads-toast .g-toast__ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent-lum); animation: sc-ping 1.6s ease-out infinite; }
.scene--google-ads .ads-cursor { position: absolute; z-index: 6; left: 0; top: 0; transform: translate(322px, 172px); }

.scene--google-ads .ads-search { animation: ads-type 8s linear infinite both; }
.scene--google-ads .ads-row { animation: ads-row 8s var(--sc-io) infinite both; }
.scene--google-ads .ads-ad { animation: ads-ad 8s var(--sc-io) infinite both; }
.scene--google-ads .ads-call { animation: wd-press 8s ease infinite both; animation-delay: -1s; }
.scene--google-ads .ads-call .g-ripple { animation: ads-ripple 8s ease-out infinite both; }
.scene--google-ads .ads-cursor { animation: ads-cur 8s var(--sc-io) infinite both; }
.scene--google-ads .ads-toast { animation: ads-toast 8s var(--sc-io) infinite both; }
.scene--google-ads .ads-toast .g-toast__ic .sc-i { animation: ads-ring 1.6s ease-in-out infinite; }

@keyframes ads-type { 0%, 64% { --ads-n: 14; } 69%, 76% { --ads-n: 0; } 90%, 100% { --ads-n: 14; } }
@keyframes ads-row { 0%, 70% { transform: translateY(var(--ry1)); } 76%, 94% { transform: translateY(var(--ry0)); } 100% { transform: translateY(var(--ry1)); } }
@keyframes ads-ad { 0%, 68% { opacity: 1; transform: none; } 74%, 94% { opacity: 0; transform: translateY(-10px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes ads-ripple { 0%, 18% { opacity: 0; transform: none; } 19.5% { opacity: 1; transform: none; } 31%, 100% { opacity: 0; transform: scale(1.4, 1.8); } }
@keyframes ads-cur {
  0%, 4% { transform: translate(300px, 340px); opacity: 0; }
  8% { opacity: 1; }
  16% { transform: translate(322px, 172px); }
  18% { transform: translate(322px, 172px) scale(.8); }
  20%, 26% { transform: translate(322px, 172px); opacity: 1; }
  38% { transform: translate(300px, 300px); opacity: 0; }
  100% { transform: translate(300px, 340px); opacity: 0; }
}
@keyframes ads-toast { 0%, 21% { opacity: 0; transform: translateY(16px) scale(.96); } 28%, 64% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes ads-ring { 0%, 50%, 100% { rotate: 0deg; } 10% { rotate: -14deg; } 20% { rotate: 12deg; } 30% { rotate: -10deg; } 40% { rotate: 6deg; } }

/* ============================================================
   5. Social media ads: a sponsored post scrolls in, likes float
      up, a booking arrives and reach keeps growing
   ============================================================ */
.scene--social-media-ads .soc-phone { position: absolute; left: 62px; top: 14px; width: 216px; height: 372px; padding: 8px; border-radius: 40px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 70px -30px rgba(0, 0, 0, .95); }
.scene--social-media-ads .soc-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 32px; background: linear-gradient(180deg, var(--g-a), var(--g-b)); }
.scene--social-media-ads .soc-island { position: absolute; z-index: 3; left: 50%; top: 10px; width: 68px; height: 20px; margin-left: -34px; border-radius: 10px; background: var(--ink); }
.scene--social-media-ads .soc-post { position: absolute; left: 0; right: 0; top: 42px; }
.scene--social-media-ads .soc-head { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; }
.scene--social-media-ads .soc-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--g-a), 0 0 0 4px var(--accent-lum); }
.scene--social-media-ads .soc-av::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--white); }
.scene--social-media-ads .soc-who b { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--g-text); }
.scene--social-media-ads .soc-who small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--g-text-3); }
.scene--social-media-ads .soc-img { position: relative; height: 168px; margin-top: 8px; border-radius: 0; box-shadow: none; }
.scene--social-media-ads .soc-cta { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 0; }
.scene--social-media-ads .soc-book { height: 36px; padding: 0 16px; font-size: 15px; }
.scene--social-media-ads .soc-like { display: grid; place-items: center; width: 36px; height: 36px; color: var(--accent-lum); }
.scene--social-media-ads .soc-like .sc-i { width: 26px; height: 26px; fill: currentColor; stroke-width: 2; }
.scene--social-media-ads .soc-caps { display: grid; gap: 8px; padding: 14px 14px 0; }
.scene--social-media-ads .soc-caps .gb { width: 82%; height: 9px; }
.scene--social-media-ads .soc-caps .gb + .gb { width: 56%; }
.scene--social-media-ads .soc-hearts { position: absolute; z-index: 2; left: 150px; top: 274px; width: 36px; height: 36px; }
.scene--social-media-ads .soc-hearts i { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; color: var(--accent-lum); opacity: 0; }
.scene--social-media-ads .soc-hearts .sc-i { width: 24px; height: 24px; fill: currentColor; }
.scene--social-media-ads .soc-toast { left: 314px; top: 58px; width: 258px; height: 92px; }
.scene--social-media-ads .soc-reach { left: 314px; top: 170px; width: 258px; height: 196px; }
.scene--social-media-ads .soc-bars { position: absolute; left: 22px; right: 22px; bottom: 20px; height: 104px; display: flex; align-items: flex-end; gap: 10px; }
.scene--social-media-ads .soc-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 7px 7px 4px 4px; background: var(--accent-lum); transform-origin: 50% 100%; }

.scene--social-media-ads .soc-post { animation: soc-post 8s var(--sc-io) infinite both; }
.scene--social-media-ads .soc-like .sc-i { animation: soc-pop 2.4s ease-out infinite; }
.scene--social-media-ads .soc-hearts i { animation: soc-heart 2.4s ease-out infinite; }
.scene--social-media-ads .soc-hearts i:nth-child(2) { animation-delay: .8s; }
.scene--social-media-ads .soc-hearts i:nth-child(3) { animation-delay: 1.6s; }
.scene--social-media-ads .soc-toast { animation: soc-toast 8s var(--sc-io) infinite both; }
.scene--social-media-ads .soc-bars i { animation: soc-bar 8s var(--sc-io) infinite both; animation-delay: calc(var(--k) * .07s); }

@keyframes soc-post { 0%, 78% { transform: none; opacity: 1; } 84% { transform: translateY(-70px); opacity: 0; } 85% { transform: translateY(90px); opacity: 0; } 94%, 100% { transform: none; opacity: 1; } }
@keyframes soc-pop { 0%, 100% { transform: none; } 8% { transform: scale(1.3); } 16% { transform: scale(.94); } 24% { transform: none; } }
@keyframes soc-heart { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { transform: translate(-4px, -22px) scale(1); opacity: 1; } 60% { transform: translate(8px, -92px) scale(.9); opacity: .85; } 100% { transform: translate(-6px, -150px) scale(.7); opacity: 0; } }
@keyframes soc-toast { 0%, 14% { opacity: 0; transform: translateX(24px); } 22%, 74% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateX(24px); } }
@keyframes soc-bar { 0%, 78% { transform: none; } 84%, 87% { transform: scaleY(.12); } 97%, 100% { transform: none; } }

/* ============================================================
   6. Audit: a scan sweeps the page, findings are marked and the
      checklist completes into a report
   ============================================================ */
.scene--audit .aud-win { left: 20px; top: 28px; width: 340px; height: 344px; }
.scene--audit .aud-nav { position: absolute; left: 22px; right: 22px; top: 62px; display: flex; align-items: center; }
.scene--audit .aud-nav .g-links .gb { width: 30px; height: 9px; }
.scene--audit .aud-h1, .scene--audit .aud-h2, .scene--audit .aud-p1, .scene--audit .aud-p2 { position: absolute; left: 22px; }
.scene--audit .aud-h1 { top: 106px; width: 170px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .5); }
.scene--audit .aud-h2 { top: 130px; width: 118px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .5); }
.scene--audit .aud-p1 { top: 162px; width: 160px; height: 9px; }
.scene--audit .aud-p2 { top: 178px; width: 116px; height: 9px; }
.scene--audit .aud-btn { position: absolute; left: 22px; top: 202px; width: 104px; height: 34px; border-radius: 17px; background: var(--accent); }
.scene--audit .aud-art { left: 210px; top: 104px; width: 108px; height: 132px; border-radius: 14px; }
.scene--audit .aud-tiles { position: absolute; left: 22px; right: 22px; top: 256px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scene--audit .aud-tiles i { height: 66px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.scene--audit .aud-scan { position: absolute; z-index: 2; left: 0; right: 0; top: 46px; height: 70px; border-bottom: 2px solid var(--accent-lum); background: rgb(var(--p-lum-rgb) / .1); opacity: 0; }
.scene--audit .aud-mark { position: absolute; z-index: 2; border-radius: 10px; border: 2px solid rgb(var(--p-lum-rgb) / .9); background: rgb(var(--p-lum-rgb) / .08); opacity: clamp(0, var(--aud-p) - var(--m), 1); }
.scene--audit .aud-mark--1 { --m: .5; left: 14px; top: 98px; width: 186px; height: 96px; }
.scene--audit .aud-mark--2 { --m: 1.5; left: 14px; top: 196px; width: 120px; height: 46px; }
.scene--audit .aud-mark--3 { --m: 2.5; left: 202px; top: 96px; width: 124px; height: 148px; }
.scene--audit .aud-list { left: 330px; top: 54px; width: 250px; height: 272px; }
.scene--audit .aud-list__head { position: absolute; left: 22px; top: 20px; font-size: 21px; font-weight: 700; color: var(--g-text); }
.scene--audit .aud-item { --t: clamp(0, var(--aud-p) - var(--k) + 1, 1); position: absolute; left: 22px; right: 18px; top: calc(62px + (var(--k) - 1) * 50px); height: 50px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 19px; font-weight: 600; color: var(--g-text); }
.scene--audit .aud-item > span { opacity: calc(.5 + var(--t) * .5); }
.scene--audit .aud-check { flex: none; width: 28px; height: 28px; overflow: visible; }
.scene--audit .aud-check__base { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.scene--audit .aud-check__fill { fill: var(--accent); opacity: clamp(0, (var(--t) - .75) * 4, 1); }
.scene--audit .aud-check__ring { fill: none; stroke: var(--accent-lum); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t)); filter: drop-shadow(0 0 4px rgb(var(--p-lum-rgb) / .8)); }
.scene--audit .aud-check__tick { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--t) - .7) / .3, 1)); }
.scene--audit .aud-chip { --c: clamp(0, (var(--aud-p) - 3.6) * 2.5, 1); position: absolute; left: 352px; top: 340px; opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 14px)); }

.scene--audit .sc-stage { animation: aud-p 8s linear infinite both; }
.scene--audit .aud-scan { animation: aud-scan 3.2s var(--sc-io) infinite; }

@keyframes aud-p { 0%, 6% { --aud-p: 4; } 11%, 18% { --aud-p: 0; } 66%, 100% { --aud-p: 4; } }
@keyframes aud-scan { 0% { transform: translateY(-70px); opacity: 0; } 10%, 82% { opacity: 1; } 100% { transform: translateY(228px); opacity: 0; } }

/* ============================================================
   7. Story: a phone with four states set by data-step
   ============================================================ */
.scene--story { aspect-ratio: 1 / 2; overflow: visible; background: none; }
.scene--story::before { content: none; }
.scene--story > .sc-stage { width: 396px; height: 780px; margin: -390px 0 0 -198px; }
.scene--story .st-stage::before { content: ""; position: absolute; left: 6%; right: 6%; top: 22%; bottom: 22%; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); filter: blur(48px); }
.scene--story .st-phone { position: absolute; inset: 0 3px; padding: 12px; border-radius: 52px; background: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 16%, transparent), inset 0 0 0 4px var(--ink), inset 0 0 0 5px color-mix(in srgb, var(--white) 6%, transparent), 0 2px 4px color-mix(in srgb, var(--ink) 25%, transparent), 0 40px 80px -30px color-mix(in srgb, var(--ink) 70%, transparent), 0 80px 120px -60px color-mix(in srgb, var(--ink) 55%, transparent); }
.scene--story .st-btn { position: absolute; width: 4px; border-radius: 2px; background: var(--ink-3); }
.scene--story .st-btn--a { left: -3px; top: 148px; height: 30px; }
.scene--story .st-btn--b { left: -3px; top: 196px; height: 58px; }
.scene--story .st-btn--c { right: -3px; top: 216px; height: 92px; }
.scene--story .st-screen { position: relative; isolation: isolate; width: 100%; height: 100%; overflow: hidden; border-radius: 40px; background: var(--white); }
.scene--story .st-island { position: absolute; z-index: 40; left: 50%; top: 11px; width: 112px; height: 32px; margin-left: -56px; border-radius: 16px; background: var(--ink); }
.scene--story .st-status { position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px 0 40px; color: var(--text); }
.scene--story .st-status b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.scene--story .st-status__ic { display: flex; align-items: center; gap: 6px; }
.scene--story .st-status__ic svg { display: block; height: 11px; fill: currentColor; }
.scene--story .st-status__ic svg:nth-child(1) { width: 17px; }
.scene--story .st-status__ic svg:nth-child(2) { width: 15px; }
.scene--story .st-status__ic svg:nth-child(3) { width: 25px; }
.scene--story .st-bat { fill: none; stroke: currentColor; opacity: .4; }

/* map (steps 2 to 4) */
.scene--story .st-map { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 348px; overflow: hidden; opacity: 0; transform: scale(1.06); transform-origin: 56% 64%; transition: opacity .7s var(--sc-ease), transform 1s var(--sc-ease); }
.scene--story .st-map__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene--story .st-map__bg { fill: var(--paper); }
.scene--story .st-map__park { fill: color-mix(in srgb, var(--line) 80%, var(--paper)); }
.scene--story .st-map__minor { fill: none; stroke: var(--white); stroke-width: 4; }
.scene--story .st-map__major { fill: none; stroke: var(--white); stroke-width: 10; }
.scene--story .st-map__ave { fill: none; stroke: var(--white); stroke-width: 12; }
.scene--story .st-pin { position: absolute; z-index: 2; width: 28px; height: 36px; margin: -36px 0 0 -14px; opacity: 0; transform: translateY(-26px); transform-origin: 50% 100%; transition: opacity .3s var(--sc-ease), transform .7s var(--sc-spring); filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--ink) 22%, transparent)); }
.scene--story .st-pin .sc-pin__body { fill: var(--text-2); }
.scene--story .st-pin .sc-pin__dot { fill: var(--white); }
.scene--story .st-pin--1 { left: 78px; top: 214px; }
.scene--story .st-pin--2 { left: 300px; top: 168px; }
.scene--story .st-pin--3 { left: 144px; top: 296px; }
.scene--story .st-you { position: absolute; z-index: 3; left: 218px; top: 252px; }
.scene--story .st-pin--you { left: 0; top: 0; width: 38px; height: 48px; margin: -48px 0 0 -19px; transform: translateY(-40px); filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--ink) 30%, transparent)); }
.scene--story .st-pin--you .sc-pin__body { fill: var(--accent); stroke: var(--accent-lum); }
.scene--story .st-rings { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .6s var(--sc-ease); }
.scene--story .st-rings i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent-lum); background: color-mix(in srgb, var(--accent-lum) 14%, transparent); opacity: 0; animation: st-ring 2.2s cubic-bezier(.2, .6, .35, 1) infinite both; }
.scene--story .st-rings i + i { animation-delay: -1.1s; }
@keyframes st-ring { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(3.4); } }

/* search field (all steps) */
.scene--story .st-search { position: absolute; z-index: 12; left: 16px; right: 16px; top: 60px; height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-radius: 25px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 transparent; font-size: 16px; font-weight: 500; color: var(--text); transition: box-shadow .7s var(--sc-ease), opacity .4s var(--sc-ease), transform .6s var(--sc-ease); }
.scene--story .st-search .sc-i { width: 19px; height: 19px; color: var(--text-3); stroke-width: 2; }
.scene--story .st-q { display: flex; align-items: center; height: 22px; white-space: pre; }
.scene--story .st-ch { display: inline-block; max-width: 1em; overflow: hidden; white-space: pre; }
.scene--story .st-caret { display: block; width: 2px; height: 21px; margin-left: 1px; border-radius: 1px; background: var(--accent); animation: sc-blink 1.1s steps(1, end) infinite both; }

/* suggestions + keyboard (step 1) */
.scene--story .st-sugg { position: absolute; z-index: 11; left: 16px; right: 16px; top: 120px; padding: 6px 0; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 14px 32px -16px color-mix(in srgb, var(--ink) 30%, transparent); transition: opacity .45s var(--sc-ease), transform .7s var(--sc-ease); }
.scene--story .st-sugg__row { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; font-size: 15px; font-weight: 500; color: var(--text-2); white-space: pre; }
.scene--story .st-sugg__row .sc-i { width: 16px; height: 16px; color: var(--text-3); stroke-width: 2; }
.scene--story .st-sugg__row b { font-weight: 700; color: var(--text); }
.scene--story .st-kb { position: absolute; z-index: 11; left: 0; bottom: 0; display: block; width: 366px; height: 262px; background: color-mix(in srgb, var(--line) 60%, var(--paper)); transition: transform .8s var(--sc-ease); }
.scene--story .st-key { fill: var(--white); }
.scene--story .st-key--alt { fill: color-mix(in srgb, var(--sc-sk-2) 55%, var(--line)); }
.scene--story .st-key--go { fill: color-mix(in srgb, var(--sc-sk-2) 55%, var(--line)); }
.scene--story .st-home { fill: var(--text); }

/* results sheet + cards (steps 2 to 4) */
.scene--story .st-sheet { position: absolute; z-index: 4; left: 0; right: 0; top: 322px; bottom: 0; border-radius: 24px 24px 0 0; background: var(--white); box-shadow: 0 -1px 0 var(--line), 0 -14px 32px -18px color-mix(in srgb, var(--ink) 35%, transparent); transform: translateY(100%); transition: transform .8s var(--sc-ease); }
.scene--story .st-grab { position: absolute; left: 50%; top: 8px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line); }
.scene--story .st-sheet__lbl { position: absolute; left: 22px; top: 24px; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--text-3); }
.scene--story .st-card { position: absolute; z-index: 5; left: 16px; right: 16px; top: 372px; height: 96px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px var(--sc-hair); opacity: 0; transform: translateY(44px); transition: transform .8s var(--sc-ease), translate .9s var(--sc-ease), opacity .6s var(--sc-ease), filter .6s var(--sc-ease); }
.scene--story .st-card--2 { translate: 0 108px; }
.scene--story .st-card--3 { translate: 0 216px; }
.scene--story .st-card--you { z-index: 6; translate: 0 324px; filter: grayscale(1); }
.scene--story .st-card__name { position: absolute; left: 18px; top: 18px; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--text); white-space: nowrap; }
.scene--story .st-card__stars { position: absolute; left: 18px; top: 46px; }
.scene--story .st-card__stars svg { width: 13px; height: 13px; fill: var(--text-2); }
.scene--story .st-card__line { position: absolute; left: 18px; top: 70px; width: 128px; height: 6px; }
.scene--story .st-card__open { position: absolute; left: 18px; top: 64px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-2); }
.scene--story .st-card__thumb { position: absolute; right: 16px; top: 16px; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--sc-hair); }
.scene--story .st-card__thumb::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 12px; height: 18px; border-radius: 4px; background: var(--line); }
.scene--story .st-card__thumb--you { background: var(--accent-soft); opacity: 0; transition: opacity .6s var(--sc-ease); }
.scene--story .st-card__thumb--you::after { content: none; }
.scene--story .st-card__flag { position: absolute; right: 14px; top: 16px; height: 24px; display: flex; align-items: center; padding: 0 10px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; transition: opacity .5s var(--sc-ease); }
.scene--story .st-card--you::before { content: ""; position: absolute; z-index: 1; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: 0; transition: opacity .6s var(--sc-ease); }
.scene--story .st-card__glow { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--accent); opacity: 0; transition: opacity .8s var(--sc-ease); }

/* incoming call banner (step 4) */
.scene--story .st-call { position: absolute; z-index: 50; left: 10px; right: 10px; top: 10px; height: 80px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; border-radius: 24px; background: var(--ink-2); color: var(--white); box-shadow: inset 0 0 0 1px var(--ink-line), 0 20px 40px -16px color-mix(in srgb, var(--ink) 80%, transparent); opacity: 0; transform: translateY(-120%) scale(.94); transform-origin: 50% 0; transition: transform .8s var(--sc-ease), opacity .25s var(--sc-ease); }
.scene--story .st-call__av { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink-3); color: color-mix(in srgb, var(--white) 70%, transparent); }
.scene--story .st-call__av .sc-i { width: 22px; height: 22px; }
.scene--story .st-call__txt b { display: block; font-size: 16px; line-height: 20px; font-weight: 700; white-space: nowrap; }
.scene--story .st-call__txt small { display: block; font-size: 13.5px; line-height: 18px; font-weight: 500; color: color-mix(in srgb, var(--white) 62%, transparent); white-space: nowrap; }
.scene--story .st-call__ok { position: relative; display: grid; flex: none; place-items: center; width: 48px; height: 48px; margin-left: auto; border-radius: 50%; background: var(--accent); color: var(--p-on-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-lum) 60%, transparent); }
.scene--story .st-call__ok .sc-i { width: 22px; height: 22px; stroke-width: 2; }
.scene--story .st-call__ok::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent-lum); animation: st-wave 1.8s var(--sc-ease) infinite both; }
.scene--story .st-call__ok .sc-i { animation: st-shake 1.8s linear infinite both; }
@keyframes st-wave { 0% { opacity: .8; transform: none; } 70%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes st-shake { 0%, 40%, 100% { transform: none; } 5% { transform: rotate(-14deg); } 10% { transform: rotate(12deg); } 15% { transform: rotate(-10deg); } 20% { transform: rotate(8deg); } 25% { transform: rotate(-4deg); } 30% { transform: none; } }

/* step 1, explicit: type the query, then show suggestions */
.scene--story:is(.story-stage[data-step="1"] *, [data-step="1"]) .st-ch { animation: st-ch .04s linear both; animation-delay: calc(.45s + var(--i) * 80ms); }
.scene--story:is(.story-stage[data-step="1"] *, [data-step="1"]) .st-sugg { animation: st-sugg .6s var(--sc-ease) 1.75s both; }
@keyframes st-ch { from { max-width: 0; } to { max-width: 1em; } }
@keyframes st-sugg { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* step 2 and later: map, pins, results */
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-map { opacity: 1; transform: none; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-search { box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px -10px color-mix(in srgb, var(--ink) 35%, transparent); }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-caret { animation: none; opacity: 0; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-sugg { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-kb { transform: translateY(100%); }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-sheet { transform: none; transition-delay: .1s; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-pin:not(.st-pin--you) { opacity: 1; transform: none; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-pin--1 { transition-delay: .3s; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-pin--2 { transition-delay: .42s; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-pin--3 { transition-delay: .54s; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-card:not(.st-card--you) { opacity: 1; transform: none; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-card--1 { transition-delay: .3s; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-card--2 { transition-delay: .4s; }
.scene--story:is(.story-stage[data-step="2"] *, [data-step="2"], .story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-card--3 { transition-delay: .5s; }

/* step 3 and later: your business shows up dimmed below the fold */
.scene--story:is(.story-stage[data-step="3"] *, [data-step="3"], .story-stage[data-step="4"] *, [data-step="4"]) .st-card--you { opacity: .5; transform: none; transition-delay: .15s; }

/* step 4: your business moves to the top and the phone rings */
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-map { transform: scale(1.04); }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card--1 { translate: 0 108px; transition-delay: 0s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card--2 { translate: 0 216px; transition-delay: 0s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card--3 { translate: 0 324px; transition-delay: 0s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card--you { translate: 0 0; opacity: 1; filter: none; transition-delay: 0s; transition-duration: .8s, .9s, .25s, .4s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card--you::before { opacity: 1; transition-delay: .5s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card__glow { opacity: 1; transition-delay: .5s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card__thumb--you { opacity: 1; transition-delay: .3s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-card__flag { opacity: 0; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-pin--you { opacity: 1; transform: none; transition-delay: .45s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-rings { opacity: 1; transition-delay: .8s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-call { opacity: 1; transform: none; transition-delay: 1s; }
.scene--story:is(.story-stage[data-step="4"] *, [data-step="4"]) .st-search { opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--sc-ease) .9s, transform .6s var(--sc-ease) .9s, box-shadow .7s var(--sc-ease); }

/* scrubbed by the page script (desktop): no CSS transitions, cards positioned with transforms only */
.story-stage[data-step="scrub"] .scene--story .st-stage * { transition: none !important; }
.story-stage[data-step="scrub"] .scene--story .st-card { translate: none; }
.story-stage[data-step="scrub"] .scene--story .st-card--you::before { opacity: var(--bar, 0); }

/* ============================================================
   Playback: loops run only inside .is-active (the story runs always)
   ============================================================ */
.scene:not(.scene--story) *,
.scene:not(.scene--story) *::before,
.scene:not(.scene--story) *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: no-preference) {
  .is-active .scene *, .is-active .scene *::before, .is-active .scene *::after,
  .scene.is-active *, .scene.is-active *::before, .scene.is-active *::after { animation-play-state: running !important; }
}

/* Reduced motion: no animation, every scene shows its finished frame (the base styles). */
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after { animation: none !important; transition: none !important; }
  .scene--google-ads .ads-caret, .scene--story .st-caret { opacity: 0; }
}