/* =========================================================
   WEDDING ORCHESTRA — Premium animation layer
   Cinematic, editorial, subtle. Never gimmicky.
   ========================================================= */

/* ---------- 1. Ken Burns hero — slow zoom on hero background image ---------- */
@keyframes kenBurns {
  0%   { transform: scale(1.02) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1.02) translate(0, 0); }
}
.ken-burns {
  animation: kenBurns 24s ease-in-out infinite;
  will-change: transform;
}

/* ---------- 2. Text reveal — line-by-line editorial reveal ---------- */
@keyframes lineReveal {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.line-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.line-reveal > span {
  display: inline-block;
  animation: lineReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.line-reveal.d-1 > span { animation-delay: 0.05s; }
.line-reveal.d-2 > span { animation-delay: 0.20s; }
.line-reveal.d-3 > span { animation-delay: 0.35s; }
.line-reveal.d-4 > span { animation-delay: 0.50s; }
.line-reveal.d-5 > span { animation-delay: 0.65s; }

/* ---------- 3. Count-up numbers — Intersection-triggered ---------- */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

/* ---------- 4. Magnetic buttons — cursor pull effect ---------- */
.magnetic {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ---------- 5. Marquee upgrade — dual direction with mask fade ---------- */
.marquee-premium {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.marquee-premium .marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  animation: marqueeSlow 60s linear infinite;
}
@keyframes marqueeSlow { to { transform: translateX(-50%); } }

/* ---------- 6. Soft glow on featured card ---------- */
@keyframes softGlow {
  0%, 100% { box-shadow: 0 20px 40px -20px rgba(201, 169, 106, 0.25), 0 0 0 1px rgba(201, 169, 106, 0.15); }
  50%      { box-shadow: 0 24px 60px -20px rgba(201, 169, 106, 0.45), 0 0 0 1px rgba(201, 169, 106, 0.35); }
}
.soft-glow {
  animation: softGlow 4s ease-in-out infinite;
}

/* ---------- 7. Elegant separator — auto-draw line ---------- */
@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.draw-line {
  transform-origin: left center;
  animation: drawLine 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ---------- 8. Card lift on hover with shadow shift ---------- */
.card-lift {
  transition:
    transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
    border-color 0.3s ease;
  will-change: transform;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow:
    0 40px 60px -30px rgba(74, 90, 72, 0.35),
    0 15px 25px -15px rgba(74, 90, 72, 0.20);
}

/* ---------- 9. Blur-in image reveal on scroll ---------- */
@keyframes blurIn {
  from { filter: blur(20px); opacity: 0; transform: scale(1.05); }
  to   { filter: blur(0);    opacity: 1; transform: scale(1); }
}
.blur-in {
  opacity: 0;
}
.blur-in.in {
  animation: blurIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---------- 10. Word-by-word slide-in ---------- */
.word-stagger > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotate(2deg);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.word-stagger.in > span {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* ---------- 11. Cursor spotlight — very subtle radial ---------- */
.cursor-spot {
  position: relative;
  overflow: hidden;
}
.cursor-spot::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    600px circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(228, 207, 161, 0.12),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 0;
}
.cursor-spot:hover::before { opacity: 1; }
.cursor-spot > * { position: relative; z-index: 1; }

/* ---------- 12. Pulsing live indicator (existing but improved) ---------- */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.pulse-ring {
  animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ---------- 13. Floating orbs (subtle background depth) ---------- */
@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(30px, -40px) rotate(120deg); }
  66%      { transform: translate(-20px, 30px) rotate(240deg); }
}
.float-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: floatOrb 24s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* ---------- 14. Text gradient shimmer ---------- */
@keyframes shimmerText {
  0%   { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--ink) 30%,
    var(--champagne) 50%,
    var(--ink) 70%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 6s ease-in-out infinite;
}

/* ---------- 15. Image tilt on scroll (3D subtle) ---------- */
.tilt-scroll {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.tilt-scroll:hover {
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateZ(10px);
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  .ken-burns, .marquee-premium .marquee-track, .soft-glow, .pulse-ring, .float-orb, .shimmer-text {
    animation: none !important;
  }
  .line-reveal > span, .draw-line, .blur-in, .word-stagger > span {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
  }
}