/* ============================================================
   JINSEN VISION DECK — DECK + LAYOUT
   Horizontal slide-runner. A4 landscape slides.
   Soft brutalism: no container strokes, structure via space + tone.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- LASER POINTER (press L) ---------- */
.laser-canvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;       /* never blocks clicks/hovers */
}
/* when laser is on, hide the native cursor over the slide surface... */
.laser-on, .laser-on .slide, .laser-on .page { cursor: none; }
/* ...but keep the pointer cursor over interactive things so hover still reads */
.laser-on a,
.laser-on button,
.laser-on .edge,
.laser-on .carousel,
.laser-on .carousel__arrow,
.laser-on .carousel__dot,
.laser-on .tier,
.laser-on .direction,
.laser-on .folio__tick,
.laser-on .pill,
.laser-on [data-scramble],
.laser-on .tension-reveal { cursor: pointer; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #060607;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- TYPE ROLE CLASSES ---------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: 0.98;
}
.t-headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-headline);
  text-transform: uppercase;
  line-height: 1.06;
}
.t-subtext {
  font-family: var(--font-subtext);
  font-weight: 500;
  letter-spacing: var(--track-subtext);
  line-height: 1.4;
}
.t-body {
  font-family: var(--font-body);        /* Image Future Medium per director */
  font-weight: 400;
  letter-spacing: var(--track-body);    /* 3% */
  font-size: 1.2rem;                     /* ~19px — increased per director */
  line-height: 1.28;                     /* 85% of prior 1.5 per director */
  text-wrap: balance;                    /* css text-balance on body */
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-size: var(--fs-label-sm);
  line-height: 1.4;
}

/* Inline SVG icons (self-hosted, offline). Geometry per icon_system.md:
   Sharp style, ~weight 300, 24px optical grid, inherits currentColor.
   Used functionally only (bullet markers, verdict marks). */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  color: inherit;
  user-select: none;
  vertical-align: middle;
}
.ic svg { width: 100%; height: 100%; display: block; }

/* true bold via the real Image Future Bold face (not synthetic weight) */
.word-bold {
  font-family: "Image Future", system-ui, sans-serif;
  font-weight: 700;
}

.accent-blue { color: var(--c-jinsen-blue-deep); }
.accent-red  { color: var(--c-jinsen-red); }
.is-dark .accent-blue { color: var(--d-blue); }
.is-dark .accent-red  { color: var(--d-red); }
/* italics intentionally disabled per director — emphasis via color/weight instead */
em, .ital { font-style: normal; }

/* ============================================================
   DECK RUNNER
   ============================================================ */
.deck {
  position: fixed;
  inset: 0;
  display: block;
}

/* Fullscreen stage — the screen IS the presentation. No frame, no letterbox. */
.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease-lexus);
  will-change: transform;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Fullscreen margins — Lexus "liquid gutters" + generous vertical padding.
     Viewport-relative so they scale with screen size. */
  --m-outer: clamp(40px, 6vw, 110px);
  --m-top: clamp(34px, 5vh, 70px);
  --m-bottom: clamp(34px, 5vh, 70px);
}

/* light vs dark surfaces */
.slide--light { background: var(--c-cream); color: var(--c-ink); }
.slide--dark  { background: var(--d-bg); color: var(--d-type); }

/* ---------- FULL-SLIDE BACKGROUND IMAGE ---------- */
.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* background-image set inline on the element (reliable url resolution) */
  background-size: cover;
  background-position: center;     /* chrome subject is centred in the source */
  background-repeat: no-repeat;
  filter: brightness(1.08) contrast(1.04);
}
/* heavier left scrim — strong cover behind the text, fading to clear on the right */
.slide-bg__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(8,8,12,0.95) 0%,
    rgba(8,8,12,0.90) 28%,
    rgba(8,8,12,0.60) 48%,
    rgba(8,8,12,0.20) 68%,
    rgba(8,8,12,0) 85%);
}
.has-bg .page { z-index: 3; }   /* content sits above bg + scrim */
/* text over a full-slide background — left column, vertically centred */
.bg-content {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bg-content .pullquote {
  margin-top: var(--space-32);
  align-self: flex-start;
  max-width: 38ch;
}
/* small descriptor pinned bottom-right over the image */
.bg-caption {
  position: absolute;
  right: var(--rail-pad);
  bottom: var(--m-bottom);
  color: var(--d-grey);
  z-index: 3;
}

/* ---------- PAGE CHROME (header + folio + watermark) ---------- */
/* Fixed page header — pinned to the viewport, never travels with the slides.
   Aligned to the SAME 1440 rail as page content so its left edge lines up
   with the title/body. On wide screens, rail-edge = (100vw-1440)/2 + margin. */
.chrome-header--fixed {
  position: fixed;
  top: var(--m-chrome);
  left: var(--rail-pad);
  z-index: 42;
  color: var(--c-grey);
  mix-blend-mode: difference;
  pointer-events: none;
}

/* folio is now a fixed in-screen element (see NAV section) */

.watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.watermark span {
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  transform: rotate(-28deg);
  white-space: nowrap;
  color: var(--c-jinsen-blue-deep);
  opacity: 0.05;
}
.is-dark .watermark span { color: var(--d-blue); opacity: 0.06; }

/* ---------- 12-COLUMN CONTENT GRID ---------- */
.page {
  position: absolute;
  inset: 0;
  /* full-width layout — content fills the viewport, --rail-pad is the L/R gutter */
  padding: var(--m-top) var(--rail-pad) var(--m-bottom);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 1.6vw, 30px);
  align-content: center;
  z-index: 3;
}

/* utility spans */
.col-1-6  { grid-column: 1 / 7; }
.col-1-7  { grid-column: 1 / 8; }
.col-2-7  { grid-column: 2 / 8; }
.col-3-10 { grid-column: 3 / 11; }
.col-7-12 { grid-column: 7 / 13; }
.col-8-12 { grid-column: 8 / 13; }
.col-1-12 { grid-column: 1 / 13; }

/* ============================================================
   SLIDE 1 — COVER
   ============================================================ */
/* Cover = title block (left) + logo (right), both vertically centred,
   sharing the same baseline alignment. */
.cover .cover-title {
  grid-column: 1 / 9;          /* left side, wider to hold the doubled type */
  align-self: center;          /* vertical centre */
  justify-self: start;
  margin-top: 0;
}
.cover-title h1 {
  /* doubled per director; max tuned so "ONE CHASSIS." fits the left columns */
  font-size: clamp(4rem, 8.5vw, 7rem);
  line-height: 0.92;
  letter-spacing: 0.03em;      /* eased back as size grows */
}
/* scramble title — preserve line break after JS rewrites textContent.
   pre = honour the exact \n and never re-wrap, so the box height is locked
   (no reflow while glyphs change). */
.scramble-title {
  white-space: pre;
  cursor: default;
}
.cover-title .sub {
  font-family: var(--font-subtext);   /* OT Jubilee subtext per role map */
  margin-top: var(--space-32);
  font-size: clamp(1.2rem, 1.92vw, 1.68rem);   /* ×1.2 per director */
  letter-spacing: var(--track-subtext);
  color: var(--c-grey);
  max-width: 34ch;
}
/* Studio Squat buddha mark — small, above the cover footer line */
.cover-mark {
  position: fixed;
  left: var(--rail-pad);
  bottom: calc(var(--m-chrome) + 26px);   /* sits just above the footer text */
  width: 44px;
  height: auto;
  z-index: 4;
}

.cover-footer {
  position: fixed;
  bottom: var(--m-chrome);   /* closer to the bottom edge */
  left: var(--rail-pad);  /* rail-aligned */
  color: var(--c-grey);
  mix-blend-mode: difference;
  z-index: 4;
}
/* logo moves into the right column, vertically centred to match the text */
.cover-logo {
  grid-column: 9 / 13;         /* right side */
  align-self: center;          /* same vertical centre as title */
  justify-self: center;
  width: 100%;
  max-width: 320px;
  z-index: 3;
}
.cover-logo img { width: 100%; height: auto; display: block; }
.cover-logo .logo-cap {
  margin-top: var(--space-16);
  text-align: center;
  color: var(--c-grey);
}

/* ============================================================
   SLIDE 2 / 5 — PROSE PAGES
   ============================================================ */
.eyebrow {
  color: var(--c-jinsen-blue-deep);
  margin-bottom: var(--space-16);
  display: inline-flex;
  align-items: center;          /* icon vertically centred with the label (spec §4) */
  gap: var(--space-8);
}
.is-dark .eyebrow { color: var(--d-blue); }
/* section eyebrow icon — small accent, inherits eyebrow colour (spec §3, §4) */
.eyebrow__ic {
  font-size: 16px;
  flex: 0 0 auto;
}

.page-head {
  font-size: clamp(2rem, 3.6vw, 3.1rem);  /* extreme scale contrast (Lexus) */
  margin-bottom: var(--space-48);
  max-width: 24ch;          /* widened so explicit <br> breaks hold without crowding */
  white-space: nowrap;      /* respect the authored line break, never auto-wrap mid-line */
}
/* headlines on white slides tracked tighter than on dark */
.slide--light .page-head { letter-spacing: 0.07em; }
.page-head br { white-space: normal; }
.prose p { margin-bottom: var(--space-24); max-width: 42ch; }
.prose p:last-child { margin-bottom: 0; }

.pullquote {
  font-family: var(--font-subtext);
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  line-height: 1.32;
  align-self: center;
  text-wrap: balance;
}
.is-dark .pullquote { color: var(--d-type); }

/* logo as reverent object (page 4-style, reused on light prose) */
.object-logo {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.object-logo img { width: 100%; max-width: 1040px; }   /* 4× the prior 260px cap */
.object-logo .cap { color: var(--c-grey); text-align: center; }

/* second-life "built from zero" empty field with single mono mark */
.zero-field {
  align-self: stretch;
  position: relative;
  display: grid;
  place-items: center;
}
.zero-field .ghost {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(2rem, 4vw, 3.6rem);
  color: var(--d-surface-2);
  line-height: 1;
  user-select: none;
}
.zero-field .ghost-cap {
  position: absolute;
  bottom: 6%;
  color: var(--d-grey);
}

/* ============================================================
   SLIDE — TIER / CLOSING (Page 9)
   ============================================================ */
.tiers {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 2.4%;
  align-items: stretch;
  margin-top: var(--space-16);
}
/* ---- STAGED REVEAL (page 9) ----
   Tiers in a [data-staged-group] start hidden; JS adds .tier--shown one at a
   time as the user advances. Reserve the layout so columns don't reflow. */
.slide.is-active [data-staged-group] .tier[data-stage] {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-lexus),
              transform var(--dur-med) var(--ease-lexus);
}
.slide.is-active [data-staged-group] .tier[data-stage].tier--shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---- TIER TYPOGRAPHY — clean, consistent hierarchy ----
   mono label (quiet) → name (the heading) → price (the anchor) → list → verdict */
.tier {
  position: relative;
  /* equal top padding on ALL tiers so content starts on the same line,
     leaving room for the absolutely-positioned recommended tag */
  padding: var(--space-48) var(--space-24) var(--space-24);
  background: transparent;
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-lexus),
              border-color var(--dur-fast) var(--ease-lexus),
              opacity var(--dur-fast) var(--ease-lexus);
  display: flex;
  flex-direction: column;
}
.tier__top {
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 0.5px solid var(--c-hairline);
}
/* STEP 1 — quiet mono label (legible, not micro) */
.tier__label {
  color: var(--c-grey);
  font-size: 0.72rem;
  margin-bottom: var(--space-16);
}
/* STEP 2 — name row: Max (left) + serif scope (right edge), one line */
.tier__namerow {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;   /* scope title sits left */
  gap: var(--space-16);
  margin-bottom: var(--space-8);
}
.tier__name {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}
.tier__sub {
  font-family: var(--font-subtext);   /* OT Jubilee serif */
  font-weight: 500;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: var(--track-subtext);
  color: var(--c-ink);
  text-align: left;
}
.is-dark .tier__sub { color: var(--d-type); }

/* STEP 3 — price row: price (left) + saving note (right, next to it) */
.tier__pricerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
}
.tier__price {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1;
  flex: 0 0 auto;
}
/* saving note — single line, red, to the right of the price */
.tier__save {
  color: var(--c-jinsen-red);
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Pro lead outcome line — the value headline above the bullets */
.tier__headline {
  font-family: var(--font-subtext);     /* OT Jubilee serif */
  font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.2;
  color: var(--c-jinsen-red);
  margin-bottom: var(--space-24);
  text-wrap: balance;
}

/* outcome bullet list — readable body */
.tier__list {
  list-style: none;
  margin: 0 0 var(--space-24);
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.tier__list li {
  font-family: var(--font-body);     /* matches page-2 body (.t-body) */
  font-weight: 400;
  font-size: 1.2rem;                  /* same as "For forty-five years..." */
  line-height: 1.32;
  letter-spacing: var(--track-body);
  color: var(--c-ink);
  display: flex;             /* flex so inline text + spans stay one flowing block */
  gap: var(--space-12);
  align-items: flex-start;
  text-wrap: pretty;
}
/* the text wrapper takes remaining width and wraps as ONE block,
   so inline accents (e.g. "the Lexus inside Toyota") never break per-word */
.tier__list .tier__txt { flex: 1 1 auto; min-width: 0; }
.tier__list .ic {
  font-size: 15px;
  color: var(--c-jinsen-blue);
  margin-top: 4px;            /* optical baseline nudge */
}
.is-dark .tier__list .ic { color: var(--d-blue); }

/* verdict footer — legible mono, clearly the quiet closer */
.tier__verdict {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 0.5px solid var(--c-hairline);
  color: var(--c-grey);
  font-size: 0.72rem;
}
.tier__verdict .ic { font-size: 18px; }
.tier__verdict--rec { color: var(--c-jinsen-blue-deep); border-top-color: var(--c-jinsen-blue-deep); }
/* payment terms line under the recommended verdict */
.tier__terms {
  margin-top: var(--space-12);
  color: var(--c-jinsen-blue-deep);
  font-size: 0.66rem;
}

/* recommended tag — absolute top, so it never shifts the shared content rows */
.tier__tag {
  display: none;
}
.tier--rec .tier__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  position: absolute;
  top: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--c-jinsen-blue-deep);
  font-size: 0.72rem;
}
.tier--rec .tier__tag .ic { font-size: 16px; }

/* ---- SELECTION STATE ----
   Pro (recommended) is selected by default. Hovering any tier selects it
   instead and dims the others. The selected tier gets the blue highlight. */
.tier--selected,
.tier--rec {                       /* default highlight = the recommended one */
  border-color: var(--c-jinsen-blue-deep);
  background: rgba(33,115,233,0.04);
}
.tier--selected .tier__price,
.tier--rec .tier__price { color: var(--c-jinsen-blue-deep); }

/* when the strip is hovered, drop the default rec highlight... */
.tiers:hover .tier--rec:not(:hover) {
  border-color: transparent;
  background: transparent;
}
.tiers:hover .tier--rec:not(:hover) .tier__price { color: var(--c-ink); }
/* ...and highlight whichever tier is hovered */
.tiers:hover .tier:not(:hover) { opacity: 0.55; }
.tier:hover {
  border-color: var(--c-jinsen-blue-deep) !important;
  background: rgba(33,115,233,0.05) !important;
  opacity: 1 !important;
}
.tier:hover .tier__price { color: var(--c-jinsen-blue-deep) !important; }

/* tier slide aligns from top, not centered (it carries more).
   Extra top padding clears the fixed chrome-header strip so the
   page eyebrow doesn't collide with "STUDIO SQUAT — ... — 2026". */
.tier-slide .page {
  align-content: center;        /* vertically centred like pages 6 & 7 */
}
.tier-headwrap { margin-bottom: var(--space-32); }
.tier-slide .page-head { margin-bottom: 0; }

/* pull-quote wrapper on the dark second-life page */
.pq-wrap { margin-top: 4%; }

.tier-close {
  grid-column: 3 / 11;
  margin-top: var(--space-48);
  text-align: center;
}
.tier-close p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 auto;
}
.tier-close .terms {
  font-family: var(--font-subtext);
  color: var(--c-grey);
  margin-top: var(--space-16);
  font-size: 0.9rem;
}

/* ============================================================
   NAV — fullscreen, in-screen. No bottom bar.
   Edge hover zones reveal faint arrows. Folio is built into the page.
   ============================================================ */

/* Left / right hover zones spanning full height at screen edges */
.edge {
  position: fixed;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: clamp(70px, 9vw, 150px);
  z-index: 40;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.edge--prev { left: 0; justify-content: flex-start; padding-left: clamp(16px, 2vw, 34px); }
.edge--next { right: 0; justify-content: flex-end; padding-right: clamp(16px, 2vw, 34px); }

/* circular black nav button — obvious affordance, fades in on edge hover */
.edge__ic {
  font-size: 22px;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #000;
  color: #fff;
  opacity: 0;
  transform: translateX(0);
  transition: opacity var(--dur-med) var(--ease-lexus),
              transform var(--dur-med) var(--ease-lexus),
              background var(--dur-fast) var(--ease-lexus);
}
.edge:hover .edge__ic { opacity: 1; }
.edge--prev:hover .edge__ic { transform: translateX(-3px); }
.edge--next:hover .edge__ic { transform: translateX(3px); }
.edge__ic:hover { background: var(--c-jinsen-blue-deep); }   /* subtle brand tint on direct hover */
.edge__ic svg { width: 22px; height: 22px; }   /* keep chevron sized inside the 48px circle */
.edge--disabled { pointer-events: none; }
.edge--disabled .edge__ic { opacity: 0 !important; }

/* Folio — part of the page chrome, top-right. Doubles as progress. */
.folio {
  position: fixed;
  top: var(--m-chrome);
  right: var(--rail-pad);  /* rail-aligned */
  z-index: 42;
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--c-grey);
  mix-blend-mode: difference;
  display: flex;
  align-items: baseline;
  gap: var(--space-12);            /* 10px → 12 (round up) */
}
.folio b { color: #fff; font-weight: 600; }

/* progress dots — separate fixed layer, NOT inside the blended folio,
   so the active red dot renders as true palette red on any slide. */
.folio-dots {
  position: fixed;
  top: var(--m-chrome);
  /* sit just left of the "NN / 10" number, which is rail-aligned on the right */
  right: var(--rail-pad);
  margin-right: 64px;               /* clears the number text */
  z-index: 43;
  display: flex;
  align-items: center;
  height: 0.9rem;                   /* matches folio baseline row */
}
.folio__ticks { display: flex; gap: var(--space-8); align-items: center; }
.folio__tick {
  width: 4px; height: 4px; border-radius: 50%;
  background: #8A8A8C;               /* neutral mid-grey, legible on light + dark */
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-lexus), transform var(--dur-fast) var(--ease-lexus), background var(--dur-fast) var(--ease-lexus);
}
.folio__tick.active {
  opacity: 1;
  transform: scale(1.25);
  background: var(--c-jinsen-red);   /* true palette red — no blend on this layer */
}

.hint {
  position: fixed;
  bottom: var(--m-chrome);          /* same baseline as the cover footer */
  right: var(--rail-pad);           /* bottom-right corner, rail-aligned */
  z-index: 50;
  color: var(--c-jinsen-red);       /* red */
  font-family: var(--font-mono); letter-spacing: var(--track-mono);
  font-size: var(--fs-label-sm); text-transform: uppercase;   /* match cover footer */
  transition: opacity 700ms ease;
  pointer-events: none;
}

/* ============================================================
   ENTER ANIMATIONS (per-slide, retrigger on activate)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); }
.slide.is-active .reveal {
  opacity: 1; transform: none;
  transition: opacity var(--dur-med) var(--ease-lexus), transform var(--dur-med) var(--ease-lexus);
}
.slide--dark.is-active .reveal {
  transition: opacity var(--dur-med) var(--ease-lotus), transform var(--dur-med) var(--ease-lotus);
}
.slide.is-active .reveal[data-d="1"] { transition-delay: 120ms; }
.slide.is-active .reveal[data-d="2"] { transition-delay: 240ms; }
.slide.is-active .reveal[data-d="3"] { transition-delay: 360ms; }
.slide.is-active .reveal[data-d="4"] { transition-delay: 480ms; }
.slide.is-active .reveal[data-d="5"] { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; }
  .reveal { opacity: 1; transform: none; }
}