/* =========================================================================
   STRUCT'it — cinematic dark theme
   Originally Home-only; now the site-wide design system for all 8 pages
   (style.css's own :root tokens carry the permanent dark palette — see the
   note there). This file layers the cinematic extras on top: the grain +
   blended background, the glass/blur materials, the GSAP-driven motion
   hooks (.cine-hero, .cine-cap-card, .blur-in, etc. — still only used by
   Home's bespoke markup), and a generic glass reskin of the plain semantic
   classes (.cap-card, .who-card, .callout, .proof-card, …) that the other
   7 pages use as-is, so the whole site reads as one material.
   ========================================================================= */

:root {
  /* Aliases onto the base tokens, kept under their own names because the
     rest of this file (written for Home originally) already refers to
     them everywhere — same values, one source of truth. */
  --cine-bg: var(--paper);
  --cine-bg-raised: var(--paper-raised);
  --cine-paper: var(--ink);
  --cine-paper-soft: rgba(247, 244, 239, 0.66);
  --cine-paper-faint: rgba(247, 244, 239, 0.4);
  --cine-glass: rgba(247, 244, 239, 0.13);
  --cine-glass-hover: rgba(247, 244, 239, 0.19);
  --cine-glass-border: rgba(247, 244, 239, 0.22);
  --cine-crimson: #d84a5c;
  --cine-crimson-deep: #c33547;
  --cine-crimson-glow: rgba(195, 53, 71, 0.45);
  --cine-indigo: #6a5bb0;
  --cine-indigo-deep: #362b62;
  --cine-indigo-glow: rgba(54, 43, 98, 0.55);
}

/* The soft indigo/crimson glow blend that opens the hero continues down the
   whole page — a handful of large, low-opacity radial gradients spaced
   through the full height of <main>, positioned by percentage so they scale
   with however tall the page ends up. The hero and CTA band still layer
   their own, stronger glow on top of this (see .cine-hero-media::after and
   .cine-cta::before); this is the ambient wash that fills the plain
   sections in between so the blend never flattens out to solid black.
   Now applies to every page's <main>, not just Home's. */
main {
  background-color: var(--cine-bg);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse 60% 30% at 18% 0%,   rgba(54, 43, 98, 0.5),  transparent 62%),
    radial-gradient(ellipse 55% 26% at 85% 16%,  rgba(195, 53, 71, 0.38), transparent 60%),
    radial-gradient(ellipse 55% 26% at 10% 40%,  rgba(195, 53, 71, 0.3), transparent 60%),
    radial-gradient(ellipse 58% 28% at 88% 60%,  rgba(54, 43, 98, 0.4),  transparent 60%),
    radial-gradient(ellipse 58% 30% at 18% 82%,  rgba(54, 43, 98, 0.4),  transparent 60%),
    radial-gradient(ellipse 55% 30% at 84% 100%, rgba(195, 53, 71, 0.36), transparent 62%);
  position: relative;
  overflow: hidden;
}

/* Fixed film-grain layer over every page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/ui/grain.png");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.2;
  pointer-events: none;
  z-index: 500;
}

/* ---------- header override: transparent-to-glass, Home only ----------
   Home's header sits over a full-bleed hero (video/image), so it can start
   fully transparent and only pick up the glass background once scrolled.
   The other 7 pages don't have that full-bleed hero behind the header, so
   they keep the ordinary sticky dark-glass header defined in style.css
   instead — this block stays intentionally scoped to Home. */
body[data-page="home"] .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  z-index: 200;
}
body[data-page="home"] .site-header.is-scrolled {
  background: rgba(5, 4, 8, 0.9);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--cine-glass-border);
}
body[data-page="home"] .nav-links,
body[data-page="home"] .nav-cta .btn-ghost,
body[data-page="home"] .nav-toggle,
body[data-page="home"] .dropdown-toggle { color: var(--cine-paper); }
body[data-page="home"] .nav-toggle { border-color: var(--cine-glass-border); }
body[data-page="home"] .nav-links a[aria-current="page"],
body[data-page="home"] .nav-links a:hover { border-bottom-color: var(--cine-crimson); }
body[data-page="home"] .dropdown-menu {
  background: rgba(13, 11, 18, 0.97);
  backdrop-filter: blur(20px);
  border-color: var(--cine-glass-border);
}
body[data-page="home"] .dropdown-menu a { color: var(--ink); }
body[data-page="home"] .dropdown-menu a:hover { background: var(--cine-glass); color: var(--cine-crimson); }
body[data-page="home"] .nav-cta .btn-ghost { border-color: var(--cine-glass-border); }
body[data-page="home"] .nav-cta .btn-ghost:hover { border-color: var(--cine-paper); }
body[data-page="home"].nav-open .nav-links { background: var(--cine-bg-raised); }

/* ================= HERO ================= */
.cine-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 80px;
  overflow: hidden;
}
.cine-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cine-hero-media video,
.cine-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.58) saturate(1.05);
}
.cine-hero-media img {
  animation: cine-kenburns 26s ease-in-out infinite alternate;
  transform-origin: 54% 42%;
  will-change: transform;
}
@keyframes cine-kenburns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-1.2%, -1.6%, 0); }
}
.cine-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 22% 20%, var(--cine-indigo-glow), transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 78%, var(--cine-crimson-glow), transparent 60%),
    linear-gradient(180deg, rgba(5,4,8,0.35) 0%, rgba(5,4,8,0.55) 45%, rgba(5,4,8,0.96) 100%);
}
.cine-hero-content {
  position: relative;
  z-index: 2;
}
.cine-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cine-crimson);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.cine-eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--cine-crimson);
}
.cine-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(3.2rem, 9vw, 8.5rem);
  line-height: 0.96;
  margin: 0 0 36px;
  max-width: 16ch;
}
.cine-sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 44px;
}
.cine-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 3px;
  background: var(--cine-glass);
  border: 1px solid var(--cine-glass-border);
  color: var(--cine-paper);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn-glass:hover { background: var(--cine-glass-hover); border-color: rgba(247,244,239,0.3); transform: translateY(-2px); }
.btn-glass-primary {
  background: linear-gradient(135deg, var(--cine-crimson-deep), var(--cine-indigo-deep));
  border-color: transparent;
  box-shadow: 0 12px 30px -12px var(--cine-crimson-glow);
}
.btn-glass-primary:hover { filter: brightness(1.12); transform: translateY(-2px); }

.cine-scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cine-paper-faint);
}
.cine-scroll-cue .line {
  width: 1px; height: 44px;
  background: linear-gradient(var(--cine-paper-faint), transparent);
  animation: cine-scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes cine-scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---- razor-thin structural line overlays (blueprint / mechanical-alignment motif) ---- */
.cine-structural-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cine-corner {
  position: absolute;
  width: 46px; height: 46px;
  border: 1px solid var(--cine-indigo);
  opacity: 0.55;
}
.cine-corner-tl { top: 108px; left: 24px; border-right: none; border-bottom: none; }
.cine-corner-br { bottom: 96px; right: 24px; border-left: none; border-top: none; }
.cine-hairline { position: absolute; background: linear-gradient(var(--cine-indigo), transparent 85%); opacity: 0.45; }
.cine-hairline-v { top: 0; bottom: 0; right: 12%; width: 1px; }
@media (max-width: 900px) { .cine-structural-lines { display: none; } }

/* ---- staggered SVG blueprint grid, faded in on load ---- */
.cine-grid-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.cine-grid-line {
  stroke: var(--cine-indigo);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.14;
}
/* GSAP takes over the reveal (staggered from 0) once active; this is the
   no-JS / reduced-motion resting state, so the grid is never missing. */
@media (max-width: 900px) { .cine-grid-overlay { display: none; } }

/* ---- magnetic dot cursor (desktop, fine pointer, motion allowed only) ---- */
.cine-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--cine-paper);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity 0.25s ease, width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1),
              margin 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease, border-color 0.3s ease;
}
.cine-cursor.is-active { opacity: 1; }
.cine-cursor.is-hover {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  background: var(--cine-crimson);
  border-color: transparent;
}
.cine-cursor-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--cine-paper);
  transition: opacity 0.2s ease;
}
.cine-cursor.is-hover .cine-cursor-dot { opacity: 0; }
/* Native cursor is only ever hidden once JS confirms the custom cursor is
   running (see home-cinematic.js) — if that never fires, the browser's
   own cursor is exactly what stays visible. Runs on every page now. */
body.cine-custom-cursor * { cursor: none; }

/* ================= KINETIC TEXT ================= */
/* Fallback word-mask reveal, used only when GSAP/SplitText can't load */
.kinetic-word-wrap { display: inline-block; overflow: hidden; vertical-align: top; }
.kinetic-word-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
.kinetic-ready .kinetic-word-inner { transform: translateY(0); opacity: 1; }

/* GSAP SplitText hero reveal — each line gets its own reveal mask */
.cine-h1 .cine-split-line { overflow: hidden; padding-bottom: 0.06em; }
.cine-h1 .char { will-change: transform, opacity; }

.blur-in {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(18px);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}
.blur-in.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); }
/* GSAP owns these once active — a live CSS transition would fight the scroll-scrubbed tween */
.cine-gsap-active .blur-in { transition: none; }

/* ================= SECTION SHELL ================= */
.cine-section { position: relative; padding: 120px 0; }
.cine-section-head { max-width: 720px; margin: 0 0 56px; }
.cine-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cine-crimson);
  display: block;
  margin-bottom: 18px;
}
.cine-h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  line-height: 1.02;
  margin: 0;
}
.cine-p { color: var(--ink); font-size: 17px; line-height: 1.75; max-width: 60ch; }

/* ================= CAPABILITIES — static glass grid ================= */
/* A plain responsive grid — 3 columns / 2 rows on desktop, 2 columns on
   tablet, 1 column on mobile. No pin, no scroll-jacking: every card is
   visible and reachable by ordinary page scroll, no extra scroll distance
   spent moving sideways through the section. */
.cine-caps-section { padding-bottom: 40px; }
.cine-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 19px;
}
@media (max-width: 899px) {
  .cine-caps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cine-caps-grid { grid-template-columns: 1fr; }
}
.cine-cap-card {
  position: relative;
  padding: 34px 30px;
  border-radius: 4px;
  background: var(--cine-glass);
  border: 1px solid var(--cine-glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  text-decoration: none;
  color: var(--cine-paper);
  min-height: 280px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, background 0.35s ease;
}
@media (max-width: 899px) { .cine-cap-card { min-height: 240px; } }
/* Inner content layer — this is what the cursor-tracking parallax moves,
   independently of the card's own hover-lift transform. */
.cine-cap-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  will-change: transform;
}
.cine-cap-card::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--glow-color, var(--cine-crimson-glow)), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cine-cap-card:hover {
  transform: translateY(-6px);
  border-color: rgba(247,244,239,0.28);
  background: var(--cine-glass-hover);
}
.cine-cap-card:hover::before { opacity: 0.9; }
.cine-cap-card:nth-child(3n+2) { --glow-color: var(--cine-indigo-glow); }
.cine-cap-index { font-family: var(--font-mono); font-size: 13px; color: var(--cine-crimson); position: relative; z-index: 1; }
.cine-cap-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 22px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.cine-cap-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0; position: relative; z-index: 1; }
.cine-cap-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  position: relative; z-index: 1;
}
@media (max-width: 760px) { .cine-scroll-cue { display: none; } }

/* ================= PROOF — cinematic frame strip ================= */
.cine-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cine-proof-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--cine-glass-border);
}
.cine-proof-card img,
.cine-proof-card .photo-slideshow { width: 100%; height: 100%; }
.cine-proof-card img {
  object-fit: cover;
  filter: saturate(0.92) brightness(0.9);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
}
.cine-proof-card:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }

/* ---- photo slideshow: crossfades between multiple real photos of the same
   project when more than one is available, instead of a single static shot.
   Base state (no JS) simply shows the first photo — never a blank tile. ---- */
.photo-slideshow { position: relative; }
.photo-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.3s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
}
.photo-slideshow .slide.is-active { opacity: 1; }
/* hard-cut variant: instant swap, no crossfade — used on the proof-strip
   tiles so there's never a moment where two photos are partially
   transparent over each other, only ever one fully-opaque photo. */
.photo-slideshow.is-hardcut .slide { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .photo-slideshow .slide { transition: none; }
}
/* .slide is absolutely positioned (inset:0), so it never contributes to its
   parent's height on its own — these two contexts (photo-grid tiles and
   the single-figure hero shots on the capability pages) need an explicit
   aspect-ratio on the wrapping .photo-slideshow itself so it doesn't
   collapse to zero height. Matches the crop the single-image versions of
   these components already used. */
.photo-grid figure .photo-slideshow { aspect-ratio: 4 / 3; width: 100%; }
.hero-figure .photo-slideshow { aspect-ratio: 4 / 3; width: 100%; }
.hero-figure .photo-slideshow .slide,
.photo-grid figure .photo-slideshow .slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cine-proof-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,4,8,0.92) 100%);
}
.cine-proof-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 16px 16px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  color: var(--cine-paper);
  z-index: 2;
  border-top: 1px solid var(--cine-glass-border);
  background: rgba(5,4,8,0.62);
  backdrop-filter: blur(10px);
}
@media (max-width: 900px) { .cine-proof-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cine-proof-grid { grid-template-columns: 1fr; } }

/* ================= ABOUT — editorial pull quote ================= */
.cine-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.cine-quote {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.cine-quote em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cine-crimson), var(--cine-indigo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cine-about-body { display: flex; flex-direction: column; gap: 20px; }
.cine-about-body p { color: var(--ink); font-size: 16.5px; line-height: 1.75; margin: 0; max-width: 56ch; }
@media (max-width: 860px) { .cine-about { grid-template-columns: 1fr; gap: 32px; } }

/* ================= FINAL CTA — glow mesh ================= */
.cine-cta {
  position: relative;
  padding: 140px 0;
  text-align: center;
  overflow: hidden;
}
.cine-cta::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 45% 40% at 30% 30%, var(--cine-crimson-glow), transparent 60%),
    radial-gradient(ellipse 45% 40% at 75% 70%, var(--cine-indigo-glow), transparent 60%);
  filter: blur(20px);
  opacity: 0.7;
  z-index: 0;
}
.cine-cta > .container { position: relative; z-index: 1; }
.cine-cta .cine-h2 { margin-bottom: 20px; }
.cine-cta .cine-p { margin: 0 auto 40px; }
.cine-cta .cine-actions { justify-content: center; }

/* footer sits directly below the grain/blend layers on every page */
.site-footer { position: relative; z-index: 1; }

/* ================= GENERIC RESKIN — the other 7 pages =================
   These pages keep their original semantic markup (.hero, .cap-card,
   .proof-card, .who-card, .callout, .stat, form fields, …) rather than
   being rewritten into the bespoke .cine-* structure built for Home. The
   dark palette already comes free from style.css's tokens; this section
   adds the glass/blur material and a few contrast fixes so the same cards,
   captions and inputs read as part of the cinematic system. */
.hero { position: relative; }

.cap-card {
  background: var(--cine-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background 0.3s ease, transform 0.3s ease;
}
.cap-card:hover { background: var(--cine-glass-hover); transform: translateY(-4px); }
.grid-caps { background: var(--cine-glass-border); }

.who-card, .callout {
  background: var(--cine-glass);
  border-color: var(--cine-glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.proof-card { border-color: var(--cine-glass-border); }
.proof-card img { filter: saturate(0.92) brightness(0.9); }
.proof-card:hover img { filter: saturate(1.05) brightness(1); }
.proof-caption {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.2;
  background: rgba(5,4,8,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--cine-glass-border);
}

.photo-grid figure {
  /* no glass/blur background here on purpose: figure is fully covered by its
     img (object-fit: cover, 100%/100%), so a translucent backdrop-filter
     panel only ever shows as a hazy flash behind the photo while the
     .blur-in scroll-reveal is mid-transition — removed so photos never
     show a "background" behind them while scrolling. */
  border-color: var(--cine-glass-border);
  background: var(--cine-bg-raised);
}

.stat { background: var(--cine-glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.stat-row { background: var(--cine-glass-border); }

.chip-list li { background: var(--cine-glass); border-color: var(--cine-glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

input, textarea {
  background: var(--cine-glass);
  border-color: var(--cine-glass-border);
  color: var(--ink);
}
input:focus, textarea:focus { outline-color: var(--cine-crimson); }

@media (prefers-reduced-motion: reduce) {
  .kinetic-word-inner { transition: opacity 0.3s ease !important; transform: none !important; }
  .kinetic-ready .kinetic-word-inner { opacity: 1; }
  .blur-in { transition: opacity 0.3s ease !important; filter: none !important; transform: none !important; }
  .blur-in.is-visible { opacity: 1; }
  .cine-scroll-cue .line { animation: none; }
  .cine-hero-media img { animation: none; transform: scale(1.02); }
}