/* ============================================================
   PackBuddy Preloader – Black Hole / Hero Orbit Animation
   ============================================================ */

#preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: #060d18;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .8s ease, transform .8s ease;
  overflow: hidden;
}
#preloader.pl-done {
  opacity: 0; pointer-events: none;
  transform: scale(1.06);
}

/* ── Deep-space starfield ── */
#preloader::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px   1px   at 12% 18%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 74% 12%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 44% 78%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 83% 52%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  8% 63%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 91% 82%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 33% 22%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 91%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px   1px   at 27% 88%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 66% 38%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px   1px   at 18% 44%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52%  6%, rgba(255,255,255,.50) 0%, transparent 100%);
  animation: starsTwinkle 4s ease-in-out infinite alternate;
}
#preloader::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 48%, rgba(255,107,53,.03) 0%, transparent 70%);
  animation: nebulaPulse 3s ease-in-out infinite alternate;
}

@keyframes starsTwinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}
@keyframes nebulaPulse {
  from { opacity: .5; transform: scale(.95); }
  to   { opacity: 1;  transform: scale(1.05); }
}

/* ── Brand name ── */
.pl-brand {
  font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
  font-size: 1.55rem; font-weight: 800; color: white;
  letter-spacing: -.02em; margin-bottom: 28px;
  animation: plFadeUp .8s ease both;
  position: relative; z-index: 3;
}
.pl-brand-accent { color: #FF6B35; }
.pl-brand sup {
  font-size: .5rem; vertical-align: super;
  color: rgba(255,255,255,.4); font-weight: 400;
}

/* ══════════════════════════════════════════
   UNIVERSE STAGE
══════════════════════════════════════════ */
.pl-universe {
  position: relative;
  width: 480px; height: 480px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Gravity rings ── */
.pl-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(255,107,53,.28);
  width: var(--r); height: var(--r);
  transform: translate(-50%, -50%);
  animation-name: ringBreath;
  animation-duration: var(--dur);
  animation-delay: var(--delay);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: var(--op);
}
@keyframes ringBreath {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50%     { transform: translate(-50%,-50%) scale(1.07); opacity: .6; }
}

/* ══════════════════════════════════════════
   CORE – The Black Hole
══════════════════════════════════════════ */
.pl-core {
  position: relative; z-index: 2;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #1d3055 0%, #06101e 55%, #020609 100%);
  box-shadow:
    0 0 0 3px  rgba(255,107,53,.18),
    0 0 35px   rgba(255,107,53,.24),
    0 0 80px   rgba(255,107,53,.08),
    inset 0 0 45px rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  animation: coreAppear .75s cubic-bezier(.34,1.56,.64,1) both,
             corePulse  2.8s .75s ease-in-out infinite;
}
@keyframes coreAppear {
  from { transform: scale(0) rotate(-90deg); opacity: 0; filter: blur(10px); }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; filter: blur(0); }
}
@keyframes corePulse {
  0%,100% {
    box-shadow: 0 0 0 3px rgba(255,107,53,.18), 0 0 35px rgba(255,107,53,.22), 0 0 80px rgba(255,107,53,.07), inset 0 0 45px rgba(0,0,0,.92);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(255,107,53,.28), 0 0 65px rgba(255,107,53,.42), 0 0 120px rgba(255,107,53,.18), inset 0 0 55px rgba(0,0,0,.96);
    transform: scale(1.05);
  }
}

/* Absorb burst – JS adds class ~1.6s */
.pl-core--absorb {
  animation: coreAbsorb .7s ease forwards !important;
}
@keyframes coreAbsorb {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.6);
         box-shadow: 0 0 0 30px rgba(255,107,53,.38), 0 0 100px rgba(255,107,53,.7), 0 0 180px rgba(255,107,53,.28), inset 0 0 60px rgba(0,0,0,.99); }
  55%  { transform: scale(.85);
         box-shadow: 0 0 0 5px rgba(255,107,53,.65), 0 0 50px rgba(255,107,53,.85); }
  75%  { transform: scale(1.08); }
  100% { transform: scale(1);
         box-shadow: 0 0 0 7px rgba(255,107,53,.5), 0 0 65px rgba(255,107,53,.55), 0 0 130px rgba(255,107,53,.22); }
}

/* Hero phase – JS adds class ~2.3s */
.pl-core--hero {
  animation: coreHeroPulse 2.6s ease-in-out infinite !important;
}
@keyframes coreHeroPulse {
  0%,100% {
    box-shadow: 0 0 0 6px rgba(255,107,53,.38), 0 0 55px rgba(255,107,53,.44), 0 0 110px rgba(255,107,53,.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(255,107,53,.60), 0 0 100px rgba(255,107,53,.75), 0 0 180px rgba(255,154,123,.30);
    transform: scale(1.07);
  }
}

/* ── Hero figure ── */
.pl-hero {
  font-size: 2.8rem; line-height: 1;
  opacity: 0; position: relative; z-index: 1;
}
.pl-hero--active {
  animation:
    heroEmerge 1s cubic-bezier(.34,1.56,.64,1) forwards,
    heroGlow   2.8s 1.1s ease-in-out infinite;
}
@keyframes heroGlow {
  0%,100% {
    filter: brightness(1.2) saturate(1.8);
    text-shadow: 0 0 18px rgba(255,255,255,.4), 0 0 36px rgba(255,107,53,.55), 0 0 70px rgba(255,107,53,.2);
  }
  50% {
    filter: brightness(1.7) saturate(3);
    text-shadow: 0 0 30px rgba(255,255,255,.7), 0 0 60px rgba(255,107,53,.85), 0 0 110px rgba(255,154,123,.45);
  }
}
@keyframes heroEmerge {
  0%   { transform: scale(0) rotate(-220deg); opacity: 0;
         filter: brightness(12) saturate(10) blur(8px); }
  22%  { transform: scale(2.8) rotate(40deg);  opacity: 1;
         filter: brightness(8) saturate(8) blur(0) hue-rotate(60deg);
         text-shadow: 0 0 50px #fff, 0 0 80px #FF6B35, 0 0 120px #FF9A7B; }
  45%  { transform: scale(1.5) rotate(18deg);  opacity: 1;
         filter: brightness(4) saturate(5) hue-rotate(20deg);
         text-shadow: 0 0 30px #fff, 0 0 60px #FF6B35; }
  68%  { transform: scale(.88) rotate(-8deg);  opacity: 1;
         filter: brightness(1.8) saturate(2.5);
         text-shadow: 0 0 20px rgba(255,107,53,.8); }
  100% { transform: scale(1) rotate(0);        opacity: 1;
         filter: brightness(1) saturate(1);
         text-shadow: 0 0 14px rgba(255,107,53,.4); }
}

/* ══════════════════════════════════════════
   HERO COLOR BURST
   JS adds .pl-hero-burst--active ~2.3s
══════════════════════════════════════════ */
.pl-hero-burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 5;
}
.pl-hero-burst::before,
.pl-hero-burst::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.pl-hero-burst--active::before {
  animation: heroBurst1 1s ease-out forwards;
}
.pl-hero-burst--active::after {
  animation: heroBurst2 1.3s .12s ease-out forwards;
}
@keyframes heroBurst1 {
  0%   { width: 80px; height: 80px; opacity: 1;
         background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,107,53,.85) 35%, rgba(255,154,123,0) 100%);
         box-shadow: 0 0 60px rgba(255,255,255,.8), 0 0 120px rgba(255,107,53,.9); }
  60%  { opacity: .5; }
  100% { width: 520px; height: 520px; opacity: 0;
         background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,107,53,0) 100%);
         box-shadow: none; }
}
@keyframes heroBurst2 {
  0%   { width: 50px; height: 50px; opacity: .9;
         border: 4px solid rgba(255,255,255,.95);
         box-shadow: 0 0 30px rgba(255,107,53,1), 0 0 80px rgba(255,154,123,.8), inset 0 0 20px rgba(255,255,255,.4); }
  40%  { border-color: rgba(255,107,53,.7);
         box-shadow: 0 0 60px rgba(255,107,53,.5), 0 0 120px rgba(255,107,53,.3); }
  100% { width: 480px; height: 480px; opacity: 0;
         border: 1px solid rgba(255,107,53,0);
         box-shadow: none; }
}

/* ══════════════════════════════════════════
   SUCTION PARTICLES
   --tx / --ty are pre-computed (cos/sin done in HTML)
══════════════════════════════════════════ */
.pl-particle {
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin-left: -23px; margin-top: -23px;
  font-size: 1.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  animation: particleSuck 1s cubic-bezier(.45,0,.85,.7) both;
  animation-delay: var(--dl);
  filter: drop-shadow(0 0 6px rgba(255,107,53,.45));
}
@keyframes particleSuck {
  0% {
    transform: translate(var(--tx), var(--ty)) scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255,107,53,.6));
  }
  55% {
    transform: translate(calc(var(--tx) * .18), calc(var(--ty) * .18)) scale(.45) rotate(240deg);
    opacity: .65;
    filter: drop-shadow(0 0 3px rgba(255,107,53,.3));
  }
  100% {
    transform: translate(0px, 0px) scale(0) rotate(450deg);
    opacity: 0;
    filter: drop-shadow(0 0 0px transparent) blur(8px);
  }
}

/* ══════════════════════════════════════════
   ORBIT
══════════════════════════════════════════ */
.pl-orbit-wrap {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  animation: orbitSpin 11s 2.3s linear infinite;
}
@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* --rot is a pre-computed angle set per element (0deg, 60deg, …, 300deg) */
.pl-orbit-icon {
  position: absolute;
  width: 44px; height: 44px;
  margin-left: -22px; margin-top: -22px;
  font-size: 1.55rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,107,53,.09);
  border: 1.5px solid rgba(255,107,53,.28);
  box-shadow: 0 0 10px rgba(255,107,53,.12), inset 0 0 6px rgba(255,107,53,.06);
  opacity: 0;
  transform: rotate(var(--rot)) translateX(175px) scale(0);
  animation: orbitIconIn .65s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(2.4s + var(--i) * .14s);
}
@keyframes orbitIconIn {
  from {
    opacity: 0;
    transform: rotate(var(--rot)) translateX(175px) scale(0);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: rotate(var(--rot)) translateX(175px) scale(1);
    filter: blur(0);
  }
}

/* ══════════════════════════════════════════
   STATUS TEXT
══════════════════════════════════════════ */
.pl-status {
  font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  margin-top: 32px; min-height: 1.4em;
  animation: plFadeUp .8s .3s ease both;
  position: relative; z-index: 3;
  transition: color .4s ease, opacity .35s ease;
}
.pl-status.pl-status--ready {
  color: #FF6B35;
  text-shadow: 0 0 16px rgba(255,107,53,.5);
}

/* ── Shared keyframe ── */
@keyframes plFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ── */
@media (max-width: 560px) {
  .pl-universe { transform: scale(.58); transform-origin: center; }
  .pl-brand    { margin-bottom: 10px; }
  .pl-status   { margin-top: 10px; }
}