/* ============================================================
   Arsh Consumers — keyframes, reveal states, reduced-motion overrides
   transform + opacity only (never layout properties)
   ============================================================ */

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- Hero entrance (masked line reveal) ---------- */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(105%); }
.hero.is-ready .line-mask > span {
  transform: translateY(0);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--l, 0) * 90ms + 120ms);
}
.hero__inner .lead, .hero__inner .hero__cta, .hero__inner .hero__manifest, .hero__inner .eyebrow {
  opacity: 0; transform: translateY(16px);
}
.hero.is-ready .eyebrow { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: 60ms; }
.hero.is-ready .lead { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 480ms, transform 700ms var(--ease-out) 480ms; }
.hero.is-ready .hero__cta { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 620ms, transform 700ms var(--ease-out) 620ms; }
.hero.is-ready .hero__manifest { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 760ms, transform 700ms var(--ease-out) 760ms; }

/* Hero image focal move on entrance — animate the wrapper (opacity + lift),
   keep a constant overscan scale on the img so parallax has headroom and
   never fights this transition. */
.hero__media img { transform: scale(1.08); }
.hero__media { opacity: 0; transform: translateY(18px); }
.hero.is-ready .hero__media { opacity: 1; transform: none; transition: opacity 1200ms var(--ease-out), transform 1400ms var(--ease-out); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: var(--z-preloader);
  display: grid; place-items: center; background: var(--paper-50);
  transition: transform 700ms var(--ease-in-out), opacity 400ms ease 300ms;
}
.preloader.is-done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.preloader__inner { display: grid; gap: var(--space-4); justify-items: center; width: min(320px, 70vw); }
.preloader__label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-muted); overflow: hidden;
}
.preloader__label span { display: inline-block; transform: translateY(110%); animation: pl-rise 600ms var(--ease-out) 120ms forwards; }
.preloader__rule { width: 100%; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.preloader__rule::after {
  content: ""; position: absolute; inset: 0; background: var(--brass-500); transform: scaleX(0); transform-origin: left;
  animation: pl-draw 1200ms var(--ease-out) 200ms forwards;
}
.preloader__count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--brass-700); letter-spacing: 0.1em; }

@keyframes pl-rise { to { transform: translateY(0); } }
@keyframes pl-draw { to { transform: scaleX(1); } }

/* ---------- Reduced motion: resolve everything instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .line-mask > span { transform: none !important; transition: none !important; }
  .hero__inner .lead, .hero__inner .hero__cta, .hero__inner .hero__manifest, .hero__inner .eyebrow { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__media { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__media img { transform: scale(1.08) !important; transition: none !important; }
  .preloader { display: none !important; }
  .preloader__rule::after, .preloader__label span { animation: none !important; }
  * { scroll-behavior: auto !important; }
  .btn, .tile, .tile img, .gallery img, .link-wipe::after, .nav-link::after { transition-duration: 90ms !important; }
}