/* effects.css — Horizon Living Realty
   Motion techniques (2–4, sitewide, per the Design DNA):
   1. Staggered reveal — .reveal fades/rises in on IntersectionObserver.
   2. Hero entrance — headline + search console arrive on load, once.
   3. Hover system — card lift + 1.05 image zoom + gold key-line (see style.css).
   4. The Shoreline Trace scroll-draw — the signature divider/field draws in
      via stroke-dashoffset when it enters view (animations.js), not tied to
      scroll position. One curve, no overshoot: this is a documentary
      instrument, not a toy.
*/

/* ── Staggered reveal ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--transition), transform 0.7s var(--transition);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.stagger-parent .stagger-child {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--transition), transform 0.6s var(--transition);
}
.stagger-parent.is-visible .stagger-child { opacity: 1; transform: translateY(0); }
.stagger-parent.is-visible .stagger-child:nth-child(1) { transition-delay: 0s; }
.stagger-parent.is-visible .stagger-child:nth-child(2) { transition-delay: 0.08s; }
.stagger-parent.is-visible .stagger-child:nth-child(3) { transition-delay: 0.16s; }
.stagger-parent.is-visible .stagger-child:nth-child(4) { transition-delay: 0.24s; }

/* ── Hero entrance (once, on load) ────────────────────────────────── */
.hero .reveal { transition-delay: calc(var(--hero-i, 0) * 0.12s); }
.hero-eyebrow.reveal { --hero-i: 0; }
.hero-title.reveal { --hero-i: 1; }
.hero-sub.reveal { --hero-i: 2; }
.hero-search.reveal { --hero-i: 3; transform: translateY(28px); }

/* No-JS fallback: everything marked .reveal must still be fully visible if
   the observer script never runs (blocked CDN, disabled JS). */
html:not(.is-js) .reveal,
html:not(.is-js) .stagger-child { opacity: 1; transform: none; }

/* ── The Shoreline Trace — scroll-draw ────────────────────────────── */
.shoreline-path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  transition: stroke-dashoffset 1.6s var(--transition);
}
.shoreline-divider-wrap.is-visible .shoreline-path,
.shoreline-field-wrap.is-visible .shoreline-path,
html:not(.is-js) .shoreline-path {
  stroke-dashoffset: 0;
}

/* ── Hero Search Console Tab Transition ───────────────────────────── */
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-panel {
  animation: panelFadeIn 0.35s cubic-bezier(0.22,0.61,0.36,1) forwards;
}

/* ── Property card focus/hover already declared in style.css; the shared
   easing curve lives here as the single source of truth ───────────── */
.property-card, .community-media img, .property-media img, .community-arrow, .fav-icon {
  transition-timing-function: cubic-bezier(0.22,0.61,0.36,1);
}

/* ── Reduced motion — flatten everything to near-instant ──────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger-child {
    opacity: 1 !important; transform: none !important; transition-duration: 0.01ms !important;
  }
  .shoreline-path { transition-duration: 0.01ms !important; stroke-dashoffset: 0 !important; }
  .community-media img, .property-media img, .community-card, .property-card, .fav-icon, .community-arrow, .btn {
    transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
  }
}