/* Pakstoor :: reveal.css :: v1.0-000001 :: 2026-04-19 */

/* Base timing */
:root {
  --reveal-duration: 900ms;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Generic up fade ---- */
.reveal,
.reveal-up {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible,
.reveal-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---- Slide from left ---- */
.reveal-left {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---- Slide from right ---- */
.reveal-right {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---- Soft fade only (no translate) — used for rail containers ---- */
.reveal-soft {
  opacity: 0;
  transition: opacity 1100ms var(--reveal-easing);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-soft.is-visible { opacity: 1; }

/* ---- Hero-intro (on load, not scroll) ---- */
.hero-intro {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: heroFadeIn 1000ms var(--reveal-easing) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes heroFadeIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ============================================================
   HERO BACKGROUND — progressive dim as user scrolls away
   Uses CSS scroll-driven animations where supported.
   JS fallback sets --hero-dim via rAF on other browsers.
   ============================================================ */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9, 7, 10, var(--hero-dim, 0));
  pointer-events: none;
  z-index: 1;
  transition: none;
}
.hero-inner, .hero-content, .hero-vignette { position: relative; z-index: 2; }

/* Section below hero fades background texture out completely — a
   calm slate for product rails. Rendered by home.css via body
   class added once scrolled past hero sentinel. */
body.past-hero .rail,
body.past-hero .cats,
body.past-hero .nudge {
  /* Rails already sit on bg; no change needed except ensuring
     they feel "flat" — no branded texture bleeding through. */
}

/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-soft,
  .hero-intro {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}