/* fx-reveal v2 · strong section transitions. Pair with fx-reveal.js.
   All hiding is behind html.fx-rv-on (set by the script), so no-JS = visible. */
:root {
  --fx-rv-out: cubic-bezier(.16, 1, .3, 1);
  --fx-rv-spring: var(--fx-spring-soft, cubic-bezier(.2, .9, .25, 1.04));
  --fx-rv-step: 80ms;          /* stagger between siblings */
  --fx-rv-word: 55ms;          /* stagger between words */
}

/* ========================================================================
   1 · element reveals (time-based, spring)
   ======================================================================== */
.fx-rv-on [data-reveal] {
  transition:
    opacity 900ms var(--fx-rv-out),
    transform 1150ms var(--fx-rv-spring),
    filter 900ms var(--fx-rv-out),
    clip-path 1200ms var(--fx-rv-out);
  transition-delay: calc(var(--i, 0) * var(--fx-rv-step));
}
.fx-rv-on:not(.fx-rv-scrub) [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 48px, 0); }
.fx-rv-on:not(.fx-rv-scrub) [data-reveal="fade"]:not(.is-in)  { transform: none; }
.fx-rv-on:not(.fx-rv-scrub) [data-reveal="scale"]:not(.is-in) { transform: scale(.86); }
.fx-rv-on:not(.fx-rv-scrub) [data-reveal="blur"]:not(.is-in)  { transform: translate3d(0, 26px, 0); filter: blur(14px); }
.fx-rv-on:not(.fx-rv-scrub) [data-reveal="side"]:not(.is-in)  { transform: translate3d(calc(var(--fx-side, 1) * 64px), 0, 0); }
[dir="rtl"] [data-reveal="side"], [data-reveal="side"]:dir(rtl) { --fx-side: -1; }
/* depth: cards come up from below the page, tilted back, and land */
.fx-rv-on [data-reveal="depth"] { transform-origin: 50% 100%; }
.fx-rv-on:not(.fx-rv-scrub) [data-reveal="depth"]:not(.is-in) { transform: perspective(1100px) translate3d(0, 80px, -80px) rotateX(16deg) scale(.9); }
/* mask: an image or panel uncovers from the bottom edge up */
.fx-rv-on:not(.fx-rv-scrub) [data-reveal="mask"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0 round 28px); transform: scale(1.06); }
.fx-rv-on [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round 28px); }

/* words: the heading stays, each word rises out of a blur */
.fx-rv-on [data-reveal="words"], .fx-rv-on:not(.fx-rv-scrub) [data-reveal="words"]:not(.is-in) { opacity: 1; transform: none; filter: none; }
.fx-words .fx-w { display: inline-block; }
.fx-rv-on .fx-words .fx-w {
  transition: opacity 760ms var(--fx-rv-out), transform 1000ms var(--fx-rv-spring), filter 820ms var(--fx-rv-out);
  transition-delay: calc(var(--wi, 0) * var(--fx-rv-word) + var(--i, 0) * var(--fx-rv-step));
}
.fx-rv-on:not(.fx-rv-scrub) [data-reveal="words"]:not(.is-in) .fx-w { opacity: 0; transform: translate3d(0, .6em, 0) rotate(.001deg); filter: blur(10px); }
.fx-words .fx-sr, [data-reveal="words"] > .fx-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fx-rv-on [data-reveal].is-instant, .fx-rv-on [data-reveal].is-instant .fx-w { transition: none !important; }
.fx-rv-on [data-reveal].is-in { will-change: auto; }

/* ========================================================================
   2 · sections: wipe open, the hero pin, the lift over it (scrubbed)
   ======================================================================== */
.fx-rv-on [data-reveal-section] { position: relative; transform-origin: 50% 0; }
.fx-rv-on [data-reveal-section="lift"] {
  z-index: 2; background-color: var(--fx-lift-bg, var(--bg, #070707));
  box-shadow: 0 -50px 90px -30px rgba(0, 0, 0, .75);
}

/* the seam: a line of orange light that opens across the top of each section */
.fx-seam {
  position: absolute; z-index: 3; inset-block-start: 0; inset-inline: 8%; block-size: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--orange) 30%, var(--orange) 70%, transparent);
  box-shadow: 0 0 18px 2px rgb(var(--orange-rgb) / .45);
  transform: scaleX(0); opacity: 0;
}
.fx-rv-off .fx-seam { display: none; }

@supports (animation-timeline: view()) {
  .fx-rv-sd [data-reveal-hero] {
    animation: fx-hero-pin linear both; animation-timeline: scroll(root block); animation-range: 0px 90vh;
    transform-origin: 50% 30%;
  }
  [data-parallax] { animation: fx-px linear both; animation-timeline: view(); animation-range: cover; }
}
/* section wipe (inset clip, rising from 90px at .94, fading in from .25), the
   lift (48px rounded top over the hero) and the seam are scrubbed by
   fx-reveal.js (driveSections) with inline styles while the page scrolls. */
@keyframes fx-hero-pin {
  to { transform: translate3d(0, 28vh, 0) scale(.92); opacity: .12; }
}
@keyframes fx-px {
  from { transform: translate3d(0, calc(var(--fx-px, .2) * 120px), 0); }
  to   { transform: translate3d(0, calc(var(--fx-px, .2) * -120px), 0); }
}

/* scrub mode (opt-in): element reveals follow the scrollbar instead of a clock */
@supports (animation-timeline: view()) {
  .fx-rv-scrub [data-reveal] { animation: fx-rv-rise linear both; animation-timeline: view(); animation-range: entry calc(2% + var(--i, 0) * 4%) entry calc(62% + var(--i, 0) * 4%); }
  .fx-rv-scrub [data-reveal="depth"] { animation-name: fx-rv-depth; }
  .fx-rv-scrub [data-reveal="words"] { animation-name: fx-rv-blur; }
}
@keyframes fx-rv-rise  { from { opacity: 0; transform: translate3d(0, 48px, 0); } }
@keyframes fx-rv-depth { from { opacity: 0; transform: perspective(1100px) translate3d(0, 80px, -80px) rotateX(16deg) scale(.9); } }
@keyframes fx-rv-blur  { from { opacity: 0; filter: blur(12px); transform: translate3d(0, 24px, 0); } }

/* ========================================================================
   3 · reading progress, brand orange, with a glowing head
   ======================================================================== */
.fx-progress {
  position: fixed; z-index: 1000; inset-block-start: 0; inset-inline: 0; block-size: 3px; pointer-events: none;
  overflow-x: clip; overflow-y: visible; background: rgb(var(--orange-rgb) / .08);
}
.fx-progress__fill {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(90deg, #d94f00, var(--orange-deep) 45%, var(--orange));
  box-shadow: 0 0 12px rgb(var(--orange-rgb) / .6);
  transform: translateX(-100%);
}
.fx-progress__fill::after { /* the head */
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -5px; inline-size: 10px; block-size: 10px; margin-block-start: -5px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 4px rgb(var(--orange-rgb) / .18), 0 0 22px 6px rgb(var(--orange-rgb) / .55);
}
[dir="rtl"] .fx-progress__fill, .fx-progress__fill:dir(rtl) { background: linear-gradient(270deg, #d94f00, var(--orange-deep) 45%, var(--orange)); transform: translateX(100%); }
@supports (animation-timeline: scroll()) {
  .fx-progress__fill { animation: fx-prog linear both; animation-timeline: scroll(root block); }
  [dir="rtl"] .fx-progress__fill, .fx-progress__fill:dir(rtl) { animation-name: fx-prog-rtl; }
}
@keyframes fx-prog     { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes fx-prog-rtl { from { transform: translateX(100%); }  to { transform: translateX(0); } }

/* ========================================================================
   4 · reduced motion: nothing moves, nothing hides
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal] .fx-w, [data-reveal-section], [data-reveal-hero], [data-parallax] {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  .fx-seam { display: none !important; }
}