/* Scroll-driven entrance for the "Why ISKAAN" banner section (#why).

   Pure CSS: the timeline is the section's own position in the viewport, so
   there is no scroll listener and nothing to re-attach when a component
   re-renders. Browsers without scroll-driven animations fall through to the
   existing [data-reveal] fade, so this file only ever adds.

   On !important: every page carries a blanket
     @media (prefers-reduced-motion: reduce) { * { animation:none !important; } }
   which would otherwise kill this section. By explicit request this banner
   animates for all visitors, so each animation declaration is re-asserted at
   matching weight — the #why id out-specifies the `*` selector. Deliberate
   override of a visitor accessibility preference, scoped to this one section. */

@supports (animation-timeline: view()) {

  /* The photo drifts against the scroll — parallax with no JS. */
  #why {
    animation: why-pan linear both !important;
    animation-timeline: view() !important;
    animation-range: cover 0% cover 100% !important;
  }
  @keyframes why-pan {
    from { background-position: center 36%; }
    to   { background-position: center 64%; }
  }

  /* Take over from the generic reveal so the two don't fight over opacity.
     Resting state is visible: the animation supplies the entrance, so the
     card can never get stranded at opacity 0. */
  #why [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    position: relative;
    overflow: hidden;
    will-change: transform, opacity, filter;
    animation: why-card linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 10% cover 45% !important;
  }
  @keyframes why-card {
    from { opacity: 0; transform: translateY(48px) scale(.955); filter: blur(7px); }
    65%  { opacity: 1; }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }

  /* Eyebrow, heading and body cascade in behind the card itself. */
  #why [data-reveal] > * {
    animation: why-line linear both !important;
    animation-timeline: view() !important;
  }
  #why [data-reveal] > *:nth-child(1) { animation-range: entry 18% cover 42% !important; }
  #why [data-reveal] > *:nth-child(2) { animation-range: entry 24% cover 48% !important; }
  #why [data-reveal] > *:nth-child(3) { animation-range: entry 30% cover 54% !important; }
  @keyframes why-line {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }

  /* One light sweep across the glass as the card settles. */
  #why [data-reveal]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.20) 50%, transparent 62%);
    animation: why-sheen linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 22% cover 58% !important;
  }
  @keyframes why-sheen {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
  }
}

/* The home page runs the same entrance on its full-bleed glass banner. The
   markup differs from #why: the card is the [data-plx-fast] element and the
   copy sits directly inside it, so the selectors are re-pointed rather than
   reused as-is.

   The card deliberately animates opacity and blur but NOT transform: its JS
   parallax writes an inline translate3d() every scroll frame, and a CSS
   animation outranks inline styles, so animating transform here would freeze
   the parallax at the final keyframe forever. The rise is carried by the
   lines instead, which own no JS transform. */
@supports (animation-timeline: view()) {

  [data-om-label="large-imagebanner-text"] [data-plx-fast] {
    overflow: hidden;
    will-change: opacity, filter;
    animation: why-banner-card linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 10% cover 45% !important;
  }
  @keyframes why-banner-card {
    from { opacity: 0; filter: blur(7px); }
    65%  { opacity: 1; }
    to   { opacity: 1; filter: blur(0); }
  }

  /* Heading, then the gradient line, cascading in behind the card. Each rule
     is self-contained: the `animation` shorthand resets animation-timeline and
     animation-range, so those longhands must follow it in the same block. */
  [data-om-label="large-imagebanner-text"] [data-plx-fast] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-om-label="large-imagebanner-text"] [data-plx-fast] > *:nth-child(1) {
    animation: why-line linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 18% cover 42% !important;
  }

  /* The gradient line runs the entrance and keeps its own looping sheen, so
     both animations are declared together with a timeline each. */
  [data-om-label="large-imagebanner-text"] [data-plx-fast] > *:nth-child(2) {
    animation: why-line linear both, isk-gradslide 14s linear infinite !important;
    animation-timeline: view(), auto !important;
    animation-range: entry 24% cover 48%, normal !important;
  }

  [data-om-label="large-imagebanner-text"] [data-plx-fast]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.20) 50%, transparent 62%);
    animation: why-sheen linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 22% cover 58% !important;
  }
}