/* --- Page Loader -------------------------------------------------- */
#page-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: radial-gradient(ellipse at center, #171a22 0%, #0b0d12 70%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  overflow: hidden;
}

/* Ambient particles */
#page-loader .particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#page-loader .particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #d6c296;
  opacity: 0;
  animation: ldr-particle-float linear infinite;
}
@keyframes ldr-particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(-120px) scale(0); }
}

/* Orbit ring */
#page-loader .orbit-ring {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px dashed rgba(214,194,150,0.12);
  animation: ldr-orbit-rotate 30s linear infinite;
}
@keyframes ldr-orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Social icons */
#page-loader .social-float-container {
  position: absolute;
  width: 320px; height: 320px;
  pointer-events: none;
}
#page-loader .social-icon {
  position: absolute;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(214,194,150,0.08);
  border: 1px solid rgba(214,194,150,0.25);
  backdrop-filter: blur(4px);
  animation: ldr-icon-float 4s ease-in-out infinite;
}
#page-loader .social-icon svg {
  width: 20px; height: 20px;
  fill: #d6c296;
  flex-shrink: 0;
}
#page-loader .icon-tiktok svg,
#page-loader .icon-snapchat svg,
#page-loader .icon-facebook svg,
#page-loader .icon-x svg {
  fill: #ffffff;
}

/* Icon positions (8 icons, every 45°, R=160px) */
#page-loader .icon-tiktok    { top: -22px;   left: 138px;  animation-delay: 0.3s; }
#page-loader .icon-youtube   { top: 25px;    right: 13px;  animation-delay: 1.0s; }
#page-loader .icon-x         { top: 138px;   right: -22px; animation-delay: 1.1s; }
#page-loader .icon-instagram { bottom: 25px; right: 13px;  animation-delay: 0.7s; }
#page-loader .icon-facebook  { bottom: -22px;left: 138px;  animation-delay: 2.4s; }
#page-loader .icon-whatsapp  { bottom: 25px; left: 13px;   animation-delay: 1.7s; }
#page-loader .icon-snapchat  { top: 138px;   left: -22px;  animation-delay: 2.0s; }
#page-loader .icon-linkedin  { top: 25px;    left: 13px;   animation-delay: 0s;   }

@keyframes ldr-icon-float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 0 0px rgba(214,194,150,0); }
  50%      { transform: translateY(-10px); box-shadow: 0 6px 20px rgba(214,194,150,0.2); }
}

/* Spinner */
#page-loader .spinner-wrap {
  position: relative;
  width: 100px; height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-loader .ring-outer {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #d6c296;
  border-bottom-color: rgba(214,194,150,0.3);
  animation: ldr-spin 2.4s cubic-bezier(0.4,0,0.2,1) infinite;
  box-shadow: 0 0 18px rgba(214,194,150,0.3);
}
#page-loader .ring-mid {
  position: absolute; inset: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-left-color: #e9e3d6;
  border-right-color: rgba(233,227,214,0.2);
  animation: ldr-spin 1.6s cubic-bezier(0.4,0,0.2,1) infinite reverse;
}
#page-loader .ring-inner {
  position: absolute; inset: 28px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: #d6c296;
  border-bottom-color: rgba(214,194,150,0.4);
  animation: ldr-spin 1s linear infinite;
}
#page-loader .center-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #d6c296 0%, rgba(214,194,150,0.4) 100%);
  box-shadow: 0 0 12px rgba(214,194,150,0.6), 0 0 24px rgba(214,194,150,0.2);
  animation: ldr-pulse-dot 1.5s ease-in-out infinite;
}
@keyframes ldr-pulse-dot {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 10px rgba(214,194,150,0.5); }
  50%      { transform: scale(1.25); box-shadow: 0 0 22px rgba(214,194,150,0.9); }
}
@keyframes ldr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Brand text */
#page-loader .brand-block {
  margin-top: 28px;
  text-align: center;
}
#page-loader .elite-title {
  color: #d6c296;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 600;
  animation: ldr-pulse-text 2s ease-in-out infinite;
}
#page-loader .elite-sub {
  margin-top: 6px;
  color: rgba(233,227,214,0.35);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
@keyframes ldr-pulse-text {
  0%, 100% { opacity: 0.6; text-shadow: none; }
  50%      { opacity: 1;   text-shadow: 0 0 12px rgba(214,194,150,0.5); }
}

/* Progress bar */
#page-loader .progress-bar-wrap {
  margin-top: 22px;
  width: 160px; height: 2px;
  background: rgba(233,227,214,0.08);
  border-radius: 2px;
  overflow: hidden;
}
#page-loader .progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(214,194,150,0.4), #d6c296, rgba(214,194,150,0.4));
  border-radius: 2px;
  animation: ldr-progress 1.2s ease-in-out forwards;
}
@keyframes ldr-progress {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

/* Hide state */
#page-loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
}