/* ==========================================================================
   Aarav & Meera — Royal Wedding Invitation Stylesheet
   Unified Royal Aesthetic: Deep Burgundy Glass, Champagne Gold, & Opulent Details
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography & Royal Gold Gradients
   -------------------------------------------------------------------------- */
.gold-gradient-text {
  background: linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #AA7C11 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-border-gradient {
  border-image: linear-gradient(to right, #AA7C11, #F5E7A1, #D4AF37) 1;
}

.gold-box-shadow {
  box-shadow: 0 10px 30px -5px rgba(212, 175, 55, 0.25), 0 0 15px rgba(212, 175, 55, 0.15);
}

.royal-card-glass {
  background: rgba(45, 5, 11, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.royal-border-glow {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.2), inset 0 0 15px rgba(212, 175, 55, 0.1);
}

/* --------------------------------------------------------------------------
   2. Dynamic Cinematic Video Background Layer (Fixed full viewport)
   -------------------------------------------------------------------------- */
.global-video-bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s ease;
}

/* Normal Background State: hides video gracefully across the site */
body.normal-bg .global-video-bg-container,
.global-video-bg-container.is-normal-bg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.global-video-element {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.04);
  object-fit: cover;
  /* Crisp with subtle atmospheric softness - no heavy red blur */
  filter: blur(1px) brightness(0.92) contrast(1.05);
  -webkit-filter: blur(1px) brightness(0.92) contrast(1.05);
  will-change: filter, transform;
}

.global-video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* REMOVED RED LAYER: Using subtle neutral dark vignette so video artwork & gold mandalas shine clearly */
  background: 
    radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

/* Top Video BG Toggle Button */
.nav-video-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(45, 5, 11, 0.85);
  color: #F5E7A1;
  font-family: 'Playfair Display', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
}

.nav-video-toggle:hover {
  border-color: #D4AF37;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.nav-video-toggle.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(45, 5, 11, 0.95) 100%);
  border-color: #D4AF37;
  color: #FFF1C5;
}

.toggle-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.nav-video-toggle.is-normal .toggle-indicator {
  background: #64748b;
  box-shadow: none;
}

.toggle-label-full {
  display: inline;
}

.toggle-label-short {
  display: none;
}

@media (max-width: 640px) {
  .toggle-label-full {
    display: none;
  }
  .toggle-label-short {
    display: inline;
  }
  .nav-video-toggle {
    padding: 4px 9px;
    font-size: 0.68rem;
    gap: 4px;
  }
}

/* --------------------------------------------------------------------------
   3. Reveal on Scroll Animations (Both-Ways Scroll Appear Engine)
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  will-change: opacity, transform;
  /* Instantaneous reset when scrolled off-screen so re-entry animation is primed immediately */
  transition: none;
}

/* Entering from below (user scrolling down) */
.reveal-on-scroll:not(.reveal-scale):not(.reveal-left):not(.reveal-right),
.reveal-on-scroll.from-below:not(.reveal-scale):not(.reveal-left):not(.reveal-right) {
  transform: translateY(38px);
}

/* Entering from above (user scrolling up) */
.reveal-on-scroll.from-above:not(.reveal-scale):not(.reveal-left):not(.reveal-right) {
  transform: translateY(-38px);
}

/* Scale variant (both directions) */
.reveal-on-scroll.reveal-scale {
  transform: scale(0.92) translateY(28px);
}

.reveal-on-scroll.reveal-scale.from-above {
  transform: scale(0.92) translateY(-28px);
}

/* Horizontal slide variants */
.reveal-on-scroll.reveal-left {
  transform: translateX(-48px);
}

.reveal-on-scroll.reveal-right {
  transform: translateX(48px);
}

/* Active In-View State: smoothly animates in when entering viewport from either direction */
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  transition: opacity 0.82s cubic-bezier(0.16, 1, 0.3, 1), transform 0.82s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger Delays when revealed */
.reveal-on-scroll.is-revealed.stagger-1 { transition-delay: 0.08s; }
.reveal-on-scroll.is-revealed.stagger-2 { transition-delay: 0.16s; }
.reveal-on-scroll.is-revealed.stagger-3 { transition-delay: 0.24s; }
.reveal-on-scroll.is-revealed.stagger-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-on-scroll.from-above,
  .reveal-on-scroll.from-below,
  .reveal-on-scroll.reveal-scale,
  .reveal-on-scroll.reveal-left,
  .reveal-on-scroll.reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   4. Unified Royal Ceremony Timeline Cards (Consistent, Luxurious Look)
   -------------------------------------------------------------------------- */
.timeline-ceremony-card {
  background: linear-gradient(135deg, rgba(42, 6, 12, 0.88) 0%, rgba(26, 4, 8, 0.94) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(212, 175, 55, 0.42);
  border-radius: 1.5rem;
  box-shadow: 0 12px 36px -6px rgba(0, 0, 0, 0.75), 0 0 18px rgba(212, 175, 55, 0.14);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.timeline-ceremony-card:hover {
  border-color: rgba(245, 231, 161, 0.85);
  box-shadow: 0 18px 48px -4px rgba(0, 0, 0, 0.85), 0 0 28px rgba(212, 175, 55, 0.32);
  transform: translateY(-2px) scale(1.015);
}

/* Inner subtle golden shimmer effect on cards */
.timeline-ceremony-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 197, 0.06), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
  pointer-events: none;
}

.timeline-ceremony-card:hover::before {
  left: 140%;
}

/* 3D tilt perspective container */
.perspective-container {
  perspective: 1200px;
}

/* --------------------------------------------------------------------------
   5. Continuous 2-Way Breathing / Floating Animation
   -------------------------------------------------------------------------- */
@keyframes continuousFloat2Way {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(0.4deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(6px) rotate(-0.4deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes continuousFloatReverse {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(7px) rotate(-0.5deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(-7px) rotate(0.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.animate-float-2way {
  animation: continuousFloat2Way 6s ease-in-out infinite;
}

.animate-float-reverse {
  animation: continuousFloatReverse 7s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   6. Hanging Temple Bells & Diya Flames
   -------------------------------------------------------------------------- */
@keyframes bellIdleSway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}

.bell-sway-idle {
  transform-origin: top center;
  animation: bellIdleSway 4.2s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes diyaFlame {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 8px #FF9900) drop-shadow(0 0 16px #FF5500);
  }
  25% {
    transform: scale(1.08, 0.95) translateY(-1px) rotate(-1deg);
    filter: drop-shadow(0 0 11px #FFAA00) drop-shadow(0 0 20px #FF3300);
  }
  50% {
    transform: scale(0.96, 1.06) translateY(-2px) rotate(1.5deg);
    filter: drop-shadow(0 0 7px #FF8800) drop-shadow(0 0 14px #FF6600);
  }
  75% {
    transform: scale(1.05, 0.98) translateY(-0.5px) rotate(-0.8deg);
    filter: drop-shadow(0 0 12px #FFCC00) drop-shadow(0 0 22px #FF4400);
  }
}

.flame-flicker {
  animation: diyaFlame 1.8s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Ganesha divine halo radiance */
@keyframes ganeshaRadiance {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.55)) drop-shadow(0 0 30px rgba(245, 231, 161, 0.35));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.85)) drop-shadow(0 0 45px rgba(255, 215, 0, 0.5));
    transform: scale(1.015);
  }
}

.ganesha-aura {
  animation: ganeshaRadiance 3.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   7. Interactive 3D Tilt Cards
   -------------------------------------------------------------------------- */
.scroll-tilt-card {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.timeline-card-interactive {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.timeline-card-interactive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 241, 197, 0.14) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-card-interactive:hover::after {
  opacity: 1;
}

/* Slow background rotation for mandalas */
@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-slow {
  animation: spinSlow 75s linear infinite;
}

.spin-slow-reverse {
  animation: spinSlow 90s linear infinite reverse;
}

/* Scratch Canvas overlay styles */
#scratch-card-container {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #2D050B;
}

::-webkit-scrollbar-thumb {
  background: #D4AF37;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #F5E7A1;
}

/* --------------------------------------------------------------------------
   8. Live 3D Mechanical Flip Clock Countdown (Unified Royal Glass & Gold)
   -------------------------------------------------------------------------- */
.countdown-flip-container {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 580px;
  margin: 0 auto;
  perspective: 700px;
}

.flip-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flip-card {
  position: relative;
  width: 90px;
  height: 98px;
  background: #140205;
  border-radius: 14px;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    0 0 0 1.5px rgba(212, 175, 55, 0.45),
    0 0 20px rgba(212, 175, 55, 0.15);
  perspective: 500px;
}

/* Upper static half & Lower static half */
.flip-card-upper,
.flip-card-lower,
.flip-card-flap-front,
.flip-card-flap-back {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  color: #F5E7A1;
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
  box-sizing: border-box;
}

.flip-card-upper {
  top: 0;
  height: 50%;
  align-items: flex-end;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background: linear-gradient(180deg, #3d0a14 0%, #1e0409 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
}

.flip-card-upper .flip-num {
  transform: translateY(50%);
}

.flip-card-lower {
  bottom: 0;
  height: 50%;
  align-items: flex-start;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  background: linear-gradient(180deg, #160205 0%, #2e080f 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
}

.flip-card-lower .flip-num {
  transform: translateY(-50%);
}

/* 3D Flipping Leaf (Flap) - Strictly Unidirectional Downwards */
.flip-leaf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  transform-style: preserve-3d;
  transform-origin: bottom center;
  z-index: 5;
  /* Strictly NO transition property here to prevent reversing back up */
}

@keyframes flipDownUnidirectional {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

.flip-leaf.flipping {
  animation: flipDownUnidirectional 0.48s cubic-bezier(0.35, 0, 0.25, 1) forwards;
}

.flip-card-flap-front,
.flip-card-flap-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  color: #F5E7A1;
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-flap-front {
  height: 100%;
  align-items: flex-end;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background: linear-gradient(180deg, #3d0a14 0%, #1e0409 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
  transform: rotateX(0deg);
}

.flip-card-flap-front .flip-num {
  transform: translateY(50%);
  line-height: 0;
}

.flip-card-flap-back {
  height: 100%;
  align-items: flex-start;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  background: linear-gradient(180deg, #160205 0%, #2e080f 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  transform: rotateX(180deg);
}

.flip-card-flap-back .flip-num {
  transform: translateY(-50%);
  line-height: 0;
}

/* Divider seam & Side Metal Hinges */
.flip-divider {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  z-index: 10;
  pointer-events: none;
}

.flip-hinge-left, .flip-hinge-right {
  position: absolute;
  top: calc(50% - 5px);
  width: 4px;
  height: 10px;
  background: #D4AF37;
  border-radius: 2px;
  z-index: 12;
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.6);
}

.flip-hinge-left { left: -2px; }
.flip-hinge-right { right: -2px; }

.flip-label {
  display: block;
  font-size: 0.72rem;
  color: #F5E7A1;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* Mobile responsive adjustments for Flip Clock */
@media (max-width: 640px) {
  .countdown-flip-container {
    gap: 8px;
    max-width: 330px;
  }

  .flip-card {
    width: 68px;
    height: 76px;
    border-radius: 10px;
  }

  .flip-card-upper,
  .flip-card-lower,
  .flip-card-flap-front,
  .flip-card-flap-back {
    font-size: 1.8rem;
  }

  .flip-card-upper {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .flip-card-lower {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .flip-card-flap-front {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .flip-card-flap-back {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .flip-label {
    font-size: 0.62rem;
    letter-spacing: 1px;
    margin-top: 6px;
  }
}