/* ═══════════════════════════════════════
   ANIMATIONS — GSAP-driven + CSS fallbacks
   ═══════════════════════════════════════ */

@layer animations {
  /* ── Initial states (before GSAP triggers) ── */
  .anim-fade {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .anim-fade[data-anim="fade-down"] {
    transform: translateY(-30px) translateZ(0);
  }
  .anim-fade[data-anim="fade-right"] {
    transform: translateX(-50px) translateY(0) translateZ(0);
  }
  .anim-fade[data-anim="fade-left"] {
    transform: translateX(50px) translateY(0) translateZ(0);
  }
  .anim-fade[data-anim="split"] {
    transform: translateY(60px) translateZ(0);
  }

  /* ── If GSAP fails to load, show content ── */
  .no-js .anim-fade,
  .gsap-failed .anim-fade {
    opacity: 1;
    transform: none;
  }

  /* ── Mobile Nav Animations ── */
  @keyframes navSlideIn {
    from {
      opacity: 0;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
    }
    to {
      opacity: 1;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
  }

  @keyframes navLinkFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes closeButtonFadeIn {
    from {
      opacity: 0;
      transform: scale(0.8) rotate(-90deg);
    }
    to {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
  }



  /* ── Cursor glow (desktop only) ── */
  .cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-gold-a06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    transition: opacity 0.3s;
    opacity: 0;
  }

}