/* ═══════════════════════════════════════════════
   DESHAFO — Premium Logo Loader
   ═══════════════════════════════════════════════ */

#page-loader {
  position: fixed;
  inset: 0;
  background: #060F08;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow: hidden;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.1s;
}

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

/* ── Atmospheric background orbs ── */
.ldr-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.ldr-orb--a {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(15,106,60,0.28) 0%, transparent 65%);
  top: -160px; left: -170px;
  animation: orb-drift-a 11s ease-in-out infinite alternate;
}
.ldr-orb--b {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(217,178,76,0.11) 0%, transparent 65%);
  bottom: -90px; right: -110px;
  animation: orb-drift-b 14s ease-in-out infinite alternate;
}
.ldr-orb--c {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(15,106,60,0.18) 0%, transparent 65%);
  top: 60%; right: 5%;
  animation: orb-drift-a 9s ease-in-out 2s infinite alternate-reverse;
}

@keyframes orb-drift-a {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(45px,35px) scale(1.18); }
}
@keyframes orb-drift-b {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-35px,-25px) scale(1.12); }
}

/* ── Subtle grain overlay ── */
#page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028;
  pointer-events: none;
  z-index: 0;
}

/* ── Center stage ── */
.ldr-stage {
  position: relative;
  width: 216px;
  height: 216px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* ── Ripple rings ── */
.ldr-ripple {
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(217,178,76,0.45);
  animation: ripple-expand 3s ease-out infinite;
  pointer-events: none;
}
.ldr-ripple--1 { animation-delay: 0s; }
.ldr-ripple--2 { animation-delay: 1s; }
.ldr-ripple--3 { animation-delay: 2s; }

@keyframes ripple-expand {
  0%   { transform: scale(1);   opacity: 0.65; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ── Orbital ring (SVG) ── */
.ldr-orbital {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  animation: orbital-spin 2.4s linear infinite;
  transform-origin: 50% 50%;
}

.ldr-track {
  fill: none;
  stroke: rgba(217,178,76,0.06);
  stroke-width: 1;
}

/* Wide soft glow tail */
.ldr-comet--glow {
  fill: none;
  stroke: rgba(217,178,76,0.18);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 100 466;
}

/* Bright main arc */
.ldr-comet--arc {
  fill: none;
  stroke: #D9B24C;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 55 511;
  filter: drop-shadow(0 0 5px rgba(217,178,76,0.9)) drop-shadow(0 0 12px rgba(217,178,76,0.4));
}

/* Tiny bright head dot at tip */
.ldr-comet--tip {
  fill: none;
  stroke: #F5E27A;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 4 562;
  filter: drop-shadow(0 0 7px rgba(245,226,122,1));
}

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

/* ── Outer decorative ring (static, slow counter-rotate) ── */
.ldr-outer-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(217,178,76,0.15);
  border-right-color: rgba(217,178,76,0.08);
  animation: outer-ring-spin 18s linear infinite reverse;
}

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

/* ── Logo wrapper ── */
.ldr-logo-wrap {
  position: relative;
  width: 118px;
  height: 118px;
  z-index: 2;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: logo-entrance 1.05s cubic-bezier(0.34, 1.45, 0.64, 1) both 0.15s;
}

@keyframes logo-entrance {
  0%   { transform: scale(0.4) translateY(28px) rotate(-8deg);  opacity: 0; filter: blur(12px); }
  60%  { transform: scale(1.08) translateY(-5px) rotate(2deg);  filter: blur(0); }
  100% { transform: scale(1) translateY(0) rotate(0deg);        opacity: 1; }
}

.ldr-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

/* Gold pulse border */
.ldr-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(217,178,76,0.22);
  animation: border-pulse 2.4s ease-in-out infinite;
}

@keyframes border-pulse {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.04); box-shadow: 0 0 18px 4px rgba(217,178,76,0.18); }
}

/* Deep green halo behind logo */
.ldr-logo-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,78,45,0.7) 35%, rgba(15,106,60,0.3) 65%, transparent 80%);
  z-index: -1;
  animation: halo-breathe 2.4s ease-in-out infinite;
}

@keyframes halo-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%       { transform: scale(1.2);  opacity: 1; }
}

/* Gold shimmer sweep across logo face */
.ldr-logo-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.ldr-logo-shine::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: linear-gradient(
    108deg,
    transparent 22%,
    rgba(255,255,255,0.18) 42%,
    rgba(255,255,255,0.06) 50%,
    transparent 68%
  );
  animation: shine-sweep 3.2s ease-in-out infinite;
}

@keyframes shine-sweep {
  0%, 100% { transform: translateX(-130%) rotate(0deg); }
  40%, 60% { transform: translateX(130%)  rotate(0deg); }
}

/* ── Tagline ── */
.ldr-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(217,178,76,0.62);
  margin: 0;
  text-align: center;
  z-index: 1;
  opacity: 0;
  animation: fade-up 0.9s ease forwards 0.85s;
}
.ldr-tagline em {
  font-style: normal;
  font-weight: 700;
  color: rgba(240,213,122,0.88);
  letter-spacing: 0.12em;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading dots ── */
.ldr-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 1;
  opacity: 0;
  animation: fade-up 0.7s ease forwards 1.2s;
}
.ldr-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(217,178,76,0.45);
  animation: dot-wave 1.6s ease-in-out infinite;
}
.ldr-dots span:nth-child(1) { animation-delay: 0s; }
.ldr-dots span:nth-child(2) { animation-delay: 0.22s; }
.ldr-dots span:nth-child(3) { animation-delay: 0.44s; }
.ldr-dots span:nth-child(4) { animation-delay: 0.66s; }
.ldr-dots span:nth-child(5) { animation-delay: 0.88s; }

@keyframes dot-wave {
  0%, 100% { transform: scale(0.55); opacity: 0.28; background: rgba(217,178,76,0.4); }
  50%       { transform: scale(1.5);  opacity: 1;    background: #F0D57A;
              box-shadow: 0 0 8px rgba(240,213,122,0.8); }
}