/* ===================================
   DIWALI ANIMATION OVERLAY
=================================== */

    #diwali-animation {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;

      background: rgba(0, 0, 0, 0.773);

      overflow: hidden;
      pointer-events: none;

      display: none;

      font-family: Arial, sans-serif;
    }

    /* Show animation */
    #diwali-animation.diwali-active {
      display: block;
    }

    /* Fireworks Canvas */
    #diwali-fireworks {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      pointer-events: none;
    }

    /* ===================================
   ROCKET
=================================== */

    /* Rocket */
    .diwali-rocket {
        position: absolute;
    
        left: 50%;
        top: 0;
    
        width: 60px;
        height: 100px;
    
        opacity: 0;
    
        z-index: 2;
    
        will-change: transform, opacity;
    
        animation: diwaliRocketLaunch 1.2s
            cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }
    
    /* Smooth Rocket Launch */
    @keyframes diwaliRocketLaunch {
    
        0% {
            transform: translate3d(-50%, 110vh, 0) scale(0.6);
            opacity: 0;
        }
    
        15% {
            opacity: 1;
        }
    
        85% {
            opacity: 1;
        }
    
        100% {
            transform: translate3d(-50%, 35vh, 0) scale(1);
            opacity: 0;
        }
    
    }
    
    .diwali-rocket svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    /* Rocket Flame */
    .rocket-flame {
      transform-origin: center;
      animation: diwaliFlame 0.15s infinite alternate;
    }

    @keyframes diwaliFlame {

      from {
        transform: scaleY(0.8);
      }

      to {
        transform: scaleY(1.3);
      }

    }

    /* ===================================
   GREETING
=================================== */

    .diwali-greeting {
      position: absolute;

      left: 50%;
      top: 42%;

      width: min(90%, 700px);

      transform: translate(-50%, -50%) scale(0.5);

      text-align: center;

      opacity: 0;

      z-index: 3;

      color: #fff3c4;

      animation: diwaliGreetingAppear 1s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;

      animation-delay: 1.4s;

      text-shadow:
        0 0 10px rgba(255, 190, 50, 0.6),
        0 0 30px rgba(255, 120, 20, 0.4);
    }

    /* Greeting Entrance */
    @keyframes diwaliGreetingAppear {

      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        filter: blur(10px);
      }

      70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
        filter: blur(0);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
      }

    }

    /* Small Text */
    .diwali-small-text {
      display: block;

      font-size: clamp(14px, 2vw, 22px);

      letter-spacing: 5px;
      text-transform: uppercase;

      color: #ffe8a3;

      margin-bottom: 8px;
    }

    /* Heading */
    .diwali-greeting h1 {
      margin: 0;
      padding: 0;

      line-height: 1;
    }

    /* Happy */
    .happy-text {
      display: block;

      font-family: Georgia, serif;

      font-size: clamp(30px, 5vw, 55px);

      font-weight: 400;

      color: #fff1b3;

      letter-spacing: 3px;
    }

    /* Diwali */
    .diwali-text {
      display: block;

      font-family: "Brush Script MT", "Segoe Script", cursive;

      font-size: clamp(65px, 12vw, 130px);

      font-weight: 700;
      font-style: italic;

      line-height: 1.1;

      background: linear-gradient(180deg,
          #fff7c2 0%,
          #ffd76a 35%,
          #ff9b22 65%,
          #fff0a3 100%);

      -webkit-background-clip: text;
      background-clip: text;

      -webkit-text-fill-color: transparent;

      filter: drop-shadow(0 0 15px rgba(255, 174, 0, 0.5));
    }

    /* ===================================
   DECORATION
=================================== */

    .diwali-decoration {
      display: flex;

      align-items: center;
      justify-content: center;

      gap: 15px;

      margin: 15px auto;
    }

    .diwali-decoration span:not(.diya-icon) {
      width: 70px;
      height: 1px;

      background: linear-gradient(90deg,
          transparent,
          #ffd166,
          transparent);
    }

    .diya-icon {
      font-size: 30px;

      filter: drop-shadow(0 0 10px rgba(255, 180, 0, 0.8));
    }

    /* Bottom Message */
    .diwali-greeting p {
      margin: 15px 0 0;

      font-size: clamp(12px, 2vw, 18px);

      letter-spacing: 1px;

      color: #fff2d0;
    }

    /* ===================================
   FADE OUT
=================================== */

    #diwali-animation.diwali-fade-out {
      animation: diwaliOverlayFade 0.8s ease forwards;
    }

    @keyframes diwaliOverlayFade {

      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }

    }

    /* ===================================
   MOBILE RESPONSIVE
=================================== */

    @media (max-width: 600px) {

      .diwali-greeting {
        width: 95%;
        top: 40%;
      }

      .diwali-small-text {
        letter-spacing: 3px;
      }

      .diwali-decoration span:not(.diya-icon) {
        width: 40px;
      }

      .diwali-greeting p {
        max-width: 280px;
        margin: 15px auto 0;
        line-height: 1.6;
      }

    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {

      .diwali-rocket,
      .rocket-flame,
      .diwali-greeting {
        animation-duration: 0.01ms !important;
      }

    }