/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — light, GPU-only animations (transform / opacity).
   No layout-triggering properties are animated, nothing runs off-screen, and
   everything is switched off for prefers-reduced-motion and on low-end
   devices (html.sv-lite, set by site.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page header: lighter scrim so the photo actually shows, slow Ken-Burns ── */
.sv-pagehero { padding-block: calc(var(--sv-header-h) + var(--sv-10, 64px)) var(--sv-10, 64px); }
.sv-pagehero__bg::after {
  background: linear-gradient(180deg,
    rgba(10, 13, 20, .55) 0%,
    rgba(10, 13, 20, .35) 45%,
    rgba(10, 13, 20, .70) 100%);
}
.sv-pagehero__bg img {
  transform-origin: 50% 50%;
  animation: sv-kenburns 12s ease-out both;
}
@keyframes sv-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* header text slides in */
.sv-pagehero .sv-container > * { animation: sv-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.sv-pagehero .sv-container > :nth-child(2) { animation-delay: .08s; }
.sv-pagehero .sv-container > :nth-child(3) { animation-delay: .16s; }
.sv-pagehero h1::after {
  content: ""; display: block; width: 72px; height: 4px; margin-top: 14px;
  background: var(--sv-red); border-radius: 4px;
  transform-origin: inline-start; animation: sv-grow .9s .35s cubic-bezier(.2,.7,.2,1) both;
}
[dir="rtl"] .sv-pagehero h1::after { transform-origin: right; }
[dir="ltr"] .sv-pagehero h1::after { transform-origin: left; }

@keyframes sv-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Home hero: active slide zooms gently, text staggers in ─────────────── */
.sv-hero .swiper-slide .sv-hero__bg img { transform: scale(1.08); transition: transform 7s ease-out; }
.sv-hero .swiper-slide-active .sv-hero__bg img { transform: scale(1); }
.sv-hero .swiper-slide .sv-hero__content > * { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
.sv-hero .swiper-slide-active .sv-hero__content > * { opacity: 1; transform: none; }
.sv-hero .swiper-slide-active .sv-hero__content > :nth-child(2) { transition-delay: .12s; }
.sv-hero .swiper-slide-active .sv-hero__content > :nth-child(3) { transition-delay: .24s; }
.sv-hero .swiper-slide-active .sv-hero__content > :nth-child(4) { transition-delay: .36s; }
/* before Swiper boots, the first slide must still be visible */
.sv-hero:not(.is-ready) .swiper-slide:first-child .sv-hero__content > * { opacity: 1; transform: none; }

/* ── Scroll reveals: richer variants, picked automatically by site.js ───── */
.sv-reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.sv-reveal[data-anim="zoom"]  { transform: scale(.94); }
.sv-reveal[data-anim="left"]  { transform: translateX(-40px); }
.sv-reveal[data-anim="right"] { transform: translateX(40px); }
/* Media: fade + gentle zoom (never clip the box itself — a fully clipped
   element has zero intersection area and would never be revealed). */
.sv-reveal[data-anim="media"] { transform: translateY(30px) scale(.96); }
.sv-reveal.is-visible[data-anim] { transform: none; }

/* ── Cards: lift + icon pop + sheen on hover (pointer devices only) ─────── */
@media (hover: hover) {
  .sv-icard, .sv-line, .sv-cert, .sv-brandcard, .sv-org__node, .sv-facility__stat {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  }
  .sv-icard:hover, .sv-line:hover, .sv-cert:hover, .sv-brandcard:hover, .sv-org__node:hover, .sv-facility__stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(10, 13, 20, .28);
  }
  .sv-icard__icon, .sv-line__icon, .sv-stat__icon { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
  .sv-icard:hover .sv-icard__icon, .sv-line:hover .sv-line__icon { transform: scale(1.12) rotate(-6deg); }
  .sv-brandcard img { transition: transform .4s; }
  .sv-brandcard:hover img { transform: scale(1.08); }

  .sv-btn { position: relative; overflow: hidden; }
  .sv-btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s;
    pointer-events: none;
  }
  .sv-btn:hover::after { transform: translateX(120%); }
}

/* stat icons breathe slightly once counters are in view */
.sv-stat.is-visible .sv-stat__icon { animation: sv-pop .6s .2s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sv-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Brand strip: continuous marquee (pure CSS, pauses on hover/off-screen) ──
   Kept compositor-only: no filter / mask-image (those repaint every frame);
   the edge fade is two static gradient overlays instead. */
.sv-marquee { position: relative; overflow: hidden; contain: paint; }
.sv-marquee::before, .sv-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none;
}
.sv-marquee::before { inset-inline-start: 0; background: linear-gradient(to var(--sv-fade-dir, right), var(--sv-bg-alt), transparent); }
.sv-marquee::after  { inset-inline-end: 0;   background: linear-gradient(to var(--sv-fade-dir-end, left), var(--sv-bg-alt), transparent); }
[dir="rtl"] .sv-marquee { --sv-fade-dir: left; --sv-fade-dir-end: right; }
.sv-marquee__track { display: flex; gap: 56px; width: max-content; animation: sv-marquee 38s linear infinite; will-change: transform; }
.sv-marquee:hover .sv-marquee__track, .sv-marquee.is-offscreen .sv-marquee__track { animation-play-state: paused; }
/* Fixed logo box: wide wordmarks are limited by width, square marks by height,
   so every brand reads at a similar visual weight. Full colour, no fading. */
.sv-marquee__item { flex: none; width: 168px; height: 76px; padding: 6px 0; transition: transform .3s; }
.sv-marquee__item:hover { transform: scale(1.06); }
.sv-marquee__item img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .sv-marquee__track { gap: 36px; }
  .sv-marquee__item { width: 124px; height: 58px; }
}
@keyframes sv-marquee { to { transform: translate3d(-50%, 0, 0); } }
[dir="rtl"] .sv-marquee__track { animation-name: sv-marquee-rtl; }
@keyframes sv-marquee-rtl { to { transform: translate3d(50%, 0, 0); } }

/* ── Scroll progress bar under the header ───────────────────────────────── */
.sv-progress {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 1200;
  background: linear-gradient(90deg, var(--sv-red), var(--sv-cyan, #22C6E8));
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
[dir="rtl"] .sv-progress { transform-origin: right; }

/* ── Mosaic: images slowly zoom in when revealed ───────────────────────── */
.sv-mosaic__item.sv-reveal img { transform: scale(1.15); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.sv-mosaic__item.sv-reveal.is-visible img { transform: scale(1); }
@media (hover: hover) { .sv-mosaic__item.is-visible:hover img { transform: scale(1.06); transition-duration: .6s; } }

/* ── Off switch ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sv-pagehero__bg img, .sv-pagehero .sv-container > *, .sv-pagehero h1::after,
  .sv-marquee__track, .sv-stat .sv-stat__icon { animation: none !important; }
  .sv-hero .swiper-slide .sv-hero__bg img,
  .sv-hero .swiper-slide .sv-hero__content > * { transition: none !important; opacity: 1 !important; transform: none !important; }
  .sv-reveal[data-anim] { transform: none !important; }
  .sv-progress { display: none; }
}
html.sv-lite .sv-pagehero__bg img, html.sv-lite .sv-marquee__track { animation: none !important; }
.sv-hero.is-offscreen .swiper-slide .sv-hero__bg img { transition: none; }
html.sv-lite .sv-hero .swiper-slide .sv-hero__bg img { transition: none !important; transform: none !important; }