/* ==========================================================================
   Savannah & Justin – OPTIONAL enhancements (pairs with js/enhancements.js)
   Nothing here is needed for the design. Every rule is scoped to a class that
   the script adds to <html> (fx-ready, fx-<effect>), so if the script is removed
   or disabled this file has no effect. Delete both files to remove everything.
   ========================================================================== */

:root { --fx-ease: cubic-bezier(.22, .61, .36, 1); }

/* ---- 1 + 2. scroll reveals (images, text) ---- */
.fx-ready .fx-hide {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .9s var(--fx-ease), transform .9s var(--fx-ease);
}
.fx-ready .fx-hide.fx-rise-img { transform: translate3d(0, 20px, 0); transition-duration: 1.1s; }
.fx-ready .fx-hide.fx-fade-only { transform: none; }
.fx-ready .fx-hide.fx-in { opacity: 1; transform: none; }

/* ---- 3. hero photos fade in one after another ---- */
.fx-ready .fx-hero-item {
  opacity: 0;
  transition: opacity 1s var(--fx-ease);
  transition-delay: calc(var(--fx-i, 0) * .3s);
}
.fx-ready .fx-hero-item.fx-in { opacity: 1; }

/* ---- 4. active nav link: underline only, no size/spacing change ---- */
.fx-activeNav .site-nav a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .55em;
  transition: text-decoration-color .45s ease;
}
.fx-activeNav .site-nav a.is-active { text-decoration-color: currentColor; }

/* ---- 6. hover states ---- */
.fx-hoverEffects .site-nav a,
.fx-hoverEffects .lodges a,
.fx-hoverEffects .rsvp-button,
.fx-hoverEffects .choice-mark { transition: opacity .35s ease, text-decoration-color .45s ease; }
.fx-hoverEffects .site-nav a:hover { opacity: .7; }
.fx-hoverEffects .lodges a:hover { opacity: .72; }
.fx-hoverEffects .lodges a .lodge-name {
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .45em;
  transition: text-decoration-color .35s ease;
}
.fx-hoverEffects .lodges a:hover .lodge-name,
.fx-hoverEffects .lodges a:focus-visible .lodge-name { text-decoration-color: currentColor; }
.fx-hoverEffects .rsvp-button:hover { opacity: .7; }
.fx-hoverEffects .choice:hover .choice-mark { opacity: .7; }

/* ---- 7. order of events: line draws, then ticks / icons / times appear in turn ---- */
.fx-ready .timeline-line.fx-timeline-el {
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.3s var(--fx-ease);
}
.fx-ready .timeline-line.fx-timeline-el.fx-in { transform: none; }

.fx-ready .events.fx-timeline-el .event::before,
.fx-ready .events.fx-timeline-el .event-icon,
.fx-ready .events.fx-timeline-el .event-text {
  opacity: 0;
  transition: opacity .8s var(--fx-ease), transform .8s var(--fx-ease);
}
.fx-ready .events.fx-timeline-el .event-icon,
.fx-ready .events.fx-timeline-el .event-text { transform: translate3d(0, 8px, 0); }
.fx-ready .events.fx-timeline-el.fx-in .event::before,
.fx-ready .events.fx-timeline-el.fx-in .event-icon,
.fx-ready .events.fx-timeline-el.fx-in .event-text { opacity: 1; transform: none; }

.fx-ready .events.fx-timeline-el .ev-1 > *, .fx-ready .events.fx-timeline-el .ev-1::before { transition-delay: .25s; }
.fx-ready .events.fx-timeline-el .ev-2 > *, .fx-ready .events.fx-timeline-el .ev-2::before { transition-delay: .5s; }
.fx-ready .events.fx-timeline-el .ev-3 > *, .fx-ready .events.fx-timeline-el .ev-3::before { transition-delay: .75s; }
.fx-ready .events.fx-timeline-el .ev-4 > *, .fx-ready .events.fx-timeline-el .ev-4::before { transition-delay: 1s; }
.fx-ready .events.fx-timeline-el .ev-5 > *, .fx-ready .events.fx-timeline-el .ev-5::before { transition-delay: 1.25s; }
.fx-ready .events.fx-timeline-el .ev-6 > *, .fx-ready .events.fx-timeline-el .ev-6::before { transition-delay: 1.5s; }

/* ---- 8. optional very soft glow on the "Marry Me" sign (off by default in the JS config) ---- */
.fx-neonGlow .marry::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --fx-glow-y: 43%;
  background: radial-gradient(ellipse 26% 22% at 45% var(--fx-glow-y), rgba(255, 196, 120, .30), rgba(255, 196, 120, 0) 70%);
  mix-blend-mode: screen; opacity: 0;
  animation: fx-neon 7s ease-in-out infinite;
}
@media (max-width: 639px) { .fx-neonGlow .marry::after { --fx-glow-y: 46.6%; } }
@keyframes fx-neon { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }

/* ---- 9. gentle focus states (match the thin white line style) ---- */
.fx-focusStates .field,
.fx-focusStates .rsvp-button { transition: box-shadow .35s ease, background-color .35s ease, opacity .35s ease; }
.fx-focusStates .field:focus,
.fx-focusStates .field:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  background-color: rgba(255, 255, 255, .04);
}
.fx-focusStates .choice input:focus-visible + .choice-mark { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.fx-focusStates .rsvp-button:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }

/* belt and braces: no motion for visitors who asked for none */
@media (prefers-reduced-motion: reduce) {
  .fx-ready .fx-hide, .fx-ready .fx-hero-item,
  .fx-ready .timeline-line.fx-timeline-el, .fx-ready .events.fx-timeline-el *,
  .fx-ready .events.fx-timeline-el .event::before {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .fx-neonGlow .marry::after { animation: none; opacity: 0; }
}