/* madushka.com — loader + ripple/slide page transitions + scroll motion */

/* Critical page bg (must not depend on style.css — prevents white flash) */
html {
  background: #eef2fb;
}
html.dark {
  background: #111114;
}

/* ---------- Loader pending (head boot) ---------- */
html.fx-loader-pending body {
  overflow: hidden;
}

/* ---------- Session loader (glass + aurora, matches site theme) ---------- */
#site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-bg, #eef2fb);
  transition: opacity 0.55s ease;
  overflow: hidden;
}
html.dark #site-loader {
  background: var(--page-bg, #111114);
}
#site-loader.is-loaded {
  opacity: 0;
  pointer-events: none;
}
#site-loader.is-fade {
  opacity: 0;
  pointer-events: none;
}

.loader-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.loader-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  animation: loaderDrift 22s ease-in-out infinite;
}
.loader-blob.b1 {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  background: #8ec5ff;
  top: -12%;
  left: -10%;
}
.loader-blob.b2 {
  width: min(46vw, 380px);
  height: min(46vw, 380px);
  background: #e3a6ff;
  bottom: -14%;
  right: -8%;
  animation-delay: -7s;
}
.loader-blob.b3 {
  width: min(36vw, 300px);
  height: min(36vw, 300px);
  background: #a8c8ff;
  top: 42%;
  left: 56%;
  animation-delay: -13s;
  opacity: 0.42;
}
html.dark .loader-blob.b1 { background: #1e3a6e; }
html.dark .loader-blob.b2 { background: #4a2266; }
html.dark .loader-blob.b3 { background: #1e2c5e; }

@keyframes loaderDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.06); }
}

.loader-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 32px 32px;
  width: auto;
  max-width: min(94vw, 460px);
  background: var(--glass-fill, rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.65));
  border-radius: var(--radius-xl, 28px);
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(31, 42, 90, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5));
  transform: translate3d(0, 0, 0);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark .loader-panel {
  background: var(--glass-fill, rgba(28, 28, 32, 0.55));
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06));
}
#site-loader.is-loaded .loader-panel,
#site-loader.is-fade .loader-panel {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.97);
}

.loader-logo {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 6px 18px rgba(10, 132, 255, 0.22);
  opacity: 0;
  animation: loaderFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

.loader-ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: min(82vw, 400px);
  height: min(82vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-ring-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid rgba(10, 132, 255, 0.14);
  box-shadow: inset 0 0 32px rgba(191, 90, 242, 0.1);
}
html.dark .loader-ring-track {
  border-color: rgba(10, 132, 255, 0.22);
  box-shadow: inset 0 0 36px rgba(191, 90, 242, 0.14);
}

.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: #0a84ff;
  border-right-color: #bf5af2;
  box-shadow: 0 0 28px rgba(10, 132, 255, 0.32);
  will-change: transform;
  backface-visibility: hidden;
  animation: loaderSpin 1.05s linear infinite;
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

.loader-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  max-width: 68%;
  padding: 0 6px;
  pointer-events: none;
}

.loader-text-line {
  display: block;
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  font-size: clamp(0.82rem, 2.6vw, 1.28rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(135deg, #0a84ff, #bf5af2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loader-text-line span {
  display: inline-block;
  white-space: pre;
  transform: translateY(110%) rotate(4deg);
  opacity: 0;
  background: linear-gradient(135deg, #0a84ff, #bf5af2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: letterReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes letterReveal {
  to { transform: translateY(0) rotate(0deg); opacity: 1; }
}

@keyframes loaderFadeIn {
  to { opacity: 1; }
}

/* ---------- 60fps transition mode (pause heavy bg work) ---------- */
html.fx-transition-active .blob,
html.fx-splash-pending .blob {
  animation-play-state: paused !important;
}
html.fx-transition-active .bg-scene::after,
html.fx-splash-pending .bg-scene::after {
  animation-play-state: paused !important;
}
html.fx-transition-active .grad-text,
html.fx-splash-pending .grad-text {
  animation-play-state: paused !important;
}

/* ---------- Page transition: ripple exit + slide-up enter ---------- */
.fx-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
}
.fx-page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: var(--fx-page-bg, #eef2fb);
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity;
}
html.dark .fx-page-curtain {
  background: var(--fx-page-bg, #111114);
}

.fx-ripple-ring {
  position: absolute;
  left: var(--ripple-x, 50vw);
  top: var(--ripple-y, 50vh);
  width: 140vmax;
  height: 140vmax;
  margin: -70vmax 0 0 -70vmax;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.fx-ripple-ring.r1 {
  background: radial-gradient(circle, rgba(10, 132, 255, 0.24) 0%, rgba(191, 90, 242, 0.12) 26%, transparent 58%);
}
.fx-ripple-ring.r2 {
  background: radial-gradient(circle, transparent 0%, rgba(191, 90, 242, 0.14) 34%, transparent 66%);
}
.fx-ripple-ring.r3 {
  border: 1px solid rgba(10, 132, 255, 0.22);
  background: transparent;
}

html.fx-page-exit-pending body {
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.fx-page-exit-active body {
  opacity: 0.35;
  filter: blur(5px);
}

html.fx-page-exit-active .fx-page-curtain {
  animation: fxCurtainIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fxCurtainIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html.fx-page-exit-active .fx-ripple-ring.r1 {
  animation: fxRippleExpand 580ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html.fx-page-exit-active .fx-ripple-ring.r2 {
  animation: fxRippleExpand 680ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}
html.fx-page-exit-active .fx-ripple-ring.r3 {
  animation: fxRippleExpand 760ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards;
}

@keyframes fxRippleExpand {
  0%   { transform: scale(0); opacity: 0.62; }
  35%  { opacity: 0.34; }
  100% { transform: scale(1); opacity: 0; }
}

html.fx-page-enter-pending body {
  transform: translate3d(0, 11vh, 0) scale(0.985);
  will-change: transform;
}
html.fx-page-enter-pending.fx-page-enter-active body {
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: none;
}

html.fx-page-enter-pending.fx-page-enter-active .fx-ripple-ring.r1 {
  animation: fxRippleEnter 720ms cubic-bezier(0.22, 1, 0.36, 1) 60ms forwards;
}

@keyframes fxRippleEnter {
  0%   { transform: scale(0.15); opacity: 0.28; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---------- AJAX nav + WebGL distortion ---------- */
.fx-gl-canvas {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  visibility: visible !important;
}
.fx-gl-canvas.is-active {
  opacity: 1;
}

html.fx-gl-active body > :not(#fx-gl-canvas) {
  visibility: hidden;
}

html.fx-nav-pending body {
  transition:
    transform 1880ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1880ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.fx-nav-leaving {
  transform: scale(0.96);
  filter: blur(4px) saturate(1.12);
}
html.fx-gl-active body.fx-nav-leaving {
  transform: none;
  filter: none;
}
html.fx-nav-pending main {
  transition: opacity 220ms ease;
}
body.fx-nav-leaving main {
  opacity: 0.78;
}

html.fx-nav-swapped main {
  animation: fxNavEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fxNavEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html.fx-nav-busy {
  cursor: progress;
}

html.fx-nav-css-transition body {
  transition:
    transform 1880ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1880ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease;
}
html.fx-nav-css-transition-active body {
  transform: scale(0.96);
  filter: blur(4px) saturate(1.12);
  opacity: 0.75;
}

.fx-liquid-blob {
  position: fixed;
  left: var(--ripple-x, 50vw);
  top: var(--ripple-y, 50vh);
  z-index: 9999;
  width: 160vmax;
  height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  pointer-events: none;
  border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%;
  transform: scale(0);
  opacity: 0;
  background:
    radial-gradient(circle at 38% 36%, rgba(120, 190, 255, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 62% 58%, rgba(180, 100, 240, 0.42) 0%, transparent 48%),
    radial-gradient(circle, rgba(10, 132, 255, 0.38) 0%, rgba(191, 90, 242, 0.22) 38%, transparent 68%);
  box-shadow:
    inset 0 0 80px rgba(255, 255, 255, 0.18),
    0 0 120px rgba(10, 132, 255, 0.22);
  will-change: transform, opacity, border-radius;
}
.fx-liquid-blob.is-active {
  animation: fxLiquidExpand 1880ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fxLiquidExpand {
  0%   { transform: scale(0); opacity: 0.72; border-radius: 50%; }
  35%  { opacity: 0.58; border-radius: 44% 56% 52% 48% / 50% 46% 54% 50%; }
  100% { transform: scale(1); opacity: 0; border-radius: 38% 62% 58% 42% / 46% 54% 48% 52%; }
}

/* Liquid curtain rise — footer links (WebGL in fx-gl.js) */
html.fx-curtain-pending,
html.fx-curtain-active {
  overflow: hidden;
}
body.fx-curtain-leaving {
  filter: brightness(0.94) saturate(1.06);
  transition: filter 320ms ease;
}
html.fx-curtain-swapped main {
  animation: fxCurtainEnter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fxCurtainEnter {
  from { opacity: 0.88; }
  to   { opacity: 1; }
}

html.fx-nav-curtain-css body {
  transition: filter 1920ms ease;
}
html.fx-nav-curtain-css-active body {
  filter: brightness(0.9) saturate(1.08);
}

.fx-curtain-blob {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  height: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(10, 132, 255, 0.42) 0%, rgba(191, 90, 242, 0.28) 38%, transparent 100%);
  box-shadow: 0 -24px 80px rgba(10, 132, 255, 0.22);
  will-change: height, opacity;
}
.fx-curtain-blob.is-active {
  animation: fxCurtainRise 1920ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fxCurtainRise {
  0%   { height: 0; opacity: 0.85; }
  100% { height: 100vh; opacity: 0; }
}

.fx-gl-canvas.fx-gl-mode-curtain {
  z-index: 10001;
}

/* Quick fade — mid-page content links */
body.fx-fade-leaving main {
  transition: opacity 160ms ease;
  opacity: 0;
}
html.fx-fade-swapped main.fx-fade-enter {
  animation: fxFadeEnter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fxFadeEnter {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Scroll reveals (tuned) ---------- */
.reveal {
  transition:
    opacity .42s cubic-bezier(.2, .7, .3, 1),
    transform .42s cubic-bezier(.2, .7, .3, 1);
}
.reveal.reveal-armed {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Card lift hovers ---------- */
.fx-card-lift {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.fx-card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}
.glass.fx-tilt.fx-card-lift:hover {
  transform: perspective(900px) rotateX(var(--fx-ry, 0deg)) rotateY(var(--fx-rx, 0deg)) translateY(-4px);
}

/* Blob page transition — content fades while orb takes focus */
html.blob-transition-active .site-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
}
html.blob-transition-active #blob-canvas {
  z-index: 2;
  transition: z-index 0s;
}
html.blob-transition-enter .site-content {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.pin-story {
  position: relative;
  isolation: isolate;
}
.pin-story-aura {
  position: absolute;
  inset: -8% -4%;
  z-index: -1;
  pointer-events: none;
  border-radius: 40px;
  opacity: .55;
  filter: blur(48px);
  transition: background .55s cubic-bezier(.2, .7, .3, 1), opacity .55s ease;
  background: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(10, 132, 255, .28), transparent 70%);
}
.pin-story[data-chapter="0"] .pin-story-aura {
  background: radial-gradient(ellipse 80% 60% at 28% 42%, rgba(10, 132, 255, .32), transparent 72%);
}
.pin-story[data-chapter="1"] .pin-story-aura {
  background: radial-gradient(ellipse 80% 60% at 72% 38%, rgba(48, 176, 199, .3), transparent 72%);
}
.pin-story[data-chapter="2"] .pin-story-aura {
  background: radial-gradient(ellipse 80% 60% at 40% 50%, rgba(191, 90, 242, .32), transparent 72%);
}
.pin-story[data-chapter="3"] .pin-story-aura {
  background: radial-gradient(ellipse 80% 60% at 60% 44%, rgba(255, 149, 0, .26), transparent 72%);
}
html.dark .pin-story-aura { opacity: .42; }

/* ---------- Phase B: hero shimmer, bio scroll, story cards ---------- */
.hero-title-refactored {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15em;
  margin-top: 0.25em;
  margin-bottom: 0.35em;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  cursor: default;
}
.hero-line {
  display: block;
  will-change: transform, opacity;
  animation: heroLineFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.fx-loader-pending .hero-line { animation-play-state: paused !important; }
html:not(.fx-loader-pending) .hero-line { animation-play-state: running !important; }
.hero-line-1 { animation-delay: 0.10s; }
.hero-line-2 { animation-delay: 0.25s; }
.hero-line-3 { animation-delay: 0.40s; }
@keyframes heroLineFadeUp {
  0% { opacity: 0; transform: translate3d(0, 24px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.grad-text-shimmer {
  display: inline-block;
  background: linear-gradient(110deg, #0a84ff 0%, #5e5ce6 25%, #bf5af2 50%, #5e5ce6 75%, #0a84ff 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShimmer 6s linear infinite;
  transition: filter 0.3s ease;
}
html.dark .grad-text-shimmer {
  background: linear-gradient(110deg, #30b0c7 0%, #0a84ff 25%, #bf5af2 50%, #0a84ff 75%, #30b0c7 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gradientShimmer {
  0% { background-position: 0% center; }
  100% { background-position: -200% center; }
}
.hero-title-refactored:hover .grad-text-shimmer,
.grad-text-shimmer:hover {
  filter: brightness(1.22) drop-shadow(0 0 16px rgba(191, 90, 242, 0.35));
}
#hero-bio-scroll {
  height: 120vh;
  position: relative;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.bio-sticky-window {
  position: sticky;
  top: 12vh;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.2rem 2.5rem 2.4rem;
  border-radius: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--glass-shadow);
  z-index: 5;
}
html.dark .bio-sticky-window {
  background: rgba(22, 22, 28, 0.68);
  border-color: rgba(255, 255, 255, 0.12);
}
.bio-cta-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
html.dark .bio-cta-reveal { border-top-color: rgba(255, 255, 255, 0.08); }
.bio-cta-reveal.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bio-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
html.dark .bio-window-bar { border-bottom-color: rgba(255, 255, 255, 0.08); }
.bio-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.bio-dot.red { background: #ff5f56; }
.bio-dot.yellow { background: #ffbd2e; }
.bio-dot.green { background: #27c93f; }
.bio-window-title {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 600;
  opacity: 0.55;
  letter-spacing: 0.05em;
}
.bio-paragraph {
  font-size: clamp(1.2rem, 2.6vw, 1.78rem);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -0.015em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.38em;
  row-gap: 0.32em;
}
.bio-paragraph > span {
  display: inline-block;
  opacity: 0.15;
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
  filter: blur(1.2px);
  transform: scale(0.97);
}
.bio-paragraph > span.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1.02);
}
.highlight-brand { font-weight: 800; }
.highlight-brand.is-active {
  opacity: 1 !important;
  background: linear-gradient(110deg, #0a84ff 0%, #bf5af2 50%, #30b0c7 100%);
  background-size: 180% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(191, 90, 242, 0.45)) !important;
  transform: scale(1.06) !important;
}
.pin-story-sticky {
  position: sticky;
  top: 8vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story-card-grid { perspective: 1000px; }
.story-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}
.story-card [data-depth="32"] { transform: translateZ(32px); }
.story-card [data-depth="22"] { transform: translateZ(22px); }
.story-card [data-depth="12"] { transform: translateZ(12px); }
.story-card.story-tech:hover,
.stat-card-tech:hover {
  box-shadow: 0 16px 45px rgba(10, 132, 255, 0.25), 0 0 24px rgba(191, 90, 242, 0.25), var(--glass-shadow-hover) !important;
  border-color: rgba(10, 132, 255, 0.5) !important;
}
.story-card.story-travel:hover,
.stat-card-travel:hover {
  box-shadow: 0 16px 45px rgba(48, 209, 88, 0.25), 0 0 24px rgba(50, 215, 206, 0.25), var(--glass-shadow-hover) !important;
  border-color: rgba(48, 209, 88, 0.5) !important;
}

/* ---------- Journey timeline draw ---------- */
#journey .timeline-draw::before {
  transform-origin: top center;
  transform: scaleY(var(--tl-line, 0));
  opacity: .65;
  transition: none;
}
#journey .timeline-draw .tl-item::before {
  opacity: 0;
  transform: scale(.45);
  transition: opacity .35s cubic-bezier(.2, .7, .3, 1), transform .35s cubic-bezier(.2, .7, .3, 1);
}
#journey .timeline-draw .tl-item.tl-mark-visible::before {
  opacity: 1;
  transform: scale(1);
}
#journey .timeline-draw .tl-item.tl-mark-visible .tl-card {
  animation: fx-tl-card-in .4s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes fx-tl-card-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx-loader-pending body { overflow: auto; }
  #site-loader { transition: opacity .25s ease; }
  .loader-blob { animation: none; }
  .loader-text-line span { animation: none; opacity: 1; transform: none; }
  .loader-text-line { opacity: 1; }
  .loader-logo { animation: none; opacity: 1; }
  .loader-ring { animation: none; opacity: 0.85; }
  .fx-page-transition,
  .fx-page-curtain,
  .fx-liquid-blob,
  .fx-curtain-blob { display: none !important; }
  html.fx-nav-pending body,
  body.fx-nav-leaving,
  body.fx-curtain-leaving,
  html.fx-nav-css-transition-active body,
  html.fx-nav-curtain-css-active body,
  html.fx-curtain-active,
  html.fx-fade-swapped main.fx-fade-enter,
  html.fx-gl-active body > :not(#fx-gl-canvas) {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html.fx-page-enter-pending body,
  html.fx-page-exit-active body {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .reveal,
  .reveal.reveal-armed {
    transition: opacity .2s ease;
    transform: none !important;
  }
  .reveal.reveal-armed:not(.visible) { opacity: 0; }
  .fx-card-lift:hover { transform: none; }
  .pin-story-aura { transition: none; }
  #journey .timeline-draw .tl-item.tl-mark-visible .tl-card { animation: none; }
  #journey .timeline-draw .tl-item::before { transition: opacity .2s; transform: none; }
}