/* ============================================================
   AFSL — LIGHTING & ATMOSPHERE
   Aurora fields · spotlights · glow · grain · sheen
   Layered on top of the base system. Nothing here is required
   for the site to work — it is all light.
   ============================================================ */

/* ═══════════ 1. AURORA FIELD ═══════════
   Slow-drifting coloured light. Sits behind content. */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.aurora .a1 {
  width: 46vw; height: 46vw; min-width: 420px; min-height: 420px;
  top: -14%; right: -8%;
  background: radial-gradient(circle, rgba(189,145,75,.42), transparent 68%);
  animation: drift1 22s ease-in-out infinite;
}
.aurora .a2 {
  width: 40vw; height: 40vw; min-width: 360px; min-height: 360px;
  bottom: -18%; left: -10%;
  background: radial-gradient(circle, rgba(10,79,168,.30), transparent 68%);
  animation: drift2 27s ease-in-out infinite;
}
.aurora .a3 {
  width: 30vw; height: 30vw; min-width: 280px; min-height: 280px;
  top: 34%; left: 42%;
  background: radial-gradient(circle, rgba(230,208,168,.34), transparent 66%);
  animation: drift3 19s ease-in-out infinite;
}

@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-6%, 8%)  scale(1.14); }
  66%     { transform: translate(4%, -5%)  scale(.92); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(9%, -7%) scale(1.18); }
  70%     { transform: translate(-4%, 4%) scale(.95); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .34; }
  50%     { transform: translate(-8%, -10%) scale(1.22); opacity: .55; }
}

/* Dark-surface variant */
.aurora-dark .a1 { background: radial-gradient(circle, rgba(189,145,75,.5), transparent 66%); opacity: .7; }
.aurora-dark .a2 { background: radial-gradient(circle, rgba(10,79,168,.55), transparent 66%); opacity: .6; }
.aurora-dark .a3 { background: radial-gradient(circle, rgba(230,208,168,.34), transparent 64%); }

/* ═══════════ 2. GRAIN ═══════════
   Fine noise so gradients don't band on large screens. */

.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .038;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════ 3. SPOTLIGHT ═══════════
   A soft light that follows the cursor across a card.
   JS sets --mx / --my. */

.spotlight { position: relative; overflow: hidden; isolation: isolate; }
.spotlight::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 50%),
    rgba(189,145,75,.13),
    transparent 42%
  );
  opacity: 0;
  transition: opacity .45s var(--e-out);
  pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* Dark variant — stronger, cooler */
.spotlight-dark::before {
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 50%),
    rgba(230,208,168,.16),
    transparent 44%
  );
}

/* ═══════════ 4. GLOW BORDER ═══════════
   A gradient hairline that lights up on hover. */

.glow-edge {
  position: relative;
  isolation: isolate;
}
.glow-edge::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(189,145,75,.7),
    rgba(189,145,75,0) 38%,
    rgba(2,43,100,0) 62%,
    rgba(189,145,75,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--e-out);
  pointer-events: none;
}
.glow-edge:hover::after { opacity: 1; }
.glow-edge.is-lit::after { opacity: 1; }

/* ═══════════ 5. HALO ═══════════
   A bloom that sits behind an element. */

.halo { position: relative; }
.halo::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189,145,75,.30), transparent 62%);
  filter: blur(34px);
  opacity: 0;
  transition: opacity .5s var(--e-out);
  pointer-events: none;
  z-index: -1;
}
.halo:hover::before { opacity: 1; }
.halo-on::before { opacity: .8; }

/* ═══════════ 6. LIGHT SWEEP ═══════════
   A specular streak that crosses a surface once on hover. */

.sweep { position: relative; overflow: hidden; }
.sweep::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform .9s var(--e-out);
  pointer-events: none;
  z-index: 2;
}
.sweep:hover::before { transform: translateX(320%) skewX(-18deg); }

.sweep-gold::before {
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(230,208,168,.42) 50%,
    transparent 100%);
}

/* ═══════════ 7. RIM LIGHT ═══════════
   Top edge catch-light on dark panels. */

.rim {
  position: relative;
}
.rim::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.34),
    rgba(230,208,168,.5),
    rgba(255,255,255,.34),
    transparent);
  pointer-events: none;
}

/* ═══════════ 8. PULSE RING ═══════════ */

.pulse-ring { position: relative; }
.pulse-ring::before,
.pulse-ring::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: ringOut 2.6s var(--e-out) infinite;
  pointer-events: none;
}
.pulse-ring::after { animation-delay: 1.3s; }
@keyframes ringOut {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.35); }
}

/* ═══════════ 9. SHIMMER (loading) ═══════════ */

.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--mist);
  border-radius: var(--r-sm);
}
.shimmer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.85), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ═══════════ 10. GLASS ═══════════ */

.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 32px rgba(2,43,100,.08),
              inset 0 1px 0 rgba(255,255,255,.9);
}
.glass-dark {
  background: rgba(2,43,100,.42);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 32px rgba(1,15,38,.34),
              inset 0 1px 0 rgba(255,255,255,.14);
}

/* ═══════════ 11. GOLD TEXT SHINE ═══════════ */

.shine-text {
  background: linear-gradient(100deg,
    var(--gold-600) 0%,
    var(--gold-300) 42%,
    var(--gold) 58%,
    var(--gold-600) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineText 5s linear infinite;
}
@keyframes shineText { to { background-position: 220% center; } }

/* ═══════════ 12. FLOAT ═══════════ */

.float  { animation: floatY 6s ease-in-out infinite; }
.float-slow { animation: floatY 9s ease-in-out infinite; }
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* ═══════════ 13. BUTTON GLOW (upgraded) ═══════════ */

.btn-gold {
  box-shadow: var(--sh-gold),
              inset 0 1px 0 rgba(255,255,255,.34);
}
.btn-gold:hover {
  box-shadow: 0 14px 40px rgba(189,145,75,.42),
              0 0 0 1px rgba(230,208,168,.5),
              inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-navy {
  box-shadow: var(--sh-md),
              inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-navy:hover {
  box-shadow: 0 14px 40px rgba(2,43,100,.3),
              inset 0 1px 0 rgba(255,255,255,.2);
}

/* ═══════════ 14. CARD LIFT (upgraded) ═══════════ */

.card-hover:hover,
.prod:hover {
  box-shadow: 0 20px 50px rgba(2,43,100,.13),
              0 0 0 1px rgba(189,145,75,.18);
}

/* ═══════════ 15. FOCUS BLOOM ═══════════ */

.field-input:focus {
  box-shadow: 0 0 0 4px rgba(2,43,100,.09),
              0 6px 22px rgba(2,43,100,.09);
}

/* ═══════════ REDUCED MOTION ═══════════ */

@media (prefers-reduced-motion: reduce) {
  .aurora span, .float, .float-slow, .shine-text,
  .pulse-ring::before, .pulse-ring::after, .shimmer::after {
    animation: none !important;
  }
  .aurora span { opacity: .35; }
}