/* =========================================================
   CAMPAIGN STORY PAGE
   Shared template for all 20 campaigns. Colours come from
   each campaign's theme in campaigns.js (--c-* below).

   The page changes colour with the beat (body[data-step]):
     0 hook    paper  + accent wash
     1 idea    full accent
     2 impact  deep brand shade
     3 take    paper
   ========================================================= */

:root {
  --c-paper: #f2f0e9;
  --c-ink: #151515;
  --c-accent: #d9ff43;
  --c-on-accent: #151515;
  --c-deep: #151515;
  --c-on-deep: #f2f0e9;

  --ease: cubic-bezier(.2, .8, .2, 1);
}

body.campaign-page {
  --page-bg: var(--c-paper);
  --page-fg: var(--c-ink);

  background: var(--page-bg);
  color: var(--page-fg);

  transition:
    background-color 0.9s var(--ease),
    color 0.9s var(--ease);
}

body.campaign-page[data-step="1"] {
  --page-bg: var(--c-accent);
  --page-fg: var(--c-on-accent);
}

body.campaign-page[data-step="2"] {
  --page-bg: var(--c-deep);
  --page-fg: var(--c-on-deep);
}


/* =========================================================
   TOP BAR + RAIL
   ========================================================= */

.story-bar {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 60;

  display: flex;

  justify-content: space-between;

  padding: 24px 32px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  pointer-events: none;
}

.story-bar a,
.story-bar span {
  pointer-events: auto;
}

.story-back {
  text-decoration: none;
}

.story-back:hover {
  text-decoration: underline;
}


.story-rail {
  position: fixed;

  top: 50%;
  right: 26px;

  z-index: 60;

  display: flex;

  flex-direction: column;

  gap: 26px;

  transform: translateY(-50%);
}

/* Progress line behind the dots, fills as you scroll */
.rail-line {
  position: absolute;

  top: 5px;
  bottom: 5px;
  left: 5px;

  width: 1px;

  background: currentColor;

  opacity: 0.25;
}

.story-rail::after {
  content: "";

  position: absolute;

  top: 5px;
  left: 5px;

  width: 1px;
  height: calc((100% - 10px) * var(--progress, 0));

  background: currentColor;

  transition: height 0.8s var(--ease);
}

.rail-dot {
  position: relative;

  z-index: 1;

  display: block;

  width: 11px;
  height: 11px;

  border: 1px solid currentColor;

  border-radius: 50%;

  background: var(--page-bg);

  transition:
    background 0.4s ease,
    transform 0.4s var(--ease);
}

.rail-dot.is-active {
  background: currentColor;
}

.rail-dot:hover {
  transform: scale(1.4);
}

.rail-label {
  position: absolute;

  top: 50%;
  right: 22px;

  transform: translate(6px, -50%);

  opacity: 0;

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  white-space: nowrap;

  transition:
    opacity 0.2s ease,
    transform 0.3s var(--ease);

  pointer-events: none;
}

/* Labels only on hover, so they never cover the text */
.rail-dot:hover .rail-label {
  opacity: 1;

  transform: translate(0, -50%);
}


/* =========================================================
   LAYOUT: sticky scene on the left, beats on the right
   ========================================================= */

.story-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;
}

.story-stage {
  position: sticky;

  top: 0;

  height: 100vh;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}

/* Brand-colour wash behind the scene */
.story-stage::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 50% 55%,
      var(--c-accent) 0%,
      color-mix(in srgb, var(--c-accent) 45%, transparent) 38%,
      transparent 72%
    );

  opacity: 0.85;

  transition: opacity 0.9s var(--ease);
}

body[data-step="1"] .story-stage::before {
  opacity: 0;
}

body[data-step="2"] .story-stage::before {
  opacity: 0.55;
}

body[data-step="3"] .story-stage::before {
  opacity: 0.5;
}


/* =========================================================
   BEATS
   ========================================================= */

.beat {
  min-height: 100vh;

  display: flex;

  align-items: center;

  padding: 120px 9vw 120px 3vw;
}

.beat-inner {
  max-width: 540px;
}

/* Everything except the headline fades up */
.beat-inner > :not(.hook-line):not(.beat-heading) {
  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);

  transition-delay: 0.45s;
}

.beat.is-seen .beat-inner > * {
  opacity: 1;

  transform: none;
}


.beat-kicker,
.beat-label,
.beat-scroll {
  margin: 0;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}

/* Small brand-colour chip before each label */
.beat-label::before {
  content: "";

  display: inline-block;

  width: 8px;
  height: 8px;

  margin-right: 10px;

  background: var(--c-accent);

  border: 1px solid currentColor;

  vertical-align: -1px;
}


/* ---------- Word-by-word headlines ---------- */

.w {
  display: inline-block;

  overflow: hidden;

  padding-bottom: 0.1em;

  margin-bottom: -0.1em;

  vertical-align: top;
}

.w-inner {
  display: inline-block;

  transform: translateY(110%) rotate(4deg);

  transform-origin: 0 100%;

  transition: transform 0.9s var(--ease);

  transition-delay: calc(var(--wi) * 70ms + 80ms);
}

.beat.is-seen .w-inner {
  transform: none;
}


.hook-line {
  margin: 22px 0 26px;

  font:
    400
    clamp(58px, 7.4vw, 120px) / 0.9
    Georgia,
    serif;

  letter-spacing: -0.035em;
}

/* Brand-colour bar that sweeps in under the hook */
.hook-line::after {
  content: "";

  display: block;

  width: 0;
  height: 12px;

  margin-top: 18px;

  background: var(--c-accent);

  transition: width 1.1s var(--ease) 0.7s;
}

.beat.is-seen .hook-line::after {
  width: min(180px, 40%);
}

.hook-sub {
  max-width: 460px;

  margin: 0 0 40px;

  font-size: 18px;

  line-height: 1.6;
}

.beat-scroll {
  opacity: 0.6;

  animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
  50% {
    translate: 0 6px;
  }
}

.beat-heading {
  margin: 20px 0 26px;

  font:
    400
    clamp(42px, 4.6vw, 70px) / 0.95
    Georgia,
    serif;

  letter-spacing: -0.02em;
}

.beat-text {
  margin: 0 0 16px;

  font-size: 17px;

  line-height: 1.65;
}


/* ---------- Impact: timeline ---------- */

.timeline {
  margin: 0 0 30px;

  padding: 0;

  list-style: none;
}

.timeline li {
  display: grid;

  grid-template-columns: 70px 1fr;

  gap: 16px;

  padding: 11px 0;

  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);

  opacity: 0;

  transform: translateX(-20px);

  transition:
    opacity 0.6s ease,
    transform 0.6s var(--ease);

  transition-delay: calc(var(--i) * 110ms + 500ms);
}

.beat.is-seen .timeline li {
  opacity: 1;

  transform: none;
}

.timeline-year {
  color: var(--c-accent);

  font:
    24px / 1
    Georgia,
    serif;
}

.timeline-text {
  font-size: 15px;

  line-height: 1.45;
}


/* ---------- Impact: numbers ---------- */

.stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-bottom: 24px;
}

.stat {
  display: flex;

  flex-direction: column;

  gap: 8px;

  padding-top: 12px;

  border-top: 3px solid var(--c-accent);
}

.stat-value {
  color: var(--c-accent);

  font:
    clamp(36px, 3.6vw, 54px) / 1
    Georgia,
    serif;

  font-variant-numeric: tabular-nums;
}

.stat-label {
  font:
    9px / 1.4
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* ---------- My take ---------- */

.beat-take .beat-inner {
  padding: 30px 0 30px 28px;

  border-left: 5px solid var(--c-accent);
}

.take-sign {
  margin: 24px 0 0;

  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.story-footer {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  padding: 90px 9vw 50px;

  border-top: 1px solid currentColor;
}

.story-sources ol {
  margin: 18px 0 0;

  padding-left: 18px;

  font-size: 13px;

  line-height: 1.8;
}

.story-sources a {
  color: inherit;
}

.story-next {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 14px;
}

.story-next-link {
  display: flex;

  flex-direction: column;

  gap: 12px;

  text-decoration: none;
}

.story-next-title {
  font:
    clamp(28px, 3vw, 40px) / 1
    Georgia,
    serif;
}

.story-disclaimer {
  grid-column: 1 / -1;

  max-width: 760px;

  margin: 10px 0 0;

  font-size: 12px;

  line-height: 1.6;

  opacity: 0.7;
}

.story-missing {
  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 10px;

  padding: 0 9vw;
}


/* =========================================================
   SCENE BASICS + 3D TILT
   --mx / --my (-1…1) come from the cursor (campaign.js)
   ========================================================= */

.scene {
  position: relative;

  width: min(480px, 84%);

  aspect-ratio: 1;

  transform:
    perspective(1000px)
    rotateY(calc(var(--mx, 0) * 14deg))
    rotateX(calc(var(--my, 0) * -10deg));
}

.scene-caption {
  position: absolute;

  left: 0;
  right: 0;
  bottom: -4%;

  margin: 0;

  text-align: center;

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  opacity: 0.7;
}

/* Fallback scene: the brand name, big */
.scene-type {
  display: flex;

  align-items: center;
  justify-content: center;
}

.scene-type-word {
  font:
    clamp(48px, 6vw, 90px) / 0.9
    Georgia,
    serif;

  text-align: center;
}


/* =========================================================
   SCENE: TIFFANY — THE BLUE BOX
   Built from rectangles; no logo, no photography.
   ========================================================= */

.scene-tiffany > * {
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease),
    filter 0.9s ease;
}

.t-glow {
  position: absolute;

  inset: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      var(--c-accent) 0%,
      transparent 66%
    );

  opacity: 0.7;

  transform: scale(1.2);

  translate:
    calc(var(--mx, 0) * -30px)
    calc(var(--my, 0) * -30px);
}


/* ---------- The box ---------- */

.t-box {
  position: absolute;

  top: 58%;
  left: 50%;

  z-index: 3;

  width: 48%;

  transform: translate(-50%, -50%);

  animation: t-float 5s ease-in-out infinite;

  cursor: pointer;
}

@keyframes t-float {
  50% {
    translate: 0 -10px;
  }
}

.t-box:hover {
  transform: translate(-50%, -50%) scale(1.04);
}

.t-body {
  position: relative;

  aspect-ratio: 1.45;

  background:
    linear-gradient(
      180deg,
      var(--c-accent) 0%,
      color-mix(in srgb, var(--c-accent) 78%, #000) 100%
    );

  box-shadow:
    0 40px 60px -26px rgba(0, 0, 0, 0.5);

  transition: box-shadow 0.9s ease;
}

.t-lid {
  position: absolute;

  top: -12%;
  left: -4%;

  width: 108%;
  height: 34%;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-accent) 88%, #fff) 0%,
      var(--c-accent) 100%
    );

  box-shadow:
    0 8px 12px -6px rgba(0, 0, 0, 0.3);

  transform-origin: 0% 100%;

  transition:
    transform 0.8s cubic-bezier(.3, 1.4, .5, 1),
    box-shadow 0.9s ease;
}

.t-ribbon-v {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 10%;

  background: #fff;

  transform: translateX(-50%);

  transform-origin: 50% 0;
}

.t-bow {
  position: absolute;

  bottom: 88%;
  left: 50%;

  width: 46%;
  height: 70%;

  transform: translateX(-50%);

  transform-origin: 50% 100%;
}

.t-loop {
  position: absolute;

  bottom: 0;

  width: 50%;
  height: 100%;

  border: 7px solid #fff;

  border-radius: 50%;
}

.t-loop-l {
  left: 2%;

  transform: rotate(-24deg);
}

.t-loop-r {
  right: 2%;

  transform: rotate(24deg);
}

.t-knot {
  position: absolute;

  bottom: -6%;
  left: 50%;

  width: 18%;
  height: 46%;

  background: #fff;

  border-radius: 3px;

  transform: translateX(-50%);
}

/* Light escaping when the lid lifts */
.t-light {
  position: absolute;

  top: -40%;
  left: 4%;
  right: 4%;

  height: 70%;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      #fffdf2 0%,
      rgba(255, 253, 242, 0.5) 30%,
      rgba(255, 253, 242, 0) 70%
    );

  filter: blur(4px);

  opacity: 0;

  transform: scaleY(0.4);

  transform-origin: 50% 100%;

  transition:
    opacity 0.8s ease,
    transform 0.8s var(--ease);
}


/* ---------- Anonymous grey boxes (opening sequence) ---------- */

.t-ghost {
  position: absolute;

  top: 62%;

  z-index: 2;

  width: 26%;

  aspect-ratio: 1.45;

  background: #c9cfce;

  opacity: 0;
}

.t-ghost-lid {
  position: absolute;

  top: -12%;
  left: -4%;

  width: 108%;
  height: 34%;

  background: #d6dbda;
}

.t-ghost-left {
  left: 4%;

  transform: translateY(-50%);
}

.t-ghost-right {
  right: 4%;

  transform: translateY(-50%);
}


/* ---------- Colour swatch tag ---------- */

.t-swatch {
  position: absolute;

  top: 6%;
  right: 2%;

  z-index: 4;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 12px 8px 8px;

  background: var(--c-paper);

  color: var(--c-ink);

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.4);

  opacity: 0;

  transform: translateY(-14px) rotate(4deg);
}

.t-chip {
  width: 26px;
  height: 26px;

  background: var(--c-accent);
}


/* ---------- Pulsing rings ---------- */

.t-rings {
  position: absolute;

  inset: 0;

  opacity: 0;

  translate:
    calc(var(--mx, 0) * 16px)
    calc(var(--my, 0) * 16px);
}

.t-rings span {
  position: absolute;

  inset: 14%;

  border: 1.5px solid currentColor;

  border-radius: 50%;

  animation: t-ring 3.6s ease-out infinite;
}

.t-rings span:nth-child(2) {
  animation-delay: 1.2s;
}

.t-rings span:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes t-ring {
  from {
    transform: scale(0.45);

    opacity: 0.9;
  }

  to {
    transform: scale(1.15);

    opacity: 0;
  }
}


/* ---------- Floating sparkles ---------- */

.t-sparks {
  position: absolute;

  inset: 0;

  opacity: 0;

  pointer-events: none;
}

.t-sparks span {
  position: absolute;

  bottom: 18%;
  left: var(--x);

  width: var(--s);
  height: var(--s);

  border-radius: 50%;

  background: var(--c-accent);

  box-shadow: 0 0 12px var(--c-accent);

  animation: t-rise var(--t) linear infinite;

  animation-delay: var(--d);
}

@keyframes t-rise {
  0% {
    transform: translateY(0) scale(0.6);

    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    transform: translateY(-340px) scale(1.2);

    opacity: 0;
  }
}


/* ---------- Click burst ---------- */

.t-burst {
  position: absolute;

  top: 46%;
  left: 50%;

  z-index: 5;

  pointer-events: none;
}

.t-burst span {
  position: absolute;

  width: 9px;
  height: 9px;

  margin: -4px;

  background: var(--c-accent);

  border: 1.5px solid #fff;

  animation: t-burst 1.1s var(--ease) forwards;
}

.t-burst span:nth-child(odd) {
  border-radius: 50%;

  background: #fff;
}

@keyframes t-burst {
  to {
    transform:
      translate(var(--bx), var(--by))
      rotate(220deg)
      scale(0.4);

    opacity: 0;
  }
}


/* =========================================================
   OPENING SEQUENCE (first 3 seconds)
   Grey boxes slide in and out, the blue box drops in,
   the ribbon draws down, the bow pops.
   ========================================================= */

.scene-tiffany.is-intro .t-ghost-left {
  animation: t-ghost-l 1.6s var(--ease) 0.1s backwards;
}

.scene-tiffany.is-intro .t-ghost-right {
  animation: t-ghost-r 1.6s var(--ease) 0.25s backwards;
}

@keyframes t-ghost-l {
  0% {
    opacity: 0;
    transform: translate(-60px, -50%);
  }

  25%,
  65% {
    opacity: 1;
    transform: translate(0, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(0, -50%) scale(0.85);
  }
}

@keyframes t-ghost-r {
  0% {
    opacity: 0;
    transform: translate(60px, -50%);
  }

  25%,
  65% {
    opacity: 1;
    transform: translate(0, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(0, -50%) scale(0.85);
  }
}

.scene-tiffany.is-intro .t-box {
  animation:
    t-drop 1s cubic-bezier(.3, 1.3, .5, 1) 1.1s backwards,
    t-float 5s ease-in-out 2.1s infinite;
}

@keyframes t-drop {
  from {
    opacity: 0;

    transform: translate(-50%, -160%) scale(0.85) rotate(-6deg);
  }
}

.scene-tiffany.is-intro .t-ribbon-v {
  animation: t-ribbon 0.6s var(--ease) 1.9s backwards;
}

@keyframes t-ribbon {
  from {
    transform: translateX(-50%) scaleY(0);
  }
}

.scene-tiffany.is-intro .t-bow {
  animation: t-bow 0.7s cubic-bezier(.3, 1.8, .5, 1) 2.3s backwards;
}

@keyframes t-bow {
  from {
    transform: translateX(-50%) scale(0);
  }
}

.scene-tiffany.is-intro .t-glow {
  animation: t-glow-in 1.2s ease 1.4s backwards;
}

@keyframes t-glow-in {
  from {
    opacity: 0;

    transform: scale(0.6);
  }
}


/* =========================================================
   STEPS
   ========================================================= */

/* 0 — hook: click to open */
.scene-tiffany.is-open .t-lid {
  transform: translateY(-75%) rotate(-18deg);
}

.scene-tiffany.is-open .t-light {
  opacity: 1;

  transform: scaleY(1);
}


/* 1 — idea: the page floods with the colour */
.scene-tiffany[data-step="1"] {
  color: #fff;
}

.scene-tiffany[data-step="1"] .t-glow {
  opacity: 0;
}

.scene-tiffany[data-step="1"] .t-rings {
  opacity: 1;
}

.scene-tiffany[data-step="1"] .t-box {
  transform: translate(-50%, -50%) scale(1.08);
}

.scene-tiffany[data-step="1"] .t-body,
.scene-tiffany[data-step="1"] .t-lid {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.85),
    0 40px 60px -26px rgba(0, 0, 0, 0.45);
}

.scene-tiffany[data-step="1"] .t-swatch {
  opacity: 1;

  transform: rotate(4deg);
}


/* 2 — impact: deep background, lid open, sparkles rise */
.scene-tiffany[data-step="2"] .t-glow {
  opacity: 0.95;

  transform: scale(1.5);
}

.scene-tiffany[data-step="2"] .t-sparks {
  opacity: 1;
}

.scene-tiffany[data-step="2"] .t-lid {
  transform: translateY(-75%) rotate(-18deg);
}

.scene-tiffany[data-step="2"] .t-light {
  opacity: 1;

  transform: scaleY(1.2);
}

.scene-tiffany[data-step="2"] .t-box {
  transform: translate(-50%, -46%) rotate(-4deg);
}


/* 3 — my take: calm, centred, rings in brand colour */
.scene-tiffany[data-step="3"] {
  color: var(--c-accent);
}

.scene-tiffany[data-step="3"] .t-rings {
  opacity: 1;
}

.scene-tiffany[data-step="3"] .t-glow {
  opacity: 0.45;

  transform: scale(1);
}

.scene-tiffany[data-step="3"] .t-box {
  transform: translate(-50%, -50%) scale(0.88);
}


/* =========================================================
   SCROLL MOTION (continuous, on top of the steps)
   Variables come from scrollMotion() in campaign.js.
   Uses the separate rotate / scale / translate properties
   so it adds to the step transforms instead of replacing
   them.
   ========================================================= */

/* The box swims along a wave, leans and squashes with speed */
.scene-tiffany .t-box {
  top: calc(58% + var(--wave, 0) * 3%);

  rotate:
    calc(
      var(--wave, 0) * 4deg +
      var(--vel, 0) * 9deg
    );

  scale:
    calc(1 + var(--speed, 0) * 0.08)
    calc(1 - var(--speed, 0) * 0.07);
}

/* The lid peeks open while you scroll out of the hook */
.scene-tiffany .t-lid {
  translate:
    0
    calc(var(--lift, 0) * -42%);

  rotate:
    calc(var(--lift, 0) * -8deg);

  /* glide back down when the peek resets at the next beat */
  transition:
    transform 0.8s cubic-bezier(.3, 1.4, .5, 1),
    translate 0.4s var(--ease),
    rotate 0.4s var(--ease),
    box-shadow 0.9s ease;
}

/* The bow wobbles with scroll speed */
.scene-tiffany .t-bow {
  rotate:
    calc(var(--vel, 0) * -30deg);
}

/* The glow breathes with the scroll */
.scene-tiffany .t-glow {
  scale:
    calc(1 + var(--wave, 0) * 0.1);
}

.scene-tiffany .t-rings {
  rotate:
    calc(var(--sp, 0) * 90deg);
}

.scene-tiffany .t-swatch {
  rotate:
    calc(var(--wave, 0) * 6deg);
}


/* =========================================================
   PHONES: scene sticks to the top, text scrolls below
   ========================================================= */

@media (max-width: 760px) {

  .story-bar {
    padding: 18px 20px;

    background: var(--page-bg);

    transition: background-color 0.9s var(--ease);
  }

  .story-rail {
    display: none;
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-stage {
    top: 52px;

    z-index: 5;

    height: 42vh;

    background: var(--page-bg);

    transition: background-color 0.9s var(--ease);
  }

  .scene {
    width: min(300px, 74%);
  }

  /* Keep the glow inside the short phone stage */
  .t-glow {
    inset: 10%;
  }

  .beat {
    min-height: 70vh;

    align-items: flex-start;

    padding: 34px 22px 60px;
  }

  .hook-line {
    font-size: 54px;
  }

  .beat-heading {
    font-size: 40px;
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
  }

  .stat-value {
    font-size: 30px;
  }

  .story-footer {
    grid-template-columns: 1fr;

    padding: 60px 22px 40px;
  }

}


/* =========================================================
   REDUCED MOTION: keep colours and states, drop movement
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  body.campaign-page,
  .beat-inner > *,
  .w-inner,
  .hook-line::after,
  .timeline li,
  .scene-tiffany > *,
  .t-lid,
  .t-light {
    transition: none;
  }

  .t-box,
  .beat-scroll,
  .t-rings span,
  .t-sparks span,
  .scene-tiffany.is-intro * {
    animation: none !important;
  }

  .scene {
    transform: none;
  }

}


/* Campaign page: the clickable box uses the custom cursor */
html.has-custom-cursor .t-box {
  cursor: none;
}


/* =========================================================
   SCENE: APPLE — THINK DIFFERENT
   A 5×5 grid of identical tiles with one that is different.
   --d on each tile = its distance from the different one,
   used to delay colour changes so they ripple outwards.
   ========================================================= */

.a-grid {
  position: absolute;

  inset: 12%;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 5%;
}

.a-tile {
  aspect-ratio: 1;

  border-radius: 24%;

  background: #d2d2d7;

  transition:
    background-color 0.5s ease var(--d),
    transform 0.7s cubic-bezier(.3, 1.4, .5, 1),
    box-shadow 0.5s ease,
    opacity 0.5s ease var(--d);
}

/* 0 — hook: one of many, but turned a different way */
.a-tile.is-different {
  position: relative;

  z-index: 2;

  background: var(--c-ink);

  transform: rotate(45deg) scale(0.86);

  animation: a-nudge 3s ease-in-out infinite;
}

@keyframes a-nudge {
  50% {
    translate: 0 -4px;
  }
}

/* 1 — idea: the different one stands alone */
.scene-apple[data-step="1"] .a-tile {
  background: rgba(255, 255, 255, 0.18);
}

.scene-apple[data-step="1"] .a-tile.is-different {
  background: #fff;

  transform: rotate(45deg) scale(1.55);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* 2 — impact: its colour ripples out to every tile */
.scene-apple[data-step="2"] .a-tile {
  background: var(--c-accent);
}

.scene-apple[data-step="2"] .a-tile.is-different {
  background: #fff;

  transform: rotate(45deg) scale(1.1);
}

/* 3 — lesson: calm, the different one keeps its colour */
.scene-apple[data-step="3"] .a-tile {
  background: #e3e3e8;
}

.scene-apple[data-step="3"] .a-tile.is-different {
  background: var(--c-accent);

  transform: rotate(45deg) scale(1.2);
}


/* =========================================================
   SCENE: NIKE — JUST DO IT
   A running track; lines use currentColor so they follow
   the page colour of each beat.
   ========================================================= */

.scene-nike {
  color: var(--page-fg);
}

.n-track {
  position: absolute;

  inset: 30% 4% 30% 4%;

  transition: opacity 0.6s ease;
}

.n-lane {
  display: block;

  height: 25%;

  border-top: 2px solid currentColor;

  opacity: 0.35;
}

.n-lane:last-of-type {
  border-bottom: 2px solid currentColor;
}

.n-start,
.n-finish {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 4px;
}

.n-start {
  left: 8%;

  background: currentColor;
}

.n-finish {
  right: 8%;
}

/* finish tape: two halves that break apart at the end */
.n-tape {
  position: absolute;

  left: 0;

  width: 4px;
  height: 50%;

  background: var(--c-accent);

  border: 1px solid var(--c-ink);

  transition: transform 0.7s cubic-bezier(.3, 1.4, .5, 1);
}

.n-tape-l {
  top: 0;

  transform-origin: 50% 0;
}

.n-tape-r {
  bottom: 0;

  transform-origin: 50% 100%;
}

/* the runner */
.n-runner {
  position: absolute;

  top: 37.5%;
  left: 8%;

  width: 26px;
  height: 26px;

  margin: -13px 0 0 -13px;

  border: 2px solid var(--c-ink);

  border-radius: 50%;

  background: var(--c-accent);

  transition:
    left 1s cubic-bezier(.5, 0, .2, 1),
    opacity 0.4s ease;
}

.n-trail {
  position: absolute;

  top: 50%;
  right: 100%;

  width: 0;
  height: 6px;

  margin-top: -3px;

  border-radius: 6px;

  background:
    linear-gradient(90deg, transparent, var(--c-ink));

  opacity: 0.5;
}

/* 0 — on your marks: the runner waits, pulsing */
.scene-nike[data-step="0"] .n-runner {
  animation: n-ready 1.4s ease-in-out infinite;
}

@keyframes n-ready {
  50% {
    scale: 1.25;
  }
}

/* 1 — the push: the runner sprints, the words stamp in */
.scene-nike[data-step="1"] .n-runner {
  animation: n-run 1.8s cubic-bezier(.5, 0, .3, 1) infinite;
}

.scene-nike[data-step="1"] .n-trail {
  width: 90px;
}

@keyframes n-run {
  0% {
    left: 8%;
  }

  80%,
  100% {
    left: 92%;
  }
}

.n-words {
  position: absolute;

  top: 6%;
  left: 0;
  right: 0;

  display: flex;

  justify-content: center;

  gap: 0.35em;

  font:
    italic
    600
    clamp(30px, 4.6vw, 60px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: -0.02em;
}

.n-words span {
  opacity: 0;

  transform: translateY(20px) scale(1.3);

  transition:
    opacity 0.35s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.scene-nike[data-step="1"] .n-words span {
  opacity: 1;

  transform: none;
}

.scene-nike[data-step="1"] .n-words span:nth-child(2) {
  transition-delay: 0.25s;
}

.scene-nike[data-step="1"] .n-words span:nth-child(3) {
  transition-delay: 0.5s;
}

/* 2 — impact: the track gives way to growth bars */
.n-bars {
  position: absolute;

  left: 22%;
  right: 22%;
  bottom: 18%;

  height: 56%;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: 18%;

  opacity: 0;

  transition: opacity 0.5s ease;
}

.n-bar {
  position: relative;

  width: 32%;
  height: 100%;

  display: flex;

  align-items: flex-end;
}

.n-bar-fill {
  width: 100%;
  height: calc(var(--h) * 2);

  border: 2px solid var(--c-ink);

  border-radius: 8px 8px 0 0;

  background: var(--c-accent);

  transform: scaleY(0);

  transform-origin: 50% 100%;

  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}

.n-bar:nth-child(2) .n-bar-fill {
  transition-delay: 0.3s;
}

.n-bar-label {
  position: absolute;

  top: 100%;
  left: 50%;

  margin-top: 10px;

  transform: translateX(-50%);

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  white-space: nowrap;
}

.scene-nike[data-step="2"] .n-track,
.scene-nike[data-step="2"] .n-runner {
  opacity: 0;
}

.scene-nike[data-step="2"] .n-bars {
  opacity: 1;
}

.scene-nike[data-step="2"] .n-bar-fill {
  transform: none;
}

/* 3 — the finish: runner crosses, tape breaks */
.scene-nike[data-step="3"] .n-runner {
  left: 92%;
}

.scene-nike[data-step="3"] .n-tape-l {
  transform: rotate(-60deg);
}

.scene-nike[data-step="3"] .n-tape-r {
  transform: rotate(60deg);
}


/* =========================================================
   SCENE: MICHELIN — THE GUIDE
   An open road with a rolling tyre; stops, then stars.
   ========================================================= */

.scene-michelin {
  color: var(--page-fg);
}

/* the road: two edges and a moving centre line */
.m-road {
  position: absolute;

  left: 0;
  right: 0;
  top: 58%;

  height: 20%;

  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transition: opacity 0.6s ease;
}

.m-dash {
  position: absolute;

  left: 0;
  right: 0;
  top: 50%;

  height: 3px;

  margin-top: -1.5px;

  background:
    repeating-linear-gradient(
      90deg,
      currentColor 0 22px,
      transparent 22px 44px
    );

  opacity: 0.6;

  animation: m-drive 0.8s linear infinite;
}

@keyframes m-drive {
  to {
    background-position: -44px 0;
  }
}

/* the tyre: dark rubber, tread notches, light hub */
.m-tyre {
  position: absolute;

  left: 22%;
  top: 58%;

  /* scales with the scene; sits on the road's top edge */
  width: 16%;

  aspect-ratio: 1;

  translate: -50% -100%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      var(--c-paper) 0 16%,
      var(--c-ink) 17% 30%,
      var(--c-paper) 31% 36%,
      transparent 37%
    ),
    repeating-conic-gradient(
      var(--c-ink) 0 10deg,
      #2d3a5c 10deg 20deg
    );

  box-shadow: 0 0 0 2px var(--c-ink);

  animation: m-roll 0.9s linear infinite;

  transition:
    left 1.2s cubic-bezier(.5, 0, .2, 1),
    opacity 0.4s ease;
}

@keyframes m-roll {
  to {
    rotate: 360deg;
  }
}

/* 1 — reasons to drive: fuel, beds, food pop up */
.m-stops {
  position: absolute;

  top: 14%;
  left: 0;
  right: 0;

  display: flex;

  justify-content: center;

  gap: 12px;

  transition: opacity 0.5s ease;
}

.m-stops span {
  padding: 8px 14px;

  border: 2px solid var(--c-ink);

  border-radius: 999px;

  background: var(--c-paper);

  color: var(--c-ink);

  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  opacity: 0;

  transform: translateY(24px) scale(0.6);

  transition:
    opacity 0.35s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

/* food is the stop that became the whole story */
.m-stops span:last-child {
  background: var(--c-ink);

  color: var(--c-paper);
}

.scene-michelin[data-step="1"] .m-stops span {
  opacity: 1;

  transform: none;
}

.scene-michelin[data-step="1"] .m-stops span:nth-child(2) {
  transition-delay: 0.25s;
}

.scene-michelin[data-step="1"] .m-stops span:nth-child(3) {
  transition-delay: 0.5s;
}

/* 2 — the star scale replaces the road */
.m-stars {
  position: absolute;

  inset: 16% 6%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 18px;

  pointer-events: none;
}

.m-stars p {
  margin: 0;

  font:
    italic
    clamp(17px, 2.2vw, 24px) / 1.2
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  opacity: 0;

  transform: translateX(-30px);

  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(.3, 1.4, .5, 1);
}

.m-stars b {
  display: inline-block;

  min-width: 3.4em;

  color: var(--c-accent);

  font-style: normal;

  letter-spacing: 0.08em;
}

.scene-michelin[data-step="2"] .m-road,
.scene-michelin[data-step="2"] .m-tyre {
  opacity: 0;
}

.scene-michelin[data-step="2"] .m-stars p {
  opacity: 1;

  transform: none;
}

.scene-michelin[data-step="2"] .m-stars p:nth-child(2) {
  transition-delay: 0.3s;
}

.scene-michelin[data-step="2"] .m-stars p:nth-child(3) {
  transition-delay: 0.6s;
}

/* 3 — the journey: the tyre rolls to the three-star sign */
.m-sign {
  position: absolute;

  /* sits on its post, which stands on the road's edge */
  right: 4%;
  bottom: calc(42% + 50px);

  padding: 10px 14px;

  border: 2px solid var(--c-ink);

  border-radius: 10px;

  background: var(--c-accent);

  color: var(--c-ink);

  font-size: 22px;

  letter-spacing: 0.1em;

  opacity: 0;

  transform: translateY(-20px) rotate(-8deg);

  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(.3, 1.6, .5, 1);
}

/* the sign's post, down to the road */
.m-sign::after {
  content: "";

  position: absolute;

  top: 100%;
  left: 50%;

  width: 3px;
  height: 50px;

  margin-left: -1.5px;

  background: var(--c-ink);
}

.scene-michelin[data-step="3"] .m-tyre {
  left: 54%;
}

.scene-michelin[data-step="3"] .m-sign {
  opacity: 1;

  transform: none;

  transition-delay: 0.6s;
}


/* =========================================================
   SCENE: AMAN — SAY NOTHING
   Still water; ripples = word of mouth; dots = loyal guests.
   ========================================================= */

.scene-aman {
  color: var(--page-fg);
}

.am-sun {
  position: absolute;

  left: 50%;
  top: 22%;

  width: 22%;
  aspect-ratio: 1;

  translate: -50% 0;

  border-radius: 50%;

  background: var(--c-accent);

  box-shadow: 0 0 0 2px var(--c-ink);

  animation: am-breathe 5s ease-in-out infinite;

  transition: opacity 0.6s ease;
}

@keyframes am-breathe {
  50% {
    scale: 1.06;
  }
}

.am-horizon {
  position: absolute;

  left: 4%;
  right: 4%;
  top: 50%;

  height: 2px;

  background: currentColor;
}

/* the sun's reflection: soft broken stripes under the line */
.am-reflection {
  position: absolute;

  left: 50%;
  top: 53%;

  width: 26%;
  height: 22%;

  translate: -50% 0;

  background:
    repeating-linear-gradient(
      180deg,
      var(--c-accent) 0 4px,
      transparent 4px 12px
    );

  mask-image: linear-gradient(180deg, #000, transparent);

  -webkit-mask-image: linear-gradient(180deg, #000, transparent);

  opacity: 0.8;

  transition: opacity 0.6s ease;
}

/* 1 — ripples spread out from one point */
.am-ripples span {
  position: absolute;

  left: 50%;
  top: 62%;

  width: 92%;
  aspect-ratio: 2.4;

  border: 2px solid currentColor;

  border-radius: 50%;

  translate: -50% -50%;

  scale: 0;

  opacity: 0;
}

.scene-aman[data-step="1"] .am-ripples span,
.scene-aman[data-step="2"] .am-ripples span {
  animation: am-ripple 3.2s ease-out infinite;
}

.am-ripples span:nth-child(2) {
  animation-delay: 0.8s !important;
}

.am-ripples span:nth-child(3) {
  animation-delay: 1.6s !important;
}

.am-ripples span:nth-child(4) {
  animation-delay: 2.4s !important;
}

@keyframes am-ripple {
  0% {
    scale: 0;
    opacity: 0.9;
  }

  100% {
    scale: 1;
    opacity: 0;
  }
}

.scene-aman[data-step="1"] .am-reflection,
.scene-aman[data-step="2"] .am-reflection,
.scene-aman[data-step="2"] .am-sun {
  opacity: 0;
}

/* 2 — the guests who keep coming back */
.am-guests span {
  position: absolute;

  left: var(--x);
  top: calc(var(--y) + 18%);

  width: 12px;
  height: 12px;

  margin: -6px 0 0 -6px;

  border: 2px solid var(--c-ink);

  border-radius: 50%;

  background: var(--c-accent);

  opacity: 0;

  scale: 0;

  transition:
    opacity 0.3s ease,
    scale 0.5s cubic-bezier(.3, 1.8, .5, 1);
}

.scene-aman[data-step="2"] .am-guests span {
  opacity: 1;

  scale: 1;

  transition-delay: var(--d);
}

/* 3 — still again */
.am-hush {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 6%;

  text-align: center;

  font:
    italic
    clamp(22px, 3vw, 34px) / 1
    Georgia,
    Georgia,
    serif;

  opacity: 0;

  transition: opacity 0.8s ease 0.4s;
}

.scene-aman[data-step="3"] .am-hush {
  opacity: 0.8;
}


/* =========================================================
   SCENE: LACOSTE — THE CROCODILE
   Court → shirt with a chest mark → everyone copies → code.
   The chest mark is a plain badge, not the real logo.
   ========================================================= */

.scene-lacoste {
  color: var(--page-fg);
}

.lc-court {
  position: absolute;

  inset: 50% 6% 10% 6%;

  border: 2px solid currentColor;

  transform: perspective(500px) rotateX(48deg);

  transform-origin: 50% 100%;

  transition: opacity 0.6s ease;
}

.lc-line {
  position: absolute;

  left: 50%;
  top: 0;
  bottom: 0;

  width: 2px;

  background: currentColor;

  opacity: 0.5;
}

.lc-net {
  position: absolute;

  left: -4%;
  right: -4%;
  top: 50%;

  height: 10px;

  margin-top: -5px;

  border-top: 2px solid currentColor;

  background:
    repeating-linear-gradient(
      90deg,
      currentColor 0 1px,
      transparent 1px 8px
    );

  opacity: 0.6;
}

/* the ball: bounces across the court */
.lc-ball {
  position: absolute;

  left: 10%;
  top: 70%;

  width: 5.5%;
  aspect-ratio: 1;

  border: 2px solid var(--c-ink);

  border-radius: 50%;

  background: #e6f46a;

  animation: lc-rally 2.4s ease-in-out infinite alternate;

  transition: opacity 0.4s ease;
}

@keyframes lc-rally {
  0% {
    left: 10%;
    top: 70%;
  }

  25% {
    top: 30%;
  }

  50% {
    left: 50%;
    top: 76%;
  }

  75% {
    top: 34%;
  }

  100% {
    left: 86%;
    top: 68%;
  }
}

/* 1 — the shirt drops in, the mark pulses on the chest */
.lc-shirt {
  position: absolute;

  left: 50%;
  top: 12%;

  width: 54%;
  aspect-ratio: 1 / 0.95;

  translate: -50% 0;

  background: #ffffff;

  clip-path:
    polygon(
      32% 0, 42% 9%, 58% 9%, 68% 0,
      100% 16%, 90% 40%, 78% 34%,
      78% 100%, 22% 100%, 22% 34%,
      10% 40%, 0 16%
    );

  filter: drop-shadow(0 2px 0 var(--c-ink));

  opacity: 0;

  transform: translateY(-40px) rotate(-6deg);

  transition:
    opacity 0.4s ease,
    transform 0.7s cubic-bezier(.3, 1.5, .5, 1);
}

/* collar placket */
.lc-shirt::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 9%;

  width: 2px;
  height: 18%;

  background: #c9cfc9;
}

.lc-badge {
  position: absolute;

  left: 60%;
  top: 30%;

  width: 11%;
  height: 6%;

  border-radius: 40% 60% 50% 40%;

  background: var(--c-accent);

  box-shadow: 0 0 0 2px var(--c-ink);
}

.scene-lacoste[data-step="1"] .lc-shirt {
  opacity: 1;

  transform: none;
}

.scene-lacoste[data-step="1"] .lc-badge {
  animation: lc-pulse 1.6s ease-in-out infinite;
}

@keyframes lc-pulse {
  50% {
    scale: 1.35;
  }
}

.scene-lacoste[data-step="1"] .lc-ball,
.scene-lacoste[data-step="2"] .lc-ball,
.scene-lacoste[data-step="3"] .lc-ball,
.scene-lacoste[data-step="2"] .lc-court,
.scene-lacoste[data-step="3"] .lc-court {
  opacity: 0;
}

.scene-lacoste[data-step="1"] .lc-court {
  opacity: 0.35;
}

/* 2 — a rack of shirts, all with a mark on the chest */
.lc-rack {
  position: absolute;

  left: 4%;
  right: 4%;
  top: 34%;

  display: flex;

  justify-content: center;

  gap: 3%;
}

.lc-mini {
  position: relative;

  width: 17%;
  aspect-ratio: 1 / 0.95;

  background: var(--c-on-deep);

  clip-path:
    polygon(
      32% 0, 42% 9%, 58% 9%, 68% 0,
      100% 16%, 90% 40%, 78% 34%,
      78% 100%, 22% 100%, 22% 34%,
      10% 40%, 0 16%
    );

  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.lc-mini i {
  position: absolute;

  left: 58%;
  top: 30%;

  width: 14%;
  height: 8%;

  border-radius: 40%;

  background: var(--c-accent);
}

.scene-lacoste[data-step="2"] .lc-mini {
  opacity: 1;

  transform: none;
}

.scene-lacoste[data-step="2"] .lc-mini:nth-child(2) { transition-delay: 0.12s; }
.scene-lacoste[data-step="2"] .lc-mini:nth-child(3) { transition-delay: 0.24s; }
.scene-lacoste[data-step="2"] .lc-mini:nth-child(4) { transition-delay: 0.36s; }
.scene-lacoste[data-step="2"] .lc-mini:nth-child(5) { transition-delay: 0.48s; }

/* 3 — the L.12.12 code, decoded */
.lc-code {
  position: absolute;

  inset: 24% 4%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 4%;
}

.lc-code p {
  margin: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  opacity: 0;

  transform: translateY(20px) scale(1.3);

  transition:
    opacity 0.35s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.lc-code b {
  font:
    600
    clamp(34px, 5vw, 64px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  color: var(--c-accent);
}

.lc-code small {
  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  max-width: 11ch;

  text-align: center;

  line-height: 1.4;
}

.scene-lacoste[data-step="3"] .lc-code p {
  opacity: 1;

  transform: none;
}

.scene-lacoste[data-step="3"] .lc-code p:nth-child(2) { transition-delay: 0.2s; }
.scene-lacoste[data-step="3"] .lc-code p:nth-child(3) { transition-delay: 0.4s; }
.scene-lacoste[data-step="3"] .lc-code p:nth-child(4) { transition-delay: 0.6s; }


/* =========================================================
   SCENE: COCA-COLA — COLA IN ORBIT
   A plain red can (no logo) goes from the pad to orbit.
   ========================================================= */

.scene-coke {
  color: var(--page-fg);
}

.ck-stars {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(circle, currentColor 1px, transparent 1.5px) 0 0 / 38px 38px,
    radial-gradient(circle, currentColor 1px, transparent 1.5px) 19px 21px / 53px 53px;

  opacity: 0.25;

  mask-image: radial-gradient(circle, #000 40%, transparent 72%);

  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%);
}

.ck-pad {
  position: absolute;

  left: 30%;
  right: 30%;
  bottom: 12%;

  height: 4px;

  background: currentColor;

  transition: opacity 0.5s ease;
}

.ck-planet {
  position: absolute;

  left: -20%;
  right: -20%;
  top: 88%;

  aspect-ratio: 1;

  border: 2px solid currentColor;

  border-radius: 50%;

  background:
    radial-gradient(circle at 50% 0, #3a6fd8 0, #1f3f8f 40%, transparent 41%);

  opacity: 0;

  transition: opacity 0.8s ease;
}

/* the can: red body, silver top and bottom, one white band */
.ck-can {
  position: absolute;

  left: 50%;
  bottom: 12%;

  width: 18%;
  aspect-ratio: 1 / 1.8;

  translate: -50% 0;

  border: 2px solid var(--c-ink);

  border-radius: 12px / 8px;

  background:
    linear-gradient(180deg, #d9d9d9 0 7%, #e41e2b 7% 93%, #d9d9d9 93%);

  transition:
    translate 1.2s cubic-bezier(.6, 0, .3, 1),
    rotate 1s ease;
}

.ck-band {
  position: absolute;

  left: 0;
  right: 0;
  top: 46%;

  height: 10%;

  background: #ffffff;
}

.ck-flame {
  position: absolute;

  left: 20%;
  right: 20%;
  top: 100%;

  height: 50%;

  border-radius: 0 0 50% 50%;

  background: linear-gradient(180deg, #ffd166, #ff7b00 60%, transparent);

  transform-origin: 50% 0;

  scale: 1 0;

  transition: scale 0.3s ease;
}

/* 1 — lift-off */
.scene-coke[data-step="1"] .ck-can {
  translate: -50% -110%;

  animation: ck-shake 0.12s linear infinite;
}

.scene-coke[data-step="1"] .ck-flame {
  scale: 1 1;

  animation: ck-flicker 0.15s ease-in-out infinite alternate;
}

@keyframes ck-shake {
  50% {
    margin-left: 1.5px;
  }
}

@keyframes ck-flicker {
  to {
    scale: 1 0.7;
  }
}

/* 2 — orbit: the can floats, bubbles drift without gravity */
.ck-bubbles span {
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: 14px;
  aspect-ratio: 1;

  border: 2px solid currentColor;

  border-radius: 50%;

  opacity: 0;

  transition: opacity 0.5s ease;
}

.scene-coke[data-step="2"] .ck-bubbles span {
  opacity: 0.7;

  animation: ck-drift 4s ease-in-out var(--d) infinite alternate;
}

@keyframes ck-drift {
  to {
    translate: 14px -22px;

    scale: 1.4;
  }
}

.scene-coke[data-step="2"] .ck-can,
.scene-coke[data-step="3"] .ck-can {
  translate: -50% -80%;
}

.scene-coke[data-step="2"] .ck-can {
  rotate: 24deg;

  animation: ck-float 3s ease-in-out infinite alternate;
}

@keyframes ck-float {
  to {
    rotate: -18deg;
  }
}

.scene-coke[data-step="2"] .ck-planet {
  opacity: 1;
}

.scene-coke[data-step="2"] .ck-pad,
.scene-coke[data-step="3"] .ck-pad {
  opacity: 0;
}

/* 3 — the stamp */
.ck-stamp {
  position: absolute;

  left: 50%;
  bottom: 12%;

  padding: 8px 14px;

  border: 2px solid var(--c-ink);

  border-radius: 999px;

  background: var(--c-accent);

  color: #ffffff;

  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  white-space: nowrap;

  translate: -50% 0;

  opacity: 0;

  transform: scale(1.6) rotate(-6deg);

  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.scene-coke[data-step="3"] .ck-stamp {
  opacity: 1;

  transform: rotate(-4deg);

  transition-delay: 0.5s;
}


/* =========================================================
   SCENE: L'ORÉAL — BECAUSE I'M WORTH IT
   A fan of hair strands that take colour.
   ========================================================= */

.scene-loreal {
  color: var(--page-fg);
}

.lo-strands span {
  position: absolute;

  left: 50%;
  bottom: 14%;

  width: 7%;
  height: 62%;

  margin-left: -3.5%;

  border: 2px solid var(--c-ink);

  border-radius: 40px 40px 6px 6px;

  /* colour rises from the root: grey until the dye goes on */
  background:
    linear-gradient(0deg, var(--c) 0 100%) bottom / 100% 0% no-repeat,
    #cfcac4;

  transform-origin: 50% 100%;

  rotate: calc(var(--i) * 9deg);

  transition:
    background-size 0.9s ease var(--d),
    rotate 0.9s cubic-bezier(.3, 1.3, .5, 1),
    opacity 0.5s ease;
}

.scene-loreal[data-step="1"] .lo-strands span,
.scene-loreal[data-step="2"] .lo-strands span,
.scene-loreal[data-step="3"] .lo-strands span {
  background-size: 100% 100%, auto;
}

/* 2 — I → WE → YOU */
.lo-words {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4%;

  font:
    italic
    clamp(30px, 4.6vw, 58px) / 1
    Georgia,
    Georgia,
    serif;
}

.lo-words span,
.lo-words i {
  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(.3, 1.5, .5, 1);
}

.lo-words i {
  font-size: 0.6em;

  font-style: normal;
}

.scene-loreal[data-step="2"] .lo-strands span {
  opacity: 0.18;
}

.scene-loreal[data-step="2"] .lo-words span,
.scene-loreal[data-step="2"] .lo-words i {
  opacity: 1;

  transform: none;
}

.scene-loreal[data-step="2"] .lo-words :nth-child(2) { transition-delay: 0.3s; }
.scene-loreal[data-step="2"] .lo-words :nth-child(3) { transition-delay: 0.6s; }
.scene-loreal[data-step="2"] .lo-words :nth-child(4) { transition-delay: 0.9s; }
.scene-loreal[data-step="2"] .lo-words :nth-child(5) { transition-delay: 1.2s; }

.scene-loreal[data-step="2"] .lo-words span:last-of-type {
  color: var(--c-accent);
}

/* 3 — the fan opens into the whole spectrum */
.scene-loreal[data-step="3"] .lo-strands span {
  rotate: calc(var(--i) * 17deg);

  animation: lo-sway 3s ease-in-out infinite alternate;
}

@keyframes lo-sway {
  to {
    translate: 0 -6px;
  }
}


/* =========================================================
   SCENE: SPOTIFY — WINNING INDIA
   An equaliser of India's music apps.
   ========================================================= */

.scene-spotify {
  color: var(--page-fg);
}

.sp-eq {
  position: absolute;

  inset: 12% 4% 18% 4%;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: 3%;
}

.sp-bar {
  position: relative;

  flex: 1;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;
}

.sp-fill {
  width: 100%;
  height: 60%;

  border: 2px solid var(--c-ink);

  border-radius: 6px 6px 0 0;

  background: currentColor;

  opacity: 0.85;

  transform-origin: 50% 100%;

  animation: sp-bounce 0.9s ease-in-out var(--d) infinite alternate;

  transition:
    height 0.8s ease,
    opacity 0.5s ease;
}

.sp-bar.is-spotify .sp-fill {
  background: var(--c-accent);

  opacity: 1;
}

@keyframes sp-bounce {
  0% {
    scale: 1 0.35;
  }

  100% {
    scale: 1 1;
  }
}

.sp-name {
  position: absolute;

  top: 100%;

  margin-top: 8px;

  font:
    8px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.06em;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  white-space: nowrap;
}

.sp-fate {
  position: absolute;

  bottom: 8px;

  font:
    8px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.06em;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  white-space: nowrap;

  opacity: 0;

  transition: opacity 0.4s ease 0.6s;
}

/* 1 — Spotify plays louder */
.scene-spotify[data-step="1"] .sp-bar.is-spotify .sp-fill {
  height: 95%;
}

/* 2 — rivals go quiet; Spotify keeps playing */
.scene-spotify[data-step="2"] .sp-bar:not(.is-spotify) .sp-fill,
.scene-spotify[data-step="3"] .sp-bar:not(.is-spotify) .sp-fill {
  animation: none;

  height: 22%;

  opacity: 0.35;
}

.scene-spotify[data-step="2"] .sp-bar.is-closed .sp-fill,
.scene-spotify[data-step="3"] .sp-bar.is-closed .sp-fill {
  height: 3%;
}

.scene-spotify[data-step="2"] .sp-fate {
  opacity: 1;
}

.scene-spotify[data-step="2"] .sp-bar.is-spotify .sp-fill,
.scene-spotify[data-step="3"] .sp-bar.is-spotify .sp-fill {
  height: 100%;
}


/* =========================================================
   SCENE: ZOMATO — THE APP THAT TALKS BACK
   ========================================================= */

.scene-zomato {
  color: var(--page-fg);
}

.zo-phone {
  position: absolute;

  left: 50%;
  top: 6%;

  width: 46%;
  height: 84%;

  translate: -50% 0;

  border: 2px solid var(--c-ink);

  border-radius: 26px;

  background: #ffffff;

  box-shadow: 6px 6px 0 var(--c-ink);

  overflow: hidden;

  transition:
    translate 0.7s cubic-bezier(.3, 1.3, .5, 1),
    scale 0.7s ease;
}

.zo-notch {
  position: absolute;

  left: 50%;
  top: 8px;

  width: 30%;
  height: 8px;

  translate: -50% 0;

  border-radius: 8px;

  background: var(--c-ink);
}

/* 0 — the original idea: a menu on a screen */
.zo-menu {
  position: absolute;

  inset: 16% 10% auto;

  display: grid;

  gap: 8px;

  transition: opacity 0.4s ease;
}

.zo-menu span {
  height: 14px;

  border-radius: 4px;

  background: #e9e3e3;
}

.zo-menu span:nth-child(odd) {
  width: 70%;
}

/* 1 — notifications slide in */
.zo-pings {
  position: absolute;

  inset: 14% 6% auto;

  display: grid;

  gap: 8px;
}

.zo-pings p {
  margin: 0;

  padding: 8px 10px;

  border: 1.5px solid #1c1c1c;

  border-radius: 10px;

  background: #ffffff;

  color: #1c1c1c;

  font:
    500
    clamp(9px, 1.2vw, 12px) / 1.3
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  box-shadow: 3px 3px 0 #e23744;

  opacity: 0;

  transform: translateY(-24px);

  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.scene-zomato[data-step="1"] .zo-menu {
  opacity: 0.2;
}

.scene-zomato[data-step="1"] .zo-pings p {
  opacity: 1;

  transform: none;
}

.scene-zomato[data-step="1"] .zo-pings p:nth-child(2) { transition-delay: 0.4s; }
.scene-zomato[data-step="1"] .zo-pings p:nth-child(3) { transition-delay: 0.8s; }

/* 2 — the business grows, step by step */
.zo-steps {
  position: absolute;

  inset: 10% 6%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 12px;
}

.zo-steps span {
  align-self: flex-start;

  padding: 8px 14px;

  border: 2px solid currentColor;

  border-radius: 999px;

  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  opacity: 0;

  transform: translateX(-30px);

  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(.3, 1.5, .5, 1);
}

.zo-steps span:nth-child(2) { margin-left: 12%; }
.zo-steps span:nth-child(3) { margin-left: 24%; }
.zo-steps span:nth-child(4) {
  margin-left: 36%;

  background: var(--c-accent);

  color: #ffffff;

  border-color: var(--c-accent);
}

.scene-zomato[data-step="2"] .zo-phone {
  opacity: 0;
}

.scene-zomato[data-step="2"] .zo-steps span {
  opacity: 1;

  transform: none;
}

.scene-zomato[data-step="2"] .zo-steps span:nth-child(2) { transition-delay: 0.25s; }
.scene-zomato[data-step="2"] .zo-steps span:nth-child(3) { transition-delay: 0.5s; }
.scene-zomato[data-step="2"] .zo-steps span:nth-child(4) { transition-delay: 0.75s; }

/* 3 — delivered */
.zo-done {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 40%;
  aspect-ratio: 1;

  display: grid;

  place-items: center;

  translate: -50% -50%;

  border-radius: 50%;

  background: #e23744;

  color: #ffffff;

  font-size: clamp(30px, 5vw, 56px);

  scale: 0;

  transition: scale 0.6s cubic-bezier(.3, 1.8, .5, 1) 0.3s;
}

.scene-zomato[data-step="3"] .zo-menu {
  opacity: 0.15;
}

.scene-zomato[data-step="3"] .zo-done {
  scale: 1;
}


/* =========================================================
   SCENE: JIO — FREE CHANGES EVERYTHING
   ========================================================= */

.scene-jio {
  color: var(--page-fg);
}

.ji-tower {
  position: absolute;

  left: 50%;
  bottom: 12%;

  width: 16%;
  height: 46%;

  translate: -50% 0;

  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 3px 100% no-repeat;

  clip-path: polygon(50% 0, 100% 100%, 0 100%);

  border-bottom: 3px solid currentColor;

  transition: opacity 0.5s ease;
}

.ji-tower::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    repeating-linear-gradient(
      0deg,
      currentColor 0 2px,
      transparent 2px 18%
    );

  opacity: 0.7;
}

.ji-rings span {
  position: absolute;

  left: 50%;
  top: 42%;

  width: 90%;
  aspect-ratio: 1;

  border: 2px solid currentColor;

  border-radius: 50%;

  translate: -50% -50%;

  clip-path: inset(0 0 55% 0);

  scale: 0;

  opacity: 0;
}

.scene-jio[data-step="0"] .ji-rings span,
.scene-jio[data-step="1"] .ji-rings span,
.scene-jio[data-step="2"] .ji-rings span {
  animation: ji-ring 2.4s ease-out infinite;
}

.ji-rings span:nth-child(2) { animation-delay: 0.8s !important; }
.ji-rings span:nth-child(3) { animation-delay: 1.6s !important; }

@keyframes ji-ring {
  0% {
    scale: 0.1;
    opacity: 1;
  }

  100% {
    scale: 1;
    opacity: 0;
  }
}

/* 1 — FREE */
.ji-free {
  position: absolute;

  right: 8%;
  top: 14%;

  padding: 10px 16px;

  border: 2px solid var(--c-ink);

  border-radius: 12px;

  background: #ffffff;

  color: var(--c-accent);

  font:
    700
    clamp(20px, 3vw, 32px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  opacity: 0;

  transform: scale(1.8) rotate(10deg);

  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.scene-jio[data-step="1"] .ji-free {
  opacity: 1;

  transform: rotate(6deg);
}

/* 2 — phones light up everywhere */
.ji-phones span {
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: 10px;
  height: 16px;

  border: 2px solid currentColor;

  border-radius: 3px;

  background: var(--c-accent);

  opacity: 0;

  scale: 0;

  transition:
    opacity 0.3s ease,
    scale 0.4s cubic-bezier(.3, 1.8, .5, 1);
}

.scene-jio[data-step="2"] .ji-phones span {
  opacity: 1;

  scale: 1;

  transition-delay: var(--d);
}

/* 3 — the price per GB collapses */
.ji-price {
  position: absolute;

  inset: 14% 12% 16%;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: 16%;
}

.ji-price p {
  margin: 0;

  width: 30%;
  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  gap: 6px;

  opacity: 0;

  transition: opacity 0.4s ease;
}

.ji-bar {
  order: 2;

  width: 100%;

  border: 2px solid var(--c-ink);

  border-radius: 8px 8px 0 0;

  transform-origin: 50% 100%;

  transition: transform 0.9s cubic-bezier(.2, .8, .2, 1);
}

.ji-bar.is-old {
  height: 80%;

  background: #b9c3e6;
}

.ji-bar.is-new {
  height: 4%;

  background: var(--c-accent);

  transform: scaleY(20);
}

.ji-price b {
  font:
    600
    clamp(18px, 2.6vw, 28px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

.ji-price small {
  order: 3;

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  white-space: nowrap;
}

.scene-jio[data-step="3"] .ji-price p {
  opacity: 1;
}

.scene-jio[data-step="3"] .ji-bar.is-new {
  transform: none;

  transition-delay: 0.4s;
}

.scene-jio[data-step="3"] .ji-tower,
.scene-jio[data-step="3"] .ji-rings {
  opacity: 0;
}


/* =========================================================
   SCENE: TITAN — TIME, WITH TASTE
   ========================================================= */

.scene-titan {
  color: var(--page-fg);
}

.ti-watch {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 44%;
  aspect-ratio: 1;

  translate: -50% -50%;

  transition:
    opacity 0.5s ease,
    scale 0.6s ease;
}

.ti-strap {
  position: absolute;

  left: 26%;
  right: 26%;

  height: 46%;

  border: 2px solid var(--c-ink);

  background: #3a2f22;
}

.ti-strap-top {
  bottom: 70%;

  border-radius: 10px 10px 0 0;
}

.ti-strap-bottom {
  top: 70%;

  border-radius: 0 0 10px 10px;
}

.ti-face {
  position: absolute;

  inset: 0;

  border: 6px solid var(--c-accent);

  border-radius: 50%;

  background:
    repeating-conic-gradient(
      from -1deg,
      var(--c-ink) 0 2deg,
      transparent 2deg 30deg
    ) center / 100% 100%,
    #fdfaf3;

  box-shadow: 0 0 0 2px var(--c-ink);
}

.ti-face::before {
  content: "";

  position: absolute;

  inset: 9%;

  border-radius: 50%;

  background: #fdfaf3;
}

.ti-hand {
  position: absolute;

  left: 50%;
  bottom: 50%;

  transform-origin: 50% 100%;

  border-radius: 3px;

  background: var(--c-ink);
}

.ti-hour {
  width: 5px;
  height: 24%;

  margin-left: -2.5px;

  rotate: -60deg;
}

.ti-minute {
  width: 3px;
  height: 34%;

  margin-left: -1.5px;

  rotate: 60deg;
}

.ti-second {
  width: 1.5px;
  height: 38%;

  margin-left: -0.75px;

  background: #c0392b;

  animation: ti-tick 60s steps(60) infinite;
}

@keyframes ti-tick {
  to {
    rotate: 360deg;
  }
}

.ti-pin {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 10px;
  height: 10px;

  translate: -50% -50%;

  border-radius: 50%;

  background: var(--c-accent);

  box-shadow: 0 0 0 2px var(--c-ink);
}

/* 1 — the signature tune: notes drift up around the watch */
.ti-notes span {
  position: absolute;

  bottom: 20%;

  font-size: clamp(20px, 3vw, 32px);

  color: var(--c-ink);

  opacity: 0;
}

.ti-notes span:nth-child(1) { left: 14%; }
.ti-notes span:nth-child(2) { left: 28%; }
.ti-notes span:nth-child(3) { left: 66%; }
.ti-notes span:nth-child(4) { left: 80%; }
.ti-notes span:nth-child(5) { left: 48%; }

.scene-titan[data-step="1"] .ti-notes span {
  animation: ti-note 3s ease-in-out infinite;
}

.ti-notes span:nth-child(2) { animation-delay: 0.6s !important; }
.ti-notes span:nth-child(3) { animation-delay: 1.2s !important; }
.ti-notes span:nth-child(4) { animation-delay: 1.8s !important; }
.ti-notes span:nth-child(5) { animation-delay: 2.4s !important; }

@keyframes ti-note {
  0% {
    opacity: 0;
    translate: 0 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 10px -140px;
    rotate: 20deg;
  }
}

/* 2 — Edge: a thick watch slims down */
.ti-edge {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 18px;

  opacity: 0;

  transition: opacity 0.4s ease;
}

.ti-slab {
  width: 64%;
  height: 22%;

  border: 2px solid var(--c-on-deep);

  border-radius: 12px;

  background: linear-gradient(180deg, var(--c-accent), #8a6d2c);

  transition: height 1.2s cubic-bezier(.6, 0, .3, 1) 0.3s;
}

.ti-edge small {
  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.14em;
}

.scene-titan[data-step="2"] .ti-watch {
  opacity: 0;
}

.scene-titan[data-step="2"] .ti-edge {
  opacity: 1;
}

.scene-titan[data-step="2"] .ti-slab {
  height: 2.4%;
}

/* 3 — ten past ten, the classic watch-ad time */
.scene-titan[data-step="3"] .ti-watch {
  scale: 1.12;
}


/* =========================================================
   SCENE: SINGAPORE AIRLINES — THE SINGAPORE GIRL
   ========================================================= */

.scene-sia {
  color: var(--page-fg);
}

/* a batik-style floral repeat (original pattern) */
.sa-batik {
  position: absolute;

  inset: 8%;

  border-radius: 24px;

  background:
    radial-gradient(circle at 25% 25%, var(--c-accent) 0 9%, transparent 10%) 0 0 / 25% 25%,
    radial-gradient(circle at 75% 75%, #2f6f8f 0 6%, transparent 7%) 0 0 / 25% 25%,
    radial-gradient(circle at 75% 25%, transparent 0 12%, var(--c-ink) 13% 14%, transparent 15%) 0 0 / 25% 25%,
    #f4e3c6;

  border: 2px solid var(--c-ink);

  opacity: 0;

  scale: 0.9;

  transition:
    opacity 0.5s ease,
    scale 0.7s cubic-bezier(.3, 1.4, .5, 1);
}

.scene-sia[data-step="1"] .sa-batik {
  opacity: 1;

  scale: 1;
}

.sa-path {
  position: absolute;

  left: 0;
  top: 10%;

  width: 100%;
  height: 60%;

  overflow: visible;

  transition: opacity 0.4s ease;
}

.sa-path path {
  fill: none;

  stroke: currentColor;

  stroke-width: 0.8;

  stroke-dasharray: 2 2;
}

.sa-plane {
  position: absolute;

  left: 6%;
  top: 60%;

  font-size: clamp(26px, 4vw, 40px);

  line-height: 1;

  translate: -50% -50%;

  rotate: -40deg;

  transition:
    left 1.4s ease-in-out,
    top 1.4s ease-in-out,
    rotate 1.4s ease-in-out,
    opacity 0.4s ease;
}

.scene-sia[data-step="0"] .sa-plane {
  animation: sa-fly 4s ease-in-out infinite;
}

@keyframes sa-fly {
  0% { left: 6%; top: 60%; rotate: -40deg; }
  25% { left: 28%; top: 38%; rotate: -25deg; }
  50% { left: 50%; top: 28%; rotate: 0deg; }
  75% { left: 72%; top: 30%; rotate: 15deg; }
  100% { left: 94%; top: 44%; rotate: 35deg; }
}

.scene-sia[data-step="1"] .sa-plane,
.scene-sia[data-step="1"] .sa-path,
.scene-sia[data-step="2"] .sa-plane,
.scene-sia[data-step="2"] .sa-path {
  opacity: 0;
}

/* 2 — a framed portrait for the 1994 wax figure */
.sa-frame {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 44%;
  height: 70%;

  translate: -50% -50%;

  border: 8px solid var(--c-accent);

  outline: 2px solid currentColor;

  border-radius: 50% 50% 12px 12px / 30% 30% 12px 12px;

  overflow: hidden;

  opacity: 0;

  scale: 0.8;

  transition:
    opacity 0.4s ease,
    scale 0.6s cubic-bezier(.3, 1.5, .5, 1);
}

.sa-head {
  position: absolute;

  left: 50%;
  top: 20%;

  width: 30%;
  aspect-ratio: 1;

  translate: -50% 0;

  border-radius: 50%;

  background: currentColor;
}

.sa-body {
  position: absolute;

  left: 50%;
  bottom: 0;

  width: 70%;
  height: 42%;

  translate: -50% 0;

  border-radius: 50% 50% 0 0 / 40% 40% 0 0;

  background:
    radial-gradient(circle, var(--c-accent) 0 18%, transparent 20%) 0 0 / 14px 14px,
    #2f6f8f;
}

.scene-sia[data-step="2"] .sa-frame {
  opacity: 1;

  scale: 1;
}

/* 3 — arrived */
.scene-sia[data-step="3"] .sa-plane {
  left: 94%;
  top: 44%;

  rotate: 35deg;
}


/* =========================================================
   SCENE: PORSCHE — THERE IS NO SUBSTITUTE
   A generic fastback outline (original drawing).
   ========================================================= */

.scene-porsche {
  color: var(--page-fg);
}

.scene-porsche svg {
  display: block;

  width: 100%;

  overflow: visible;
}

.scene-porsche path,
.scene-porsche circle {
  fill: none;

  stroke: currentColor;

  stroke-width: 2.2;

  stroke-linejoin: round;
}

.ps-car {
  position: absolute;

  left: 8%;
  right: 8%;
  top: 34%;

  transition: translate 1.2s cubic-bezier(.6, 0, .3, 1);
}

.ps-car circle {
  fill: var(--c-accent);
}

/* 0 — the outline draws itself */
.ps-car .ps-body {
  stroke-dasharray: 100;

  stroke-dashoffset: 100;

  animation: ps-draw 2.4s ease forwards;
}

@keyframes ps-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* without motion, show the finished outline */
@media (prefers-reduced-motion: reduce) {
  .ps-car .ps-body {
    stroke-dashoffset: 0;
  }
}

/* 1 — the same shape across decades */
.ps-ghost {
  position: absolute;

  left: 8%;
  right: 8%;
  top: 34%;

  opacity: 0;

  translate: calc(var(--k) * -7%) calc(var(--k) * -30%);

  transition:
    opacity 0.5s ease,
    translate 0.8s cubic-bezier(.3, 1.3, .5, 1);
}

.ps-ghost small {
  position: absolute;

  left: 0;
  top: -6px;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;
}

.scene-porsche[data-step="1"] .ps-ghost {
  opacity: calc(0.75 - var(--k) * 0.2);
}

.scene-porsche:not([data-step="1"]) .ps-ghost {
  translate: 0 0;
}

/* 2 — the line */
.ps-line {
  position: absolute;

  left: 0;
  right: 0;
  top: 10%;

  margin: 0;

  text-align: center;

  font:
    italic
    700
    clamp(20px, 3.2vw, 36px) / 1.1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: -0.01em;

  opacity: 0;

  transform: scale(1.4);

  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.scene-porsche[data-step="2"] .ps-line {
  opacity: 1;

  transform: none;
}

/* 3 — full throttle */
.ps-speed {
  position: absolute;

  right: 100%;
  top: 30%;

  width: 0;
  height: 40%;

  background:
    repeating-linear-gradient(
      180deg,
      currentColor 0 2px,
      transparent 2px 10px
    );

  opacity: 0.6;

  transition: width 0.6s ease 0.4s;
}

.scene-porsche[data-step="3"] .ps-car {
  translate: 18% 0;
}

.scene-porsche[data-step="3"] .ps-speed {
  width: 60%;
}


/* =========================================================
   SCENE: CLAUDE — KEEP THINKING
   ========================================================= */

.scene-claude {
  color: var(--page-fg);
}

.cl-box {
  position: absolute;

  left: 10%;
  right: 10%;
  top: 42%;

  padding: 16px 18px;

  border: 2px solid var(--c-ink);

  border-radius: 18px;

  background: #ffffff;

  color: #1f1e1d;

  box-shadow: 5px 5px 0 var(--c-ink);

  font:
    italic
    clamp(18px, 2.6vw, 28px) / 1
    Georgia,
    Georgia,
    serif;

  white-space: nowrap;

  overflow: hidden;

  z-index: 1;
}

/* the words type in on the thinking step */
.cl-text {
  display: inline-block;

  max-width: 0;

  overflow: hidden;

  vertical-align: bottom;

  transition: max-width 1.4s steps(13);
}

.cl-cursor {
  display: inline-block;

  width: 2px;
  height: 1em;

  margin-left: 2px;

  vertical-align: bottom;

  background: #d97757;

  animation: cl-blink 1s steps(1) infinite;
}

@keyframes cl-blink {
  50% {
    opacity: 0;
  }
}

/* 1 — sparks of thought */
.cl-sparks span {
  position: absolute;

  left: 50%;
  top: 52%;

  width: 8px;
  height: 8px;

  margin: -4px;

  border-radius: 50%;

  background: var(--c-ink);

  opacity: 0;
}

.scene-claude[data-step="1"] .cl-sparks span {
  animation: cl-spark 2s ease-out var(--d) infinite;
}

@keyframes cl-spark {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateX(30px);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateX(170px);
  }
}

.scene-claude:not([data-step="0"]) .cl-text {
  max-width: 14ch;
}

/* 2 — ads crowd in */
.cl-ads span {
  position: absolute;

  padding: 10px 14px;

  border: 2px dashed currentColor;

  border-radius: 8px;

  font:
    600
    13px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  opacity: 0;

  scale: 0.5;

  transition:
    opacity 0.3s ease,
    scale 0.5s cubic-bezier(.3, 1.8, .5, 1);
}

.cl-ads span:nth-child(1) { left: 6%; top: 10%; rotate: -8deg; }
.cl-ads span:nth-child(2) { right: 8%; top: 14%; rotate: 6deg; }
.cl-ads span:nth-child(3) { left: 12%; bottom: 12%; rotate: 5deg; }
.cl-ads span:nth-child(4) { right: 10%; bottom: 10%; rotate: -6deg; }

.scene-claude[data-step="2"] .cl-ads span,
.scene-claude[data-step="3"] .cl-ads span {
  opacity: 1;

  scale: 1;
}

.scene-claude[data-step="2"] .cl-ads span:nth-child(2) { transition-delay: 0.15s; }
.scene-claude[data-step="2"] .cl-ads span:nth-child(3) { transition-delay: 0.3s; }
.scene-claude[data-step="2"] .cl-ads span:nth-child(4) { transition-delay: 0.45s; }

/* 3 — the ads are struck out */
.cl-ads span::after {
  content: "";

  position: absolute;

  left: -10%;
  right: -10%;
  top: 50%;

  height: 3px;

  background: var(--c-accent);

  rotate: -14deg;

  scale: 0 1;

  transition: scale 0.4s ease;
}

.scene-claude[data-step="3"] .cl-ads span {
  opacity: 0.35;
}

.scene-claude[data-step="3"] .cl-ads span::after {
  scale: 1 1;
}

.cl-free {
  position: absolute;

  left: 50%;
  top: 22%;

  padding: 8px 16px;

  border: 2px solid var(--c-ink);

  border-radius: 999px;

  background: var(--c-accent);

  color: #1f1e1d;

  font:
    11px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.14em;

  translate: -50% 0;

  opacity: 0;

  transform: scale(1.5);

  transition:
    opacity 0.3s ease 0.4s,
    transform 0.5s cubic-bezier(.3, 1.6, .5, 1) 0.4s;
}

.scene-claude[data-step="3"] .cl-free {
  opacity: 1;

  transform: none;
}


/* =========================================================
   SCENE: VOLKSWAGEN — THINK SMALL
   Original simple drawings, not the real ads.
   ========================================================= */

.scene-vw {
  color: var(--page-fg);
}

.scene-vw svg {
  display: block;

  overflow: visible;
}

.scene-vw path,
.scene-vw circle {
  fill: none;

  stroke: currentColor;

  stroke-width: 2.2;

  stroke-linejoin: round;
}

/* 0 — the big American car fills the frame */
.vw-big {
  position: absolute;

  left: 2%;
  top: 30%;

  width: 96%;

  transition:
    opacity 0.5s ease,
    scale 0.7s ease;
}

.vw-big circle {
  fill: currentColor;
}

/* 1 — one small car, lots of white space */
.vw-bug {
  position: absolute;

  left: 50%;
  top: 34%;

  width: 22%;

  translate: -50% 0;

  opacity: 0;

  scale: 0.4;

  transition:
    opacity 0.5s ease,
    scale 0.7s cubic-bezier(.3, 1.5, .5, 1),
    left 1.2s cubic-bezier(.6, 0, .3, 1);
}

.vw-bug path:first-child {
  fill: var(--c-accent);
}

.vw-bug .vw-window {
  fill: #ffffff;
}

.vw-bug circle {
  fill: var(--c-ink);
}

.vw-line {
  position: absolute;

  left: 0;
  right: 0;
  top: 64%;

  margin: 0;

  text-align: center;

  font:
    600
    clamp(20px, 3vw, 32px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: -0.02em;

  opacity: 0;

  transition: opacity 0.5s ease 0.4s;
}

.scene-vw[data-step="1"] .vw-big,
.scene-vw[data-step="2"] .vw-big,
.scene-vw[data-step="3"] .vw-big {
  opacity: 0;

  scale: 1.3;
}

.scene-vw[data-step="1"] .vw-bug,
.scene-vw[data-step="3"] .vw-bug {
  opacity: 1;

  scale: 1;
}

.scene-vw[data-step="1"] .vw-line {
  opacity: 1;
}

/* 2 — the medal */
.vw-medal {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 46%;
  aspect-ratio: 1;

  display: grid;

  place-content: center;

  gap: 8px;

  translate: -50% -50%;

  border: 2px solid var(--c-on-deep);

  border-radius: 50%;

  background: var(--c-accent);

  color: #001e50;

  box-shadow:
    0 0 0 8px var(--c-deep),
    0 0 0 10px var(--c-accent);

  text-align: center;

  font:
    italic
    clamp(34px, 5vw, 58px) / 1
    Georgia,
    Georgia,
    serif;

  opacity: 0;

  scale: 0.6;

  rotate: -12deg;

  transition:
    opacity 0.4s ease,
    scale 0.6s cubic-bezier(.3, 1.6, .5, 1),
    rotate 0.6s ease;
}

.vw-medal small {
  font:
    normal
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.14em;
}

.scene-vw[data-step="2"] .vw-medal {
  opacity: 1;

  scale: 1;

  rotate: 0deg;
}

/* 3 — the little car drives off */
.scene-vw[data-step="3"] .vw-bug {
  left: 78%;
}


/* =========================================================
   SCENE: RED BULL — STRATOS
   ========================================================= */

.scene-redbull {
  color: var(--page-fg);

  /* keep the big Earth inside the scene's frame */
  overflow: hidden;

  border-radius: 28px;
}

/* the Earth's curve, seen from 39 km up */
.rb-earth {
  position: absolute;

  left: -40%;
  right: -40%;
  top: 74%;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(circle at 50% 0, #4f8fe6 0, #1f4aa8 30%, #0b1a3a 60%);

  box-shadow: 0 -6px 24px rgba(120, 180, 255, 0.55);

  translate: 0 30%;

  transition: translate 1s cubic-bezier(.3, .9, .3, 1);
}

.scene-redbull[data-step="1"] .rb-earth,
.scene-redbull[data-step="2"] .rb-earth {
  translate: 0 0;
}

/* 0 — the balloon rises */
.rb-balloon {
  position: absolute;

  left: 50%;
  top: 8%;

  width: 26%;

  translate: -50% 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition:
    top 1s ease,
    opacity 0.5s ease;
}

.rb-envelope {
  width: 100%;
  aspect-ratio: 0.8;

  border: 2px solid var(--c-ink);

  border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;

  background:
    linear-gradient(90deg, transparent 47%, rgba(0, 0, 0, 0.12) 47% 53%, transparent 53%),
    #f7f7f2;
}

.rb-capsule {
  width: 30%;
  aspect-ratio: 1;

  margin-top: 10%;

  border: 2px solid var(--c-ink);

  border-radius: 40% 40% 10% 10%;

  background: var(--c-accent);

  box-shadow: 0 -12px 0 -10px var(--c-ink);
}

.scene-redbull[data-step="0"] .rb-balloon {
  animation: rb-rise 3s ease-in-out infinite alternate;
}

@keyframes rb-rise {
  from {
    translate: -50% 18%;
  }

  to {
    translate: -50% -4%;
  }
}

.scene-redbull[data-step="2"] .rb-balloon,
.scene-redbull[data-step="3"] .rb-balloon {
  opacity: 0;
}

/* the jumper */
.rb-jumper {
  position: absolute;

  left: 50%;
  top: 54%;

  width: 14%;

  translate: -50% 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  opacity: 0;

  transition:
    top 1.2s cubic-bezier(.5, 0, .5, 1),
    opacity 0.4s ease;
}

.rb-body {
  width: 22%;
  aspect-ratio: 0.5;

  border: 2px solid var(--c-ink);

  border-radius: 999px;

  background: #f7f7f2;
}

.rb-chute {
  width: 100%;
  aspect-ratio: 2;

  border: 2px solid var(--c-ink);

  border-radius: 100% 100% 0 0 / 100% 100% 0 0;

  background:
    repeating-linear-gradient(90deg, var(--c-accent) 0 25%, #f7f7f2 25% 50%);

  scale: 1 0;

  transform-origin: 50% 100%;

  transition: scale 0.6s cubic-bezier(.3, 1.6, .5, 1) 0.3s;
}

.scene-redbull[data-step="1"] .rb-jumper {
  top: 36%;

  opacity: 1;
}

/* 2 — freefall through the sound barrier */
.scene-redbull[data-step="2"] .rb-jumper {
  top: 46%;

  opacity: 1;

  animation: rb-shake 0.15s linear infinite;
}

@keyframes rb-shake {
  50% {
    margin-left: 2px;
  }
}

.rb-boom span {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 70%;
  aspect-ratio: 1;

  border: 2px solid currentColor;

  border-radius: 50%;

  translate: -50% -50%;

  opacity: 0;

  scale: 0.2;
}

.scene-redbull[data-step="2"] .rb-boom span {
  animation: rb-boom 1.6s ease-out infinite;
}

.rb-boom span:nth-child(2) { animation-delay: 0.5s !important; }
.rb-boom span:nth-child(3) { animation-delay: 1s !important; }

@keyframes rb-boom {
  0% {
    opacity: 0.9;
    scale: 0.2;
  }

  100% {
    opacity: 0;
    scale: 1.1;
  }
}

/* 3 — the parachute opens */
.scene-redbull[data-step="3"] .rb-jumper {
  top: 22%;

  width: 30%;

  opacity: 1;
}

.scene-redbull[data-step="3"] .rb-chute {
  scale: 1 1;
}

/* labels */
.rb-alt,
.rb-mach,
.rb-live {
  position: absolute;

  padding: 7px 12px;

  border: 2px solid var(--c-ink);

  border-radius: 999px;

  background: #ffffff;

  color: var(--c-ink);

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;

  white-space: nowrap;

  opacity: 0;

  transition: opacity 0.4s ease 0.4s;
}

.rb-alt {
  right: 4%;
  top: 14%;
}

.rb-mach {
  left: 4%;
  top: 14%;

  background: var(--c-accent);

  color: #ffffff;
}

.rb-live {
  left: 50%;
  bottom: 10%;

  translate: -50% 0;
}

.scene-redbull[data-step="1"] .rb-alt,
.scene-redbull[data-step="2"] .rb-mach,
.scene-redbull[data-step="3"] .rb-live {
  opacity: 1;
}


/* =========================================================
   SCENE: PATAGONIA — DON'T BUY THIS JACKET
   ========================================================= */

.scene-patagonia {
  color: var(--page-fg);
}

/* 3 — mountains behind the jacket */
.pg-mountains {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 12%;

  width: 100%;
  height: 34%;

  opacity: 0;

  transition: opacity 0.6s ease;
}

.pg-mountains path {
  fill: color-mix(in srgb, var(--c-ink) 18%, transparent);

  stroke: currentColor;

  stroke-width: 1;
}

.scene-patagonia[data-step="3"] .pg-mountains {
  opacity: 1;
}

/* the fleece */
.pg-jacket {
  position: absolute;

  left: 50%;
  top: 14%;

  width: 52%;

  translate: -50% 0;

  transition:
    opacity 0.5s ease,
    rotate 0.6s ease;
}

.pg-jacket svg {
  display: block;

  width: 100%;

  overflow: visible;
}

.pg-body {
  fill: #9aa3a0;

  stroke: var(--c-ink);

  stroke-width: 2.2;

  stroke-linejoin: round;
}

.pg-zip,
.pg-collar {
  fill: none;

  stroke: var(--c-ink);

  stroke-width: 2;
}

/* the repair patch appears on the last step */
.pg-patch {
  fill: var(--c-accent);

  stroke: var(--c-ink);

  stroke-width: 1.5;

  stroke-dasharray: 3 2;

  opacity: 0;

  transition: opacity 0.4s ease 0.4s;
}

.scene-patagonia[data-step="3"] .pg-patch {
  opacity: 1;
}

.pg-tag {
  position: absolute;

  right: -10%;
  top: 8%;

  padding: 6px 10px;

  border: 2px solid var(--c-ink);

  border-radius: 6px;

  background: #ffffff;

  color: var(--c-ink);

  font:
    9px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  rotate: 12deg;

  transition: opacity 0.4s ease;
}

.scene-patagonia[data-step="0"] .pg-tag {
  animation: pg-swing 2s ease-in-out infinite alternate;
}

@keyframes pg-swing {
  to {
    rotate: 2deg;
  }
}

/* 1 — the stamp */
.pg-stamp {
  position: absolute;

  left: 50%;
  top: 40%;

  padding: 12px 18px;

  border: 4px solid var(--c-ink);

  border-radius: 10px;

  background: #ffffff;

  color: var(--c-ink);

  text-align: center;

  font:
    800
    clamp(18px, 2.8vw, 30px) / 1.05
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: -0.01em;

  translate: -50% 0;

  rotate: -8deg;

  opacity: 0;

  transform: scale(2.2);

  transition:
    opacity 0.2s ease,
    transform 0.45s cubic-bezier(.3, 1.6, .5, 1);
}

.scene-patagonia[data-step="1"] .pg-stamp {
  opacity: 1;

  transform: none;
}

.scene-patagonia[data-step="1"] .pg-tag,
.scene-patagonia[data-step="2"] .pg-tag,
.scene-patagonia[data-step="3"] .pg-tag {
  opacity: 0;
}

/* 2 — the water it took */
.pg-water {
  position: absolute;

  inset: 8% 14% 14%;

  display: grid;

  place-items: center;

  border: 2px solid var(--c-on-deep);

  border-radius: 0 0 26px 26px;

  border-top: 0;

  background:
    linear-gradient(0deg, #3d8fd1 0 100%) bottom / 100% 0% no-repeat;

  opacity: 0;

  transition:
    opacity 0.4s ease,
    background-size 1.6s cubic-bezier(.3, .9, .3, 1) 0.2s;
}

.pg-water b {
  position: relative;

  z-index: 1;

  color: #ffffff;

  font:
    italic
    400
    clamp(40px, 6vw, 72px) / 1
    Georgia,
    Georgia,
    serif;
}

.scene-patagonia[data-step="2"] .pg-water {
  opacity: 1;

  background-size: 100% 78%;
}

.scene-patagonia[data-step="2"] .pg-jacket {
  opacity: 0.12;
}

/* 3 — worn again */
.scene-patagonia[data-step="3"] .pg-jacket {
  rotate: -4deg;
}


/* =========================================================
   SCENE: AIRBNB — BELONG ANYWHERE
   ========================================================= */

.scene-airbnb {
  color: var(--page-fg);
}

.scene-airbnb small {
  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.12em;
}

/* 0 — an air mattress on the floor */
.ab-mattress {
  position: absolute;

  left: 14%;
  right: 14%;
  top: 46%;

  height: 18%;

  border: 2px solid var(--c-ink);

  border-radius: 16px;

  background:
    repeating-linear-gradient(90deg, #cfe3f5 0 18px, #b7d3ec 18px 22px);

  box-shadow: 0 10px 0 -4px rgba(0, 0, 0, 0.12);

  transition:
    opacity 0.4s ease,
    scale 0.5s ease;
}

.scene-airbnb[data-step="0"] .ab-mattress {
  animation: ab-breathe 2.4s ease-in-out infinite;
}

@keyframes ab-breathe {
  50% {
    scale: 1.02 1.08;
  }
}

.ab-pillow {
  position: absolute;

  left: 6%;
  top: 18%;

  width: 18%;
  height: 64%;

  border: 2px solid var(--c-ink);

  border-radius: 12px;

  background: #ffffff;
}

.ab-mattress small {
  position: absolute;

  left: 0;
  right: 0;
  top: calc(100% + 18px);

  text-align: center;
}

/* 1 — the cereal boxes */
.ab-boxes {
  position: absolute;

  inset: 18% 18% 20%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10%;

  align-items: end;
}

.ab-boxes span {
  display: grid;

  place-items: center;

  height: 84%;

  border: 2px solid var(--c-ink);

  border-radius: 6px;

  background: #ffffff;

  color: var(--c-ink);

  font:
    italic
    700
    clamp(18px, 2.6vw, 28px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  box-shadow: 6px 6px 0 var(--c-ink);

  opacity: 0;

  transform: translateY(40px) rotate(-6deg);

  transition:
    opacity 0.3s ease,
    transform 0.6s cubic-bezier(.3, 1.6, .5, 1);
}

.ab-boxes span:nth-child(2) {
  transform: translateY(40px) rotate(6deg);
}

.ab-boxes small {
  grid-column: 1 / -1;

  text-align: center;

  opacity: 0;

  transition: opacity 0.4s ease 0.5s;
}

.scene-airbnb[data-step="1"] .ab-boxes span {
  opacity: 1;

  transform: rotate(-3deg);
}

.scene-airbnb[data-step="1"] .ab-boxes span:nth-child(2) {
  transform: rotate(4deg);

  transition-delay: 0.15s;
}

.scene-airbnb[data-step="1"] .ab-boxes small {
  opacity: 1;
}

.scene-airbnb:not([data-step="0"]) .ab-mattress {
  opacity: 0;

  scale: 0.8;
}

/* 2 — homes pop up everywhere */
.ab-pins span {
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: 18px;
  height: 18px;

  margin: -18px 0 0 -9px;

  border: 2px solid var(--c-ink);

  border-radius: 50% 50% 50% 0;

  background: var(--c-accent);

  rotate: -45deg;

  opacity: 0;

  scale: 0;

  transition:
    opacity 0.3s ease,
    scale 0.45s cubic-bezier(.3, 1.8, .5, 1);
}

.scene-airbnb[data-step="2"] .ab-pins span {
  opacity: 1;

  scale: 1;

  transition-delay: var(--d);
}

/* 3 — one home, one feeling */
.ab-home {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 34%;

  translate: -50% -50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  opacity: 0;

  scale: 0.7;

  transition:
    opacity 0.4s ease,
    scale 0.6s cubic-bezier(.3, 1.6, .5, 1);
}

.ab-roof {
  width: 100%;
  aspect-ratio: 2;

  background: var(--c-ink);

  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ab-house {
  display: grid;

  place-items: center;

  width: 76%;
  aspect-ratio: 1.2;

  border: 2px solid var(--c-ink);

  border-top: 0;

  background: #ffffff;

  color: var(--c-accent);

  font-size: clamp(28px, 4vw, 44px);
}

.ab-home small {
  margin-top: 14px;

  white-space: nowrap;
}

.scene-airbnb[data-step="3"] .ab-home {
  opacity: 1;

  scale: 1;
}


/* =========================================================
   SCENE: AMUL — THE AMUL GIRL
   A hoarding with a polka-dot board; the girl herself is
   not drawn.
   ========================================================= */

.scene-amul {
  color: var(--page-fg);
}

.am-board {
  position: absolute;

  left: 8%;
  right: 8%;
  top: 14%;

  height: 50%;

  overflow: hidden;

  border: 3px solid var(--c-ink);

  border-radius: 6px;

  background:
    radial-gradient(circle, #e4252c 0 22%, transparent 24%) 0 0 / 22px 22px,
    #ffffff;

  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.18);

  transition: translate 0.6s ease;
}

.am-post {
  position: absolute;

  top: 64%;

  width: 3%;
  height: 26%;

  background: var(--c-ink);
}

.am-post-l {
  left: 24%;
}

.am-post-r {
  right: 24%;
}

/* 1 — this week's topics flick past */
.am-topics {
  position: absolute;

  inset: 0;
}

.am-topics span {
  position: absolute;

  left: 50%;
  top: 50%;

  padding: 10px 16px;

  border: 3px solid var(--c-ink);

  background: #ffffff;

  color: var(--c-ink);

  font:
    800
    clamp(18px, 3vw, 30px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  translate: -50% -50%;

  white-space: nowrap;

  opacity: 0;
}

.scene-amul[data-step="1"] .am-topics span {
  animation: am-flick 6s steps(1) infinite;
}

.am-topics span:nth-child(2) { animation-delay: 1.5s !important; }
.am-topics span:nth-child(3) { animation-delay: 3s !important; }
.am-topics span:nth-child(4) { animation-delay: 4.5s !important; }

@keyframes am-flick {
  0%, 25% {
    opacity: 1;
  }

  25.01%, 100% {
    opacity: 0;
  }
}

/* without motion, just show the first topic */
@media (prefers-reduced-motion: reduce) {
  .scene-amul[data-step="1"] .am-topics span:first-child {
    opacity: 1;
  }
}

/* 2 — sixty years of boards */
.am-years {
  position: absolute;

  left: 50%;
  top: 50%;

  padding: 10px 16px;

  border: 3px solid var(--c-ink);

  background: #ffd84d;

  color: var(--c-ink);

  font:
    700
    clamp(20px, 3.4vw, 36px) / 1
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  translate: -50% -50%;

  white-space: nowrap;

  opacity: 0;

  scale: 0.6;

  transition:
    opacity 0.3s ease,
    scale 0.5s cubic-bezier(.3, 1.6, .5, 1);
}

.scene-amul[data-step="2"] .am-years {
  opacity: 1;

  scale: 1;
}

/* 3 — butter */
.am-butter {
  position: absolute;

  left: 50%;
  bottom: 8%;

  width: 40%;

  translate: -50% 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(.3, 1.5, .5, 1);
}

.am-slab {
  width: 100%;
  aspect-ratio: 2.4;

  border: 2px solid var(--c-ink);

  border-radius: 8px;

  background: linear-gradient(180deg, #ffe58a, #f6c945);

  box-shadow: inset 0 6px 0 rgba(255, 255, 255, 0.5);
}

.am-butter small {
  padding: 6px 12px;

  border-radius: 999px;

  background: var(--c-accent);

  color: #ffffff;

  font:
    10px
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.14em;

  white-space: nowrap;
}

.scene-amul[data-step="3"] .am-butter {
  opacity: 1;

  transform: none;
}

.scene-amul[data-step="3"] .am-board {
  translate: 0 -18%;
}

.scene-amul[data-step="3"] .am-post {
  opacity: 0;
}


@media (prefers-reduced-motion: reduce) {

  .ab-mattress,
  .ab-boxes span,
  .ab-pins span,
  .ab-home,
  .am-board,
  .am-topics span,
  .am-years,
  .am-butter,
  .pg-jacket,
  .pg-tag,
  .pg-stamp,
  .pg-water,
  .pg-patch,
  .pg-mountains,
  .vw-big,
  .vw-bug,
  .vw-line,
  .vw-medal,
  .rb-earth,
  .rb-balloon,
  .rb-jumper,
  .rb-chute,
  .rb-boom span,
  .ps-car,
  .ps-car .ps-body,
  .ps-ghost,
  .ps-line,
  .cl-text,
  .cl-cursor,
  .cl-sparks span,
  .cl-ads span,
  .cl-free,
  .zo-pings p,
  .zo-steps span,
  .zo-done,
  .ji-rings span,
  .ji-free,
  .ji-phones span,
  .ji-bar,
  .ti-second,
  .ti-notes span,
  .ti-slab,
  .sa-plane,
  .sa-batik,
  .sa-frame,
  .ck-can,
  .ck-flame,
  .ck-bubbles span,
  .ck-stamp,
  .lo-strands span,
  .lo-words span,
  .lo-words i,
  .sp-fill,
  .am-sun,
  .am-ripples span,
  .am-guests span,
  .lc-ball,
  .lc-shirt,
  .lc-badge,
  .lc-mini,
  .lc-code p,
  .m-dash,
  .m-tyre,
  .m-stops span,
  .m-stars p,
  .m-sign,
  .a-tile,
  .n-runner,
  .n-words span,
  .n-bar-fill,
  .n-tape {
    transition: none;
    animation: none !important;
  }

}


/* =========================================================
   CREDIT BLOCK (footer of each campaign)
   ========================================================= */

.story-credit {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 14px;
}

.credit-rows {
  display: grid;

  grid-template-columns: auto 1fr;

  gap: 6px 18px;

  margin: 0;

  font-size: 15px;
}

.credit-rows dt {
  font:
    10px / 1.9
    "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  opacity: 0.7;
}

.credit-rows dd {
  margin: 0;
}

.credit-link {
  padding: 8px 14px;

  border: 1.5px solid currentColor;

  border-radius: 999px;

  color: inherit;

  font-size: 13px;

  text-decoration: none;

  transition: background 0.2s ease, color 0.2s ease;
}

.credit-link:hover {
  background: var(--c-accent);

  color: var(--c-on-accent);
}


/* =========================================================
   GEORGIA SIZING
   Georgia is wider than the old condensed display serif, so
   the story headings come down a step to keep their line
   breaks short.
   ========================================================= */

.hook-line {
  font-size: clamp(34px, 3.9vw, 60px);

  line-height: 1;

  letter-spacing: -0.02em;
}

.beat-heading {
  font-size: clamp(30px, 3.4vw, 50px);

  line-height: 1.04;

  letter-spacing: -0.015em;
}

@media (max-width: 760px) {

  .hook-line {
    font-size: 36px;
  }

  .beat-heading {
    font-size: 28px;
  }

}


/* =========================================================
   NARROW SCREENS (folded foldables, small phones)
   Columns may shrink below their widest number; under 360px
   the three stats stack instead of squeezing side by side.
   ========================================================= */

.story-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {

  .story-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 360px) {

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .hook-line {
    font-size: 31px;
  }

  .beat-heading {
    font-size: 25px;
  }

}