/* ============================================================
   PHI-NEXT — phoenix.css
   Styling for the Three.js / GSAP motion layer: hero canvas host,
   exit-ash overlay, entrance ember sweep. The 3D layer is purely
   additive — every element here is decorative (aria-hidden) and
   degrades to nothing when JavaScript or WebGL is unavailable.
   ============================================================ */

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.92;
  pointer-events: none;
}

/* ─── Exit transition: page disintegrates into ash ──────────── */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.10), var(--color-bg-primary) 70%);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.page-transition-overlay.fading {
  opacity: 1;
  pointer-events: all;
}

.page-transition-overlay::before,
.page-transition-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(201,168,76,0.7) 50%, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(201,168,76,0.55) 50%, transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(240,235,224,0.5) 50%, transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(201,168,76,0.6) 50%, transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(240,235,224,0.45) 50%, transparent);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.6s ease;
}

.page-transition-overlay.fading::before {
  opacity: 1;
  transform: translateY(-18px);
  transition-delay: 0.05s;
}

.page-transition-overlay.fading::after {
  opacity: 1;
  transform: translateY(-34px);
  transition-delay: 0.14s;
}

/* ─── Entrance: ember sweep, page reconstitutes from light ──── */
.phi-ember-sweep {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(201,168,76,0.22) 48%,
    rgba(240,235,224,0.30) 50%,
    rgba(201,168,76,0.22) 52%,
    transparent 65%
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas,
  .phi-ember-sweep {
    display: none !important;
  }

  .page-transition-overlay {
    transition: opacity 0.2s ease;
  }

  .page-transition-overlay::before,
  .page-transition-overlay::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .phi-ember-sweep {
    opacity: 0 !important;
  }
}