/* ==========================================================================
   Precious Moments - shared animation + interaction styles
   Loaded on every page after the Tailwind CDN config.
   ========================================================================== */

/* Smooth, accessible scroll-reveal.
   Elements start hidden and ease into place when scrolled into view.
   Honors users who prefer reduced motion (no movement, just shown). */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    /* Gentle ease: the old curve dumped almost all the movement into the
       first ~150ms, which made cards visibly "snap" in. This one ramps up
       softly and settles over a full second. */
    transition: opacity 1s cubic-bezier(0.33, 0.15, 0.25, 1),
                transform 1s cubic-bezier(0.33, 0.15, 0.25, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Stagger helpers for grids / sequential items */
  .reveal-d1 { transition-delay: 0.12s; }
  .reveal-d2 { transition-delay: 0.24s; }
  .reveal-d3 { transition-delay: 0.36s; }
  .reveal-d4 { transition-delay: 0.48s; }

  /* Cards with the card-lift hover effect need their `transition` for the
     hover, which used to override the reveal transition - so their fade
     snapped in instantly and the slide ran on the fast 0.4s hover timing.
     Reveal them with a keyframe animation instead, which runs alongside
     the hover transition. Slightly slower than the section reveals. */
  .card-lift.reveal.is-visible {
    animation: card-reveal 1.3s cubic-bezier(0.33, 0.15, 0.25, 1) backwards;
  }
  .card-lift.reveal-d1.is-visible { animation-delay: 0.15s; }
  .card-lift.reveal-d2.is-visible { animation-delay: 0.3s; }
  .card-lift.reveal-d3.is-visible { animation-delay: 0.45s; }
  .card-lift.reveal-d4.is-visible { animation-delay: 0.6s; }
  @keyframes card-reveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto !important; }
}

/* Mobile: the desktop section padding (120px) leaves big empty stretches
   between sections on a small screen, which - combined with the fade-in -
   made it look like the page had ended. Tighten it and soften the reveal
   travel distance. (!important because the Tailwind CDN injects its
   styles after this file.) */
@media (max-width: 767px) {
  .py-section-padding-v { padding-top: 64px !important; padding-bottom: 64px !important; }
  .pt-section-padding-v { padding-top: 64px !important; }
  .pb-section-padding-v { padding-bottom: 64px !important; }
  .mt-section-padding-v { margin-top: 64px !important; }
  .mb-section-padding-v { margin-bottom: 64px !important; }
  .my-section-padding-v { margin-top: 64px !important; margin-bottom: 64px !important; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .reveal { transform: translateY(16px); }
}

/* Sticky nav gains a soft shadow + slightly more opaque background once
   the page is scrolled, so it lifts off the content. */
#site-nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#site-nav.scrolled {
  background-color: rgba(249, 246, 241, 0.96);
  box-shadow: 0 1px 0 rgba(26, 28, 30, 0.05), 0 10px 30px -12px rgba(26, 28, 30, 0.18);
}

/* Generic gentle lift for interactive cards. Use alongside Tailwind hover
   classes; transform-based so it never causes layout shift. */
.card-lift {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -20px rgba(26, 28, 30, 0.28);
  }
}

/* Mobile menu open/close animation */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
#mobile-menu.open {
  max-height: 28rem;
  opacity: 1;
}

/* Contact form status message */
#form-status { transition: opacity 0.3s ease; min-height: 1.25rem; }

/* Contact form inline validation */
.field-error {
  color: #ba1a1a;
  font-family: "Libre Franklin", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  margin-top: 6px;
}
.field-error:empty { display: none; }
.input-error {
  border-color: #ba1a1a !important;
  --tw-ring-color: #ba1a1a !important;
}

/* intl-tel-input wrapper should span the full form column like the
   other inputs; the library's own styles handle the rest. */
.iti { width: 100%; }

/* Tailwind's form reset (loaded after the library CSS) clobbers the
   search box's left padding, making the placeholder overlap the
   magnifying-glass icon - restore the library's own spacing. */
.iti__search-input {
  padding-left: calc(
    var(--iti-spacer-horizontal, 8px) +
    var(--iti-globe-icon-size, 16px) +
    var(--iti-spacer-horizontal, 8px)
  ) !important;
}

/* The selected country / dial code is a <button>, which doesn't inherit
   the page font. Match it to the phone number text beside it: Tailwind's
   forms plugin renders the input text at 1rem, so use exactly that. */
.iti__selected-country {
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: transparent;
}

/* Availability banner (injected by main.js under the nav bar).
   Edit the AVAILABILITY settings at the top of assets/main.js to
   toggle it on/off or switch to waitlist mode. */
#availability-banner {
  display: block;
  text-align: center;
  background-color: #76826b; /* muted moss */
  color: #ffffff;
  font-family: "Libre Franklin", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 10px 16px;
  transition: background-color 0.3s ease;
}
#availability-banner:hover { background-color: #5c6852; }

/* FAQ accordion (home page) */
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { transition: transform 0.3s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }