/* =============================================================
   MYSTIC FX LAYER — Sealtiel / The Art of Music
   ============================================================= */

:root {
  --mfx-gold:     #c9a84c;
  --mfx-gold-dim: #7a6030;
  --mfx-void:     #04030a;
}

/* -------------------------------------------------------------
   Aurora canvas — fixed behind everything
   ------------------------------------------------------------- */
#mfx-aurora {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -3;
  pointer-events: none;
  opacity: 0.55;
}

/* CSS fallback if WebGL unavailable */
.mfx-aurora-fallback {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 30% 30%, rgba(122, 96, 48, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 50% at 70% 70%, rgba(38, 20, 60, 0.35), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(60, 25, 80, 0.25), transparent 70%);
  animation: mfx-aurora-pulse 24s ease-in-out infinite;
}

@keyframes mfx-aurora-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1) rotate(0deg); }
  50%      { opacity: 0.75; transform: scale(1.08) rotate(2deg); }
}

/* -------------------------------------------------------------
   Particle constellation canvas
   ------------------------------------------------------------- */
#mfx-particles {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.8;
}

/* -------------------------------------------------------------
   Vignette overlay
   ------------------------------------------------------------- */
.mfx-vignette {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.35) 85%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

/* -------------------------------------------------------------
   Film grain — animated SVG noise, mix-blend-mode overlay
   ------------------------------------------------------------- */
.mfx-grain {
  position: fixed;
  inset: -200px;
  z-index: 99;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: mfx-grain-shift 8s steps(10) infinite;
}

@keyframes mfx-grain-shift {
  0%,100% { transform: translate(0, 0); }
  10%     { transform: translate(-5%, -10%); }
  20%     { transform: translate(-15%, 5%); }
  30%     { transform: translate(7%, -25%); }
  40%     { transform: translate(-5%, 25%); }
  50%     { transform: translate(-15%, 10%); }
  60%     { transform: translate(15%, 0%); }
  70%     { transform: translate(0%, 15%); }
  80%     { transform: translate(3%, 35%); }
  90%     { transform: translate(-10%, 10%); }
}

/* -------------------------------------------------------------
   Gold text shimmer — apply class="mfx-shimmer" to any text
   The shimmer wave passes every 14s. Subtle, not distracting.
   ------------------------------------------------------------- */
.mfx-shimmer {
  background: linear-gradient(
    100deg,
    currentColor 0%,
    currentColor 38%,
    var(--mfx-gold) 48%,
    #ffe9b3 50%,
    var(--mfx-gold) 52%,
    currentColor 62%,
    currentColor 100%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mfx-shimmer-wave 14s ease-in-out infinite;
}

@keyframes mfx-shimmer-wave {
  0%   { background-position: 200% 0; }
  50%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

/* -------------------------------------------------------------
   Sacred geometry watermark — Vesica Piscis / Flower of Life
   Add <div class="mfx-sacred"></div> anywhere as positioned wrapper
   ------------------------------------------------------------- */
.mfx-sacred {
  position: absolute;
  width: 760px;
  height: 760px;
  max-width: 80vw;
  max-height: 80vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
  animation: mfx-sacred-rotate 360s linear infinite;
}

@keyframes mfx-sacred-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* -------------------------------------------------------------
   Custom cursor — desktop only, hidden on touch
   ------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body, a, button, input, textarea, select { cursor: none !important; }

  #mfx-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    mix-blend-mode: normal;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #mfx-cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: var(--mfx-gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.6);
  }

  #mfx-cursor::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 50%;
    transition: opacity 0.3s, border-color 0.3s;
  }

  #mfx-cursor.mfx-hover {
    width: 60px;
    height: 60px;
  }

  #mfx-cursor.mfx-hover::after {
    border-color: rgba(201, 168, 76, 0.85);
  }
}

/* Disable cursor entirely on touch */
@media (hover: none) {
  #mfx-cursor { display: none; }
}

/* -------------------------------------------------------------
   View transitions API — cross-fade between pages
   Supported: Chrome 111+, Safari 18+, Edge 111+. Falls back gracefully.
   ------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: mfx-fade-out 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

::view-transition-new(root) {
  animation: mfx-fade-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes mfx-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes mfx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -------------------------------------------------------------
   Stagger reveal upgrade — group children fade in successively
   Apply class="mfx-stagger" on parent, children get progressive delay
   ------------------------------------------------------------- */
.mfx-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.mfx-stagger.mfx-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
.mfx-stagger.mfx-visible > *:nth-child(2) { transition-delay: 120ms; opacity: 1; transform: translateY(0); }
.mfx-stagger.mfx-visible > *:nth-child(3) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.mfx-stagger.mfx-visible > *:nth-child(4) { transition-delay: 360ms; opacity: 1; transform: translateY(0); }
.mfx-stagger.mfx-visible > *:nth-child(5) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.mfx-stagger.mfx-visible > *:nth-child(6) { transition-delay: 600ms; opacity: 1; transform: translateY(0); }
.mfx-stagger.mfx-visible > *:nth-child(7) { transition-delay: 720ms; opacity: 1; transform: translateY(0); }
.mfx-stagger.mfx-visible > *:nth-child(8) { transition-delay: 840ms; opacity: 1; transform: translateY(0); }

/* -------------------------------------------------------------
   Reduced motion safety
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #mfx-aurora,
  .mfx-aurora-fallback { animation: none; }
  .mfx-grain { animation: none; }
  .mfx-sacred { animation: none; }
  .mfx-shimmer {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
            color: currentColor;
  }
  .mfx-stagger > * { opacity: 1; transform: none; transition: none; }
}