/* ══════════════════════════════════════════════
   MALWA EXPERIENCE — CINEMATIC LOADER
   Anti-Gravity Golden Heritage Animation
══════════════════════════════════════════════ */

/* ─── Loader Container ─── */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a0e00 0%, #0d0700 55%, #050200 100%);
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.loader-screen.fade-out {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(12px);
  pointer-events: none;
}

.loader-screen.hidden {
  display: none;
}

/* ─── Ambient Background Layers ─── */
.loader-bg-glow {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(600px circle at 50% 45%, rgba(212, 160, 23, 0.08) 0%, transparent 70%),
    radial-gradient(400px circle at 30% 60%, rgba(232, 93, 4, 0.04) 0%, transparent 60%),
    radial-gradient(500px circle at 70% 40%, rgba(245, 200, 66, 0.05) 0%, transparent 65%);
  animation: bgGlowPulse 6s ease-in-out infinite;
}

@keyframes bgGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ─── Floating Particles ─── */
.loader-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.loader-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 200, 66, 0.8), rgba(212, 160, 23, 0.2));
  animation: particleFloat linear infinite;
  opacity: 0;
}

.loader-particle:nth-child(1) {
  width: 3px; height: 3px;
  left: 15%; top: 80%;
  animation-delay: 0s; animation-duration: 8s;
}
.loader-particle:nth-child(2) {
  width: 2px; height: 2px;
  left: 25%; top: 90%;
  animation-delay: 1s; animation-duration: 10s;
}
.loader-particle:nth-child(3) {
  width: 4px; height: 4px;
  left: 40%; top: 85%;
  animation-delay: 0.5s; animation-duration: 7s;
}
.loader-particle:nth-child(4) {
  width: 2px; height: 2px;
  left: 55%; top: 88%;
  animation-delay: 2s; animation-duration: 9s;
}
.loader-particle:nth-child(5) {
  width: 3px; height: 3px;
  left: 65%; top: 82%;
  animation-delay: 1.5s; animation-duration: 8.5s;
}
.loader-particle:nth-child(6) {
  width: 2px; height: 2px;
  left: 78%; top: 86%;
  animation-delay: 0.8s; animation-duration: 11s;
}
.loader-particle:nth-child(7) {
  width: 3px; height: 3px;
  left: 85%; top: 78%;
  animation-delay: 3s; animation-duration: 7.5s;
}
.loader-particle:nth-child(8) {
  width: 2px; height: 2px;
  left: 10%; top: 92%;
  animation-delay: 2.5s; animation-duration: 9.5s;
}
.loader-particle:nth-child(9) {
  width: 4px; height: 4px;
  left: 50%; top: 95%;
  animation-delay: 0.2s; animation-duration: 6s;
}
.loader-particle:nth-child(10) {
  width: 2px; height: 2px;
  left: 35%; top: 75%;
  animation-delay: 1.8s; animation-duration: 10.5s;
}
.loader-particle:nth-child(11) {
  width: 3px; height: 3px;
  left: 90%; top: 84%;
  animation-delay: 0.7s; animation-duration: 8s;
}
.loader-particle:nth-child(12) {
  width: 2px; height: 2px;
  left: 5%; top: 70%;
  animation-delay: 3.5s; animation-duration: 12s;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
    transform: translateY(-30px) translateX(5px) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-200px) translateX(-15px) scale(0.8);
  }
  90% {
    opacity: 0.2;
    transform: translateY(-400px) translateX(10px) scale(0.4);
  }
  100% {
    transform: translateY(-500px) translateX(0) scale(0);
    opacity: 0;
  }
}

/* ─── 3D Stage ─── */
.loader-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* ─── 3D Orbit Container ─── */
.loader-orbit {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  animation: cameraOrbit 12s ease-in-out infinite;
}

@keyframes cameraOrbit {
  0%   { transform: rotateY(-3deg) rotateX(2deg); }
  25%  { transform: rotateY(3deg) rotateX(-1deg); }
  50%  { transform: rotateY(-2deg) rotateX(1.5deg); }
  75%  { transform: rotateY(4deg) rotateX(-2deg); }
  100% { transform: rotateY(-3deg) rotateX(2deg); }
}

/* ─── Logo Image ─── */
.loader-logo-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: 36px;
  animation: logoEntrance 2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             logoFloat 6s ease-in-out 2s infinite;
  opacity: 0;
  transform: translateY(60px) scale(0.7);
  filter: drop-shadow(0 0 60px rgba(212, 160, 23, 0.4));
}

@keyframes logoEntrance {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.7) rotateX(15deg);
    filter: drop-shadow(0 0 0px rgba(212, 160, 23, 0));
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.05) rotateX(-3deg);
    filter: drop-shadow(0 0 40px rgba(212, 160, 23, 0.5));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: drop-shadow(0 0 60px rgba(212, 160, 23, 0.35));
  }
}

@keyframes logoFloat {
  0%, 100% { 
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
    filter: drop-shadow(0 0 60px rgba(212, 160, 23, 0.35));
  }
  25% {
    transform: translateY(-12px) rotateX(1deg) rotateY(2deg);
    filter: drop-shadow(0 0 80px rgba(212, 160, 23, 0.5));
  }
  50% { 
    transform: translateY(-18px) rotateX(-1deg) rotateY(-1deg);
    filter: drop-shadow(0 0 100px rgba(245, 200, 66, 0.6));
  }
  75% {
    transform: translateY(-8px) rotateX(0.5deg) rotateY(1.5deg);
    filter: drop-shadow(0 0 70px rgba(212, 160, 23, 0.45));
  }
}

.loader-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* ─── Golden Halo Ring behind logo ─── */
.loader-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(212, 160, 23, 0.15);
  box-shadow:
    0 0 40px rgba(212, 160, 23, 0.1),
    inset 0 0 40px rgba(212, 160, 23, 0.05);
  animation: haloGlow 4s ease-in-out infinite, haloPulse 8s ease-in-out infinite;
  z-index: 1;
}

.loader-halo::before {
  content: '';
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 1px solid rgba(245, 200, 66, 0.08);
  animation: haloRotate 20s linear infinite;
}

.loader-halo::after {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px solid rgba(212, 160, 23, 0.04);
  animation: haloRotate 30s linear infinite reverse;
}

@keyframes haloGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(212, 160, 23, 0.1), inset 0 0 40px rgba(212, 160, 23, 0.05); }
  50% { box-shadow: 0 0 80px rgba(212, 160, 23, 0.25), inset 0 0 60px rgba(212, 160, 23, 0.1); }
}

@keyframes haloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes haloRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── Title: MALWA EXPERIENCE ─── */
.loader-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(
    135deg,
    #8B6914 0%,
    #C9A227 15%,
    #F5D76E 30%,
    #FFF1B8 45%,
    #F5D76E 55%,
    #C9A227 70%,
    #8B6914 85%,
    #C9A227 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards,
             goldShimmer 4s ease-in-out 2.4s infinite,
             textDrift 8s ease-in-out 2.4s infinite;
  opacity: 0;
  transform: translateY(30px);
  filter: drop-shadow(0 2px 12px rgba(212, 160, 23, 0.4));
  margin-bottom: 8px;
}

@keyframes titleEntrance {
  0% { opacity: 0; transform: translateY(30px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes goldShimmer {
  0%   { background-position: 200% 200%; }
  50%  { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

@keyframes textDrift {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(3px) translateY(-2px); }
  50%      { transform: translateX(-2px) translateY(-4px); }
  75%      { transform: translateX(2px) translateY(-1px); }
}

/* ─── Subtitle: JOURNEYS INTO HISTORY ─── */
.loader-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(0.72rem, 1.5vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(212, 160, 23, 0.55);
  animation: subtitleEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards,
             subtitleDrift 10s ease-in-out 2.8s infinite,
             subtitleGlow 5s ease-in-out 2.8s infinite;
  opacity: 0;
  transform: translateY(20px);
  margin-bottom: 48px;
}

@keyframes subtitleEntrance {
  0% { opacity: 0; transform: translateY(20px); letter-spacing: 0.6em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.35em; }
}

@keyframes subtitleDrift {
  0%, 100% { transform: translateX(0) translateY(0); }
  33%      { transform: translateX(-4px) translateY(-2px); }
  66%      { transform: translateX(3px) translateY(-3px); }
}

@keyframes subtitleGlow {
  0%, 100% { color: rgba(212, 160, 23, 0.55); }
  50%      { color: rgba(245, 200, 66, 0.75); }
}

/* ─── Elegant Loading Bar ─── */
.loader-bar-container {
  width: min(280px, 70vw);
  height: 2px;
  background: rgba(212, 160, 23, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  animation: barEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards;
  opacity: 0;
}

@keyframes barEntrance {
  0% { opacity: 0; width: 0; }
  100% { opacity: 1; width: min(280px, 70vw); }
}

.loader-bar {
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(212, 160, 23, 0.3),
    rgba(245, 200, 66, 0.9),
    rgba(212, 160, 23, 0.3)
  );
  background-size: 200% 100%;
  border-radius: 4px;
  width: 0%;
  animation: barProgress 3s cubic-bezier(0.4, 0, 0.2, 1) 2s forwards,
             barShimmer 1.5s ease-in-out infinite;
}

@keyframes barProgress {
  0%   { width: 0%; }
  20%  { width: 25%; }
  50%  { width: 55%; }
  70%  { width: 75%; }
  90%  { width: 92%; }
  100% { width: 100%; }
}

@keyframes barShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Ambient Light Rays ─── */
.loader-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.loader-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 200px;
  transform-origin: bottom center;
  background: linear-gradient(to top, rgba(212, 160, 23, 0.08), transparent);
  opacity: 0;
  animation: rayPulse 6s ease-in-out infinite;
}

.loader-ray:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); animation-delay: 0s; }
.loader-ray:nth-child(2) { transform: translate(-50%, -100%) rotate(45deg); animation-delay: 0.8s; }
.loader-ray:nth-child(3) { transform: translate(-50%, -100%) rotate(90deg); animation-delay: 1.6s; }
.loader-ray:nth-child(4) { transform: translate(-50%, -100%) rotate(135deg); animation-delay: 2.4s; }
.loader-ray:nth-child(5) { transform: translate(-50%, -100%) rotate(180deg); animation-delay: 3.2s; }
.loader-ray:nth-child(6) { transform: translate(-50%, -100%) rotate(225deg); animation-delay: 4s; }
.loader-ray:nth-child(7) { transform: translate(-50%, -100%) rotate(270deg); animation-delay: 4.8s; }
.loader-ray:nth-child(8) { transform: translate(-50%, -100%) rotate(315deg); animation-delay: 5.6s; }

@keyframes rayPulse {
  0%, 100% { opacity: 0; height: 150px; }
  50% { opacity: 0.6; height: 220px; }
}

/* ─── Decorative Corner Ornaments ─── */
.loader-ornament {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(212, 160, 23, 0.12);
  opacity: 0;
  animation: ornamentFade 2s ease 1.8s forwards;
}

.loader-ornament.top-left {
  top: 40px; left: 40px;
  border-right: none; border-bottom: none;
}
.loader-ornament.top-right {
  top: 40px; right: 40px;
  border-left: none; border-bottom: none;
}
.loader-ornament.bottom-left {
  bottom: 40px; left: 40px;
  border-right: none; border-top: none;
}
.loader-ornament.bottom-right {
  bottom: 40px; right: 40px;
  border-left: none; border-top: none;
}

@keyframes ornamentFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ─── Skip hint ─── */
.loader-skip {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(212, 160, 23, 0.25);
  cursor: pointer;
  transition: color 0.3s ease;
  animation: skipFade 1s ease 3.5s forwards;
  opacity: 0;
  border: none;
  background: none;
  padding: 8px 20px;
}

.loader-skip:hover {
  color: rgba(212, 160, 23, 0.6);
}

@keyframes skipFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .loader-logo-wrap {
    width: 160px;
    height: 160px;
    margin-bottom: 28px;
  }
  
  .loader-halo {
    width: 200px;
    height: 200px;
  }
  
  .loader-ornament {
    width: 36px;
    height: 36px;
  }
  
  .loader-ornament.top-left { top: 20px; left: 20px; }
  .loader-ornament.top-right { top: 20px; right: 20px; }
  .loader-ornament.bottom-left { bottom: 20px; left: 20px; }
  .loader-ornament.bottom-right { bottom: 20px; right: 20px; }
  
  .loader-rays {
    width: 300px;
    height: 300px;
  }
  
  .loader-ray {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .loader-logo-wrap {
    width: 130px;
    height: 130px;
    margin-bottom: 24px;
  }
  
  .loader-halo {
    width: 165px;
    height: 165px;
  }
  
  .loader-title {
    letter-spacing: 0.1em;
  }
  
  .loader-subtitle {
    letter-spacing: 0.2em;
  }
}

/* ─── Prefers reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .loader-orbit,
  .loader-logo-wrap,
  .loader-title,
  .loader-subtitle,
  .loader-particle,
  .loader-ray,
  .loader-halo,
  .loader-bg-glow {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
  }
}