/* ================================================================
   Headlight Heroes GMS — Screensaver & Preloader Animations
   ================================================================ */

/* ── KEYFRAMES ─────────────────────────────────────────────────── */

@keyframes ss-spin-slow    { to { transform: rotate(360deg); } }
@keyframes ss-spin-reverse { to { transform: rotate(-360deg); } }

@keyframes ss-float {
  0%   { transform: translateY(110vh) translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: .6; }
  100% { transform: translateY(-60px) translateX(var(--drift,0px)); opacity: 0; }
}

@keyframes ss-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(232,200,74,.15),
                0 0 50px rgba(232,200,74,.08),
                inset 0 0 20px rgba(232,200,74,.04);
  }
  50% {
    box-shadow: 0 0 50px rgba(232,200,74,.35),
                0 0 90px rgba(232,200,74,.18),
                inset 0 0 30px rgba(232,200,74,.10);
  }
}

@keyframes ss-shimmer {
  0%   { background-position: -300% center; }
  100% { background-position: 300% center; }
}

@keyframes ss-blink {
  0%, 100% { opacity: .7; }
  50% { opacity: .2; }
}

@keyframes ss-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ss-scale-in {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: 1; transform: none; }
}

@keyframes ss-bg-breathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.15); }
}

@keyframes ss-scan-line {
  0%   { top: -4px; }
  100% { top: 100%; }
}

@keyframes pl-spin {
  to { transform: rotate(360deg); }
}

@keyframes pl-progress {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

@keyframes pl-dot {
  0%, 80%, 100% { transform: scale(0); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes pl-logo-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(232,200,74,.3)); }
  50%       { transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(232,200,74,.6)); }
}

/* ── SCREENSAVER OVERLAY ────────────────────────────────────────── */

.ss-overlay {
  position: fixed; inset: 0;
  z-index: 8800;
  background: #05050700;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .9s ease, background .9s ease;
  overflow: hidden;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.ss-overlay.ss-active {
  opacity: 1; pointer-events: all;
  background: rgba(5,5,7,.97);
}

/* radial background glow */
.ss-bg-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%,
      rgba(232,200,74,.06) 0%, transparent 65%);
  animation: ss-bg-breathe 5s ease-in-out infinite;
}

/* subtle scan-line sweep */
.ss-scan {
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232,200,74,.06) 50%,
    transparent 100%);
  pointer-events: none;
  animation: ss-scan-line 10s linear infinite;
  z-index: 1;
}

/* particles */
.ss-particles { position: absolute; inset: 0; pointer-events: none; }
.ss-particle {
  position: absolute; bottom: -10px;
  border-radius: 50%;
  background: var(--accent, #e8c84a);
  animation: ss-float linear infinite;
  will-change: transform, opacity;
}

/* live clock */
.ss-clock {
  position: absolute; top: 28px; right: 36px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; letter-spacing: 3px;
  color: rgba(232,200,74,.45);
  z-index: 3;
  animation: ss-fade-in-up .6s 1.2s both;
}

/* ── CENTER CONTENT ── */
.ss-center {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center;
}

/* Logo / ring assembly */
.ss-logo-area {
  position: relative;
  width: 170px; height: 170px;
  margin-bottom: 36px;
  animation: ss-scale-in .7s cubic-bezier(.34,1.3,.64,1) .1s both;
}

.ss-ring-outer {
  position: absolute; inset: 0;
  animation: ss-spin-slow 5s linear infinite;
}
.ss-ring-middle {
  position: absolute; inset: 14px;
  animation: ss-spin-reverse 8s linear infinite;
}

.ss-logo-circle {
  position: absolute; inset: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,200,74,.12) 0%, rgba(232,200,74,.03) 100%);
  border: 1px solid rgba(232,200,74,.25);
  display: flex; align-items: center; justify-content: center;
  animation: ss-glow-pulse 3.5s ease-in-out infinite;
  overflow: hidden;
}
.ss-logo-circle img {
  width: 65px; height: 65px; object-fit: contain;
  animation: pl-logo-pulse 4s ease-in-out infinite;
}
.ss-logo-icon {
  font-size: 38px;
  color: var(--accent, #e8c84a);
  animation: pl-logo-pulse 4s ease-in-out infinite;
}

/* Business name — gold shimmer */
.ss-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: 10px;
  background: linear-gradient(90deg,
    rgba(232,200,74,.5) 0%,
    #ffe37a 25%,
    #e8c84a 40%,
    #fff8d8 55%,
    #e8c84a 70%,
    rgba(232,200,74,.5) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ss-shimmer 5s linear infinite, ss-fade-in-up .7s .35s both;
  text-align: center;
  max-width: 90vw;
}

.ss-divider {
  width: 100px; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(232,200,74,.6), transparent);
  margin: 14px auto 16px;
  animation: ss-fade-in-up .7s .55s both;
}

.ss-tagline {
  font-size: 12px; letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  animation: ss-fade-in-up .7s .7s both;
  text-align: center;
}

/* Wake hint at bottom */
.ss-wake {
  position: absolute; bottom: 30px;
  font-size: 11px; letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
  animation: ss-blink 2.8s ease-in-out infinite;
  z-index: 3; text-align: center;
  user-select: none;
}

/* Corner badge — optional */
.ss-corner {
  position: absolute; bottom: 28px; left: 36px;
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(232,200,74,.18);
  z-index: 3;
  animation: ss-fade-in-up .7s 1.5s both;
}

/* ── LOGIN PRELOADER OVERLAY ─────────────────────────────────────── */

.pl-overlay {
  position: fixed; inset: 0; z-index: 9700;
  background: #0b0b0d;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
  font-family: 'DM Sans', sans-serif;
}
.pl-overlay.pl-active {
  opacity: 1; pointer-events: all;
}

/* Outer spinning SVG ring */
.pl-ring-wrap {
  position: relative;
  width: 96px; height: 96px;
  margin-bottom: 32px;
}
.pl-ring-svg {
  position: absolute; inset: 0;
  animation: pl-spin 1.4s linear infinite;
}
.pl-ring-svg-rev {
  position: absolute; inset: 10px;
  animation: pl-spin 2.5s linear infinite reverse;
}
.pl-logo-circle {
  position: absolute; inset: 20px;
  border-radius: 50%;
  background: rgba(232,200,74,.07);
  border: 1px solid rgba(232,200,74,.22);
  display: flex; align-items: center; justify-content: center;
  animation: ss-glow-pulse 1.8s ease-in-out infinite;
}
.pl-logo-circle img   { width: 36px; height: 36px; object-fit: contain; }
.pl-logo-circle i     { font-size: 22px; color: var(--accent, #e8c84a); }

/* Name */
.pl-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px; letter-spacing: 6px;
  color: var(--accent, #e8c84a);
  margin-bottom: 6px; text-align: center;
}
.pl-sub {
  font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 32px; text-align: center;
}

/* Three-dot loader */
.pl-dots {
  display: flex; gap: 7px; align-items: center;
  margin-bottom: 24px;
}
.pl-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #e8c84a);
  display: inline-block;
  animation: pl-dot 1.4s ease-in-out infinite;
}
.pl-dots span:nth-child(1) { animation-delay: 0s; }
.pl-dots span:nth-child(2) { animation-delay: .18s; }
.pl-dots span:nth-child(3) { animation-delay: .36s; }

/* Progress sweep bar */
.pl-bar {
  width: 180px; height: 2px;
  background: rgba(255,255,255,.05);
  border-radius: 2px; overflow: hidden;
}
.pl-bar-fill {
  height: 100%; width: 55%;
  background: linear-gradient(90deg,
    transparent, var(--accent, #e8c84a), rgba(232,200,74,.3), transparent);
  animation: pl-progress 1.6s ease-in-out infinite;
}

/* Status text */
.pl-status {
  margin-top: 20px;
  font-size: 11px; letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
}