/* ==========================================================================
   SIGNATURE SPELL - CINEMATIC PAGE TRANSITIONS (CANDLE IGNITION & LIGHT GLOW)
   ========================================================================== */
body {
  overflow-x: hidden;
  background-color: #0b0907; /* Dark wax charcoal backdrop behind page wrapper */
}

#app-wrapper {
  transform-origin: center center;
  transition: opacity 1.8s ease, transform 1.8s ease;
  will-change: transform, opacity, filter;
  background-color: var(--color-cream);
  min-height: 100vh;
}

body.transitioning-out #app-wrapper {
  animation: fadeToDark 0.8s ease forwards;
  pointer-events: none;
}

@keyframes fadeToDark {
  to {
    opacity: 0;
    transform: scale(0.97);
    filter: blur(4px);
  }
}

body.transitioning-in #app-wrapper {
  animation: growFromVoid 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes growFromVoid {
  0% {
    transform: scale(0.95);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
  }
}

/* Candle Portal Container */
#candle-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0b0907;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: opacity;
}

#candle-portal.active {
  display: flex;
  animation: fadeInDark 0.4s ease forwards;
}

#candle-portal.active.entrance {
  animation: fadeOutLight 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInDark {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOutLight {
  0% {
    opacity: 1;
    background-color: #FFF1C5;
  }
  100% {
    opacity: 0;
    background-color: transparent;
  }
}

/* Candle Container */
.candle-container {
  position: relative;
  width: 80px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* Wick */
.candle-wick {
  width: 4px;
  height: 20px;
  background-color: #2c2520;
  border-radius: 2px;
  margin-bottom: -4px;
  z-index: 10;
}

/* Layered Flame Elements */
.flame-outer-wrap {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 36px;
  height: 70px;
  transform: translateX(-50%) scale(0);
  transform-origin: center bottom;
  z-index: 8;
  will-change: transform;
}

.flame-inner-wrap {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 18px;
  height: 44px;
  transform: translateX(-50%) scale(0);
  transform-origin: center bottom;
  z-index: 9;
  will-change: transform;
}

/* Outer Flame: Orange/Blue base */
.flame-outer {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 20, 120, 0.9) 0%, rgba(0, 80, 220, 0.5) 15%, rgba(235, 110, 15, 0.95) 35%, rgba(245, 197, 24, 0.9) 70%, transparent 100%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  filter: blur(1px);
  will-change: transform;
}

/* Inner Flame: Bright Yellow/White core */
.flame-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(20, 10, 5, 0.8) 0%, rgba(245, 180, 20, 0.5) 25%, rgba(255, 240, 180, 0.95) 55%, rgba(255, 255, 255, 1) 85%, transparent 100%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  filter: blur(0.5px);
  will-change: transform;
}

/* Flame Glow: Expanding light wash */
.flame-glow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 180, 0.6) 0%, rgba(245, 197, 24, 0.12) 45%, rgba(243, 156, 18, 0.02) 70%, transparent 95%);
  filter: blur(12px);
  z-index: 5;
  transform: translateX(-50%) scale(0);
  transform-origin: center bottom;
  will-change: transform;
}

/* Outer wrapper handles the ignition scale and zoom */
#candle-portal.active.igniting .flame-outer-wrap {
  animation: igniteOuter 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#candle-portal.active.igniting .flame-inner-wrap {
  animation: igniteInner 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#candle-portal.active.igniting .flame-glow {
  animation: igniteGlow 1.8s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

/* Inner element handles only the micro-flickering loop */
#candle-portal.active.igniting .flame-outer {
  animation: flickerOuter 0.15s infinite alternate 0.9s;
}
#candle-portal.active.igniting .flame-inner {
  animation: flickerInner 0.12s infinite alternate 0.9s;
}

@keyframes igniteOuter {
  0% { transform: translateX(-50%) scale(0); }
  25% { transform: translateX(-50%) scale(1.5); } /* Spark burst */
  35% { transform: translateX(-50%) scale(0.6); } /* Drop down */
  55% { transform: translateX(-50%) scale(1); } /* Stable flicker */
  100% { transform: translateX(-50%) scale(30); } /* Expand to cover view */
}

@keyframes igniteInner {
  0% { transform: translateX(-50%) scale(0); }
  25% { transform: translateX(-50%) scale(1.6); }
  35% { transform: translateX(-50%) scale(0.5); }
  55% { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(0); } /* Disappear as outer expands */
}

@keyframes igniteGlow {
  0% { transform: translateX(-50%) scale(0); opacity: 0; }
  55% { transform: translateX(-50%) scale(1.6); opacity: 1; }
  100% { transform: translateX(-50%) scale(45); opacity: 0; } /* Wash of light */
}

/* Flickering animations during the stable phase (now pure rotation, no scaling conflicts) */
@keyframes flickerOuter {
  0% { transform: rotate(-1.5deg); }
  100% { transform: rotate(1.5deg); }
}
@keyframes flickerInner {
  0% { transform: rotate(0.8deg); }
  100% { transform: rotate(-0.8deg); }
}

/* Match striking spark line */
.match-spark {
  position: absolute;
  width: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, #FFFFFF 50%, var(--color-amber) 80%, transparent);
  box-shadow: 0 0 20px var(--color-gold);
  border-radius: 50%;
  left: 10%;
  top: 50%;
}

#candle-portal.active.igniting .match-spark {
  animation: strikeMatch 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes strikeMatch {
  0% { width: 0; left: 15%; opacity: 1; }
  45% { width: 100px; left: 42%; opacity: 1; }
  65% { width: 0; left: 50%; opacity: 0; }
  100% { width: 0; left: 50%; opacity: 0; }
}