/*
 * British Lasers Fade Motion System
 * Used by the British Lasers homepage.
 *
 * Basic usage:
 *   <article class="bil-reveal bil-reveal-up">...</article>
 *
 * JavaScript should add `bil-motion-ready` to the page wrapper after it has
 * loaded, then add `is-visible` to each `.bil-reveal` element as it enters the
 * viewport. The homepage's IntersectionObserver handles this automatically.
 *
 * Optional per-element timing:
 *   style="--bil-reveal-delay: 120ms; --bil-reveal-duration: 1s;"
 */

/* Visible by default: content is never hidden if JavaScript fails to run. */
.bil-reveal {
  --bil-reveal-x: 0;
  --bil-reveal-y: 38px;
  --bil-reveal-scale: 1;
  --bil-reveal-rotate: 0deg;
  --bil-reveal-blur: 6px;
  --bil-reveal-delay: 0ms;
  --bil-reveal-duration: 0.9s;
  --bil-reveal-opacity-duration: 0.72s;
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
  filter: blur(0);
}

@media (prefers-reduced-motion: no-preference) {
  .bil-motion-ready .bil-reveal {
    opacity: 0;
    translate: var(--bil-reveal-x) var(--bil-reveal-y);
    scale: var(--bil-reveal-scale);
    rotate: var(--bil-reveal-rotate);
    filter: blur(var(--bil-reveal-blur));
    transition:
      opacity var(--bil-reveal-opacity-duration) cubic-bezier(0.22, 1, 0.36, 1)
        var(--bil-reveal-delay),
      translate var(--bil-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1)
        var(--bil-reveal-delay),
      scale var(--bil-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1)
        var(--bil-reveal-delay),
      rotate var(--bil-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1)
        var(--bil-reveal-delay),
      filter var(--bil-reveal-opacity-duration) ease-out var(--bil-reveal-delay);
    will-change: opacity, translate, scale, rotate, filter;
  }

  .bil-motion-ready .bil-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    filter: blur(0);
  }

  /* Default upward rise: section headings, text groups and standard cards. */
  .bil-reveal-up {
    --bil-reveal-x: 0;
    --bil-reveal-y: 38px;
  }

  /* Left entry: first card in a row, left-aligned banners and split layouts. */
  .bil-reveal-left {
    --bil-reveal-x: -46px;
    --bil-reveal-y: 12px;
  }

  /* Right entry: last card in a row, supplies blocks and opposing columns. */
  .bil-reveal-right {
    --bil-reveal-x: 46px;
    --bil-reveal-y: 12px;
  }

  /* Gentle scale: large selectors, carousels, feature panels and final CTAs. */
  .bil-reveal-scale {
    --bil-reveal-y: 24px;
    --bil-reveal-scale: 0.965;
  }

  /* Downward entry: announcement bars or content attached to a page header. */
  .bil-reveal-down {
    --bil-reveal-y: -38px;
  }

  /* Soft fade: paragraphs, legal notes, FAQs and dense text with minimal motion. */
  .bil-reveal-soft {
    --bil-reveal-y: 14px;
    --bil-reveal-blur: 2px;
    --bil-reveal-duration: 0.7s;
    --bil-reveal-opacity-duration: 0.56s;
  }

  /* Zoom: prominent imagery, videos, statistics and product showcases. */
  .bil-reveal-zoom {
    --bil-reveal-y: 16px;
    --bil-reveal-scale: 0.9;
    --bil-reveal-duration: 1s;
    --bil-reveal-opacity-duration: 0.8s;
  }

  /* Pop: badges, compact promotional cards and small high-emphasis callouts. */
  .bil-reveal-pop {
    --bil-reveal-y: 18px;
    --bil-reveal-scale: 0.84;
    --bil-reveal-blur: 3px;
    --bil-reveal-duration: 0.78s;
    --bil-reveal-opacity-duration: 0.62s;
  }

  /* Rotating entries: decorative cards in editorial or asymmetric layouts. */
  .bil-reveal-rotate-left {
    --bil-reveal-x: -32px;
    --bil-reveal-y: 18px;
    --bil-reveal-rotate: -2.5deg;
  }

  .bil-reveal-rotate-right {
    --bil-reveal-x: 32px;
    --bil-reveal-y: 18px;
    --bil-reveal-rotate: 2.5deg;
  }

  /* Blur-only: background artwork or decorative layers that should not move. */
  .bil-reveal-blur {
    --bil-reveal-y: 0;
    --bil-reveal-blur: 12px;
    --bil-reveal-duration: 1.05s;
    --bil-reveal-opacity-duration: 0.84s;
  }

  /* Long rise: full-width strips or section-closing calls to action. */
  .bil-reveal-distance {
    --bil-reveal-y: 68px;
    --bil-reveal-duration: 1.05s;
    --bil-reveal-opacity-duration: 0.84s;
  }

  /* Add to any variant when blur would be expensive or undesirable. */
  .bil-reveal-no-blur {
    --bil-reveal-blur: 0px;
  }

  /* Homepage above-the-fold sequence. Each direct child enters in order. */
  .bil-motion-ready .bil-hero-content > * {
    opacity: 0;
    translate: 0 24px;
    animation: bil-hero-content-enter 0.82s cubic-bezier(0.16, 1, 0.3, 1)
      forwards;
  }

  .bil-motion-ready .bil-hero-content > :nth-child(1) {
    animation-delay: 0.08s;
  }

  .bil-motion-ready .bil-hero-content > :nth-child(2) {
    animation-delay: 0.17s;
  }

  .bil-motion-ready .bil-hero-content > :nth-child(3) {
    animation-delay: 0.28s;
  }

  .bil-motion-ready .bil-hero-content > :nth-child(4) {
    animation-delay: 0.39s;
  }

  .bil-motion-ready .bil-hero-content > :nth-child(5) {
    animation-delay: 0.5s;
  }

  .bil-motion-ready .bil-hero-content > :nth-child(6) {
    animation-delay: 0.61s;
  }

  /* Homepage bridge cue: enters after the main hero sequence. */
  .bil-motion-ready .bil-scroll-cue {
    opacity: 0;
    translate: 0 18px;
    animation: bil-scroll-cue-enter 0.8s 0.68s cubic-bezier(0.16, 1, 0.3, 1)
      forwards;
  }
}

@keyframes bil-hero-content-enter {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes bil-scroll-cue-enter {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bil-reveal,
  .bil-motion-ready .bil-reveal,
  .bil-motion-ready .bil-reveal.is-visible,
  .bil-motion-ready .bil-hero-content > *,
  .bil-motion-ready .bil-scroll-cue {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    rotate: 0deg !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}