/* =====================================================================
   cinematic.css — styles for the cinematic modules (js/cinematic.js).
   Loaded only on pages that set ViewData["Cinematic"]. Component layout the
   modules sit inside (systems stack, process cards, timeline) lives in
   home.css; this file carries the effect states the JS drives.
   Every rule collapses under prefers-reduced-motion to the finished state,
   and reads correctly without JS (the custom properties default to "done").
   ===================================================================== */

/* ---------------------------------------------------------------- text mask */
/* Two-colour gradient clipped to the glyphs; --fill 0..1 slides the boundary across. */
[data-textmask] { --tm-on: var(--yc-text); --tm-off: color-mix(in srgb, var(--yc-text) 28%, transparent);
  background-image: linear-gradient(90deg, var(--tm-on) 0 50%, var(--tm-off) 50% 100%); background-size: 200% 100%; background-repeat: no-repeat;
  background-position: calc((1 - var(--fill, 1)) * 100%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  transition: background-position 120ms linear; }
[dir="rtl"] [data-textmask] { background-image: linear-gradient(270deg, var(--tm-on) 0 50%, var(--tm-off) 50% 100%); background-position: calc(var(--fill, 1) * 100%) 0; }
[data-textmask-ink] { --tm-on: #fff; --tm-off: color-mix(in srgb, var(--yc-ink-soft) 55%, transparent); }
.yc-band--ink [data-textmask] { --tm-on: #fff; --tm-off: color-mix(in srgb, var(--yc-ink-soft) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { [data-textmask] { --fill: 1 !important; transition: none; } }

/* ---------------------------------------------------------------- spotlight border */
/* Each card paints its own hairline from a radial gradient centred on the shared pointer, so
   the light crosses card edges. Off (no pointer, coarse pointer, reduced motion) = plain hairline. */
[data-spotlight] > * { --mx: -999px; --my: -999px; }
[data-spotlight].is-lit > .yc-bento__card,
[data-spotlight].is-lit > .yc-deploy__card {
  border-color: transparent;
  background: linear-gradient(var(--yc-surface), var(--yc-surface)) padding-box,
              radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--yc-blue) 70%, var(--yc-line)), var(--yc-line) 72%) border-box; }
[data-spotlight].is-lit > .yc-bento__card::after,
[data-spotlight].is-lit > .yc-deploy__card::after,
[data-spotlight].is-lit > .yc-svc::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--yc-blue) 7%, transparent), transparent 70%); }
[data-spotlight].is-lit > .yc-svc { box-shadow: 0 0 0 1px color-mix(in srgb, var(--yc-blue) 0%, var(--yc-line)); }
.yc-svc__art, .yc-svc__body, .yc-bento__art, .yc-bento__text, .yc-deploy__card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { [data-spotlight].is-lit > * { background: var(--yc-surface); border-color: var(--yc-line); } [data-spotlight].is-lit > *::after { display: none; } }

/* ---------------------------------------------------------------- odometer */
.yc-odo { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; }
.yc-odo__d { display: inline-block; overflow: hidden; height: 1em; }
.yc-odo__s { display: flex; flex-direction: column; will-change: transform; transition: transform 1.5s cubic-bezier(.16, 1, .3, 1); }
.yc-odo__s > span { display: block; height: 1em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .yc-odo__s { transition: none; } }

/* ---------------------------------------------------------------- kinetic marquee */
/* JS translates the track; the CSS loop only runs when JS is off. */
.is-kinetic .yc-logostrip__track, .is-kinetic .yc-stack__track { animation: none; will-change: transform; }

/* ---------------------------------------------------------------- mesh gradient */
/* The canvas is transparent over the band's own ink; without JS it falls back to a static glow. */
.yc-mesh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  background: radial-gradient(60% 50% at 30% 20%, rgba(40,112,232,.22), transparent 70%), radial-gradient(50% 40% at 80% 80%, rgba(31,138,91,.14), transparent 70%); }
.yc-mesh.is-live { background: none; }
.yc-hero__bg .yc-mesh { filter: blur(28px); transform: scale(1.08); }
.yc-cta2__mesh { z-index: 0; filter: blur(22px); transform: scale(1.06); opacity: .9; }

/* ---------------------------------------------------------------- coverflow */
.yc-slider.is-coverflow .yc-slider__track { display: block; position: relative; overflow: visible; perspective: 1400px; padding: 8px 0 16px; scroll-snap-type: none; }
.yc-slider.is-coverflow .yc-slider__track > * { position: absolute; top: 8px; left: 50%; width: min(100%, 440px); margin-left: -220px; height: auto; transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform var(--yc-dur-slow) var(--yc-ease-out), opacity var(--yc-dur-slow) var(--yc-ease); cursor: pointer; }
.yc-slider.is-coverflow .yc-slider__track > .is-current { cursor: default; border-color: var(--yc-line-strong); box-shadow: var(--yc-shadow-lg); }
.yc-slider.is-coverflow .yc-slider__foot { justify-content: center; gap: 24px; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .yc-slider.is-coverflow .yc-slider__track > * { transition: none; } }