/* 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);
}
@media (prefers-color-scheme: light) {
  .fx-rv-on [data-reveal-section="lift"] { box-shadow: 0 -40px 80px -40px rgba(60, 30, 0, .16); }
}
/* 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, #ff6a00 30%, #ff6a00 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 106, 0, .45);
  transform: scaleX(0); opacity: 0;
}
.fx-rv-off .fx-seam { display: none; }

@supports (animation-timeline: view()) {
  .fx-rv-sd [data-reveal-section] {
    animation: fx-sec-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 62%;
  }
  .fx-rv-sd [data-reveal-section="lift"] { animation-name: fx-sec-lift; animation-range: entry 0% entry 70%; }
  .fx-rv-sd [data-reveal-section] > .fx-seam {
    animation: fx-seam linear both; animation-timeline: view(); animation-range: entry 10% entry 95%;
  }
  .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; }
}
@keyframes fx-sec-wipe {
  0%   { clip-path: inset(0 7% -30vh 7% round 56px); transform: translate3d(0, 90px, 0) scale(.94); opacity: .25; }
  55%  { opacity: 1; }
  100% { clip-path: inset(-30vh -30vw -30vh -30vw round 0); transform: none; opacity: 1; }   /* ends unclipped: glows and shadows may overflow */
}
@keyframes fx-sec-lift {
  0%   { clip-path: inset(0 3% -30vh 3% round 48px 48px 0 0); transform: translate3d(0, 40px, 0) scale(.97); }
  100% { clip-path: inset(-30vh -30vw -30vh -30vw round 0); transform: none; }
}
@keyframes fx-seam {
  0% { transform: scaleX(0); opacity: 0; } 35% { opacity: 1; } 75% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; }
}
@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); }
}

/* the same, driven by the script where scroll-timeline is missing */
.fx-rv-js [data-reveal-section] {
  --p: var(--fx-sp, 1);
  clip-path: inset(calc(var(--p) * -30vh) calc((1 - var(--p)) * 7% - var(--p) * 30vw) -30vh calc((1 - var(--p)) * 7% - var(--p) * 30vw) round calc((1 - var(--p)) * 56px));
  transform: translate3d(0, calc((1 - var(--p)) * 90px), 0) scale(calc(.94 + .06 * var(--p)));
  opacity: calc(.25 + .75 * var(--p));
}
.fx-rv-js [data-reveal-section] > .fx-seam { transform: scaleX(var(--fx-sp, 1)); opacity: calc(var(--fx-sp, 1) * (1 - var(--fx-sp, 1)) * 4); }

/* 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: rgba(255, 106, 0, .08);
}
.fx-progress__fill {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(90deg, #d94f00, #e85d00 45%, #ff6a00);
  box-shadow: 0 0 12px rgba(255, 106, 0, .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: #ff6a00; box-shadow: 0 0 0 4px rgba(255, 106, 0, .18), 0 0 22px 6px rgba(255, 106, 0, .55);
}
[dir="rtl"] .fx-progress__fill, .fx-progress__fill:dir(rtl) { background: linear-gradient(270deg, #d94f00, #e85d00 45%, #ff6a00); 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; }
}