/* Aimlink | Footer ripple: a shot lands just under the store badges, so the badges stand on the water and the
   rings run out under the brand block. Kling 3.0 pro clip (start frame = end frame, so it loops), graded so its
   black is 0 and blended with `lighten`, which leaves only the lime light on the footer's night.
   Behaviour: assets/ripple/ripple.js. Static poster by default (no JS, reduced motion, Save-Data); the video
   fades in over it once it plays (its first frame is the poster, so the handoff is invisible). */
@layer sections {
  .footer-cta { position: relative; }

  .footer-ripple {
    --rw: max(150vw, 1100px);                                  /* frame width: the rings reach the footer's edges */
    --h: calc(var(--rw) * 0.5625);                             /* 16:9 */
    --drop-y: 36%;                                             /* the impact point's height in the frame */
    --drop-gap: 10px;                                          /* impact point below the badges */
    --brand: calc(clamp(var(--space-8), 8vw, var(--space-9)) - var(--drop-gap));   /* impact point to the brand block */
    position: absolute; z-index: -1; left: 50%; translate: -50% 0;
    top: calc(100% + var(--drop-gap) - var(--h) * 0.36);
    width: var(--rw); aspect-ratio: 16 / 9; pointer-events: none;
    mix-blend-mode: lighten; opacity: 0.72;
    /* Frame edges fade out; the near half dims to 30 % where the stacked brand block sits */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 var(--drop-y), rgb(0 0 0 / 0.3) calc(var(--drop-y) + var(--brand)), rgb(0 0 0 / 0.3) 72%, transparent 90%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 var(--drop-y), rgb(0 0 0 / 0.3) calc(var(--drop-y) + var(--brand)), rgb(0 0 0 / 0.3) 72%, transparent 90%);
  }
  .ripple-poster, .ripple-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ripple-video { opacity: 0; transition: opacity 900ms var(--ease-out); }
  .footer-ripple.is-playing .ripple-video { opacity: 1; }

  /* A night halo round the small brand-block text keeps it readable where a ring crosses it */
  .footer-brand { text-shadow: 0 0 3px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg); }

  /* Three columns from 1000 px: the wide rings stay bright and only the contact column, right under the
     impact point, gets a soft dimmed window */
  @media (min-width: 1000px) {
    .footer-ripple {
      --hole: radial-gradient(ellipse 230px 95px at 50% calc(var(--drop-y) + var(--brand) + 56px), rgb(0 0 0 / 0.22) 35%, #000 100%);
      --edges: linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 90%);
      -webkit-mask-image: var(--hole), var(--edges); -webkit-mask-composite: source-in;
              mask-image: var(--hole), var(--edges);         mask-composite: intersect;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ripple-video { display: none; }
  }
}