/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL — homepage section entrance animations.
   Gated on html.sr-on (added by scroll-reveal.js) so content is
   never hidden when JS is unavailable. Vertical/scale transforms
   only — horizontal shifts would fight the sticky header and
   full-bleed sections with overflow.
═══════════════════════════════════════════════════════════ */

html.sr-on [data-sr] {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

/* Variants — cycled across sections for visual rhythm */
html.sr-on [data-sr-anim="zoom"]  { transform: translateY(34px) scale(.88); transition-duration: .85s; }
html.sr-on [data-sr-anim="rise"]  { transform: translateY(100px); transition-duration: .95s; }
html.sr-on [data-sr-anim="fade"]  { transform: none; transition-duration: 1.05s; }

/* Signature variants — overflow-safe (no horizontal transforms) */
html.sr-on [data-sr-anim="blur"] {
  transform: translateY(30px);
  filter: blur(18px);
  transition:
    opacity 1s cubic-bezier(.16, 1, .3, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1),
    filter 1s cubic-bezier(.16, 1, .3, 1);
}
html.sr-on [data-sr-anim="blur"].sr-in { filter: blur(0); }

html.sr-on [data-sr-anim="wipe"] {
  transform: translateY(24px);
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 1s cubic-bezier(.16, 1, .3, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1),
    opacity .6s ease;
}
html.sr-on [data-sr-anim="wipe"].sr-in { clip-path: inset(0 0 0 0); }

html.sr-on [data-sr-anim="flip"] {
  transform: perspective(1000px) rotateX(22deg) translateY(48px);
  transform-origin: center top;
  transition-duration: 1s;
}

html.sr-on [data-sr-anim="pop"] {
  transform: translateY(20px) scale(.82);
  transition:
    opacity .55s ease,
    transform .8s cubic-bezier(.34, 1.56, .64, 1);
}

html.sr-on [data-sr].sr-in {
  opacity: 1;
  transform: none;
}

/* Card stagger — children ripple in after their section arrives,
   with a hair of scale so they "settle" rather than merely slide. */
html.sr-on [data-sr] .sr-child {
  opacity: 0;
  transform: translateY(44px) scale(.94);
  transition:
    opacity .55s cubic-bezier(.16, 1, .3, 1),
    transform .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(90ms + var(--sr-i, 0) * 55ms);
}

html.sr-on [data-sr].sr-in .sr-child {
  opacity: 1;
  transform: none;
}

/* ── Image reveal — soft clip + scale as the section arrives ──────────── */
html.sr-on [data-sr] .sr-img {
  clip-path: inset(0 0 12% 0);
  transform: scale(1.06);
  opacity: .85;
  transition:
    clip-path .9s cubic-bezier(.16, 1, .3, 1) .05s,
    transform 1.1s cubic-bezier(.16, 1, .3, 1) .05s,
    opacity .7s ease .05s;
  will-change: transform, clip-path;
}
html.sr-on [data-sr].sr-in .sr-img {
  clip-path: inset(0 0 0 0);
  transform: none;
  opacity: 1;
}
html.sr-on [data-sr].sr-done .sr-img { will-change: auto; }

/* ── Card polish — gentle lift + shadow bloom on hover across the site ──
   Additive: only touches these shared card classes, transform/shadow only. */
html.sr-on .sx-card, html.sr-on .sx-plan, html.sr-on .svs-card,
html.sr-on .sd-card, html.sr-on .hss-svc__card, html.sr-on .ss-pf {
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .2s ease;
}
html.sr-on .sx-card:hover, html.sr-on .svs-card:hover,
html.sr-on .sd-card:hover, html.sr-on .ss-pf:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px -26px rgba(2, 6, 23, .34);
}

/* Once revealed, release will-change + delays so hovers stay snappy */
html.sr-on [data-sr].sr-done,
html.sr-on [data-sr].sr-done .sr-child {
  will-change: auto;
  transition-delay: 0ms;
}

/* Section headers get a subtle secondary drift */
html.sr-on [data-sr] h2,
html.sr-on [data-sr] .section-title {
  transition: transform .9s cubic-bezier(.16, 1, .3, 1) .05s;
  transform: translateY(10px);
}
html.sr-on [data-sr].sr-in h2,
html.sr-on [data-sr].sr-in .section-title {
  transform: none;
}

/* ── Scrubbing: scroll progress bar (scaleX driven by scroll position) ── */
.sr-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2000;               /* above the sticky header (z-index 1000) */
  pointer-events: none;
  background: transparent;
}
.sr-progress__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--primary-color, #0b7077), var(--secondary-color, #14b8a6));
  transform: scaleX(0);
  transform-origin: left center;
  /* No transition — it must track the scrollbar exactly (true scrubbing) */
}

/* ── Scrubbing: hero parallax — base zoom gives the image drift headroom ── */
html.sr-scrub .hero-slider__bg-img {
  transform: translate3d(0, 0, 0) scale(1.12);
  will-change: transform;
}

/* ── Pinned showcase: promo card sticks while product columns scroll past ── */
@media (min-width: 992px) {
  .top-items-section { align-items: flex-start; }
  .top-items-section .promo-card {
    position: sticky;
    top: 96px;                 /* clears the compact sticky header */
  }
}

/* Accessibility: honour reduced-motion — everything appears instantly */
@media (prefers-reduced-motion: reduce) {
  html.sr-on [data-sr],
  html.sr-on [data-sr] .sr-child,
  html.sr-on [data-sr] .sr-img,
  html.sr-on [data-sr] h2,
  html.sr-on [data-sr] .section-title {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html.sr-on [data-sr-anim="blur"] { filter: none !important; }
  html.sr-on [data-sr-anim="wipe"] { clip-path: none !important; }
  html.sr-scrub .hero-slider__bg-img {
    transform: none !important;   /* no parallax drift for motion-sensitive users */
    will-change: auto;
  }
}