/*! WAPI Connect, "Kuwait Time": motion module "hero" styles (M08). Plan: .router/MOTION.md §4.1 H0 + H1.
    Light Rays and Star Border adapted from React Bits (https://reactbits.dev). React Bits: Copyright (c) 2026 David Haz.
    MIT + Commons Clause License Condition v1.0. Used as part of the wapiconnect.net website only.
    Only elements motion/hero.js makes are styled here (canvas.w-rays, svg.w-lap, .w-lapped, .w-has-rays, .w-hx), so the
    page without the module is untouched. Their boxes are absolute and out of the flow: they hold with reduced motion too,
    where the rays keep one still frame and a lap svg made earlier in the visit stays an invisible, empty outline.
    What moves (the lap, the h1 hand-over) is inside (prefers-reduced-motion: no-preference). Tokens only, no new colour. */

/* 1. Light Rays, "the sun at the hour": a canvas inside the sun stage, behind the close-up, never in the layout */
.w-hero__stage > canvas.w-rays {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block;
  pointer-events: none; z-index: 0;
}
/* the close-up sits over the rays through wapi-layout.css (.w-hero__stage > .w-shot--true: position relative, z-index 1) */

/* 2. Star Border, "the sun does one lap": one sun dash round the hero's primary button, inside its edge. The rect's path
      starts at the top-left corner and runs along the top: mirrored in Arabic, so it starts at the inline start. */
.w-lapped { position: relative; }
.w-lapped > svg.w-lap {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: hidden; pointer-events: none;
}
:root[dir="rtl"] .w-lapped > svg.w-lap { transform: scaleX(-1); }
.w-lapped > svg.w-lap rect {
  fill: none; stroke: var(--w-sun); stroke-width: 4; stroke-dasharray: 0 100; vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .w-lapped.is-lapping > svg.w-lap rect { animation: w-lap 1200ms cubic-bezier(.65, 0, .35, 1) both; }

  /* 3. Hero exit: an h1 that was not split by words hands its finished [data-load] rise over to the scrub
        (the same end values, no animation fill, so the scrub's inline opacity and transform apply) */
  html.w-gsap .w-hero .w-hx[data-load] { animation: none; opacity: 1; transform: none; }
}
@keyframes w-lap {
  0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  20% { stroke-dasharray: 16 84; }
  80% { stroke-dasharray: 16 84; }
  100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; }
}