/**
 * THE KINGDOM OF MOUKI
 * Animations CSS - 3D Castle Gate Physics, Ambient Stardust & Micro-Interactions
 */

/* ==========================================================================
   1. 3D CASTLE GATE PHYSICS & TWO-STAGE OPENING
   ========================================================================== */
.portal-gates-frame {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.door-panel {
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.25, 1, 0.4, 1);
  will-change: transform;
}

/* Door Hinges */
.door-left {
  transform-origin: left center;
}

.door-right {
  transform-origin: right center;
}

/* Stage 1: Slightly Open (~22deg) */
.doors-slightly-open .door-left {
  transform: rotateY(-22deg);
}

.doors-slightly-open .door-right {
  transform: rotateY(22deg);
}

/* Stage 2: Fully Open (~82deg) */
.doors-fully-open .door-left {
  transform: rotateY(-82deg);
}

.doors-fully-open .door-right {
  transform: rotateY(82deg);
}

/* Stage 0: Fully Closed (0deg) */
.doors-closed .door-left {
  transform: rotateY(0deg);
}

.doors-closed .door-right {
  transform: rotateY(0deg);
}

/* Entrance Zoom Physics */
.entering-transition .castle-canvas {
  transform: translate(-50%, -50%) scale(2.5);
  opacity: 0;
  transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1), opacity 750ms ease 200ms;
}

/* Legacy SVG support */
.castle-gate-portal {
  perspective: 1200px;
  transform-style: preserve-3d;
  position: relative;
}

.gate-door-left {
  transform-origin: left center;
  transform-box: fill-box;
  transition: transform 800ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.gate-door-right {
  transform-origin: right center;
  transform-box: fill-box;
  transition: transform 800ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.castle-gate-portal.gates-open .gate-door-left {
  transform: perspective(1000px) rotateY(-75deg);
}

.castle-gate-portal.gates-open .gate-door-right {
  transform: perspective(1000px) rotateY(75deg);
}

.gate-portal-glow {
  opacity: 0.4;
  transition: opacity 800ms ease, filter 800ms ease;
}

.castle-gate-portal.gates-open .gate-portal-glow {
  opacity: 1;
  filter: drop-shadow(0 0 16px rgba(255, 245, 204, 0.8));
}

/* ==========================================================================
   2. AMBIENT STARDUST & TWINKLE (PURE CSS, RESTRAINED)
   ========================================================================== */
@keyframes stardustTwinkle {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.08);
  }
}

.ambient-sparkle {
  animation: stardustTwinkle 4s ease-in-out infinite;
  transform-origin: center;
  pointer-events: none;
}

.ambient-sparkle:nth-child(2n) {
  animation-duration: 5.5s;
  animation-delay: 1.2s;
}

.ambient-sparkle:nth-child(3n) {
  animation-duration: 6.5s;
  animation-delay: 2.5s;
}

/* ==========================================================================
   3. BUTTON GLOW & ENTRANCE TRANSITIONS
   ========================================================================== */
@keyframes royalGlowPulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(232, 197, 71, 0.3), 0 2px 6px rgba(255, 182, 193, 0.25);
  }
  50% {
    box-shadow: 0 6px 24px rgba(232, 197, 71, 0.55), 0 0 18px rgba(255, 182, 193, 0.45);
  }
}

.btn-royal-enter {
  animation: royalGlowPulse 3.5s ease-in-out infinite;
  transition: transform var(--transition-spring), box-shadow var(--transition-normal);
}

.btn-royal-enter:hover {
  transform: translateY(-2px) scale(1.02);
  animation-play-state: paused;
  box-shadow: 0 8px 28px rgba(232, 197, 71, 0.65), 0 0 22px rgba(255, 182, 193, 0.55);
}

/* Re-enter Button Entrance */
@keyframes reenterFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.btn-reenter {
  animation: reenterFadeIn 400ms var(--transition-spring) forwards;
}

/* ==========================================================================
   4. ACCESSIBILITY OVERRIDES (PREFERS-REDUCED-MOTION)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .door-panel,
  .castle-canvas,
  .kingdom-entrance-stage,
  .confirm-dialog-content,
  .gate-door-left,
  .gate-door-right {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .portal-gates-frame.doors-slightly-open .door-left,
  .portal-gates-frame.doors-slightly-open .door-right,
  .portal-gates-frame.doors-fully-open .door-left,
  .portal-gates-frame.doors-fully-open .door-right {
    opacity: 0.2;
    transform: none !important;
  }

  .castle-gate-portal.gates-open .gate-door-left {
    transform: none !important;
    opacity: 0.15;
  }

  .castle-gate-portal.gates-open .gate-door-right {
    transform: none !important;
    opacity: 0.15;
  }

  .ambient-sparkle,
  .btn-royal-enter,
  .btn-reenter,
  .castle-sparkle {
    animation: none !important;
  }
}