/* WiK Codex V2: IMAGE-ALIGNED ASYNCHRONOUS two-layer ray effect — APPROVED C2 MODULE.
   Does not alter approved colours, fonts, card dimensions, header, hero, footer or calculators.
   Base backdrop image and its original overlay stay intact.
   Ray origin follows the luminosity in the 1080x2400 background image at center top/cover.
   One light source; two static conic/radial textures; animated only by opacity/transform.
   Layer 1 and Layer 2 have different pulse cycles, sway cycles and negative phase delays.
   Brightness and rotation animations use compositor-friendly opacity / transform only.
   APPROVED: 2026-10-14. Preserve optical and animation values. */
:root {
  /* ORIGINAL IMAGE: 1080 x 2400; background: center top / cover.
     User-selected source focus is x=105%, y=3.5%; these are source-image coordinates,
     NOT percentages of the viewport. Source focus is approved: do not change these values without approval.
     The approved C two-layer approach and static ray textures remain unchanged.
     The animation timing and phase separation below are approved and locked. */
  --wik-source-focus-x: 1.05;
  --wik-source-focus-y: .035;
  --wik-cover-image-width: max(100vw, 45dvh);
  --wik-cover-image-height: max(100dvh, 222.222222vw);
  --wik-ray-origin-x: calc(50vw + (var(--wik-source-focus-x) - .5) * var(--wik-cover-image-width));
  --wik-ray-origin-y: calc(var(--wik-source-focus-y) * var(--wik-cover-image-height));
  --wik-layer1-pulse-duration: 7.2s;
  --wik-layer2-pulse-duration: 8.8s;
  --wik-layer1-drift-duration: 13.2s;
  --wik-layer2-drift-duration: 11.4s;
  --wik-layer1-rotate-range: .70deg;
  --wik-layer2-rotate-range: 1.05deg;
  --wik-layer2-pulse-delay: -2.8s;
  --wik-layer2-drift-delay: -1.5s;
}
/* Note: backdrop itself is already fixed in the approved preview. */
.backdrop { overflow: hidden; }
.wik-v2-ray-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.wik-v2-ray-fx::before,
.wik-v2-ray-fx::after {
  content: "";
  position: absolute;
  top: -5dvh;
  bottom: -5dvh;
  left: -10vw;
  right: -25vw;
  pointer-events: none;
  transform-origin: calc(var(--wik-ray-origin-x) + 10vw) calc(var(--wik-ray-origin-y) + 5dvh);
  -webkit-mask-image: radial-gradient(
    ellipse 113vw 100svh at calc(var(--wik-ray-origin-x) + 10vw) calc(var(--wik-ray-origin-y) + 5dvh),
    #000 0%, rgba(0,0,0,.96) 20%, rgba(0,0,0,.75) 43%, rgba(0,0,0,.30) 66%, transparent 90%
  );
  mask-image: radial-gradient(
    ellipse 113vw 100svh at calc(var(--wik-ray-origin-x) + 10vw) calc(var(--wik-ray-origin-y) + 5dvh),
    #000 0%, rgba(0,0,0,.96) 20%, rgba(0,0,0,.75) 43%, rgba(0,0,0,.30) 66%, transparent 90%
  );
}
/* Broad warm aurora-like fan; the 188deg source direction is preserved from V2's earlier C trial. */
.wik-v2-ray-fx::before {
  background:
    radial-gradient(ellipse 35vw 29svh at calc(var(--wik-ray-origin-x) + 10vw) calc(var(--wik-ray-origin-y) + 5dvh),
      rgba(255,247,216,.37) 0%, rgba(255,228,173,.13) 43%, transparent 100%),
    conic-gradient(from 188deg at calc(var(--wik-ray-origin-x) + 10vw) calc(var(--wik-ray-origin-y) + 5dvh),
      transparent 0deg 3deg,
      rgba(255,237,193,.29) 11deg, transparent 19deg 23deg,
      rgba(255,226,169,.41) 30deg, transparent 38deg 43deg,
      rgba(255,237,194,.27) 51deg, transparent 57deg 63deg,
      rgba(255,237,194,.36) 72deg, transparent 83deg 360deg);
  animation:
    wik-v2-ray-layer1-pulse var(--wik-layer1-pulse-duration) cubic-bezier(.42,0,.28,1) infinite,
    wik-v2-ray-layer1-drift var(--wik-layer1-drift-duration) ease-in-out infinite;
}
/* Narrow accents; independent brightness/sway cycle creates visible changing overlaps. */
.wik-v2-ray-fx::after {
  background: conic-gradient(from 188deg at calc(var(--wik-ray-origin-x) + 10vw) calc(var(--wik-ray-origin-y) + 5dvh),
    transparent 0deg 7deg,
    rgba(255,250,226,.36) 12deg, transparent 15deg 25deg,
    rgba(255,249,220,.49) 33deg, transparent 37deg 53deg,
    rgba(255,247,210,.39) 60deg, transparent 65deg 73deg,
    rgba(255,247,210,.43) 78deg, transparent 84deg 360deg);
  animation:
    wik-v2-ray-layer2-pulse var(--wik-layer2-pulse-duration) cubic-bezier(.50,.05,.28,1) infinite,
    wik-v2-ray-layer2-drift var(--wik-layer2-drift-duration) ease-in-out infinite;
  animation-delay: var(--wik-layer2-pulse-delay), var(--wik-layer2-drift-delay);
}
/* Independent opacity and transform tracks: asynchronous layering, no JS loop. */
@keyframes wik-v2-ray-layer1-pulse {
  0%, 100% { opacity: .18; }
  18% { opacity: .25; }
  48% { opacity: .58; }
  65% { opacity: .47; }
  84% { opacity: .29; }
}
@keyframes wik-v2-ray-layer1-drift {
  0%, 100% { transform: rotate(calc(var(--wik-layer1-rotate-range) * -1)); }
  50% { transform: rotate(var(--wik-layer1-rotate-range)); }
}
@keyframes wik-v2-ray-layer2-pulse {
  0%, 100% { opacity: .10; }
  22% { opacity: .19; }
  55% { opacity: .54; }
  73% { opacity: .33; }
  87% { opacity: .18; }
}
@keyframes wik-v2-ray-layer2-drift {
  0%, 100% { transform: rotate(var(--wik-layer2-rotate-range)); }
  35% { transform: rotate(calc(var(--wik-layer2-rotate-range) * -.45)); }
  68% { transform: rotate(calc(var(--wik-layer2-rotate-range) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .wik-v2-ray-fx::before,
  .wik-v2-ray-fx::after { animation: none; transform: none; opacity: .4; }
}