/* ════════════════════════════════════════════════════════════════════════
   REVLO — the homepage, 2026-10-22. A scrolling page now (Danny 10-22:
   "offer more information"), built from the App Store v5 set:
   hero (the word behind three dealt cards) → photo in, card out (the flip)
   → the seven-tier ladder → a wall of real cards → the Blog →
   last call. Everything else (tokens, keys, nav, footer) is brand.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The hero's room: a spotlight on the cards and the globe behind them —
   the world in dots with an orb wherever players spotted cars (Danny 10-22).
   A seam closes the hero off from the page below. ───────────────────────── */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(42% 52% at 70% 50%, rgba(231, 233, 236, 0.06), rgba(231, 233, 236, 0.015) 55%, transparent 75%);
}

/* The globe: a canvas inside the fan, centred on the cards; drawn by home.js.
   Its width is the fan's plus ONE split gap, so its limb stops half a gap
   short of the copy column on either side and never runs under the headline
   (Danny 10-22: the period sat on the globe at 136 %). One column (≤ 900) has
   the copy above the cards, not beside them, so it frames them at 136 %. */
.hero__globe {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: calc(100% + var(--split-gap)); height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
@media (max-width: 900px) {
  .hero::before { background: radial-gradient(70% 34% at 50% 72%, rgba(231, 233, 236, 0.06), rgba(231, 233, 236, 0.015) 55%, transparent 75%); }
  .hero__globe { width: 136%; }
}

/* One split for every two-column section (hero, photo in, the ladder), so the
   second column starts on the same vertical line all the way down the page. */
:root { --split: minmax(0, 0.9fr) minmax(0, 1.1fr); --split-gap: clamp(32px, 5vw, 72px); }

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  /* equal room above the copy (under the nav) and below it: nav 62 + 40 on
     top, 40 below */
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + 40px) 0 40px;
}
/* The video seat. home.js mounts <video> here when body[data-hero-video]
   names a clip; the scrim keeps the type at its contrast over any frame. */
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero__media video.playing { opacity: 1; }
.hero__media.has-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 19, 22, 0.92) 0%, rgba(18, 19, 22, 0.55) 48%, rgba(18, 19, 22, 0.25) 100%),
    linear-gradient(180deg, rgba(18, 19, 22, 0) 60%, #121316 100%);
}

.hero__inner {
  display: grid; grid-template-columns: var(--split); align-items: center; gap: var(--split-gap);
}
.hero__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; container-type: inline-size; }
/* Sized by the column, not the window: "Collect it." is 5.94em wide in this
   face (measured in the browser 10-22), so 100cqw / 6.1 always fits one line. */
.hero__title { font-size: min(96px, 16.4cqw); }
.hero__title > span, .h2 > span { white-space: nowrap; }

/* The fan — three cards dealt onto the floor. Each wears the board stance:
   the keys' 2pt edge, an even glow in ITS OWN tier ink, the long drop
   (src/boardStance.ts; glow alpha 0.8 × the frame's, kept contained).
   Every measure is a share of the fan's own width (cqw), so the spread is
   centred in its column and its outer corners land on the column's edges:
   a side card 40cqw wide, turned 7°, is 1.164 × 40 = 46.6cqw across, so at
   ±27cqw its outer corner sits at 27 + 23.3 = 50.3cqw — the edge. */
.fan { position: relative; container-type: inline-size; aspect-ratio: 1 / 0.7; }
.fan__card {
  position: absolute; left: 50%; top: 50%;
  width: 40cqw; height: auto;
  /* no border-radius: the art carries its own rounded corners in its alpha,
     and a CSS radius on top (an ellipse on a 1 : 1.4 box) shaved the frame */
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(var(--glow), 0.30)) drop-shadow(0 30px 26px rgba(0, 0, 0, 0.7));
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.fan__card--l { --x: -27cqw; --y: 2cqw; --rot: -7deg; }
.fan__card--r { --x: 27cqw; --y: 2cqw; --rot: 7deg; }
.fan__card--c { --x: 0cqw; --y: -2cqw; --rot: 0deg; z-index: 2; width: 46cqw; }
.fan:hover .fan__card--l { --rot: -9deg; }
.fan:hover .fan__card--r { --rot: 9deg; }
.fan:hover .fan__card--c { --y: -4cqw; }

/* the deal — cards slide in from the deck below, then settle */
.js .fan__card { opacity: 0; }
.home.ready .fan__card { animation: deal 1s var(--ease-out) both; }
.home.ready .fan__card--l { animation-delay: 0.35s; }
.home.ready .fan__card--r { animation-delay: 0.5s; }
.home.ready .fan__card--c { animation-delay: 0.65s; }
@keyframes deal {
  from { opacity: 0; transform: translate(-50%, -50%) translate(0, 40%) rotate(0deg) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)); }
}
/* after the deal, hand the transform back to the transition for the hover —
   and pin the copy visible too, so a tab whose frames were paused while it
   loaded (a background tab) never strands the headline at opacity 0 */
.home.dealt .fan__card { animation: none; opacity: 1; }
.home.dealt .rise { animation: none; opacity: 1; transform: none; }

/* boot — the copy rises in order */
.js .rise { opacity: 0; transform: translateY(16px); }
.home.ready .rise { animation: rise 0.8s var(--ease-out) both; }
.home.ready .r1 { animation-delay: 0.1s; }
.home.ready .r2 { animation-delay: 0.18s; }
.home.ready .r3 { animation-delay: 0.28s; }
.home.ready .r4 { animation-delay: 0.4s; }
.home.ready .r5 { animation-delay: 0.5s; }
@keyframes rise { to { opacity: 1; transform: none; } }


/* ── The ticker ───────────────────────────────────────────────────────
   A carved strip between two seams, the stats running like a timing board:
   the figure in white, its label in the muted mono. The track holds the
   set five times; one lap = one set + its gap = (100% + gap) / 5. Five: a
   set is ~1,000 px, and the four left in view after a lap must span the
   widest screen (4 × 996 = 3,984 px covers 4K at 1×, measured 10-22). If the
   labels get shorter, re-measure — or add a sixth set. */
.ticker {
  position: relative; overflow: hidden; padding: 18px 0;
  background: var(--carved); box-shadow: var(--carved-shade);
  border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; gap: 32px; width: max-content; animation: ticker-lap 40s linear infinite; }
/* every stat ends in a dot set dead centre: label · 32 · dot · 32 · next figure
   (the last of a set too, so the seam between sets reads the same) */
.ticker__set { display: flex; gap: 32px; list-style: none; }
.ticker__set li { display: flex; align-items: baseline; white-space: nowrap; }
.ticker__set li::after { content: ""; align-self: center; width: 4px; height: 4px; margin-left: 32px; border-radius: 50%; background: var(--titanium-dim); }
.ticker__set b { margin-right: 12px; font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 20px; letter-spacing: -0.01em; color: #fff; }
.ticker__set span { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
@keyframes ticker-lap { from { transform: translateX(0); } to { transform: translateX(calc((-100% - 32px) / 5)); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker__track { animation: none; width: auto; justify-content: center; }
  .ticker__set { flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
  .ticker__set[aria-hidden] { display: none; }
  .ticker__set li::after { display: none; }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sect { position: relative; padding: clamp(64px, 8vw, 112px) 0; }
.sect + .sect { border-top: 1px solid var(--seam); box-shadow: var(--seam-lip); }
/* One size for every section head, page-wide. The widest line ("Hunt down")
   is 6.78em (measured 10-22), so a line fits a width W at W / 7. The h2 is
   sized to its NARROWEST home: on a split layout that is the 0.9fr column
   (0.45 of the content less the split gap); on one column it is the inside of
   the last-call plate (the content less the plate's two paddings).
   Hierarchy: the hero title fills the same 0.9fr column at W / 6.1, so W / 8
   holds every h2 at ~0.76 of it (1.3 : 1) at every width; capped at 56px. */
.h2 {
  font-size: min(56px, (min(100vw, var(--max)) - 2 * var(--gutter) - var(--split-gap)) * 0.45 / 8);
  margin: 14px 0 20px;
}
@media (max-width: 900px) {
  .h2 { font-size: min(56px, (100vw - 2 * var(--gutter) - 2 * clamp(20px, 5vw, 64px)) / 7); }
}
.sect__head { max-width: 560px; }

/* ── 2 · Develop ───────────────────────────────────────────────────────── */
.develop__grid { display: grid; grid-template-columns: var(--split); gap: var(--split-gap); align-items: center; }
.develop__card { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.flip { width: min(400px, 100%); perspective: 1400px; cursor: pointer; container-type: inline-size; }
.flip__inner { position: relative; aspect-ratio: 1176 / 1647; transform-style: preserve-3d; transition: transform 0.72s var(--ease); }
.flip.flipped .flip__inner { transform: rotateY(180deg); }
.flip__face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* the exotic's glow, as on the old homepage (0.8 × 0.40) */
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(168, 115, 230, 0.32)) drop-shadow(0 26px 22px rgba(0, 0, 0, 0.75));
}
.flip__face--back { transform: rotateY(180deg); }
.flip__face--back img { display: block; width: 100%; height: 100%; }
/* PRO on the seam between the tier band and the spec sheet (73.59 % of the
   card's height, measured on card-back.webp): the specs are what Pro adds. */
.pro-tag {
  position: absolute; left: 50%; top: 73.59%; transform: translate(-50%, -50%);
  padding: 0.6cqw 2.2cqw 0.6cqw calc(2.2cqw + 0.24em); border-radius: 999px; /* the left pad carries the trailing letter-space */
  font-family: var(--mono); font-weight: 700; font-size: 2.6cqw; letter-spacing: 0.24em; text-transform: uppercase;
  color: #0E0F11; background: var(--titanium-key);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 0 rgba(0, 0, 0, 0.8), 0 4px 8px -2px rgba(0, 0, 0, 0.7);
}
.flip.flipped ~ .flip__btn .arw { transform: rotate(-180deg); }
.flip__btn .arw { transition: transform 0.4s var(--ease); }

.steps { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.step {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 20px; border-radius: 20px;
  background: var(--plate); box-shadow: var(--plate-shade);
}
.step__n {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; color: var(--titanium);
  background: var(--carved); box-shadow: var(--carved-shade);
}
.step h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; margin: 2px 0 6px; }
.step > div { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
/* One line, always (Danny 10-22). The longest step line, "Take a photo. Revlo
   names it.", is 17.75em wide in Space Mono (measured 10-22), so 100cqw / 17.8
   always fits; it reads 14px wherever 14px fits and shrinks only below that. */
.step p { font-size: min(14px, 100cqw / 17.8); line-height: 1.65; color: var(--muted); white-space: nowrap; }

/* ── 3 · Ladder ────────────────────────────────────────────────────────── */
.ladder__grid { display: grid; grid-template-columns: var(--split); gap: var(--split-gap); align-items: center; }
.rungs {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: 20px; background: var(--plate); box-shadow: var(--plate-shade);
}
.rung {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--carved); box-shadow: var(--carved-shade);
}
.rung__name { font-weight: 700; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c); }
/* the LED band from the card (n lit of 7), drawn with one gradient each */
.rung__leds {
  --seg: 22px; --gap: 5px;
  flex: 0 0 auto; height: 6px; width: calc(7 * var(--seg) + 6 * var(--gap));
  background:
    repeating-linear-gradient(90deg, var(--c) 0 var(--seg), transparent var(--seg) calc(var(--seg) + var(--gap))) left / calc(var(--n) * (var(--seg) + var(--gap)) - var(--gap)) 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 var(--seg), transparent var(--seg) calc(var(--seg) + var(--gap)));
  border-radius: 2px;
}
.js .rung { opacity: 0.25; transition: opacity 0.5s var(--ease); }
.js .rung .rung__leds { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s var(--ease-out); }
.js .rungs.in .rung { opacity: 1; }
.js .rungs.in .rung .rung__leds { clip-path: inset(0 0 0 0); }
/* bottom rung first — the ladder lights as it climbs */
.rungs.in .rung:nth-child(7), .rungs.in .rung:nth-child(7) .rung__leds { transition-delay: 0s; }
.rungs.in .rung:nth-child(6), .rungs.in .rung:nth-child(6) .rung__leds { transition-delay: 0.1s; }
.rungs.in .rung:nth-child(5), .rungs.in .rung:nth-child(5) .rung__leds { transition-delay: 0.2s; }
.rungs.in .rung:nth-child(4), .rungs.in .rung:nth-child(4) .rung__leds { transition-delay: 0.3s; }
.rungs.in .rung:nth-child(3), .rungs.in .rung:nth-child(3) .rung__leds { transition-delay: 0.4s; }
.rungs.in .rung:nth-child(2), .rungs.in .rung:nth-child(2) .rung__leds { transition-delay: 0.5s; }
.rungs.in .rung:nth-child(1), .rungs.in .rung:nth-child(1) .rung__leds { transition-delay: 0.6s; }
.rung:first-child { box-shadow: var(--carved-shade), 0 0 0 1px rgba(255, 45, 35, 0.25); }

/* ── 4 · The wall ──────────────────────────────────────────────────────
   Two rows of real cards drifting in opposite directions. Each track holds
   its row three times, so moving it a third of its width (plus a gap) is
   one seamless lap. The cards
   wear the board stance (2pt edge, an even glow in their own tier ink, the
   long drop); the row ends dissolve into the room. Hover pauses a row. */
.inside { padding-bottom: calc(clamp(64px, 8vw, 112px) - 40px); } /* the wall's 40px glow room counts */
.inside .sect__head { margin-bottom: 20px; }
.wall {
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); padding: 8px 0 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* clip sideways only, so the cards' glow and drop spill into the gap: the
   rows sit one card-gap apart, the same as the cards across */
.wall__row { overflow-x: clip; overflow-y: visible; }
.wall__track, .wall__copy { display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content; }
.wall__track { animation: wall-lap 90s linear infinite; }
.wall__row--b .wall__track { animation-direction: reverse; animation-duration: 82s; }
.wall__card {
  --w: clamp(140px, 13vw, 190px);
  flex: 0 0 auto; display: block; width: var(--w);
  /* The art carries its own alpha corners: 12 px on a 380 px-wide card. The
     wrapper takes the same radius (never the img: a radius on the art shaves
     its corners). box-shadow, not filter: drop-shadow — on iOS Safari the
     filters on these moving cards rendered as hard-edged dark blocks
     (reproduced in the iOS 26.5 sim 10-25: 3 of 6 shots with the filter,
     0 of 6 without). Same three shadows, same blur. */
  border-radius: calc(var(--w) * 12 / 380);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 10px rgba(var(--glow), 0.28), 0 18px 16px rgba(0, 0, 0, 0.7);
}
.wall__card img { display: block; width: 100%; height: auto; }
/* The track is the row three times (track = 3 rows + 2 gaps), so one lap =
   one row + one gap = (100% + gap) / 3. Three, not two: the two copies left in
   view must span the screen, and one row of 11 cards is ~2,300 px — narrower
   than a wide monitor. Three covers ~4,600 px. */
@keyframes wall-lap { from { transform: translateX(0); } to { transform: translateX(calc((-100% - clamp(14px, 1.6vw, 22px)) / 3)); } }
@media (prefers-reduced-motion: reduce) {
  .wall__track { animation: none; }
  .wall__row { overflow-x: auto; padding-bottom: 28px; }
  .wall__copy { display: none; }
}

/* ── 5 · Blog (latest) ──────────────────────────────────────────────── */
.latest__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.latest__head { margin-bottom: 20px; } /* + h2 20 = 40 */
.latest__head .key { margin-bottom: 28px; }

/* ── 6 · Last call ─────────────────────────────────────────────────────── */
.last__plate {
  position: relative; overflow: hidden; text-align: center;
  /* car | copy | car — the copy keeps its natural width in the middle, the
     cars get what is left either side, 40px (the page's head-to-content
     rhythm) clear of it */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; column-gap: 40px;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px);
  border-radius: 28px; background: var(--plate); box-shadow: var(--plate-shade);
}
.last__copy { grid-column: 2; display: flex; flex-direction: column; align-items: center; }
.last__plate .h2 { margin: 0 0 26px; } /* no top margin: the plate pads evenly; 26 = the gap the removed lede left above the keys */
.last__plate .stores { justify-content: center; }
/* The peeks: each side column (plate edge → 40px short of the copy, full
   plate height: the negative margins cancel the plate's padding) holds three
   real cards stacked over each other, dimmed and turned, the outer ones cut
   by the plate's edge, fading toward the copy (Danny 10-22: the overlapping
   preview). Proportions are the preview's at 1440 (a 314 px side, a 375 px
   plate) as shares of the side, so the stack keeps its shape at every
   width. The right side mirrors the left exactly. */
.last__side {
  position: relative; align-self: stretch; pointer-events: none;
  margin-block: calc(-1 * clamp(48px, 8vw, 96px));
}
.last__side--l { grid-column: 1; margin-left: calc(-1 * clamp(20px, 5vw, 64px)); -webkit-mask-image: linear-gradient(90deg, #000 35%, rgba(0, 0, 0, 0.2) 100%); mask-image: linear-gradient(90deg, #000 35%, rgba(0, 0, 0, 0.2) 100%); }
.last__side--r { grid-column: 3; margin-right: calc(-1 * clamp(20px, 5vw, 64px)); -webkit-mask-image: linear-gradient(270deg, #000 35%, rgba(0, 0, 0, 0.2) 100%); mask-image: linear-gradient(270deg, #000 35%, rgba(0, 0, 0, 0.2) 100%); }
/* Solid, not see-through: a translucent card showed its own drop shadow
   through itself as a murky offset box (Danny 10-22: "weird shadows"). The
   dimming is brightness instead — 0.42 ≈ the old 0.55 opacity × 0.75
   brightness — so each card hides its shadow and they stack cleanly. No tier
   glow on these: a glow around a darkened card read as haze. */
.peek {
  position: absolute; width: 64%; height: auto;
  filter: saturate(0.8) brightness(0.42) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8)) drop-shadow(0 16px 18px rgba(0, 0, 0, 0.55));
}
.last__side--l .peek--p1 { left: -13%; top: -8%; transform: rotate(-12deg); }
.last__side--l .peek--p2 { left: 35%; top: 32%; transform: rotate(-4deg); width: 57%; z-index: 1; }
.last__side--l .peek--p3 { left: -10%; bottom: -32%; transform: rotate(8deg); }
.last__side--r .peek--p1 { right: -13%; top: -8%; transform: rotate(12deg); }
.last__side--r .peek--p2 { right: 35%; top: 32%; transform: rotate(4deg); width: 57%; z-index: 1; }
.last__side--r .peek--p3 { right: -10%; bottom: -32%; transform: rotate(-8deg); }
@media (max-width: 900px) { .last__side { display: none; } .last__plate { column-gap: 0; } } /* one column: the side columns are too narrow for the cards */

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner, .develop__grid, .ladder__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { align-items: center; text-align: center; }
  .hero__copy .lede { margin-inline: auto; }
  .stores { justify-content: center; }
  .hero { padding-bottom: 64px; padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 32px); }
  .fan { width: 100%; max-width: 520px; margin: 8px auto 0; }
  .develop__copy { order: -1; }
  /* One axis on one column: every section head centres like the hero and the
     last call (the step plates keep their text left — they are reading). */
  .sect__head, .develop__copy > .eyebrow, .develop__copy > .h2,
  .latest__head > div:first-child { text-align: center; margin-inline: auto; width: 100%; }
  /* width: 100% — an auto-margined grid/flex item would shrink to fit */
  .sect__head .lede { margin-inline: auto; }
  .latest__head { flex-direction: column; align-items: stretch; gap: 0; }
  .latest__head .key { align-self: center; margin: 0 0 4px; }
}
@media (max-width: 560px) {
  /* small phones: the step plates give their text more of the width */
  .step { padding: 16px; gap: 14px; }
  .step__n { width: 40px; height: 40px; }
  .stores { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
  .rung__leds { --seg: 14px; --gap: 4px; }
  .rung__name { letter-spacing: 0.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .fan__card { opacity: 1; transform: none; animation: none !important; }
  .js .fan__card { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)); }
  .js .rung { opacity: 1; }
  .js .rung .rung__leds { clip-path: none; }
  .flip__inner { transition: none; }
}