/* ============================================================
   TELGEC Preloader — telgec-preloader.css
   ============================================================ */

:root {
  --telgec-orange:       #FE5904;
  --telgec-orange-soft:  #ff7a30;
  --telgec-orange-pale:  #ffd0a8;
  --telgec-blue:         #4ab4ff;
  --telgec-purple:       #9a6bff;
  --telgec-cycle:        10s;
}

/* Preloader overlay */
#telgec-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(254,89,4,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 50%, #0a0a18 0%, #03040a 50%, #000 100%);
  perspective: 1400px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #fff;
}

/* Hide preloader after page loads */
#telgec-preloader.telgec-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

#telgec-preloader .bg-canvas,
#telgec-preloader .trails-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#telgec-preloader .bg-canvas { z-index: 1; }

#telgec-preloader .stage {
  position: relative;
  width: min(560px, 90vw);
  height: min(560px, 90vw);
  z-index: 2;
  display: grid;
  place-items: center;
}

/* ========== UNIVERSE ========== */
#telgec-preloader .universe {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: telgec-universe-cycle var(--telgec-cycle) cubic-bezier(.4,0,.2,1) infinite;
}

#telgec-preloader .universe .trails-canvas { z-index: 2; }

@keyframes telgec-universe-cycle {
  0%   { opacity: 0; transform: scale(0.4);  filter: blur(28px) brightness(0.6); }
  4%   { opacity: 0; transform: scale(0.45); filter: blur(24px) brightness(0.7); }
  18%  { opacity: 1; transform: scale(1);    filter: blur(0)    brightness(1); }
  55%  { opacity: 1; transform: scale(1);    filter: blur(0)    brightness(1); }
  62%  { opacity: 0.85; transform: scale(0.55); filter: blur(10px) brightness(1.6); }
  68%  { opacity: 0; transform: scale(0.05); filter: blur(24px) brightness(2); }
  100% { opacity: 0; transform: scale(0.05); filter: blur(24px) brightness(0.6); }
}

/* Outer ring */
#telgec-preloader .ring {
  position: absolute;
  width: 92%;
  height: 92%;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}

#telgec-preloader .ring img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(254,89,4,0.85))
    drop-shadow(0 0 50px rgba(254,89,4,0.45))
    drop-shadow(0 0 100px rgba(254,89,4,0.25));
  animation: telgec-ring-breathe 4s ease-in-out infinite;
}

@keyframes telgec-ring-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 18px rgba(254,89,4,0.7))
      drop-shadow(0 0 50px rgba(254,89,4,0.35))
      drop-shadow(0 0 100px rgba(254,89,4,0.15));
  }
  50% {
    filter:
      drop-shadow(0 0 28px rgba(254,89,4,1))
      drop-shadow(0 0 80px rgba(254,89,4,0.55))
      drop-shadow(0 0 140px rgba(254,89,4,0.3));
  }
}

/* Central core */
#telgec-preloader .core {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  z-index: 4;
  box-shadow:
    0 0 8px #fff,
    0 0 20px var(--telgec-orange-soft),
    0 0 50px var(--telgec-orange),
    0 0 110px rgba(254,89,4,0.5);
  animation: telgec-core-pulse 2.4s ease-in-out infinite;
}

@keyframes telgec-core-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.6); opacity: 1; }
}

/* ========== ORBITS ========== */
#telgec-preloader .orbit {
  position: absolute;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  animation: telgec-orbit-spin var(--dur) linear infinite;
}

#telgec-preloader .orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(254,89,4,0.10);
  background:
    conic-gradient(
      from 270deg,
      rgba(254,89,4,0)    0%,
      rgba(254,89,4,0.5)  3%,
      rgba(254,89,4,0.0)  20%,
      rgba(254,89,4,0)   100%
    );
  -webkit-mask:
    radial-gradient(circle, transparent calc(50% - 1px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 1px));
          mask:
    radial-gradient(circle, transparent calc(50% - 1px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 1px));
}

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

#telgec-preloader .orbit-1 { width: 28%; height: 28%; --dur: 6s;  animation-delay: -1.0s; }
#telgec-preloader .orbit-2 { width: 42%; height: 42%; --dur: 9s;  animation-delay: -3.4s; animation-direction: reverse; }
#telgec-preloader .orbit-3 { width: 56%; height: 56%; --dur: 12s; animation-delay: -7.0s; }
#telgec-preloader .orbit-4 { width: 70%; height: 70%; --dur: 16s; animation-delay: -2.2s; animation-direction: reverse; }
#telgec-preloader .orbit-5 { width: 84%; height: 84%; --dur: 22s; animation-delay: -11.0s; }

#telgec-preloader .planet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, var(--p-hi, #fff), var(--p, var(--telgec-orange)) 65%, transparent 100%);
  box-shadow:
    0 0 10px var(--p, var(--telgec-orange)),
    0 0 24px var(--p, var(--telgec-orange)),
    0 0 60px var(--p, rgba(254,89,4,0.3));
}

#telgec-preloader .planet::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--p, var(--telgec-orange)) 0%, transparent 65%);
  opacity: 0.5;
  animation: telgec-planet-halo 3s ease-in-out infinite;
}

@keyframes telgec-planet-halo {
  0%, 100% { transform: scale(1);   opacity: 0.35; }
  50%      { transform: scale(1.4); opacity: 0.7; }
}

#telgec-preloader .orbit-1 .planet { --p: var(--telgec-orange);  --p-hi: var(--telgec-orange-pale); width: 12px; height: 12px; }
#telgec-preloader .orbit-2 .planet { --p: var(--telgec-blue);    --p-hi: #d4ecff;                   width: 11px; height: 11px; }
#telgec-preloader .orbit-3 .planet { --p: var(--telgec-purple);  --p-hi: #e4d6ff;                   width: 16px; height: 16px; }
#telgec-preloader .orbit-4 .planet { --p: var(--telgec-orange);  --p-hi: var(--telgec-orange-pale); width: 13px; height: 13px; }
#telgec-preloader .orbit-5 .planet { --p: var(--telgec-blue);    --p-hi: #d4ecff;                   width: 14px; height: 14px; }

@keyframes telgec-planet-spotlight {
  0%   { transform: translate(-50%, -50%) scale(1);   filter: brightness(1) saturate(1); }
  2%   { transform: translate(-50%, -50%) scale(1.7); filter: brightness(1.7) saturate(1.4); }
  6%   { transform: translate(-50%, -50%) scale(1.7); filter: brightness(1.7) saturate(1.4); }
  8%   { transform: translate(-50%, -50%) scale(1);   filter: brightness(1) saturate(1); }
  100% { transform: translate(-50%, -50%) scale(1);   filter: brightness(1) saturate(1); }
}

#telgec-preloader .orbit-1 .planet { animation: telgec-planet-spotlight var(--telgec-cycle) ease-in-out infinite; animation-delay: 1.8s; }
#telgec-preloader .orbit-2 .planet { animation: telgec-planet-spotlight var(--telgec-cycle) ease-in-out infinite; animation-delay: 2.6s; }
#telgec-preloader .orbit-3 .planet { animation: telgec-planet-spotlight var(--telgec-cycle) ease-in-out infinite; animation-delay: 3.4s; }
#telgec-preloader .orbit-4 .planet { animation: telgec-planet-spotlight var(--telgec-cycle) ease-in-out infinite; animation-delay: 4.2s; }
#telgec-preloader .orbit-5 .planet { animation: telgec-planet-spotlight var(--telgec-cycle) ease-in-out infinite; animation-delay: 5.0s; }

/* ========== BRAND REVEAL ========== */
#telgec-preloader .brand {
  position: absolute;
  z-index: 5;
  opacity: 0;
  animation: telgec-brand-cycle var(--telgec-cycle) cubic-bezier(.2,.7,.2,1) infinite;
  will-change: transform, opacity, filter;
}

#telgec-preloader .brand img {
  display: block;
  width: clamp(220px, 38vw, 360px);
  height: auto;
  filter:
    drop-shadow(0 0 22px rgba(254,89,4,0.85))
    drop-shadow(0 0 60px rgba(254,89,4,0.45));
}

@keyframes telgec-brand-cycle {
  0%   { opacity: 0; transform: translateY(28px) scale(0.86); filter: blur(22px); }
  60%  { opacity: 0; transform: translateY(28px) scale(0.86); filter: blur(22px); }
  68%  { opacity: 1; transform: translateY(4px)  scale(1.02); filter: blur(2px); }
  74%  { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
  92%  { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: translateY(-6px) scale(1.04); filter: blur(8px); }
}

/* ========== LENS FLARE ========== */
#telgec-preloader .flare {
  position: absolute;
  width: 0;
  height: 2px;
  z-index: 6;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(254,89,4,0) 25%,
    rgba(255,220,180,0.95) 48%,
    #fff 50%,
    rgba(255,220,180,0.95) 52%,
    rgba(254,89,4,0) 75%,
    transparent 100%);
  filter: blur(1px) drop-shadow(0 0 12px #ffb37a);
  opacity: 0;
  animation: telgec-flare-cycle var(--telgec-cycle) cubic-bezier(.4,0,.15,1) infinite;
  pointer-events: none;
}

@keyframes telgec-flare-cycle {
  0%, 64%   { opacity: 0; width: 0; }
  66%       { opacity: 1; width: 80%; }
  72%       { opacity: 1; width: 95%; }
  80%       { opacity: 0; width: 100%; }
  100%      { opacity: 0; width: 0; }
}

/* ========== SERVICES ========== */
#telgec-preloader .services {
  position: absolute;
  top: 9vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  height: 1.6em;
  width: min(560px, 88vw);
  pointer-events: none;
}

#telgec-preloader .service {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 8px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  opacity: 0;
  filter: blur(8px);
  text-shadow: 0 0 18px var(--c, var(--telgec-orange));
  animation: telgec-service-flash var(--telgec-cycle) ease-out infinite both;
}

#telgec-preloader .service .idx {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 2px;
  margin-right: 14px;
  padding: 2px 6px;
  border: 1px solid var(--c, var(--telgec-orange));
  color: var(--c, var(--telgec-orange));
  vertical-align: middle;
  border-radius: 2px;
  opacity: 0.85;
}

#telgec-preloader .service:nth-child(1) { animation-delay: 1.8s; --c: var(--telgec-orange); }
#telgec-preloader .service:nth-child(2) { animation-delay: 2.6s; --c: var(--telgec-blue); }
#telgec-preloader .service:nth-child(3) { animation-delay: 3.4s; --c: var(--telgec-purple); }
#telgec-preloader .service:nth-child(4) { animation-delay: 4.2s; --c: var(--telgec-orange); }
#telgec-preloader .service:nth-child(5) { animation-delay: 5.0s; --c: var(--telgec-blue); }

@keyframes telgec-service-flash {
  0%   { opacity: 0; filter: blur(10px); transform: translate(-50%, 10px); letter-spacing: 8px; }
  2%   { opacity: 1; filter: blur(0);    transform: translate(-50%, 0);    letter-spacing: 4px; }
  6%   { opacity: 1; filter: blur(0);    transform: translate(-50%, 0);    letter-spacing: 4px; }
  8%   { opacity: 0; filter: blur(8px);  transform: translate(-50%, -10px); letter-spacing: 6px; }
  100% { opacity: 0; }
}

/* ========== TAGLINE ========== */
#telgec-preloader .tagline {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  z-index: 5;
  opacity: 0;
  animation: telgec-tagline-cycle var(--telgec-cycle) ease-out infinite;
  white-space: nowrap;
}

#telgec-preloader .tagline span { color: var(--telgec-orange-soft); }

@keyframes telgec-tagline-cycle {
  0%, 72%   { opacity: 0; transform: translate(-50%, 6px); }
  82%       { opacity: 1; transform: translate(-50%, 0); }
  92%       { opacity: 1; transform: translate(-50%, 0); }
  100%      { opacity: 0; transform: translate(-50%, -4px); }
}

/* Vignette */
#telgec-preloader::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 50%, rgba(0,0,0,0.7) 100%);
  z-index: 7;
}

@media (prefers-reduced-motion: reduce) {
  #telgec-preloader .universe,
  #telgec-preloader .brand,
  #telgec-preloader .flare,
  #telgec-preloader .tagline,
  #telgec-preloader .services,
  #telgec-preloader .service,
  #telgec-preloader .ring img,
  #telgec-preloader .core,
  #telgec-preloader .orbit,
  #telgec-preloader .planet,
  #telgec-preloader .planet::after {
    animation: none !important;
  }
  #telgec-preloader .universe,
  #telgec-preloader .brand,
  #telgec-preloader .tagline { opacity: 1; }
  #telgec-preloader .brand { filter: none; transform: none; }
  #telgec-preloader .service { opacity: 0; }
  #telgec-preloader .service:nth-child(1) {
    opacity: 1; filter: none;
    transform: translate(-50%, 0);
    letter-spacing: 4px;
  }
}