/* ============================================================
   Imperial Meeting Point — animations.css
   Tiers included per Design Brief decision table:
   ALWAYS: scroll reveals, hero entrance, smooth accordion, toast(*)
   SECTION: SVG path draw (process), stats counter (no CSS)
   STYLE (Luxury): text line reveal, parallax
   NOT included: marquee, float, card tilt
   (*) toast visual styles live in components.css
   ============================================================ */

/* ---------- TIER 1 — ALWAYS ---------- */

/* Scroll reveals */
.reveal        { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-fade   { opacity: 0; transition: opacity var(--t-slow); }
.reveal-left   { opacity: 0; transform: translateX(-24px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-right  { opacity: 0; transform: translateX(24px);  transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.visible, .reveal-fade.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }

.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 90ms; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 180ms; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 270ms; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 360ms; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 450ms; }

/* Hero entrance (used on supporting text + CTAs; H1 uses text-line reveal) */
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-animate { opacity: 0; animation: heroIn .85s var(--ease-out) forwards; }
.hero-animate:nth-child(1) { animation-delay: .10s; }
.hero-animate:nth-child(2) { animation-delay: .22s; }
.hero-animate:nth-child(3) { animation-delay: .34s; }
.hero-animate:nth-child(4) { animation-delay: .46s; }

/* Smooth accordion (CSS grid trick) — used for ALL accordions (FAQ) */
.accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base); }
.accordion-body.open { grid-template-rows: 1fr; }
.accordion-body > * { overflow: hidden; }

/* ---------- TIER 2 — SECTION-CONDITIONAL ---------- */

/* SVG path draw — process-step icons + hairline dividers */
.draw-path {
  stroke-dasharray: var(--path-length, 300);
  stroke-dashoffset: var(--path-length, 300);
  transition: stroke-dashoffset 1.3s var(--ease-out);
}
.draw-path.visible { stroke-dashoffset: 0; }

/* ---------- TIER 3 — STYLE-CONDITIONAL (Luxury) ---------- */

/* Text line reveal — hero H1 + key display headings */
.reveal-line { overflow: hidden; display: block; }
.reveal-line-inner {
  display: block; transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease-out);
}
.reveal-line:nth-child(2) .reveal-line-inner { transition-delay: .08s; }
.reveal-line:nth-child(3) .reveal-line-inner { transition-delay: .16s; }
.reveal-line.visible .reveal-line-inner { transform: translateY(0); }

/* Parallax — hero decorative background only (disabled on mobile, see below) */
@media (max-width: 768px) { [data-parallax] { transform: none !important; } }

/* ---------- PHOTO ANIMATIONS (real imagery) ---------- */

/* Ken Burns — slow cinematic drift on hero + feature photos */
@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14) translate(1.5%, -1.5%); }
}
.kenburns img { animation: kenburns 30s ease-in-out infinite alternate; will-change: transform; }

/* Image reveal on scroll — a wine curtain retracts + the photo settles from a slight zoom */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img { transform: scale(1.12); transition: transform 1.5s var(--ease-out); }
.img-reveal.visible img { transform: scale(1); }
.img-reveal::after {
  content: ''; position: absolute; inset: 0; z-index: 2; background: var(--c-accent);
  transform-origin: left; transition: transform 1s var(--ease-out);
}
.img-reveal.visible::after { transform: scaleX(0); transform-origin: right; }

/* Marquee — scrolling keyword band */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ---------- REDUCED MOTION — always last ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-fade, .reveal-left, .reveal-right, .reveal-stagger > *,
  .reveal-line-inner, .draw-path { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .hero-animate { opacity: 1 !important; }
  [data-parallax] { transform: none !important; }
  .kenburns img, .img-reveal img { animation: none !important; transform: none !important; }
  .img-reveal::after { transform: scaleX(0) !important; }
  .marquee-track { animation: none !important; }
}