/* ── Ink veil — shared mouse-reactive teal ink component ──
   Injected by createInkVeil() (assets/ink-veil.js). Used by index.html and
   index-ar.html so both languages share identical behavior and colors.
   Palette lives in the video asset itself (ink-loop.mp4):
   ink cores #0B3B3C · mids #14555A · water #EAF4F3. */
.ink-layer {
  position: absolute; inset: -7%;
  pointer-events: none;
  opacity: 0; will-change: transform, opacity;
}
.ink-layer video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ink-layer canvas { width: 100%; height: 100%; display: block; }

/* Readability scrim — sits between the ink and the section's content so
   text/mascot keep contrast while the ink stays visible and moving. */
.ink-scrim {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; will-change: opacity;
  background:
    radial-gradient(ellipse 70% 62% at 50% 60%,
      rgba(6, 32, 38, 0.58), rgba(6, 32, 38, 0.24) 55%, rgba(6, 32, 38, 0) 80%),
    linear-gradient(180deg, rgba(6, 32, 38, 0.12), rgba(6, 32, 38, 0.38));
}