/* ============================================================
   BOTTOLA AI — PAGE LOADER
   Colors are hard-coded (this file loads before variables.css)
   ============================================================ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #060d06;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .75s cubic-bezier(.4,0,.2,1), visibility .75s;
}

#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Animated grid ── */
.ldr-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,207,73,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,207,73,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: ldrGridDrift 24s linear infinite;
  pointer-events: none;
}

/* ── Central radial glow (div, not pseudo — avoids transform clash) ── */
.ldr-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,207,73,.09) 0%, transparent 68%);
  animation: ldrGlowBreath 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* ── Ping rings (radar effect) ── */
.ldr-ping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 1px solid rgba(99,207,73,.35);
  animation: ldrPing 2.8s ease-out infinite;
  pointer-events: none;
}
.ldr-ping:nth-child(2) { animation-delay: .9s;  }
.ldr-ping:nth-child(3) { animation-delay: 1.8s; }

/* ── Floating particles ── */
.ldr-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ldr-p {
  position: absolute;
  border-radius: 50%;
  background: #63cf49;
  opacity: 0;
  animation: ldrFloat var(--d, 6s) var(--dl, 0s) ease-in-out infinite;
}

/* ── Centre content ── */
.ldr-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ── Ring system ── */
.ldr-rings {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer: slow CCW dashed border */
.ldr-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(99,207,73,.18);
  animation: ldrSpinCCW 14s linear infinite;
}

/* Corner dots on outer ring */
.ldr-ring-outer::before,
.ldr-ring-outer::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(99,207,73,.5);
  top: -3px;
  left: 50%;
  margin-left: -3px;
}
.ldr-ring-outer::after {
  top: auto;
  bottom: -3px;
}

/* Middle: medium CW, two-tone arc */
.ldr-ring-mid {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #63cf49;
  border-right-color: rgba(99,207,73,.35);
  box-shadow: 0 0 14px rgba(99,207,73,.15);
  animation: ldrSpinCW 3.2s linear infinite;
}

/* Inner: fast CW, bright arc */
.ldr-ring-inner {
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: #7cff35;
  border-left-color: rgba(124,255,53,.4);
  animation: ldrSpinCW 1.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(124,255,53,.7));
}

/* Orbiting dots */
.ldr-orbit {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  animation: ldrSpinCW var(--spd, 3.2s) linear infinite;
}
.ldr-orbit:nth-child(2) {
  --spd: 5s;
  inset: 6px;
  animation-direction: reverse;
}

.ldr-orbit-dot {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7cff35;
  box-shadow: 0 0 10px #7cff35, 0 0 20px rgba(124,255,53,.5);
}
.ldr-orbit:nth-child(2) .ldr-orbit-dot {
  bottom: -4px;
  top: auto;
  width: 5px;
  height: 5px;
  background: rgba(99,207,73,.75);
  box-shadow: 0 0 6px rgba(99,207,73,.8);
}

/* Logo */
.ldr-logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ldr-logo {
  width: 66px;
  height: 66px;
  object-fit: contain;
  animation: ldrLogoBeat 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(99,207,73,.65));
}

.ldr-logo-halo {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,207,73,.18) 0%, transparent 72%);
  animation: ldrHaloPulse 2.4s ease-in-out infinite;
}

/* ── Brand name ── */
.ldr-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .14em;
  display: flex;
  align-items: baseline;
  gap: 1px;
  animation: ldrSlideUp .7s .3s ease both;
}

.ldr-brand-main {
  color: #e8f5e9;
}

.ldr-brand-accent {
  background: linear-gradient(135deg, #7cff35, #43d61a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ldrGlitch 5s 2.5s ease-in-out infinite;
}

/* ── Tagline ── */
.ldr-tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(99,207,73,.5);
  animation: ldrSlideUp .7s .55s ease both;
}

/* ── Status message ── */
.ldr-status {
  font-family: 'Montserrat', sans-serif;
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(154,184,154,.55);
  min-height: 1.4em;
  transition: opacity .25s ease;
  animation: ldrSlideUp .6s .8s ease both;
}

/* ── Progress ── */
.ldr-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 220px;
  animation: ldrSlideUp .6s 1s ease both;
}

.ldr-progress-track {
  width: 100%;
  height: 2px;
  background: rgba(99,207,73,.1);
  border-radius: 2px;
  overflow: visible;
  position: relative;
}

.ldr-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #43d61a, #7cff35);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(124,255,53,.7), 0 0 20px rgba(124,255,53,.3);
  transition: width .12s ease;
  position: relative;
}

/* Glowing tip on progress bar */
.ldr-progress-fill::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7cff35;
  box-shadow: 0 0 8px #7cff35, 0 0 16px rgba(124,255,53,.7);
}

.ldr-progress-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.ldr-percent {
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  color: #63cf49;
  letter-spacing: .04em;
}

.ldr-step {
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  color: rgba(99,207,73,.35);
  letter-spacing: .06em;
}

/* ── Keyframes ── */
@keyframes ldrSpinCW  { to { transform: rotate(360deg);  } }
@keyframes ldrSpinCCW { to { transform: rotate(-360deg); } }

@keyframes ldrLogoBeat {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 14px rgba(99,207,73,.65)); }
  50%       { transform: scale(1.07); filter: drop-shadow(0 0 24px rgba(124,255,53,.9)); }
}

@keyframes ldrHaloPulse {
  0%, 100% { opacity: .7; transform: scale(1);   }
  50%       { opacity: 1;  transform: scale(1.18); }
}

@keyframes ldrGlowBreath {
  0%, 100% { opacity: .7; transform: scale(1);   }
  50%       { opacity: 1;  transform: scale(1.12); }
}

@keyframes ldrPing {
  0%   { transform: scale(.4); opacity: .7; }
  100% { transform: scale(2.8); opacity: 0;  }
}

@keyframes ldrFloat {
  0%         { opacity: 0;  transform: translate(0,0)           scale(.6); }
  15%, 85%   { opacity: .7; }
  100%       { opacity: 0;  transform: translate(var(--tx,0px), var(--ty,-60px)) scale(1.3); }
}

@keyframes ldrSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ldrGlitch {
  0%, 80%, 100% { transform: none; filter: none; }
  81%  { transform: translate(-3px, 0) skewX(-6deg); filter: hue-rotate(90deg); }
  83%  { transform: translate(3px, 0)  skewX(6deg);  filter: hue-rotate(-90deg); }
  85%  { transform: translate(-2px, 1px); filter: hue-rotate(45deg); }
  87%  { transform: none; filter: none; }
}

@keyframes ldrGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}