src/styles/presentation-loader.css

/*
  Presentation Loader - Fullscreen 3D Stacking Animation
*/

.pres-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0a0f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.pres-loader-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.pres-ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4285f4, #9b72cb, #d96570, #f4b400, #4285f4);
  filter: blur(100px);
  opacity: 0.35;
  animation: pres-glow-spin 8s linear infinite;
  pointer-events: none;
}

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

/* =============================================
   STATUS TEXTS
   ============================================= */
.pres-status-text-container {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  z-index: 10;
}

.pres-status-bar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.pres-status-text {
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #4285f4, #9b72cb, #d96570, #f4b400, #4285f4);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pres-text-shimmer 4s ease infinite;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  filter: drop-shadow(0 0 8px rgba(122, 186, 255, 0.4));
}

.pres-phase-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Inter', sans-serif;
}

.pres-phase-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pres-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.5s ease;
}

.pres-phase-dot.active {
  background: #7abaff;
  box-shadow: 0 0 12px rgba(122, 186, 255, 0.6);
  transform: scale(1.3);
}

@keyframes pres-text-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =============================================
   3D STAGE & SLIDES
   ============================================= */
.pres-stage-3d {
  width: 280px;
  height: 180px;
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Group timeline (duration 4.5s) */
.pres-slide-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: pres-slide-cycle 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pres-slide-cycle {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  30% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  
  /* Drop to Stack 1 */
  33% { transform: translate3d(0, 30px, -60px) scale(1); opacity: 0.6; }
  63% { transform: translate3d(0, 30px, -60px) scale(1); opacity: 0.6; }
  
  /* Drop to Stack 2 */
  66% { transform: translate3d(0, 60px, -120px) scale(1); opacity: 0; }
  100% { transform: translate3d(0, 60px, -120px) scale(1); opacity: 0; }
}

/* The Slide Frame */
.pres-slide-box {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: pres-box-assemble 4.5s ease-out infinite;
  backdrop-filter: blur(8px);
}

@keyframes pres-box-assemble {
  0%   { opacity: 0; transform: scale(0.9); }
  5%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* The Scattered Parts */
.pres-part {
  position: absolute;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(180,160,240,0.3));
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(122, 186, 255, 0.2);
  animation: pres-part-assemble 4.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

/* Specific layout inside the 280x180 slide */
.part-title { top: 20px; left: 24px; width: 140px; height: 16px; background: rgba(122, 186, 255, 0.4); }
.part-image { top: 50px; left: 24px; width: 90px; height: 70px; border-radius: 8px; background: rgba(155, 114, 203, 0.3); }

.part-line.line-1 { top: 55px; left: 130px; width: 120px; height: 8px; }
.part-line.line-2 { top: 75px; left: 130px; width: 100px; height: 8px; }
.part-line.line-3 { top: 95px; left: 130px; width: 80px; height: 8px; }

.part-circle { top: 140px; left: 24px; width: 24px; height: 24px; border-radius: 50%; background: rgba(217, 101, 112, 0.4); }
.part-square { top: 144px; left: 60px; width: 30px; height: 16px; }

@keyframes pres-part-assemble {
  0% { 
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1.2); 
    opacity: 0; 
  }
  5% { 
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1.2); 
    opacity: 0; 
  }
  10% { 
    opacity: 1; 
  }
  25% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
}