/* ============================================================
   PANJDHARA — Premium Brand Opening Animation
   "Golden Mustard Oil Pour" Intro Experience
   One-time per browser session
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   OVERLAY CONTAINER
   ════════════════════════════════════════════════════════════ */

#brand-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  font-family: 'Playfair Display', 'Poppins', sans-serif;
}

#brand-intro * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

#brand-intro.active {
  pointer-events: all;
}

/* ════════════════════════════════════════════════════════════
   BACKDROP LAYER
   ════════════════════════════════════════════════════════════ */

.intro-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 1;
}

.intro-backdrop.visible {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   SCENE 1 — Golden Glow Under Logo + Sparkles (Glittery part)
   ════════════════════════════════════════════════════════════ */

.intro-scene-1 {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  animation: sceneFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards,
             sceneFadeOut 0.4s cubic-bezier(0.65, 0, 0.35, 1) 1.3s forwards;
}

.intro-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 80px;
  background: radial-gradient(
    ellipse at center,
    rgba(248, 180, 0, 0.35) 0%,
    rgba(248, 180, 0, 0.15) 30%,
    transparent 70%
  );
  opacity: 0;
  animation: logoGlowAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards,
             logoGlowPulse 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.15s infinite;
}

.intro-logo-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.18em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(248, 180, 0, 0.4), 0 0 80px rgba(248, 180, 0, 0.2);
  opacity: 0;
  animation: logoTextAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Sparkle particles around logo */
.intro-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8c4, #f8b400);
  box-shadow: 0 0 10px rgba(248, 180, 0, 0.6), 0 0 20px rgba(248, 180, 0, 0.3);
  opacity: 0;
}

.intro-sparkle:nth-child(1) {
  top: 38%;
  left: 42%;
  animation: sparkleFloat 2s ease-in-out 0.2s infinite;
}
.intro-sparkle:nth-child(2) {
  top: 55%;
  left: 56%;
  width: 4px;
  height: 4px;
  animation: sparkleFloat 2.4s ease-in-out 0.4s infinite;
}
.intro-sparkle:nth-child(3) {
  top: 44%;
  left: 58%;
  width: 5px;
  height: 5px;
  animation: sparkleFloat 1.8s ease-in-out 0.6s infinite;
}
.intro-sparkle:nth-child(4) {
  top: 52%;
  left: 38%;
  width: 3px;
  height: 3px;
  animation: sparkleFloat 2.2s ease-in-out 0.3s infinite;
}
.intro-sparkle:nth-child(5) {
  top: 48%;
  left: 50%;
  width: 8px;
  height: 8px;
  animation: sparklePulse 1s ease-in-out 0.25s infinite;
}
.intro-sparkle:nth-child(6) {
  top: 35%;
  left: 50%;
  width: 4px;
  height: 4px;
  animation: sparkleFloat 2s ease-in-out 0.5s infinite;
}
.intro-sparkle:nth-child(7) {
  top: 58%;
  left: 44%;
  width: 3px;
  height: 3px;
  animation: sparkleFloat 2.4s ease-in-out 0.15s infinite;
}
.intro-sparkle:nth-child(8) {
  top: 42%;
  left: 55%;
  width: 5px;
  height: 5px;
  animation: sparkleFloat 1.9s ease-in-out 0.45s infinite;
}

/* ════════════════════════════════════════════════════════════
   SCENE 6 — Sunlight Sweep + Dissolve
   ════════════════════════════════════════════════════════════ */

.intro-scene-6 {
  position: absolute;
  inset: 0;
  z-index: 30;
  opacity: 0;
  animation: sceneFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards,
             sceneFadeOut 0.3s cubic-bezier(0.65, 0, 0.35, 1) 2.3s forwards;
}

/* Sunlight ray sweep */
.intro-sunlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.intro-sunlight-ray {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 60%;
  height: 160%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 248, 220, 0.15) 30%,
    rgba(255, 248, 220, 0.3) 45%,
    rgba(255, 215, 0, 0.15) 50%,
    rgba(255, 248, 220, 0.3) 55%,
    rgba(255, 248, 220, 0.15) 70%,
    transparent 100%
  );
  transform: translateX(-100%) rotate(-15deg);
  animation: sunlightSweep 1.2s cubic-bezier(0.45, 0, 0.2, 1) 1.5s forwards;
}

/* Dissolving particles canvas container */
#intro-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}

/* Warm glow during dissolve */
.intro-dissolve-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 30% 50%,
      rgba(248, 180, 0, 0.15) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(255, 215, 0, 0.1) 0%,
      transparent 50%
    );
  z-index: 32;
  opacity: 0;
  animation: dissolveGlowAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards,
             dissolveGlowFade 0.4s cubic-bezier(0.65, 0, 0.35, 1) 2.5s forwards;
}

/* ════════════════════════════════════════════════════════════
   FINAL SCENE — Logo Sparkle
   ════════════════════════════════════════════════════════════ */

.intro-final {
  position: absolute;
  inset: 0;
  z-index: 40;
  opacity: 0;
  animation: sceneFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) 2.4s forwards,
             sceneFadeOut 0.4s cubic-bezier(0.65, 0, 0.35, 1) 2.7s forwards;
}

/* Final sparkle across logo */
.intro-final-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 248, 196, 0.8) 30%,
    rgba(255, 215, 0, 1) 50%,
    rgba(255, 248, 196, 0.8) 70%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
  animation: sparkleLine 0.4s cubic-bezier(0.16, 1, 0.3, 1) 2.45s forwards;
}

/* ════════════════════════════════════════════════════════════
   CANVAS / PARTICLE SYSTEM BASE
   ════════════════════════════════════════════════════════════ */

.intro-canvas-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   ANIMATION KEYFRAMES
   ════════════════════════════════════════════════════════════ */

@keyframes sceneFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes sceneFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes logoGlowAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes logoGlowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes logoTextAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

@keyframes sparkleFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  70% {
    opacity: 0.8;
    transform: translateY(-20px) scale(0.6);
  }
}

@keyframes sparklePulse {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    opacity: 0.6;
    transform: scale(0.5);
  }
}

@keyframes sunlightSweep {
  0% {
    transform: translateX(-100%) rotate(-15deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(200%) rotate(-15deg);
    opacity: 0;
  }
}

@keyframes dissolveGlowAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dissolveGlowFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sparkleLine {
  0% {
    width: 0;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    width: 200px;
    opacity: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   TRANSITION OUT — Overlay Fade
   ════════════════════════════════════════════════════════════ */

#brand-intro.fade-out {
  animation: introFadeOut 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes introFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (768px–1024px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .intro-sparkle:nth-child(n+6) {
    display: none;
  }

  .intro-final-sparkle {
    animation-duration: 0.3s;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (<768px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .intro-backdrop {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .intro-sparkle:nth-child(n+4) {
    display: none;
  }

  .intro-logo-glow {
    width: 200px;
    height: 60px;
  }

  .intro-final-sparkle {
    animation-duration: 0.25s;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (<480px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .intro-sparkle:nth-child(n+3) {
    display: none;
  }

  .intro-logo-text {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  .intro-logo-glow {
    width: 150px;
    height: 45px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  #brand-intro {
    display: none !important;
  }
}