/* ===================================
   Loading Overlay
   =================================== */
body { overflow: hidden; opacity: 1; transition: opacity 0.35s ease; }
body.loaded { overflow: auto; }
body.page-leaving { opacity: 0; pointer-events: none; }
body.page-entering { opacity: 0; }

#loading-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease-out;
}
#loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 90vw;
  max-width: 700px;
}

/* --- SVG Wrapper --- */
.svg-wrapper {
  width: 100%;
  position: relative;
}

/* --- Initial state: invisible, stroke ready --- */
.svg-wrapper svg path {
  fill-opacity: 0;
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 1;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  stroke-miterlimit: 10;
}

/* ============================================
   PHASE 1: Stroke Draw (0s ~ 1.3s)
   ============================================ */
#group-emblem path   { animation: draw 0.8s cubic-bezier(0.65,0,0.35,1) 0.05s forwards; }
#p-gold              { animation: draw 0.7s cubic-bezier(0.65,0,0.35,1) 0.1s forwards; }
#p-blue              { animation: draw 0.7s cubic-bezier(0.65,0,0.35,1) 0.2s forwards; }
#p-navy1             { animation: draw 0.5s cubic-bezier(0.65,0,0.35,1) 0.3s forwards; }
#p-red               { animation: draw 0.7s cubic-bezier(0.65,0,0.35,1) 0.35s forwards; }
#p-navy2             { animation: draw 0.5s cubic-bezier(0.65,0,0.35,1) 0.35s forwards; }
#group-phoenix path  { animation: draw 0.8s cubic-bezier(0.65,0,0.35,1) 0.4s forwards; }

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* ============================================
   PHASE 2: Fill (reveal SVG's own fills via fill-opacity)
   ============================================ */
.phase-fill #group-emblem path  { animation: reveal-fill 0.8s ease-out both; }
.phase-fill #p-gold             { animation: reveal-fill 0.8s ease-out 0.1s both; }
.phase-fill #p-blue             { animation: reveal-fill 0.8s ease-out 0.2s both; }
.phase-fill #p-navy1            { animation: reveal-fill 0.8s ease-out 0.25s both; }
.phase-fill #p-navy2            { animation: reveal-fill 0.8s ease-out 0.3s both; }
.phase-fill #p-red              { animation: reveal-fill 0.8s ease-out 0.25s both; }
.phase-fill #group-phoenix path { animation: reveal-fill 0.8s ease-out 0.35s both; }

@keyframes reveal-fill {
  0%   { fill-opacity: 0; stroke-dashoffset: 0; stroke: rgba(0,0,0,0.25); }
  50%  { fill-opacity: 0.6; stroke-dashoffset: 0; stroke: rgba(0,0,0,0.15); }
  100% { fill-opacity: 1; stroke-dashoffset: 0; stroke: rgba(0,0,0,0.08); }
}

/* ============================================
   PHASE 4: Fire canvas from bottom
   ============================================ */
#fire-canvas {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 5;
}

/* --- Progress Bar --- */
.progress-bar-track {
  width: 60%;
  height: 2px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.8s ease-out;
}
.progress-bar-track.hidden { opacity: 0; }

.progress-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, #fbe14c, #e73d41, #00ace6, #0067b2);
  background-size: 300% 100%;
  animation:
    progress-grow 2.0s cubic-bezier(0.4,0,0.2,1) 0.1s forwards,
    progress-shimmer 2s linear infinite;
}

@keyframes progress-grow {
  to { width: 100%; }
}
@keyframes progress-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* --- Loading Text --- */
.loading-text {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #000000;
  font-weight: 300;
  transition: opacity 0.8s ease-out;
}
.loading-text.hidden { opacity: 0; }

.loading-text span { display: inline-block; }

.dot { animation: dot-blink 1.4s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-blink {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}

/* --- Ambient particles --- */
.particles {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: -1;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  animation: float-up linear infinite;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.1; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1); }
}

/* --- Background gradient --- */
.bg-gradient {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(231,61,65,0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 30% 50%, rgba(251,225,76,0.05) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 50%, rgba(0,172,230,0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -2;
  animation: bg-pulse 4s ease-in-out infinite;
  transition: background 1.2s ease-out;
}
.bg-gradient.fire {
  background: radial-gradient(ellipse at 50% 70%, rgba(255,80,0,0.1) 0%, transparent 55%),
              radial-gradient(ellipse at 35% 65%, rgba(255,140,0,0.08) 0%, transparent 45%),
              radial-gradient(ellipse at 65% 65%, rgba(255,60,0,0.08) 0%, transparent 45%);
}
@keyframes bg-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}