/* ============================================================
   Animations layer — loaded after invite.css
   - Heart SVG draws itself on entry
   - Generic fade-up reveal (load + scroll triggered)
   - Photo lift on hover/tap
   - Respects prefers-reduced-motion
   ============================================================ */

/* ----- Heart drawing animation ------------------------------ */
/* The inline SVG path uses pathLength="1" so dash math is unitless. */
.heart-svg path[data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.heart-svg.is-visible path[data-draw] {
  animation: heart-draw 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards;
}
@keyframes heart-draw {
  to { stroke-dashoffset: 0; }
}

/* ----- Generic reveal (fade + slide up) --------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Elements that already use a transform for centering must keep
   that transform throughout the reveal — otherwise the .reveal
   translateY would override it and the element would slide AND
   shift off-center. These rules fade in place only. */
.hero-script.reveal,
.map-vector.reveal {
  transform: translateX(-50%);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}
.hero-script.reveal.is-visible,
.map-vector.reveal.is-visible {
  transform: translateX(-50%);
}

/* Stagger helpers for the page-load cascade.
     delay-1     hero script
     delay-2/3/4 three photos
     delay-6     everything else (text blocks + nav)
*/
.delay-1 { --reveal-delay: 1.0s; }
.delay-2 { --reveal-delay: 1.2s; }
.delay-3 { --reveal-delay: 1.4s; }
.delay-4 { --reveal-delay: 1.6s; }
.delay-6 { --reveal-delay: 1.8s; }

/* ----- Photo cells: subtle tap / hover lift + fade-in reveal --
   Includes opacity in the transition list so the .reveal fade
   actually animates (the .reveal rule's transition gets overridden
   here otherwise). Slide-up disabled for cells so the .reveal
   translateY doesn't fight the hover/tap transforms. */
.photo-row__cell {
  transition:
    opacity  1.8s ease-in-out var(--reveal-delay, 0s),
    transform 0.35s ease,
    box-shadow 0.35s ease;
  cursor: pointer;
}
.photo-row__cell.reveal {
  transform: none;
}
.photo-row__cell.reveal.is-visible {
  transform: none;
}
@media (hover: hover) {
  .photo-row__cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  }
}
.photo-row__cell:active {
  transform: scale(0.98);
}

/* ----- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .heart-svg.is-visible path[data-draw],
  .heart-svg path[data-draw] {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .photo-row__cell,
  .photo-row__cell:hover,
  .photo-row__cell:active {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}