/* Shared motion. Gentle and unhurried: this is a wedding, not a game.
   Rules: reveals rise 14px over ~700ms on an ease-out curve; groups stagger 70ms;
   presses spring to 0.97; nothing loops except a slow float on decorative art.
   Content is only hidden when scripts are running (html.js), and never for
   people who ask for reduced motion. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 700ms;
}

/* Soft cross-fade between pages in browsers that support it. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-soft); }

html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="scale"] { transform: scale(0.96); }
html.js [data-reveal="left"] { transform: translateX(-18px); }
html.js [data-reveal="right"] { transform: translateX(18px); }
html.js [data-reveal].in { opacity: 1; transform: none; }

@keyframes mw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mw-pop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mw-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(calc(var(--r, 0deg) + 1.5deg)); } }
@keyframes mw-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes mw-draw { to { stroke-dashoffset: 0; } }
@keyframes mw-petal { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(var(--x, 40px), 110vh, 0) rotate(var(--spin, 360deg)); opacity: 0.9; } }

.anim-rise { animation: mw-rise var(--t-slow) var(--ease-out) both; animation-delay: var(--d, 0ms); }
.anim-fade { animation: mw-fade var(--t-slow) var(--ease-soft) both; animation-delay: var(--d, 0ms); }
.anim-pop { animation: mw-pop 520ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
.anim-float { animation: mw-float 7s ease-in-out infinite; animation-delay: var(--d, 0ms); }
.shimmer { background: linear-gradient(100deg, #F3EEF3 30%, #FBF8FB 50%, #F3EEF3 70%); background-size: 200% 100%; animation: mw-shimmer 1.6s linear infinite; }
.press { transition: transform var(--t-fast) var(--ease-soft); }
.press:active { transform: scale(0.97); }

/* Petals: a short celebration (for example after "I'll be there"). motion.js adds and removes them. */
.mw-petals { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.mw-petals i { position: absolute; top: 0; width: 12px; height: 16px; border-radius: 80% 10% 80% 10%; opacity: 0; animation: mw-petal var(--dur, 3.2s) var(--ease-soft) forwards; animation-delay: var(--delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .anim-rise, .anim-fade, .anim-pop, .anim-float { animation: none; }
  .shimmer { animation: none; }
  .mw-petals { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}