/* =====================================================================
   cinematic.css — styles for the cinematic modules (js/cinematic.js).
   Linked on every page (it is small); the modules themselves are opt-in by
   data attribute. Component layout the modules sit inside (systems stack,
   process cards, timeline) lives in home.css; this file carries the effect
   states the JS drives, and the layout the modules need to exist at all
   (horizontal gallery, split columns, accordion row).

   MOTION SWITCH: "off" is html[data-motion="off"] — the site's own switch,
   never prefers-reduced-motion. Every rule collapses under it to the finished
   state, and every module 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) 26%, 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) 50%, transparent); }
.yc-band--ink [data-textmask] { --tm-on: #fff; --tm-off: color-mix(in srgb, var(--yc-ink-soft) 50%, transparent); }
html[data-motion="off"] [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, motion off) = plain hairline. */
[data-spotlight] > * { --mx: -999px; --my: -999px; }
[data-spotlight].is-lit > .yc-bento__card,
[data-spotlight].is-lit > .yc-deploy__card,
[data-spotlight].is-lit > .yc-value,
[data-spotlight].is-lit > .yc-mod {
  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-mod::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) 8%, transparent), transparent 70%); }
[data-spotlight].is-lit > .yc-svc { box-shadow: 0 0 0 1px color-mix(in srgb, var(--yc-blue) 24%, transparent), 0 18px 44px color-mix(in srgb, var(--yc-blue) 10%, transparent); }
.yc-svc__art, .yc-svc__body, .yc-bento__art, .yc-bento__text, .yc-deploy__card > *, .yc-mod > * { position: relative; z-index: 1; }
html[data-motion="off"] [data-spotlight].is-lit > * { background: var(--yc-surface); border-color: var(--yc-line); box-shadow: none; }
html[data-motion="off"] [data-spotlight].is-lit > *::after { display: none; }

/* ---------------------------------------------------------------- cursor-reactive tilt */
/* Cards in a spotlight grid lean a couple of degrees toward the pointer. The element selector
   in front is deliberate: it outranks the component's own :hover transform rules. */
html [data-spotlight] > .yc-cine-tilt { --crx: 0deg; --cry: 0deg; --clift: 0px;
  transform: perspective(760px) rotateX(var(--crx)) rotateY(var(--cry)) translate3d(0, var(--clift), 0);
  transform-style: preserve-3d; transition: transform 220ms var(--yc-ease-out); will-change: transform; }
html[data-motion="off"] [data-spotlight] > .yc-cine-tilt { transform: none; transition: none; }

/* ---------------------------------------------------------------- magnetic controls */
/* `translate` is independent of `transform`, so a magnetic pull composes with a press scale. */
[data-magnetic] { --cmx: 0px; --cmy: 0px; translate: var(--cmx) var(--cmy); transition: translate 320ms var(--yc-ease-magnet, var(--yc-ease-out)); }
[data-magnetic].is-cmagnet { transition: translate 90ms linear; }
html[data-motion="off"] [data-magnetic] { translate: none; transition: none; }

/* ---------------------------------------------------------------- odometer */
/* `direction: ltr` is load-bearing, not cosmetic. The odometer replaces the number with one
   inline-block cell per digit; in an RTL block those cells lay out right-to-left, so every
   figure on a Dari or Pashto page rendered backwards once the roll built (۲۰۲۱ became ۱۲۰۲).
   Digits are read left-to-right in every locale this site ships. */
.yc-odo { display: inline-flex; direction: ltr; 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 900ms cubic-bezier(.16, 1, .3, 1); }
.yc-odo__s > span { display: block; height: 1em; line-height: 1; }
html[data-motion="off"] .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; }

/* ---------------------------------------------------------------- screen cyclers */
/* site.js swaps .is-on; this makes the swap a crossfade with a slight scale instead of a cut. */
.is-cine.yc-device__screen > img, .is-cine.yc-device__screen > .yc-device__ph {
  transition: opacity 520ms var(--yc-ease), transform 720ms var(--yc-ease-out); }
.is-cine.yc-device__screen > img:not(.is-on), .is-cine.yc-device__screen > .yc-device__ph:not(.is-on) { transform: scale(1.035); }
.is-cine.yc-device__screen > .is-on { transform: scale(1); }
.is-cine.yc-device__screen { touch-action: pan-y; }
html[data-motion="off"] .is-cine.yc-device__screen > * { transition: none; transform: none; }

/* ---------------------------------------------------------------- coverflow */
.yc-slider.is-coverflow .yc-slider__track { display: block; position: relative; overflow: visible; perspective: 1400px; padding: 8px 0 16px; scroll-snap-type: none; touch-action: pan-y; cursor: grab; }
.yc-slider.is-coverflow.is-dragging .yc-slider__track { cursor: grabbing; }
.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; }
html[data-motion="off"] .yc-slider.is-coverflow .yc-slider__track > * { transition: none; }

/* ---------------------------------------------------------------- horizontal scroll */
/* The section pins and the track travels sideways. Everywhere else the track is the grid the
   server rendered, so a touch device and a narrow window get a normal, scrollable page. */
[data-hscroll].is-hscroll { overflow: hidden; }
[data-hscroll].is-hscroll > .yc-container { max-width: none; overflow: visible; }
[data-hscroll].is-hscroll [data-hscroll-track] { display: flex; width: max-content; grid-template-columns: none; gap: 16px; will-change: transform; }
[data-hscroll].is-hscroll [data-hscroll-track] > * { flex: 0 0 auto; width: clamp(280px, 24vw, 380px); }
/* A hairline progress rule under the gallery, so the pinned section says how far it runs. */
[data-hscroll].is-hscroll::after { content: ""; position: absolute; inset-inline: var(--yc-gutter); bottom: clamp(20px, 3vw, 40px); height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--yc-blue) 0 calc(var(--hp, 0) * 100%), var(--yc-line) calc(var(--hp, 0) * 100%) 100%); }
[dir="rtl"] [data-hscroll].is-hscroll::after { background: linear-gradient(to left, var(--yc-blue) 0 calc(var(--hp, 0) * 100%), var(--yc-line) calc(var(--hp, 0) * 100%) 100%); }
[data-hscroll] { position: relative; }

/* ---------------------------------------------------------------- split scroll */
.yc-split { display: grid; gap: clamp(24px, 4vw, 64px); }
.yc-split__media { display: none; }
@media (min-width: 1024px) {
  .yc-split { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); align-items: start; }
  .yc-split__media { display: block; position: sticky; top: calc(var(--yc-navh, 80px) + 32px); will-change: transform; }
  .yc-split__media .yc-illo { width: 100%; max-width: 420px; }
  .yc-split .yc-why { grid-template-columns: 1fr; border-top: 1px solid var(--yc-line); }
  .yc-split .yc-why__item { transition: opacity var(--yc-dur-slow) var(--yc-ease); }
  html.has-js .yc-split.is-split .yc-why__item { opacity: .42; }
  html.has-js .yc-split.is-split .yc-why__item.is-on { opacity: 1; }
}
html[data-motion="off"] .yc-split .yc-why__item { opacity: 1 !important; transition: none; }

/* ---------------------------------------------------------------- colour shift */
/* A fixed pair of grounds behind everything; only their opacity moves. */
html[data-cshift] { background-color: var(--yc-bg); }
html[data-cshift] body { background-color: transparent; }
.yc-cshift { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.yc-cshift i { position: absolute; inset: 0; display: block; transition: opacity 240ms linear; }
.yc-cshift .t { background: color-mix(in srgb, var(--yc-blue) 7%, var(--yc-surface-2)); opacity: var(--cs-t, 0); }
.yc-cshift .k { background: var(--yc-ink); opacity: var(--cs-k, 0); }
html[data-motion="off"] .yc-cshift { display: none; }

/* ---------------------------------------------------------------- accordion slider */
/* A row of panels; the hovered or focused one takes the room. Only flex-grow animates, so
   nothing outside the row moves and the section keeps its height. */
[data-accslider].is-accslider { display: flex; align-items: stretch; gap: 16px; }
[data-accslider].is-accslider > * { flex: 1 1 0; min-width: 0; transition: flex-grow 560ms var(--yc-ease-out); will-change: flex-grow; }
[data-accslider].is-accslider > .is-open { flex-grow: 2.1; }
/* The closed panels are de-emphasised, not disabled: at .55 the muted body colour fell to roughly
   2.6:1 on paper, under AA, and two of the three cards in the row were unreadable until hovered. */
[data-accslider].is-accslider > *:not(.is-open) > :is(p, .yc-link, .yc-deploy__for) { opacity: .82; transition: opacity 360ms var(--yc-ease); }
html[data-motion="off"] [data-accslider].is-accslider { display: grid; }
html[data-motion="off"] [data-accslider].is-accslider > * { transition: none; }

/* ---------------------------------------------------------------- line illustrations */
/* Views/Shared/Illustrations/_IlloStyles used to gate its animations on
   prefers-reduced-motion: no-preference, so every illustration froze on a machine with the OS
   setting on. The site switch owns that decision instead. */
html[data-motion="off"] .yc-illo, html[data-motion="off"] .yc-illo * { animation: none !important; }
/* Process strip: the baseline is scrubbed by scroll ([data-svgdraw] → --draw) rather than
   played once, so the connector draws with the steps beneath it. */
[data-svgdraw] .yc-illo--process .a-draw { animation: none !important; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--draw, 1) * 100); }

/* ---------------------------------------------------------------- module states this file owns
   that home.css collapses for motion-off. Restated here (loaded after home.css) so the modules
   are live whenever motion is on, whatever the OS thinks. */
html:not([data-motion="off"]).has-js .yc-time--draw li { opacity: .38; }
html:not([data-motion="off"]).has-js .yc-time--draw li.is-on { opacity: 1; }
html:not([data-motion="off"]) .yc-time__spine .draw,
html:not([data-motion="off"]) .yc-rolediag__lines .base { stroke-dashoffset: calc(100 - var(--draw, 1) * 100); }