/* ═══════════════════════════════════════════════════
   SWY INVITATION — Luxury Animation System
   Full-immersion Wedding Experience · 2026
   ═══════════════════════════════════════════════════ */

/* ── Base Entrance Animations ── */
@keyframes coverReveal {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes shimmerGold {
  0%, 100% { background-position: -200% center; }
  50% { background-position: 200% center; }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes breathe {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.04); }
}
@keyframes rotateSlow {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes drawLine {
  from { width: 0; opacity: 0; }
  to { width: 60px; opacity: 1; }
}
@keyframes countUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 192,154,91), .3); }
  70% { box-shadow: 0 0 0 18px rgba(var(--accent-rgb, 192,154,91), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 192,154,91), 0); }
}

/* Petal fall */
@keyframes petalFall {
  0% { transform: translateY(-40px) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg) translateX(60px); opacity: 0; }
}
@keyframes petalFall2 {
  0% { transform: translateY(-40px) rotate(0deg) translateX(0); opacity: .8; }
  100% { transform: translateY(100vh) rotate(-540deg) translateX(-80px); opacity: 0; }
}

/* Stars twinkle */
@keyframes starTwinkle {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes starFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* Geometric spin (Islamic) */
@keyframes geoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Wave flow */
@keyframes waveMove {
  0% { background-position-x: 0%; }
  100% { background-position-x: 200%; }
}

/* Batik pulse */
@keyframes batikShimmer {
  0%, 100% { opacity: .5; }
  50% { opacity: .9; }
}

/* Horizontal scroll marquee (love story) */
@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* ═══ COVER PAGE ANIMATION ═══ */
.template-body .cover {
  animation: coverReveal .9s cubic-bezier(.22,1,.36,1) both;
}
.template-body .cover-card {
  animation: slideUp .95s cubic-bezier(.22,1,.36,1) .15s both;
}
.template-body .cover-card .micro-label,
.template-body .cover-card .cover-kicker {
  animation: fadeIn .7s ease .3s both;
}
.template-body .couple-names {
  animation: slideUp .85s cubic-bezier(.22,1,.36,1) .4s both;
}
.template-body .invite-date {
  animation: slideUp .7s cubic-bezier(.22,1,.36,1) .55s both;
}
.template-body .guest-name {
  animation: slideUp .7s cubic-bezier(.22,1,.36,1) .65s both;
}
.template-body .open-btn {
  animation: slideUp .7s cubic-bezier(.22,1,.36,1) .75s both, pulseRing 3s ease 2s infinite;
}
.template-body .scroll-hint {
  animation: fadeIn .7s ease 1.2s both;
}
.template-body .cover-art {
  animation: fadeIn 1.2s ease .2s both;
}

/* ═══ LUXURY NAME SHIMMER ═══ */
/* Applied on hover */
.art-noir .couple-names,
.art-royal .couple-names,
.art-celestial .couple-names {
  background: linear-gradient(90deg, var(--ink) 0%, var(--accent) 40%, var(--ink) 60%, var(--ink) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideUp .85s cubic-bezier(.22,1,.36,1) .4s both, shimmerGold 4s linear 2s infinite;
}
.art-noir .couple-names em,
.art-royal .couple-names em,
.art-celestial .couple-names em {
  -webkit-text-fill-color: var(--accent);
}

/* ═══ SECTION REVEAL ═══ */
.template-body .section { position: relative; }
.template-body .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1);
}
.template-body .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for cards */
.template-body .person-card:nth-child(1) .fade-up { transition-delay: 0ms; }
.template-body .person-card:nth-child(3) .fade-up { transition-delay: 120ms; }
.template-body .event-card:nth-child(1) { transition-delay: 0ms; }
.template-body .event-card:nth-child(2) { transition-delay: 100ms; }
.template-body .timebox:nth-child(1) { transition-delay: 0ms; }
.template-body .timebox:nth-child(2) { transition-delay: 60ms; }
.template-body .timebox:nth-child(3) { transition-delay: 120ms; }
.template-body .timebox:nth-child(4) { transition-delay: 180ms; }
.template-body .gallery a:nth-child(1) { transition-delay: 0ms; }
.template-body .gallery a:nth-child(2) { transition-delay: 60ms; }
.template-body .gallery a:nth-child(3) { transition-delay: 120ms; }
.template-body .gallery a:nth-child(4) { transition-delay: 180ms; }
.template-body .gallery a:nth-child(5) { transition-delay: 240ms; }

/* ═══ COVER ART BREATHING ═══ */
.template-body .cover-art {
  animation: fadeIn 1.2s ease .2s both;
}
.template-body .cover-art span {
  animation: breathe 6s ease-in-out infinite;
}
.template-body .cover-art i {
  animation: breathe 5s ease-in-out 1s infinite;
}

/* ═══ COUNTDOWN ANIMATION ═══ */
.template-body .timebox strong {
  display: block;
  transition: transform .15s ease, opacity .15s ease;
}

/* ═══ NAVBAR FLOAT ═══ */
.template-body .invite-nav {
  animation: slideUp .6s cubic-bezier(.22,1,.36,1) 1.4s both;
}
.template-body .share-pill,
.template-body .music-toggle {
  animation: fadeIn .5s ease 1.6s both;
}

/* ═══════════════════════════════════════════
   PER-THEME LUXURY ANIMATIONS
   ═══════════════════════════════════════════ */

/* ── NOIR / BLACK TIE: Gold particle spotlight ── */
.art-noir .cover::after,
.art-black-tie .cover::after {
  content: '✦ ◆ ✦ ◆ ✦';
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  letter-spacing: 18px;
  color: rgba(216,183,109,.4);
  animation: breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.art-noir .open-btn, .art-black-tie .open-btn {
  animation: slideUp .7s cubic-bezier(.22,1,.36,1) .75s both,
             pulseRing 3s ease 2s infinite;
}

/* ── FLORAL / CHAMPAGNE: Falling petals ── */
.art-floral .invite-shell::before,
.art-paris .invite-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle 6px at 15% 0%, rgba(184,120,132,.6), transparent 6px),
    radial-gradient(circle 4px at 45% 0%, rgba(233,186,194,.7), transparent 4px),
    radial-gradient(circle 5px at 70% 0%, rgba(184,120,132,.5), transparent 5px),
    radial-gradient(circle 3px at 88% 0%, rgba(233,186,194,.6), transparent 3px),
    radial-gradient(circle 7px at 30% 0%, rgba(184,120,132,.4), transparent 7px);
  animation: petalFall 12s linear infinite;
}
.art-floral .cover-art span, .art-paris .cover-art span {
  animation: breathe 5s ease-in-out infinite, geoSpin 30s linear infinite;
  border-radius: 46% 54% 62% 38%;
}

/* ── CELESTIAL: Star field ── */
.art-celestial .invite-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle 2px at 10% 20%, rgba(217,186,111,.9), transparent 2px),
    radial-gradient(circle 1.5px at 35% 8%, rgba(145,184,214,.8), transparent 1.5px),
    radial-gradient(circle 2.5px at 60% 15%, rgba(217,186,111,.7), transparent 2.5px),
    radial-gradient(circle 1px at 80% 5%, rgba(145,184,214,.9), transparent 1px),
    radial-gradient(circle 2px at 25% 35%, rgba(217,186,111,.6), transparent 2px),
    radial-gradient(circle 1.5px at 75% 28%, rgba(145,184,214,.7), transparent 1.5px),
    radial-gradient(circle 1px at 50% 45%, rgba(217,186,111,.8), transparent 1px),
    radial-gradient(circle 2px at 90% 40%, rgba(217,186,111,.5), transparent 2px);
  animation: starTwinkle 3s ease-in-out infinite alternate;
}
/* Rotating constellation ring */
.art-celestial .cover-art {
  animation: fadeIn 1.2s ease .2s both;
  border-color: rgba(217,186,111,.25);
}
.art-celestial .cover-art span {
  animation: rotateSlow 20s linear infinite;
  border-color: rgba(217,186,111,.3);
  box-shadow: 0 0 30px rgba(217,186,111,.15), inset 0 0 30px rgba(217,186,111,.08);
}

/* ── ROYAL NAVY: Constellation glow ── */
.art-royal .cover-art span {
  animation: breathe 4s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(217,186,111,.2), inset 0 0 20px rgba(217,186,111,.1);
}
.art-royal .cover::after {
  content: '✦ · ✦ · ✦';
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  letter-spacing: 14px;
  color: rgba(217,186,111,.5);
  animation: breathe 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ── BOTANICAL: Leaf breathe ── */
.art-botanical .cover-art span,
.art-botanical-white .cover-art span {
  animation: breathe 6s ease-in-out infinite;
  border-radius: 62% 38% 68% 32%;
}
.art-botanical .cover-art i,
.art-botanical-white .cover-art i {
  animation: breathe 5s ease-in-out 1.5s infinite;
  border-radius: 34% 66% 44% 56%;
}

/* ── ISLAMIC / ARCH: Geometric breathe ── */
.art-arch .cover-art span {
  animation: breathe 5s ease-in-out infinite;
}
/* Rotating diamond */
.art-arch .cover::after {
  content: '';
  position: absolute;
  left: 50%; top: 20px;
  transform: translateX(-50%) rotate(0deg);
  width: 40px; height: 40px;
  border: 1.5px solid rgba(62,128,110,.3);
  animation: rotateSlow 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* ── HERITAGE / BATIK: Pattern shimmer ── */
.art-heritage .cover::before,
.art-songket .cover::before,
.art-woven .cover::before {
  animation: batikShimmer 4s ease-in-out infinite;
}

/* ── MOCHA / GARDEN: Gentle float ── */
.art-mocha .cover-art {
  animation: fadeIn 1.2s ease .2s both;
}
.art-mocha .cover-art span {
  animation: floatSlow 7s ease-in-out infinite;
  border-radius: 50%;
}

/* ── EDITORIAL MONO: None (intentional) ── */
.art-mono .cover, .art-mono .cover-art { animation: coverReveal .6s ease both; }
.art-mono .cover-card { animation: slideUp .65s ease .1s both; }

/* ── GLASS: Shimmer panel ── */
.art-glass .cover-art {
  animation: fadeIn 1s ease .3s both;
}
.art-glass .cover-art::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 50%, rgba(255,255,255,.1));
  animation: fadeIn 1s ease 1s both;
}

/* ── TERRACOTTA / SUNSET: Warm glow rise ── */
.art-sunset .cover::after,
.art-cinematic .cover::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 300px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(190,107,75,.18), transparent 70%);
  animation: floatSlow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ── RESORT / BALI: Tropical float ── */
.art-resort .cover-art i {
  animation: breathe 6s ease-in-out 1s infinite;
}

/* ═══ SECTION ANIMATIONS ═══ */
.template-body .section-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
}
.template-body .section-title.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Cover line draw ── */
.template-body .cover-footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb, 192,154,91), .4), transparent);
  animation: drawLine .8s ease 1s both;
  margin-bottom: 8px;
}

/* ── Gallery hover zoom ── */
.template-body .gallery a img {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.template-body .gallery a:hover img {
  transform: scale(1.06);
}

/* ── Person card avatar pulse ── */
.template-body .avatar {
  animation: pulseRing 4s ease 2s infinite;
}

/* ── Countdown box pop ── */
.template-body .timebox {
  transition: transform .2s ease, box-shadow .2s ease;
}
.template-body .timebox:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(var(--accent-rgb, 192,154,91), .15);
}

/* ── RSVP form focus ── */
.template-body .rsvp-card input:focus,
.template-body .rsvp-card select:focus,
.template-body .rsvp-card textarea:focus {
  animation: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 82%);
}

/* ── Story card scroll text ── */
.template-body .story-card {
  overflow: hidden;
}

/* ── Gift card shimmer ── */
.template-body .account-box {
  position: relative;
  overflow: hidden;
}
.template-body .account-box::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shimmerGold 3s ease-in-out 3s infinite;
}

/* ── WhatsApp button bounce ── */
.template-body .map-btn,
.template-body .copy-btn {
  animation: none;
  transition: all .25s cubic-bezier(.22,1,.36,1);
}
.template-body .map-btn:hover,
.template-body .copy-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(26,18,8,.2);
}

/* ── Music toggle spin ── */
.template-body .music-toggle.playing {
  animation: rotateSlow 3s linear infinite;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #000 20%));
  color: var(--paper);
}

/* ── Open button glow ── */
.template-body .open-btn {
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.template-body .open-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 48px rgba(26,18,8,.25);
}

/* ═══ CLOSING SECTION ═══ */
.template-body .closing-section {
  position: relative;
}
.template-body .closing-section::before {
  content: '✦';
  position: absolute;
  top: 50px; left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: var(--accent);
  opacity: .3;
  animation: breathe 4s ease-in-out infinite;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .template-body .cover,
  .template-body .cover-card,
  .template-body .couple-names,
  .template-body .open-btn,
  .template-body .invite-nav,
  .template-body .cover-art span,
  .template-body .cover-art i {
    animation: none;
    opacity: 1;
    transform: none;
  }
}