/* ==========================================================================
   Agafay Palm — Desert Light Sweep (signature transition)
   A translucent band of warm desert light sweeps across the screen, with a
   faint wind-over-dunes wave drifting beneath it. No curtain, no panel, no
   logo, nothing opaque. Purely additive: default state is fully inert with
   zero visual or layout impact on the site itself.

   The animated properties (opacity/filter/transform) are applied via JS as
   inline styles rather than through class-gated selectors here — this is
   deliberate: it's the most reliable way to guarantee these three specific
   properties always take effect across every browser/optimization-plugin
   combination, since inline styles sit at the top of the cascade. This
   stylesheet supplies the static positioning, gradients, shapes and the
   `transition` timing itself; transition remains declared unconditionally
   below so that whenever JS changes a value, it animates smoothly.
   ========================================================================== */

:root {
  --agafay-deep-green: #172A21;
  --agafay-palm-green: #243D32;
  --agafay-gold: #C89B4B;
  --agafay-sand: #D8B982;
  --agafay-ivory: #F7F0E6;
  --agafay-ease: cubic-bezier(.22, .61, .36, 1);
}

#agafay-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  overflow: hidden;
}

/* Wind-over-dunes undercurrent: a soft, irregular blurred shape drifting
   slightly slower than the light — barely perceptible, more felt than seen. */
.agafay-wave {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 130vw;
  height: 46vh;
  margin-left: -65vw;
  border-radius: 46% 54% 61% 39% / 56% 44% 58% 42%;
  background: radial-gradient(ellipse at 50% 50%, rgba(36, 61, 50, .40), rgba(23, 42, 33, .12) 55%, transparent 75%);
  filter: blur(34px);
  opacity: 0;
  transform: translateX(-120vw) scaleY(1);
}

/* The light itself: a diagonal band running sand → gold → an ivory hot core
   → gold → sand, blended into the page rather than painted over it. */
.agafay-sweep {
  position: absolute;
  top: -35vh;
  left: 50%;
  width: 46vw;
  height: 170vh;
  margin-left: -23vw;
  transform: translateX(-160vw) rotate(-11deg);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(216, 185, 130, 0) 12%,
    rgba(216, 185, 130, .38) 34%,
    rgba(200, 155, 75, .56) 47%,
    rgba(247, 240, 230, .68) 55%,
    rgba(200, 155, 75, .50) 63%,
    rgba(216, 185, 130, .22) 78%,
    transparent 100%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
}

/* The single refined detail: a hairline of gold riding the light's core. */
.agafay-edge {
  position: absolute;
  top: 0;
  left: 54%;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--agafay-gold) 20%, var(--agafay-gold) 80%, transparent);
  box-shadow: 0 0 16px 1px rgba(200, 155, 75, .55);
  opacity: .9;
}

html.agafay-entering,
html.agafay-exiting {
  overflow: hidden;
}

@media (max-width: 480px) {
  .agafay-sweep { width: 70vw; margin-left: -35vw; }
  .agafay-wave { width: 160vw; margin-left: -80vw; height: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
  /* Defense in depth: JS already skips the whole effect entirely when this
     is set, so nothing ever gets inline-styled in the first place. This is
     just a safety net. */
  .agafay-sweep, .agafay-wave, .agafay-edge, #content {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}