/* ==========================================================================
     CINEMATIC NEON FLAME INTRO OVERLAY (FRAME 1 & FRAME 2)
     ========================================================================== */
    #flame-intro-container {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: radial-gradient(circle at center, #0B1120 0%, #030509 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      pointer-events: auto;
      transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #flame-intro-container.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    #ambient-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .flame-hero-wrapper {
      position: relative;
      z-index: 2;
      width: clamp(340px, 55vw, 680px);
      height: clamp(420px, 72vh, 760px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      user-select: none;
    }

    .flame-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Skip Intro Floating Button */
    .skip-intro-btn {
      position: absolute;
      top: 24px;
      right: 28px;
      z-index: 10;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(12px);
      color: #FFFFFF;
      font-size: 0.8125rem;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, transform 0.2s;
    }

    .skip-intro-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.05);
    }

    /* Animated Brand Typography in Intro */
    .intro-brand-caption {
      margin-top: 14px;
      text-align: center;
      position: relative;
      z-index: 3;
      animation: introCaptionSeq 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .intro-brand-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(1.4rem, 3.2vw, 2.25rem);
      font-weight: 900;
      letter-spacing: 0.08em;
      background: linear-gradient(135deg, #00F0FF 0%, #FF2E93 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-transform: uppercase;
      filter: drop-shadow(0 0 16px rgba(255, 46, 147, 0.45));
    }

    .intro-brand-subtitle {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(0.75rem, 1.3vw, 0.95rem);
      font-weight: 700;
      letter-spacing: 0.25em;
      color: #E2E8F0;
      text-transform: uppercase;
      margin-top: 4px;
      opacity: 0.9;
    }

    /* --- FLAME ANIMATION SEQUENCING: FRAME 1 & FRAME 2 --- */
    .neon-filter-glow {
      filter: drop-shadow(0 0 25px rgba(0, 210, 255, 0.75)) drop-shadow(0 0 50px rgba(255, 0, 128, 0.65));
    }

    /* 1. Backdrop Aura */
    .aura-backdrop {
      transform-origin: 50% 60%;
      animation: auraSequence 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    /* 2. Light Rays */
    .light-rays path {
      animation: raysSequence 4.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      transform-origin: 250px 240px;
    }

    /* 3. FRAME 1: Left Cyan Wing (Opening & Outward Expansion) */
    .flame-wing-cyan {
      transform-origin: 40% 75%;
      animation: cyanWingSeq 4.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    }

    /* 4. FRAME 1: Right Magenta Wing (Opening & Outward Expansion) */
    .flame-wing-magenta {
      transform-origin: 60% 75%;
      animation: magentaWingSeq 4.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    }

    /* 5. Center Core Flame (Surge) */
    .flame-center-core {
      transform-origin: 50% 70%;
      animation: centerCoreSeq 4.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    }

    /* 6. FRAME 2: Inner Blue Flame (Closing toward center & Reveal) */
    .flame-inner-blue {
      transform-origin: 50% 80%;
      animation: innerBlueSeq 4.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    }

    /* 7. Base Bulb Thread Lines */
    .bulb-base-lines {
      transform-origin: 50% 85%;
      animation: baseLinesSeq 4.6s ease-out forwards;
    }

    /* --- FLAME INTRO KEYFRAMES --- */
    @keyframes auraSequence {
      0% {
        opacity: 0;
        transform: scale(0.2);
      }

      22% {
        opacity: 0.95;
        transform: scale(1.4);
      }

      65% {
        opacity: 0.6;
        transform: scale(1.05);
      }

      88% {
        opacity: 0.15;
        transform: scale(0.5);
      }

      100% {
        opacity: 0;
        transform: scale(0.1);
      }
    }

    @keyframes raysSequence {
      0% {
        opacity: 0;
        stroke-dasharray: 40;
        stroke-dashoffset: 40;
        transform: scale(0.4) rotate(-20deg);
      }

      25% {
        opacity: 1;
        stroke-dashoffset: 0;
        transform: scale(1.2) rotate(0deg);
      }

      60% {
        opacity: 0.8;
        transform: scale(1.0);
      }

      85% {
        opacity: 0;
        transform: scale(0.6) rotate(15deg);
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes cyanWingSeq {
      0% {
        opacity: 0;
        transform: scale(0.15) rotate(25deg) translate(30px, 40px);
      }

      26% {
        opacity: 1;
        transform: scale(1.25) rotate(-16deg) translate(-35px, -20px);
      }

      62% {
        opacity: 0.9;
        transform: scale(1.02) rotate(2deg) translate(-4px, 5px);
      }

      88% {
        opacity: 0.2;
        transform: scale(0.5) rotate(18deg);
      }

      100% {
        opacity: 0;
        transform: scale(0.1) rotate(25deg);
      }
    }

    @keyframes magentaWingSeq {
      0% {
        opacity: 0;
        transform: scale(0.15) rotate(-25deg) translate(-30px, 40px);
      }

      26% {
        opacity: 1;
        transform: scale(1.25) rotate(16deg) translate(35px, -20px);
      }

      62% {
        opacity: 0.9;
        transform: scale(1.02) rotate(-2deg) translate(4px, 5px);
      }

      88% {
        opacity: 0.2;
        transform: scale(0.5) rotate(-18deg);
      }

      100% {
        opacity: 0;
        transform: scale(0.1) rotate(-25deg);
      }
    }

    @keyframes centerCoreSeq {
      0% {
        opacity: 0;
        transform: scaleY(0.1) scaleX(0.3);
      }

      24% {
        opacity: 1;
        transform: scaleY(1.35) scaleX(1.15) translateY(-25px);
      }

      60% {
        opacity: 0.95;
        transform: scaleY(0.98) scaleX(0.92) translateY(5px);
      }

      88% {
        opacity: 0.2;
        transform: scale(0.4) translateY(20px);
      }

      100% {
        opacity: 0;
        transform: scale(0.05);
      }
    }

    @keyframes innerBlueSeq {
      0% {
        opacity: 0;
        transform: scale(0.1);
      }

      28% {
        opacity: 1;
        transform: scale(1.3) translateY(-18px);
      }

      65% {
        opacity: 0.9;
        transform: scale(1.0) translateY(0);
      }

      88% {
        opacity: 0.15;
        transform: scale(0.35);
      }

      100% {
        opacity: 0;
        transform: scale(0.05);
      }
    }

    @keyframes baseLinesSeq {
      0% {
        opacity: 0;
        transform: scaleX(0.2);
      }

      25% {
        opacity: 0.9;
        transform: scaleX(1.1);
      }

      65% {
        opacity: 0.7;
        transform: scaleX(0.95);
      }

      88% {
        opacity: 0.3;
        transform: scaleX(0.3);
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes introCaptionSeq {
      0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
      }

      25% {
        opacity: 1;
        transform: translateY(0) scale(1.04);
      }

      65% {
        opacity: 0.95;
        transform: translateY(0) scale(1);
      }

      88% {
        opacity: 0.2;
        transform: translateY(-10px) scale(0.95);
      }

      100% {
        opacity: 0;
        transform: translateY(-20px);
      }
    }