/* Pakstoor :: reveal.css :: v1.0-000005 :: 2026-06-01 */

/* 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); }
}
/* The hero H1 is the LCP element. Exempt ONLY it from the opacity:0
   load-in so it paints on the first frame — the eyebrow, subtitle,
   search, CTAs and trust chips keep their hero-intro stagger, so the
   cinematic load-in is preserved. Previously this node faded in over
   ~1s and (because reveal.css is deferred) was re-hidden late, both of
   which pushed out the LCP paint. 2026-06-01. */
.hero-title.hero-intro {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ============================================================
   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.
   ============================================================ */
/* Compose the bottom-fade gradient (from home.css) WITH the
   scroll-driven dim layer. Stacking lets the dim grow on scroll
   without nuking the gradient that sits behind the subtitle. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(9, 7, 10, 0.55) 0%,
      rgba(9, 7, 10, 0.20) 22%,
      rgba(9, 7, 10, 0.18) 50%,
      rgba(9, 7, 10, 0.22) 78%,
      rgba(20, 24, 29, 0.92) 97%,
      var(--bg) 100%),
    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;
  }
}

/* ============================================================
   HERO SUBTITLE — readability override
   The hero subtitle ("Pay safely. Ship by courier...") was
   barely visible against busy parts of the background photo.
   Bump from --ink-muted to full white + add a text-shadow that
   matches the title's, so it stays legible regardless of what
   the photo shows behind it.
   ============================================================ */
.hero-subtitle {
  color: var(--ink) !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   HERO TITLE — keep each phrase on its own line, never break
   *inside* a phrase. In Afrikaans "Verkoop Veilig." is longer
   than "Sell Safe.", so without this rule "Veilig." would drop
   onto a third line. Each <span>/<em> is one phrase; line-wrap
   only happens *between* them.
   ============================================================ */
.hero-title > span,
.hero-title > em {
  white-space: nowrap;
}