/* animations.css — keyframes, scroll-reveal, on-load choreography */

/* ---- Keyframes ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.4); opacity: .5; transform-origin: top; }
  50%      { transform: scaleY(1);  opacity: 1; transform-origin: top; }
}
@keyframes haze {
  0%   { transform: translate3d(0,0,0) scale(1.08); }
  50%  { transform: translate3d(-1.5%, -1%, 0) scale(1.12); }
  100% { transform: translate3d(0,0,0) scale(1.08); }
}

/* ---- Scroll reveal — "exposure" develop-in ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out),
    filter var(--dur-4) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
  filter: blur(6px);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; filter: blur(0); }

.reveal-fade { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal-fade.in-view { opacity: 1; }

/* image clip-reveal (print developing) */
.reveal-clip { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-4) var(--ease-out); }
.reveal-clip.in-view { clip-path: inset(0 0 0 0); }

/* viewfinder brackets draw/settle in */
.vframe.reveal-vf::before, .vframe.reveal-vf::after,
.vframe.reveal-vf .vframe__media::before, .vframe.reveal-vf .vframe__media::after { opacity: 0; transition: opacity var(--dur-3) var(--ease-out) 220ms; }
.vframe.reveal-vf.in-view::before, .vframe.reveal-vf.in-view::after,
.vframe.reveal-vf.in-view .vframe__media::before, .vframe.reveal-vf.in-view .vframe__media::after { opacity: 1; }

/* ---- On-load hero choreography ---- */
.hero__bg img { animation: haze 26s var(--ease-inout) infinite; }
.hero__scroll span { animation: scrollPulse 2.4s var(--ease-inout) infinite; }

/* line-mask reveal for hero heading */
.line-mask { overflow: hidden; display: block; }
.line-mask > * {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-4) var(--ease-out);
}
html.is-loaded .hero .line-mask > * { transform: translateY(0); }
.hero .line-mask:nth-child(2) > * { transition-delay: .1s; }

.hero__lead, .hero__cta, .hero__meta {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
html.is-loaded .hero__lead { opacity: 1; transform: none; transition-delay: .35s; }
html.is-loaded .hero__cta  { opacity: 1; transform: none; transition-delay: .45s; }
html.is-loaded .hero__meta { opacity: 1; transform: none; transition-delay: .55s; }

/* count-up holds layout */
[data-count] { font-variant-numeric: tabular-nums lining-nums; }

/* ---- Reduced motion: show everything, kill motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-fade { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal-clip { clip-path: none !important; }
  .line-mask > * { transform: none !important; }
  .hero__lead, .hero__cta, .hero__meta { opacity: 1 !important; transform: none !important; }
  .vframe.reveal-vf::before, .vframe.reveal-vf::after,
  .vframe.reveal-vf .vframe__media::before, .vframe.reveal-vf .vframe__media::after { opacity: 1 !important; }
}