/* ============================================================
   The Tee Family House — css/v3-hero.css
   v3 "الفخمة" — cursor, nav pill, fullscreen menu, the pinned
   scatter hero (#hero3 — Dina centered, cats' tiles scatter in
   around her on scroll) and the crossing marquee strips.
   Depends on tokens from css/v3-base.css (loaded first in v3.html).
   Owned by builder-v3hero.
   ============================================================ */

/* ---------- custom cursor: dot + trailing ring, difference-blended
   so it stays legible over any background in either theme ---------- */
.v3cur { position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: difference; }
.v3cur--dot span { position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.v3cur--ring i {
  position: absolute; top: -20px; left: -20px; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.75); display: block;
  transition: transform .35s var(--ease), background .3s;
}
.v3cur--ring.is-hover i { transform: scale(1.6); background: rgba(255,255,255,.14); }
.v3cur--ring.is-label i { transform: scale(0); }
.v3cur--ring b {
  position: absolute; top: -36px; left: -36px; width: 72px; height: 72px; border-radius: 50%;
  background: #fff; color: #000; font-family: var(--ff-d); font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center; text-align: center; line-height: 1.1;
  transform: scale(0); transition: transform .35s var(--ease);
}
.v3cur--ring.is-label b { transform: scale(1); }
@media (hover: none) { .v3cur { display: none !important; } }

/* ---------- nav — floating glass pill, dark in both themes ---------- */
.v3nav { position: fixed; top: 18px; inset-inline: 0; z-index: 200; display: flex; justify-content: center; pointer-events: none; }
.v3nav__pill {
  pointer-events: auto; display: flex; align-items: center; gap: clamp(10px, 1.8vw, 22px);
  background: rgba(8, 7, 6, .62); border: 1px solid rgba(246, 242, 235, .09);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: 99px; padding: 9px 18px 9px 12px; color: #f6f2eb;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .35);
}
.v3nav__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-d); font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.v3nav__paw { width: 22px; height: 22px; color: var(--acc); flex: none; }
.v3nav__links { display: flex; gap: clamp(10px, 1.4vw, 20px); }
.v3nav__links a { position: relative; font-size: 13.5px; font-weight: 500; color: rgba(246, 242, 235, .68); padding-block: 6px; transition: color .3s; }
.v3nav__links a::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; width: 0; background: var(--acc); border-radius: 2px; transition: width .35s var(--ease); }
.v3nav__links a:hover { color: #f6f2eb; }
.v3nav__links a:hover::after { width: 100%; }
.v3nav__tools { display: flex; align-items: center; gap: 6px; }
.v3tgl { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(246, 242, 235, .8); font-size: 11.5px; font-weight: 700; transition: background .3s, color .3s; }
.v3tgl:hover { background: rgba(246, 242, 235, .1); color: #f6f2eb; }
.v3tgl--ic svg { width: 17px; height: 17px; }
.v3tgl__moon { display: none; }
html[data-theme='light'] .v3tgl__sun { display: none; }
html[data-theme='light'] .v3tgl__moon { display: block; }
.v3nav__cta { padding: 10px 20px; font-size: 13px; }
.v3burger { display: none; flex-direction: column; gap: 5px; padding: 8px 6px; }
.v3burger span { width: 20px; height: 2px; background: #f6f2eb; border-radius: 2px; transition: transform .35s var(--ease), opacity .3s; }
.v3burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v3burger.is-open span:nth-child(2) { opacity: 0; }
.v3burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- fullscreen menu overlay ---------- */
.v3menu {
  position: fixed; inset: 0; z-index: 190; background: rgba(8, 7, 6, .97); color: #f6f2eb;
  display: flex; align-items: center; justify-content: center;
  padding-inline: clamp(28px, 8vw, 60px);
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s;
}
.v3menu.is-open { opacity: 1; visibility: visible; }
.v3menu__links { display: flex; flex-direction: column; gap: 2px; }
.v3menu__links a {
  display: flex; align-items: baseline; gap: 16px;
  /* vh-capped so the full 8-item site map always fits one phone screen */
  font-family: var(--ff-d); font-weight: 700; font-size: clamp(22px, min(6vw, 4.6vh), 42px); letter-spacing: -.02em;
  padding-block: 7px; opacity: 0; transform: translateY(26px);
  transition: opacity .5s, transform .5s var(--ease), color .3s;
}
.v3menu.is-open .v3menu__links a { opacity: 1; transform: none; }
.v3menu.is-open .v3menu__links a:nth-child(1) { transition-delay: .05s; }
.v3menu.is-open .v3menu__links a:nth-child(2) { transition-delay: .1s; }
.v3menu.is-open .v3menu__links a:nth-child(3) { transition-delay: .15s; }
.v3menu.is-open .v3menu__links a:nth-child(4) { transition-delay: .2s; }
.v3menu.is-open .v3menu__links a:nth-child(5) { transition-delay: .25s; }
.v3menu.is-open .v3menu__links a:nth-child(6) { transition-delay: .3s; }
.v3menu.is-open .v3menu__links a:nth-child(7) { transition-delay: .35s; }
.v3menu.is-open .v3menu__links a:nth-child(8) { transition-delay: .4s; }
.v3menu__links a:hover { color: var(--acc); }
.v3menu__links i { font-style: italic; font-family: var(--ff-s); font-size: 16px; font-weight: 700; color: var(--acc); }
.v3menu__donate span { color: var(--acc); }

@media (max-width: 900px) {
  /* .v3nav__pill prefix beats css/v3-base.css's `.v3 .btn` specificity
     (two classes), which would otherwise win over a bare `.v3nav__cta`
     and keep the CTA visible on mobile */
  .v3nav__pill .v3nav__links, .v3nav__pill .v3nav__cta { display: none; }
  .v3burger { display: flex; }
}

/* ---------- #hero3 — the scatter hero ---------- */
/* Pinning is done by ScrollTrigger's own `pin` (js/v3-hero.js), not
   CSS position:sticky: body.v3 sets overflow-x:hidden (css/v3-base.css,
   not ours to edit), which per spec forces overflow-y to a non-visible
   computed value on body — that turns body into its own scroll
   container and silently breaks position:sticky everywhere on the
   page. ScrollTrigger's pin sidesteps it entirely. .hero3 is left with
   its natural height — GSAP inserts the ~320vh spacer itself via
   pinSpacing once js/v3-hero.js pins .hero3__pin. */
/* Literal hex, NOT var(--bg): css/v3-base.css forces .hero3's --ink to
   stay light in both themes (so eyebrow/h1/roll/typewriter/scrollcue
   text is always white), but it does nothing to the BACKGROUND — with
   no background rule here, .hero3 fell through to body.v3's own bg,
   which flips to near-white in light theme, leaving white-on-white
   text. The stage itself is a cinematic-dark set piece regardless of
   theme (same treatment the reference site gives its video hero) —
   var(--bg) would silently reintroduce the exact bug this fixes the
   moment anyone edits the light-theme token. */
.hero3 { position: relative; background: #080706; }
.hero3__pin { position: relative; height: 100dvh; overflow: hidden; }

/* Calm stage, not a photo: a heavily-dimmed, blurred hero-wide.jpg for
   texture only, plus the copper vignette on top (soft-light so it
   reads as a grade, not a flat overlay). No Ken Burns, no crossfade —
   the redesign's whole point is that the SCATTER carries the motion
   now, not the background. */
.hero3__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(2px); opacity: .14; }
.hero3__vignette { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 50%, transparent 40%, rgba(var(--acc-rgb), .4) 100%); mix-blend-mode: soft-light; pointer-events: none; }

/* intro headline: lives in the top third, clear of the portrait below
   it (which centers at ~55-56% — see .hero3__portrait), fades/rises
   out over the scrub's first 15% (js/v3-hero.js), and reuses the exact
   screen position the "grew into a family" line takes later
   (.hero3__grow below), since by the time that line appears this one
   is long gone. Sizes are deliberately smaller/tighter than a typical
   hero headline and capped to a max-width — the vertical footprint has
   to stay clear of the portrait at every viewport down to 360×640, not
   just look good at one size.
   `top` is a measured guarantee, same pattern as the portrait's own
   --v3-portrait-top: the fixed .v3nav pill floats independently of
   this stage, so a fixed clamp() here could tuck the intro's own top
   edge under it (seen live: an eyebrow/heading edge peeking out from
   behind the pill) the moment the pill's real rendered height differs
   from whatever was assumed when the clamp was tuned — web-font
   swap, a language change that wraps the brand text, a browser's own
   chrome. js/v3-hero.js's keepIntroClearOfNav() measures the pill's
   actual bottom edge on load/resize and raises --v3-intro-top past
   this clamp()'s floor whenever the real pill needs more room than it
   assumes. The clamp() itself is still the pre-JS/no-JS fallback, and
   its floor (96px) already clears the pill on its own in the common
   case: pill top 18px + a ~46px pill + 24px breathing ≈ 88px. */
.hero3__intro {
  position: absolute; inset-inline: 0; top: var(--v3-intro-top, clamp(96px, 14vh, 140px)); z-index: 3;
  display: grid; justify-items: center; gap: clamp(8px, 1.2vh, 12px); text-align: center;
  padding-inline: clamp(20px, 6vw, 60px); max-width: 720px; margin-inline: auto;
}
.hero3__intro .display { font-size: clamp(24px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.02em; text-shadow: 0 2px 40px rgba(var(--bg-rgb), .5); }
.hero3__intro .display .oln { display: block; }
.hero3__intro .lede { text-shadow: 0 2px 24px rgba(var(--bg-rgb), .6); }

.hero3 .eyebrow { border: 1px solid rgba(var(--ink-rgb), .18); border-radius: 99px; padding: 8px 18px; background: rgba(var(--bg-rgb), .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-transform: uppercase; }
.hero3 .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: v3pulse 2s infinite; flex: none; }
@keyframes v3pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* rolling word */
.roll { display: inline-flex; height: 1.5em; overflow: hidden; vertical-align: bottom; font-size: 1.05em; }
.roll__in { display: block; transition: transform .55s var(--ease); }
.roll__in i { display: block; height: 1.5em; line-height: 1.5; font-style: normal; font-weight: 800; background: var(--copper); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* typewriter line */
.v3type { font-family: var(--ff-b); font-size: clamp(13px, 1.5vw, 15.5px); letter-spacing: .02em; color: rgba(var(--ink-rgb), .72); min-height: 1.6em; direction: ltr; text-align: start; }
.v3type::after { content: '|'; color: var(--acc); animation: v3blink 1s steps(1) infinite; margin-inline-start: 2px; }
@keyframes v3blink { 50% { opacity: 0; } }

.btnrow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; justify-content: center; }

.scrollcue { position: absolute; bottom: 24px; inset-inline-end: clamp(20px, 5vw, 60px); z-index: 5; display: flex; align-items: center; gap: 10px; color: rgba(var(--ink-rgb), .6); font-size: 10.5px; letter-spacing: .28em; }
.scrollcue__line { width: 44px; height: 2px; background: rgba(var(--ink-rgb), .16); border-radius: 2px; overflow: hidden; }
.scrollcue__line i { display: block; height: 100%; width: 40%; background: var(--acc); animation: v3cue 1.6s var(--ease) infinite; }
@keyframes v3cue { 0% { transform: translateX(-160%); } 60%, 100% { transform: translateX(280%); } }

/* ---------- the cluster: Dina's portrait + the scattered cat tiles ---------- */
/* One full-bleed box both live in — every tile's left/top is a
   percentage of THIS box, center-based (50%,50% = dead center, where
   the portrait sits), so it reads identically in RTL and LTR without
   any direction-flipping logic. */
.hero3__cluster { position: absolute; inset: 0; z-index: 2; }

/* Outer handles the load entrance (js/v3-hero.js — GSAP auto-detects
   the %-based translate() below on first touch and folds it into its
   own xPercent/yPercent, so the centering survives the entrance tween
   instead of being clobbered by it); inner handles the resting tilt +
   live mouse-tilt via --v3-tiltx/--v3-tilty (also JS) so the two never
   fight over the same transform. perspective lives on the outer so the
   inner's rotateX/Y actually reads as 3D depth instead of a flat skew.
   Hidden only under html.js (see the html.js rule further down) so a
   visitor whose gsap CDN is blocked — motion.js strips that class in
   that case — still sees her, just without the entrance animation. */
/* Rests at ~56% vertical by default (not dead-center 50%) so she sits
   clear of the intro block above her — but a fixed percentage plus
   independently-tuned clamp() sizes on both elements can't actually
   GUARANTEE zero overlap across a continuous range of viewport sizes
   (proven live: two clamp()-tuned boxes cleared at 360×640 and at
   1440×900 but still clipped by a few px at 800×710, a size neither
   boundary's numbers were tuned against). js/v3-hero.js measures
   #v3Intro's real rendered height on load/resize and raises
   --v3-portrait-top past this 56% default whenever the intro needs
   more room than that leaves — a measured guarantee instead of another
   hand-tuned breakpoint. The 56% here is the pre-JS/no-JS fallback.
   Horizontal centering is deliberately physical `left: 50%`, NOT the
   logical `inset-inline-start` — the site defaults to RTL, where
   inset-inline-start resolves against the CONTAINER'S RIGHT edge, so
   combined with `translate(-50%, ...)` (always a physical leftward
   shift) the portrait would land nowhere near center. Horizontal
   position here is meant to be identical in RTL and LTR (same rule the
   scatter tiles already follow with their own plain left/top), so a
   physical property is the correct choice, not an oversight. */
.hero3__portrait {
  position: absolute; left: 50%; top: var(--v3-portrait-top, 56%); transform: translate(-50%, -50%);
  width: clamp(170px, min(24vh, 40vw), 280px); perspective: 800px; z-index: 3;
  will-change: opacity, transform;
}
.hero3__portrait-tilt {
  position: relative; transform: rotate(-2deg) rotateX(var(--v3-tiltx, 0deg)) rotateY(var(--v3-tilty, 0deg));
  transform-style: preserve-3d; transition: transform .5s var(--ease);
  border: 10px solid var(--flip-bg); outline: 1px solid rgba(var(--acc-rgb), .55); outline-offset: -4px;
  box-shadow: 0 2px 0 rgba(var(--acc-rgb), .35), 0 30px 60px -18px rgba(0, 0, 0, .55), 0 14px 30px -14px rgba(0, 0, 0, .5);
  background: var(--flip-bg);
}
.hero3__portrait-tilt img { width: 100%; height: auto; display: block; }
.hero3__portrait-cap { padding: 10px 12px 12px; text-align: center; color: var(--flip-ink); font-family: var(--ff-d); }
.hero3__portrait-cap span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.hero3__portrait-cap2 { margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--flip-mut); letter-spacing: .02em; }

/* the 24 (14 on mobile) cat tiles — polaroid-style: white mount,
   small resting rotation, popping in on scroll. js/v3-hero.js sets
   left/top/width (the scatter position) unconditionally on load —
   even under reduced motion or a blocked gsap CDN — while the
   translate/rotate transform below is deliberately plain CSS (not
   JS-set) so the tile is correctly centered+rotated at rest with zero
   script: js/v3-hero.js's GSAP timeline auto-detects this %-based
   translate() on first touch and folds it into xPercent/yPercent, so
   the animated path composes with it instead of overwriting it.
   Position and the pop-animation are deliberately two different
   concerns, so a reduced-motion (or no-gsap) visitor still gets the
   full scattered layout, just without the entrance animation. */
.hero3__scatter { position: absolute; inset: 0; }
.hero3__tile {
  position: absolute; padding: 6px 6px 8px; background: #fff; border-radius: 3px;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%) rotate(var(--v3-tile-rot, 0deg));
  will-change: transform, opacity;
}
.hero3__tile img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 1px; aspect-ratio: 1; }

/* ---------- the "grew into a family" line — appears mid-scatter ---------- */
/* top must track .hero3__intro's own top exactly — see the comment
   there — so it lands in the exact spot the intro vacated. Shares the
   same --v3-intro-top custom property (and the same clamp() fallback)
   rather than a second hand-copied value, so the two can never drift
   out of sync with each other the way two independently-tuned values
   already proved they easily can (see the nav-clearance bug this
   custom property exists to fix). */
.hero3__grow {
  position: absolute; inset-inline: 0; top: var(--v3-intro-top, clamp(96px, 14vh, 140px)); z-index: 3;
  text-align: center; padding-inline: clamp(20px, 6vw, 60px);
  font-family: var(--ff-d); font-weight: 700; font-size: clamp(28px, 5vw, 56px); letter-spacing: -.02em;
  /* layered literal-dark shadows + a soft radial halo behind the words:
     the line must read on top of the tile cluster at EVERY phone size,
     not only when the timeline has already dimmed the tiles. Literal
     8,7,6 (the hero's fixed stage color), never var(--bg-rgb) — the
     stage stays dark in the light theme too. */
  text-shadow: 0 1px 4px rgba(8, 7, 6, .95), 0 2px 18px rgba(8, 7, 6, .85), 0 8px 46px rgba(8, 7, 6, .7);
  background: radial-gradient(ellipse 68% 130% at center, rgba(8, 7, 6, .72), rgba(8, 7, 6, .4) 55%, transparent 78%);
  padding-block: 26px;
}
.hero3__grow em { font-family: var(--ff-s); font-style: italic; color: var(--acc); }

/* ---------- the closing beat — settles in as the scatter finishes ---------- */
.hero3__final {
  position: absolute; inset-inline: 0; bottom: clamp(70px, 12vh, 120px); z-index: 3;
  display: grid; justify-items: center; gap: 14px; text-align: center; padding-inline: clamp(20px, 6vw, 60px);
  /* same guarantee as .hero3__grow: a soft dark halo so the closing
     words and buttons stay readable over the cluster on any screen */
  background: radial-gradient(ellipse 66% 140% at center, rgba(8, 7, 6, .78), rgba(8, 7, 6, .45) 55%, transparent 80%);
  padding-block: 30px 26px;
}
.hero3__final .display { font-size: clamp(30px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; text-shadow: 0 1px 4px rgba(8, 7, 6, .95), 0 2px 18px rgba(8, 7, 6, .85), 0 8px 46px rgba(8, 7, 6, .7); }

/* Everything the scrub timeline animates in starts hidden ONLY when JS
   actually ran (html.js, set inline in v3.html and stripped by
   motion.js if gsap/ScrollTrigger failed to load) — same convention
   css/v3-base.css uses for [data-v3-reveal]. Without this guard, a
   blocked gsap CDN would leave the whole cluster permanently invisible
   with nothing to ever un-hide it. */
html.js .hero3__portrait, html.js .hero3__tile, html.js .hero3__grow, html.js .hero3__final { opacity: 0; }

/* Short viewports (<700px tall, e.g. a landscape phone or a small
   laptop with browser chrome eating into the viewport) get the
   portrait scaled down and the intro pulled tighter to the top BEFORE
   the two can ever meet — per spec, this has to hold at 360×640, the
   smallest size named. The base clamp() formulas above already shrink
   with vh on their own, but their floors (170px / 48px-top) are sized
   for a "normal" viewport and aren't tight enough on their own down at
   640px tall. */
@media (max-height: 700px) {
  .hero3__portrait { width: clamp(130px, min(20vh, 36vw), 220px); top: 58%; }
  /* `top` is deliberately NOT reduced here even though the viewport is
     short — the fixed .v3nav pill's height doesn't shrink with
     viewport HEIGHT (only its own content/width breakpoints affect
     it), so the same nav-clearance floor .hero3__intro's base rule
     already establishes still applies; only the type scale and
     internal gap get tighter to reclaim vertical room below that
     floor, per the portrait's own width/position easing above. */
  .hero3__intro { gap: 6px; }
  .hero3__intro .display { font-size: clamp(20px, 4.6vw, 36px); }
}

/* reduced motion: the pinning ScrollTrigger/timeline is never created
   (js/v3-hero.js), so .hero3__pin must unclip and every layer that
   would otherwise be scrub-driven renders at its final, settled state
   simultaneously — Dina centered, every tile already placed around
   her (position is unconditional, see .hero3__tile comment above),
   headline, "grew into a family" line and the closing CTA all visible
   together, stacked top-to-bottom instead of overlapping. */
html.reduce-motion .hero3__pin {
  position: static; height: auto; overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding-block: clamp(90px, 14vh, 150px) clamp(50px, 8vh, 90px);
}
html.reduce-motion .hero3__intro,
html.reduce-motion .hero3__grow,
html.reduce-motion .hero3__final { position: static; opacity: 1; padding-inline: clamp(20px, 6vw, 60px); }
html.reduce-motion .hero3__cluster { position: relative; inset: auto; width: 100%; max-width: 900px; min-height: 62vh; }
html.reduce-motion .hero3__portrait { opacity: 1; }
html.reduce-motion .hero3__portrait-tilt { transform: rotate(-2deg); transition: none; }
/* transform itself needs no override here — the base .hero3__tile
   rule already reads --v3-tile-rot and js/v3-hero.js never touches
   this element under reduced motion, so nothing can clobber it */
html.reduce-motion .hero3__tile { opacity: 1; }
html.reduce-motion .scrollcue { display: none; }

/* ---------- crossing marquee strips ---------- */
.strips { position: relative; padding-block: clamp(56px, 8vw, 100px); overflow: visible; }
.strip { position: relative; padding-block: 16px; white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip--a { transform: rotate(-2deg); background: var(--copper); box-shadow: 0 10px 40px rgba(var(--acc-rgb), .25); }
.strip--b { transform: rotate(2deg); margin-top: -6px; border-block: 1px solid var(--line); background: var(--bg2); }
.strip__row { display: flex; width: max-content; will-change: transform; }
.strip__track { display: flex; align-items: center; gap: 32px; padding-inline-end: 32px; user-select: none; -webkit-user-select: none; }
.strip__track span, .strip__track b { pointer-events: none; }
.strip--a .strip__track span { font-family: var(--ff-d); font-weight: 700; font-size: clamp(14px, 1.7vw, 19px); letter-spacing: .05em; color: #140d06; }
.strip--a .strip__track b { color: #140d06; opacity: .55; font-size: 13px; }
.strip--b .strip__track span { font-family: var(--ff-d); font-weight: 700; font-size: clamp(14px, 1.7vw, 19px); letter-spacing: .05em; -webkit-text-stroke: 1px rgba(var(--ink-rgb), .55); color: transparent; }
.strip--b .strip__track b { color: var(--acc); font-size: 13px; }
html[data-theme='light'] .strip--b { background: #fffcf6; border-color: rgba(var(--ink-rgb), .08); }
html[data-theme='light'] .strip--b .strip__track span { -webkit-text-stroke-color: rgba(var(--ink-rgb), .68); }
html.reduce-motion .strip__row { transform: none !important; }
/* the duplicate track exists only to make the JS-driven loop seamless —
   with the ticker off under reduced motion it would just show every
   item twice, so hide it and let the real track render statically */
html.reduce-motion .strip__track[aria-hidden] { display: none; }

html.reduce-motion .hero3 .eyebrow i, html.reduce-motion .scrollcue__line i { animation: none; }