/* ============================================================
   SOCIAL SPARKS ADVENTURES — Keyframe Animations & Hero Master Sequence
   ============================================================ */

/* ─── Preloader Screen ─── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #120B04;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__sun {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #F4A623 0%, #E8731A 70%, transparent 100%);
  box-shadow: 0 0 50px rgba(244,166,35,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: preloaderPulse 1.8s ease-in-out infinite alternate;
  margin-bottom: 1.5rem;
}
.preloader__sun img { height: 48px; width: auto; }
.preloader__text {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: #F5EDD8;
  letter-spacing: 0.05em;
}
.preloader__progress {
  width: 140px; height: 3px;
  background: rgba(245,237,216,0.15);
  border-radius: 3px;
  margin-top: 1rem;
  overflow: hidden;
  position: relative;
}
.preloader__bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(to right, #E8731A, #F4A623);
  transition: width 0.3s ease;
}

@keyframes preloaderPulse {
  0% { transform: scale(0.92); box-shadow: 0 0 30px rgba(232,115,26,0.4); }
  100% { transform: scale(1.08); box-shadow: 0 0 70px rgba(244,166,35,0.8); }
}

/* ─── Hero Stage Animations ─── */

/* 1. Atmospheric Horizon Glow */
@keyframes horizonGlow {
  0%   { opacity: 0; transform: scaleY(0.4); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* 2. Signature Sun Rise */
@keyframes signatureSunRise {
  0% {
    transform: translateY(180px) scale(0.65);
    filter: brightness(0.7) opacity(0);
  }
  40% {
    filter: brightness(1.1) opacity(0.9);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) opacity(1);
  }
}

/* 3. Golden Sun Rays Expansion */
@keyframes raysExpand {
  0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
  50%  { opacity: 0.6; }
  100% { transform: rotate(15deg) scale(1.15); opacity: 0.35; }
}

/* 4. Silhouettes & Acacia Reveal */
@keyframes silhouetteReveal {
  0%   { opacity: 0; transform: translateY(20px); filter: contrast(0.5); }
  100% { opacity: 1; transform: translateY(0); filter: contrast(1); }
}

/* 5. Safari Vehicle Position Drift */
@keyframes vehicleEnter {
  0%   { transform: translateX(45px) scale(0.97); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* 6. Flying Birds Sweep */
@keyframes birdFlyAcross {
  0%   { transform: translate(-100px, 20px); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translate(calc(100vw + 100px), -60px); opacity: 0; }
}

/* 7. Typography Hand-painted Stagger Entry */
@keyframes brushTextEnter {
  0% {
    opacity: 0;
    transform: translateY(35px) rotate(-1.5deg) scale(0.92);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}

/* 8. 1 YEAR Big Display Zoom Reveal */
@keyframes yearNumEnter {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(40px);
    letter-spacing: -0.05em;
  }
  70% {
    transform: scale(1.04) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    letter-spacing: 0.02em;
  }
}

/* 9. Ceremonial Medallion Seal Rotation & Scale */
@keyframes medallionSealEnter {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-25deg);
  }
  70% {
    transform: scale(1.08) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* 10. Medallion Outer Ring Continuous Rotation */
@keyframes medallionRingSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 11. Floating Hand-drawn Accents */
@keyframes handDrawFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}

/* 12. Torn Edge Wave Drift */
@keyframes tornEdgeDrift {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.04); }
}