/* VastuKriya, shared animation layer (loaded after each page's inline styles) */

/* Hero starfield canvas host */
.fx-host { position: relative; isolation: isolate; }
.fx-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Ambient ember layer ([data-ember]) */
.fx-ember {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
[data-ember] { isolation: isolate; }
[data-ember] > *:not(.fx-ember) { z-index: 1; }

/* Mouse parallax (JS sets --px/--py) */
[data-parallax] {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
[data-orbit] { will-change: rotate; }

/* Stacked card decks (data-deck) */
.deck-mode {
  display: block !important;
  position: relative;
  max-width: 560px;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: unset;
  gap: 0 !important;
}
.deck-mode > * {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%;
  margin: 0 !important;
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.32, 1.18), opacity 0.45s ease;
  will-change: transform;
}
.deck-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.deck-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(113,103,248,0.45);
  background: rgba(113,103,248,0.12);
  color: #aab4ff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.deck-btn:hover { background: rgba(113,103,248,0.4); color: #fff; transform: scale(1.08); }
.deck-dots { display: flex; gap: 8px; }
.deck-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(148,144,176,0.35);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.deck-dot-active {
  background: #8b83f9;
  box-shadow: 0 0 10px rgba(113,103,248,0.8);
  transform: scale(1.3);
}

/* Sequential cycle pop on synced targets */
.cycle-pop { animation: fxPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fxPop {
  0%   { transform: scale(0.72); opacity: 0.35; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Typewriter caret */
.fx-type::after {
  content: '\258D';
  margin-left: 2px;
  color: var(--marigold, #E8A33D);
  animation: fxCaret 1.05s steps(1) infinite;
}
@keyframes fxCaret { 50% { opacity: 0; } }

/* Shine sweep on primary buttons */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  left: -30%;
  width: 34%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg) translateX(-140%);
  pointer-events: none;
}
.btn-primary:hover::after { animation: fxShine 0.9s ease; }
@keyframes fxShine { to { transform: skewX(-18deg) translateX(560%); } }

/* Splitflap letter tiles */
.sf-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.sf-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 2.3em;
  padding: 0 0.18em;
  border-radius: 6px;
  background: rgba(232,163,61,0.08);
  border: 1px solid rgba(232,163,61,0.3);
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  color: var(--marigold-soft, #F0C179);
  backface-visibility: hidden;
}
.sf-tile.sf-gap { background: none; border: none; min-width: 0.8em; }
.sf-tile.sf-flip { animation: sfFlip 0.09s ease; }
@keyframes sfFlip {
  0%   { transform: rotateX(70deg); opacity: 0.4; }
  100% { transform: rotateX(0deg);  opacity: 1; }
}

/* Generic hover utilities */
.fx-lift { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.fx-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -16px rgba(0,0,0,0.35); }
.fx-glow { animation: fxGlowPulse 4s ease-in-out infinite; }
@keyframes fxGlowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(232,163,61,0); }
  50%      { box-shadow: 0 0 28px rgba(232,163,61,0.25); }
}

/* Generic scroll reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.rv.in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════
   OPTIONAL VARIANT LIBRARY (v2)
   Tasteful, opt-in micro-ambient animations. Add any of these classes to
   an element to give it a continuous, subtle motion. All are pure
   transform/opacity, all pause/disable under prefers-reduced-motion, and
   all are light on the compositor. Variants differ so the owner can pick
   favourites, 3–4 per main page as the site policy requests.
   ═══════════════════════════════════════════════════════════════════ */

/* fx-float, gentle vertical drift that never leaves the card bounds.
   Wrap a signature graphic (wheel / compass / rings) with it. */
.fx-float { animation: fxFloat 9s ease-in-out infinite; will-change: transform; }
@keyframes fxFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  33%      { transform: translateY(-9px) rotate(1.2deg) scale(1.015); }
  66%      { transform: translateY(4px) rotate(-0.8deg) scale(0.995); }
}

/* fx-draw, the classic soft bob (for single glyphs / emoji / icons). */
.fx-bob { animation: fxBob 3.2s ease-in-out infinite; will-change: transform; }
@keyframes fxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* fx-spin-slow / fx-spin-rev, slow continuous orbit (decorative rings,
   mandalas, dashed circles). Place inside an overflow-clipped wrapper. */
.fx-spin-slow { animation: fxSpin 36s linear infinite; will-change: transform; transform-origin: center; }
.fx-spin-rev  { animation: fxSpinRev 44s linear infinite; will-change: transform; transform-origin: center; }
@keyframes fxSpin    { to { transform: rotate(360deg); } }
@keyframes fxSpinRev { to { transform: rotate(-360deg); } }

/* fx-pulse-dot, a soft breathing scale used on "live"/attentive dots. */
.fx-breathe { animation: fxBreathe 4.2s ease-in-out infinite; will-change: transform; }
@keyframes fxBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* fx-ping, an expanding halo ring behind an element's ::before (reused so
   every page can share one ping keyframe). Apply to a wrapper and position
   the ::before centred via the element's own layout. */
@keyframes fxPing {
  0%   { transform: scale(0.6); opacity: 0.7; }
  80%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* fx-aurora, a soft animated gradient wash for hero or CTA backdrops.
   Use on a slow-moving, blurred, absolutely-positioned layer. */
.fx-aurora { animation: fxAurora 16s ease-in-out infinite; will-change: transform; }
@keyframes fxAurora {
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: 0.65; }
  33%      { transform: translate3d(3%, -2%, 0) scale(1.06); opacity: 0.85; }
  66%      { transform: translate3d(-3%, 2%, 0) scale(0.98); opacity: 0.55; }
}

/* fx-card, shared card hover polish. Drop this onto any card-ish element
   to get a consistent lift + border glow + icon pop under the cursor,
   independent of the page's own card styles. */
.fx-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}
.fx-card:hover { transform: translateY(-4px); }
.fx-card:hover .fx-ic { transform: translateY(-2px) scale(1.08); }
.fx-card .fx-ic { transition: transform 0.35s ease; display: inline-block; }

/* fx-hue, hover that shifts an element's accent border toward marigold
   and adds a soft glow (works on both light & dark pages via alpha). */
.fx-hoverglow { transition: transform 0.35s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.fx-hoverglow:hover {
  transform: translateY(-3px);
  border-color: rgba(232,163,61,0.6) !important;
  box-shadow: 0 16px 34px -16px rgba(232,163,61,0.4);
}

/* ── Vastu Purush Mandala graphic variants (from vastu-purush-variants.html) ── */
/* TYPE A, Classic Diagonal Line-Art */
.vp-a{ width:min(440px, 90vw); height:auto; overflow:visible; display:block; }
.vp-a .a-line{ fill:none; stroke:#6b6560; stroke-width:1.5; }
.vp-a .a-label-outer{ font-family:system-ui,-apple-system,sans-serif; font-size:13px; font-weight:700; fill:#2c2c2c; letter-spacing:0.08em; text-anchor:middle; dominant-baseline:central; }
.vp-a .a-draw{ stroke-dasharray:100; stroke-dashoffset:100; animation:aDraw 9s ease-in-out infinite; }
.vp-a .a-draw.d1{ animation-delay:0s; } .vp-a .a-draw.d2{ animation-delay:0.35s; } .vp-a .a-draw.d3{ animation-delay:0.7s; }
.vp-a .a-draw.d4{ animation-delay:1.05s; } .vp-a .a-draw.d5{ animation-delay:1.4s; } .vp-a .a-draw.d6{ animation-delay:1.75s; }
@keyframes aDraw{ 0%{stroke-dashoffset:100;opacity:1;} 34%{stroke-dashoffset:0;opacity:1;} 80%{stroke-dashoffset:0;opacity:1;} 90%{stroke-dashoffset:0;opacity:0;} 100%{stroke-dashoffset:100;opacity:0;} }
.vp-a .a-dot{ fill:#e69138; transform-box:fill-box; transform-origin:center; animation:aPulse 2.4s ease-in-out infinite; }
.vp-a .a-dot:nth-of-type(2){ animation-delay:0.35s; } .vp-a .a-dot:nth-of-type(3){ animation-delay:0.7s; } .vp-a .a-dot:nth-of-type(4){ animation-delay:1.05s; }
@keyframes aPulse{ 0%,100%{opacity:0.3;transform:scale(1);} 50%{opacity:1;transform:scale(1.6);} }

/* TYPE B, 81-Grid Blueprint */
.vp-b{ width:min(440px, 90vw); height:auto; display:block; }
.vp-b .b-outer{ fill:none; stroke:#1E2A38; stroke-width:2.5; }
.vp-b .b-grid line{ stroke:rgba(30,42,56,0.18); stroke-width:0.7; }
.vp-b .b-axis line{ stroke:rgba(30,42,56,0.45); stroke-width:1.2; }
.vp-b .b-brahma{ fill:rgba(173,133,54,0.18); stroke:#AD8536; stroke-width:1.2; }
.vp-b .b-corner{ fill:rgba(193,68,14,0.07); stroke:rgba(193,68,14,0.35); stroke-width:0.8; }
.vp-b .b-blink{ fill:rgba(173,133,54,0.02); animation:bScan 6.4s ease-in-out infinite; }
.vp-b .b-blink.p2{ animation-delay:1.6s; } .vp-b .b-blink.p3{ animation-delay:3.2s; } .vp-b .b-blink.p4{ animation-delay:4.8s; }
@keyframes bScan{ 0%,100%{ fill:rgba(173,133,54,0.02); } 30%{ fill:rgba(173,133,54,0.35); } }
.vp-b .b-tag{ font-family:'Courier New',monospace; font-size:15px; font-weight:700; fill:#1E2A38; text-anchor:middle; dominant-baseline:central; letter-spacing:0.12em; }
.vp-b .b-dir{ font-family:'Courier New',monospace; font-size:13px; font-weight:700; fill:#7B2E2E; text-anchor:middle; dominant-baseline:central; letter-spacing:0.1em; }

/* TYPE C, Golden Emblem Badge */
.vp-c{ width:min(260px, 70vw); height:auto; display:block; }
.vp-c .c-ring-outer{ fill:none; stroke:#AD8536; stroke-width:3; }
.vp-c .c-ring-dash{ fill:none; stroke:rgba(173,133,54,0.55); stroke-width:1.4; stroke-dasharray:5 8; transform-origin:120px 120px; animation:cSpin 40s linear infinite; }
.vp-c .c-spokes line{ stroke:rgba(173,133,54,0.5); stroke-width:1.6; }
.vp-c .c-spokes{ transform-origin:120px 120px; animation:cSpin 90s linear infinite reverse; }
.vp-c .c-gem{ fill:#C1440E; animation:cTwinkle 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.vp-c .c-gem:nth-of-type(2){ animation-delay:0.8s; } .vp-c .c-gem:nth-of-type(3){ animation-delay:1.6s; } .vp-c .c-gem:nth-of-type(4){ animation-delay:2.4s; }
.vp-c .c-core{ fill:#AD8536; animation:cGlow 4s ease-in-out infinite; }
.vp-c .c-man{ fill:#7B2E2E; }
.vp-c.vp-c-dark .c-man{ fill:#F0C179; }
.vp-c.vp-c-dark .c-ring-outer{ stroke:#C9A55E; }
.vp-c.vp-c-dark .c-gem{ fill:#F0C179; }
.vp-c.vp-c-dark .c-core{ fill:#F0C179; }
@keyframes cSpin{ to{ transform:rotate(360deg); } }
@keyframes cTwinkle{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }
@keyframes cGlow{ 0%,100%{ filter:drop-shadow(0 0 2px rgba(173,133,54,0.4)); } 50%{ filter:drop-shadow(0 0 10px rgba(173,133,54,0.85)); } }

/* TYPE D, Radiant Cosmic (dark pages) */
.vp-d{ width:min(480px, 90vw); height:auto; display:block; }
.vp-d .d-rays{ transform-origin:300px 300px; animation:cSpin 120s linear infinite; }
.vp-d .d-rays polygon{ fill:rgba(232,163,61,0.05); }
.vp-d .d-halo{ fill:none; stroke:rgba(232,163,61,0.35); stroke-width:1.2; }
.vp-d .d-figure{ fill:url(#vpdGold); }
.vp-d .d-glowfig{ fill:rgba(232,163,61,0.35); filter:url(#vpdBlur); }
.vp-d .d-star{ fill:#F0C179; animation:cTwinkle 2.8s ease-in-out infinite; }
.vp-d .d-star:nth-of-type(2){ animation-delay:0.6s; } .vp-d .d-star:nth-of-type(3){ animation-delay:1.2s; } .vp-d .d-star:nth-of-type(4){ animation-delay:1.8s; } .vp-d .d-star:nth-of-type(5){ animation-delay:2.3s; }
.vp-d .d-label{ font-family:system-ui,-apple-system,sans-serif; font-size:15px; font-weight:600; fill:rgba(244,237,224,0.85); letter-spacing:0.1em; text-anchor:middle; dominant-baseline:central; }
@media (prefers-reduced-motion: reduce){
  .vp-a .a-draw, .vp-a .a-dot, .vp-b .b-blink, .vp-c .c-ring-dash, .vp-c .c-spokes,
  .vp-c .c-gem, .vp-c .c-core, .vp-d .d-rays, .vp-d .d-star { animation:none !important; }
  .vp-a .a-draw{ stroke-dashoffset:0; opacity:1; }
}

/* Reduced motion: static, but legible */
@media (prefers-reduced-motion: reduce) {
  .fx-canvas { display: none !important; }
  .fx-ember  { display: none !important; }
  [data-parallax] { transform: none !important; }
  .cycle-pop, .fx-type::after { animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Variant library: freeze, keep visible */
  .fx-float, .fx-bob, .fx-spin-slow, .fx-spin-rev, .fx-breathe, .fx-aurora {
    animation: none !important;
    transform: none !important;
  }
  .fx-card, .fx-hoverglow { transform: none !important; box-shadow: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   STORY JOURNEY LAYER
   Every page's animations are chapters of one visual story:
   search → problem → searching for an answer → realisation → way forward.
   Scenes are scroll-timed (IntersectionObserver adds .in), animate
   transform/opacity/stroke-dashoffset only, and always stay inside the
   visible area (svg viewBox + width:min(680px,92vw)).
   No-JS / reduced-motion fallback: the scene's END state (path drawn,
   fog cleared, door open) is fully visible and static.
   ═══════════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; overflow-x: clip; }

/* ---------- Journey thread (page progress rail, continuity device) ---------- */
.journey-thread {
  position: fixed;
  left: 26px; top: 12vh;
  height: 76vh; width: 2px;
  z-index: 40;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(244,237,224,0.16) 0 6px, transparent 6px 12px);
}
.journey-thread::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 100%; height: var(--jp, 0%);
  background: linear-gradient(#E8A33D, #F0C179);
  box-shadow: 0 0 8px rgba(232,163,61,0.55);
}
.journey-dot {
  position: absolute; left: 50%; top: var(--jp, 0%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #F0C179;
  box-shadow: 0 0 12px rgba(232,163,61,0.9);
  transform: translate(-50%, -50%);
}
@media (max-width: 1180px) { .journey-thread { display: none; } }

/* ---------- Scene shell (always fits the viewport) ---------- */
.story-scene {
  position: relative;
  width: min(680px, 92vw);
  margin: 46px auto 34px;
}
.story-scene svg { display: block; width: 100%; height: auto; }
.story-cap {
  margin: 14px auto 0;
  max-width: 92%;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,237,224,0.5);
}
.story-cap::before { content: ', '; color: rgba(232,163,61,0.7); }
.story-cap::after  { content: ', '; color: rgba(232,163,61,0.7); }
@media (max-width: 640px) {
  .story-scene { margin: 30px auto 22px; }
  .story-cap { font-size: 0.64rem; letter-spacing: 0.12em; }
}

/* ---------- Hover explainer ----------
   Each scene carries a data-explain line (authored per page) that describes,
   in the visitor's own words, what the animation is VISUALLY portraying. It is
   meant to complement the surrounding copy, not repeat it. Shown on hover /
   keyboard-focus / tap. */
.story-scene .story-hint {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: 96%;
  background: linear-gradient(180deg, #1a1c38 0%, #0e1022 100%);
  border: 1px solid rgba(232, 163, 61, 0.45);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.7);
  color: #f4ede0;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 14px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 6;
}
.story-scene .story-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(232, 163, 61, 0.5);
}
.story-scene:hover .story-hint,
.story-scene:focus-within .story-hint,
.story-scene.story-hint-on .story-hint {
  opacity: 1;
  transform: translate(-50%, -96%);
}
/* keep the static caption subtle so the hover reveal feels like the "aha" */
.story-scene:not(:hover):not(:focus-within):not(.story-hint-on) + .story-cap-soft .story-cap { opacity: 0.55; }
@media (hover: none) {
  /* touch: hint pinned under the scene, revealed on tap or shown with scene */
  .story-scene .story-hint {
    position: static;
    transform: none;
    margin: 8px auto 0;
    width: 100%;
    max-width: 92%;
  }
  .story-scene.story-hint-on .story-hint { opacity: 1; transform: none; }
}

/* Scroll timing: JS adds .story-init, then .in when the chapter is relevant.
   Without JS the scene simply plays/shows; end state is always complete. */
.story-scene.story-init:not(.in) * { animation-play-state: paused !important; }

/* ---------- Shared scene vocabulary ---------- */
.story-scene .sp-stroke { fill: none; stroke: rgba(244,237,224,0.75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story-scene .sp-dim    { stroke: rgba(244,237,224,0.26); stroke-width: 1.6; }
.story-scene .sp-gold   { stroke: #E8A33D; }
.story-scene .sp-indigo { stroke: #8B83F9; }
.story-scene .sp-path   { stroke-dasharray: 100; animation: kDraw 1.8s ease-out both; }
.story-scene .sp-line   { animation: kDrawIn 1.4s ease-out both; }
.story-scene .sp-fill   { fill: rgba(244,237,224,0.75); stroke: none; }
.story-scene .sp-goldfill { fill: #E8A33D; }
.story-scene .sp-star   { animation: kPop 0.8s cubic-bezier(0.34,1.56,0.64,1) both, kTwinkle 3s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: center; }
.story-scene .sp-bob    { animation: kBob 3.4s ease-in-out infinite; }
.story-scene .sp-pulse  { animation: kHalo 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes kDraw    { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes kDrawIn  { from { stroke-dashoffset: 100; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes kPop     { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes kFadeIn  { from { opacity: 0; } to { opacity: var(--k-op, 1); } }
@keyframes kBob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes kTwinkle { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes kHalo    { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.28); } }
@keyframes kSpin    { to { transform: rotate(360deg); } }

/* ---------- Scene: crossroads (THE SEARCH) ---------- */
.ss-crossroads .sp-p1, .ss-crossroads .sp-p2 { stroke: rgba(244,237,224,0.4); }
.ss-crossroads .sp-p1 { animation-delay: 0.2s; }
.ss-crossroads .sp-p2 { animation-delay: 0.9s; }
.ss-crossroads .sp-p3 { animation-delay: 2.4s; animation-duration: 2.1s; }
.ss-crossroads .sp-roam { animation: kRoam 9s ease-in-out infinite; }
.ss-crossroads .sp-star { animation-delay: 4.6s, 5.6s; }
@keyframes kRoam {
  0%   { transform: translate(300px, 246px); opacity: 0; }
  7%   { opacity: 1; }
  28%  { transform: translate(140px, 206px); }
  44%  { transform: translate(300px, 246px); }
  68%  { transform: translate(516px, 200px); }
  84%  { transform: translate(300px, 246px); opacity: 1; }
  100% { transform: translate(300px, 246px); opacity: 0; }
}

/* ---------- Scene: fog (THE PROBLEM → REALISATION) ---------- */
.ss-fog .sp-fog { fill: rgba(244,237,224,0.13); stroke: none; animation: kClear 2.6s ease-in-out both; }
.ss-fog .sp-f1  { animation-delay: 1s; }
.ss-fog .sp-f2  { animation-delay: 2.3s; }
.ss-fog .sp-f3  { animation-delay: 3.6s; }
.ss-fog .sp-fp  { animation-duration: 2.8s; animation-delay: 0.6s; stroke: #E8A33D; }
.ss-fog .sp-lampg  { animation: kFadeIn 1.2s ease-out 4.2s both; --k-op: 1; }
.ss-fog .sp-halo   { fill: rgba(232,163,61,0.16); stroke: rgba(232,163,61,0.5); stroke-width: 1; }
@keyframes kClear { from { opacity: 0.95; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } }

/* ---------- Scene: walk (THE WAY FORWARD) ---------- */
.ss-walk .sp-wp  { animation-duration: 6s; animation-delay: 0.4s; stroke: #E8A33D; }
.ss-walk .sp-walker { animation: kWalk 6s ease-in-out 0.4s both; }
.ss-walk .sp-mile1 { animation: kPop 0.7s ease 1.8s both; }
.ss-walk .sp-mile2 { animation: kPop 0.7s ease 3.7s both; }
.ss-walk .sp-arch  { animation: kFadeIn 1.4s ease 4.9s both; }
.ss-walk .sp-lantern { fill: #F0C179; }
.ss-walk .sp-lanternh { fill: rgba(240,193,121,0.18); }
@keyframes kWalk { from { transform: translateX(0); } to { transform: translateX(416px); } }

/* ---------- Scene: threads (TANGLE → UNDERSTANDING) ---------- */
.ss-threads .sp-tangle { animation: kUntangle 2.4s ease-in-out both, kFadeOut 1.6s ease 3s both; transform-box: fill-box; transform-origin: center; }
.ss-threads .sp-t1 { --r: -14deg; }
.ss-threads .sp-t2 { --r: 15deg; animation-delay: 0.15s, 3s; }
.ss-threads .sp-t3 { --r: 7deg;  animation-delay: 0.3s, 3.1s; }
.ss-threads .sp-knot { animation: kUntie 1.4s ease 2.5s both; transform-box: fill-box; transform-origin: center; }
.ss-threads .sp-unified { stroke: #E8A33D; animation: kDraw 2s ease-out 3.2s both; }
.ss-threads .sp-star { animation-delay: 5s, 5.8s; }
@keyframes kUntangle { from { transform: rotate(var(--r, 12deg)); } to { transform: rotate(0deg); } }
@keyframes kFadeOut  { from { opacity: 0.85; } to { opacity: 0.16; } }
@keyframes kUntie    { from { opacity: 1; transform: scale(1) rotate(0deg); } to { opacity: 0; transform: scale(0.1) rotate(90deg); } }

/* ---------- Scene: door (REALISATION / NEXT STEP) ---------- */
.ss-door .sp-dglow { fill: url(#ssDoorGlow); animation: kFadeIn 1.6s ease 1.8s both; --k-op: 1; }
.ss-door .sp-panel { fill: rgba(20,26,44,0.9); stroke: rgba(232,163,61,0.65); stroke-width: 2; transform-box: fill-box; transform-origin: left center; animation: kDoorOpen 1.6s cubic-bezier(0.65,0,0.35,1) 1.7s both; }
.ss-door .sp-seam  { stroke: #F0C179; stroke-width: 2.4; animation: kSeamFade 0.8s ease 2.3s both; }
.ss-door .sp-cone  { fill: url(#ssDoorCone); transform-box: fill-box; transform-origin: top center; animation: kCone 2s cubic-bezier(0.22,0.9,0.32,1) 2.4s both; }
.ss-door .sp-infig { animation: kWalkIn 2.4s ease-in-out 3.1s both; }
@keyframes kDoorOpen { from { transform: rotateY(0deg); } to { transform: rotateY(-104deg); } }
@keyframes kSeamFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes kCone { from { opacity: 0; transform: scale(0.12); } to { opacity: 0.6; transform: scale(1); } }
@keyframes kWalkIn { from { transform: translateX(0); } to { transform: translateX(104px); } }

/* ---------- Scene: seed (GROWTH / BELIEF) ---------- */
.ss-seed .sp-sunring { stroke: rgba(232,163,61,0.55); stroke-dasharray: 4 7; fill: none; transform-box: fill-box; transform-origin: center; animation: kSpin 40s linear infinite; }
.ss-seed .sp-suncore { fill: #E8A33D; opacity: 0.85; }
.ss-seed .sp-seed    { animation: kFall 1.5s ease-in 0.5s both; }
.ss-seed .sp-stem    { stroke: #7CB56B; animation: kDraw 2.1s ease-out 1.7s both; }
.ss-seed .sp-leaf    { fill: #7CB56B; stroke: none; transform-box: fill-box; animation: kLeaf 1.2s cubic-bezier(0.34,1.4,0.64,1) both; }
.ss-seed .sp-l1 { transform-origin: right center; animation-delay: 2.7s; }
.ss-seed .sp-l2 { transform-origin: left center;  animation-delay: 3.2s; }
.ss-seed .sp-bloom { fill: #F0C179; animation: kPop 1s cubic-bezier(0.34,1.56,0.64,1) 4s both, kTwinkle 3.4s ease-in-out 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes kFall { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(130px); opacity: 1; } 86%, 100% { transform: translateY(130px); opacity: 0; } }
@keyframes kLeaf { from { opacity: 0; transform: scale(0) rotate(-28deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }

/* ---------- Scene: summit (STEP BY STEP) ---------- */
.ss-summit .sp-zig { stroke: #E8A33D; animation-duration: 3.4s; }
.ss-summit .sp-climb { animation: kClimb 7s ease-in-out 0.6s both; }
.ss-summit .sp-flag { animation: kPop 0.9s cubic-bezier(0.34,1.56,0.64,1) 6.4s both, kTwinkle 3s ease-in-out 7.2s infinite; transform-box: fill-box; transform-origin: center; }
.ss-summit .sp-step { fill: rgba(139,131,249,0.12); stroke: rgba(139,131,249,0.45); stroke-width: 1.4; animation: kFadeIn 1s ease both; }
.ss-summit .sp-s1 { animation-delay: 0.3s; } .ss-summit .sp-s2 { animation-delay: 1.1s; } .ss-summit .sp-s3 { animation-delay: 1.9s; }
@keyframes kClimb {
  0%   { transform: translate(0, 0); }
  14%  { transform: translate(0, 0); }
  30%  { transform: translate(105px, -20px); }
  44%  { transform: translate(105px, -20px); }
  62%  { transform: translate(235px, -60px); }
  74%  { transform: translate(235px, -60px); }
  92%  { transform: translate(366px, -100px); }
  100% { transform: translate(380px, -132px); }
}

/* ---------- Scene: rings (TWO PEOPLE / RIPPLES) ---------- */
.ss-rings .sp-ring { fill: none; stroke-width: 2; }
.ss-rings .sp-rl { stroke: #8B83F9; animation: kMeetL 3s ease-in-out both; }
.ss-rings .sp-rr { stroke: #E8A33D; animation: kMeetR 3s ease-in-out both; }
.ss-rings .sp-core1 { fill: #8B83F9; animation: kTwinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ss-rings .sp-core2 { fill: #F0C179; animation: kTwinkle 2.6s ease-in-out 1.3s infinite; transform-box: fill-box; transform-origin: center; }
.ss-rings .sp-lens  { fill: rgba(240,193,121,0.14); stroke: rgba(240,193,121,0.5); stroke-width: 1.2; animation: kFadeIn 1.6s ease 2.6s both; --k-op: 1; }
.ss-rings .sp-flame { fill: #F0C179; animation: kPop 1s cubic-bezier(0.34,1.56,0.64,1) 3.5s both, kFlame 2.2s ease-in-out 4.5s infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes kMeetL { from { transform: translateX(-34px); } to { transform: translateX(0); } }
@keyframes kMeetR { from { transform: translateX(34px); } to { transform: translateX(0); } }
@keyframes kFlame { 0%, 100% { transform: scaleY(1); opacity: 0.85; } 50% { transform: scaleY(1.18); opacity: 1; } }

/* ---------- Scene: loop (REPEATING PATTERN → WAY OUT) ---------- */
.ss-loop .sp-loopring { stroke: rgba(139,131,249,0.55); stroke-dasharray: 5 9; fill: none; }
.ss-loop .sp-spin { transform-box: view-box; transform-origin: 300px 158px; animation: kOrbit 6.5s ease-in-out both, kSpin 26s linear infinite; }
.ss-loop .sp-exit { stroke: #E8A33D; animation: kDraw 1.8s ease-out 5.6s both; }
.ss-loop .sp-exitdot { fill: #F0C179; animation: kExit 2.2s ease-in-out 5.8s both; }
.ss-loop .sp-arrowhead { stroke: #E8A33D; stroke-width: 2; fill: none; animation: kFadeIn 0.6s ease 7.4s both; }
@keyframes kOrbit { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
@keyframes kExit { from { transform: translate(300px, 158px); opacity: 0; } 12% { opacity: 1; } to { transform: translate(548px, 74px); opacity: 1; } }

/* ---------- Scene: grid-fill (THE GRID REVEALS) ---------- */
.ss-grid .sp-cell { fill: rgba(139,131,249,0.08); stroke: rgba(139,131,249,0.4); stroke-width: 1.4; animation: kPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both; transform-box: fill-box; transform-origin: center; }
.ss-grid .sp-c1 { animation-delay: 0.2s; } .ss-grid .sp-c2 { animation-delay: 0.38s; } .ss-grid .sp-c3 { animation-delay: 0.56s; }
.ss-grid .sp-c4 { animation-delay: 0.74s; } .ss-grid .sp-c6 { animation-delay: 0.92s; }
.ss-grid .sp-c7 { animation-delay: 1.1s; }  .ss-grid .sp-c8 { animation-delay: 1.28s; } .ss-grid .sp-c9 { animation-delay: 1.46s; }
.ss-grid .sp-center { fill: rgba(232,163,61,0.22); stroke: #E8A33D; animation-delay: 1.9s, 2.7s; animation-name: kPop, kHalo; animation-duration: 0.7s, 3s; animation-iteration-count: 1, infinite; }
.ss-grid .sp-scan { stroke: rgba(240,193,121,0.7); stroke-width: 1.6; animation: kScan 2.6s ease-in-out 0.4s both; }
@keyframes kScan { from { transform: translateY(0); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.8; } to { transform: translateY(158px); opacity: 0; } }

/* ---------- Scene: rise (SEVEN CENTRES) ---------- */
.ss-rise .sp-spine { stroke: rgba(244,237,224,0.4); animation-duration: 2.4s; }
.ss-rise .sp-cdot { animation: kPop 0.7s cubic-bezier(0.34,1.56,0.64,1) both, kTwinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ss-rise .sp-d1 { fill: #E05252; animation-delay: 0.5s, 4s; }
.ss-rise .sp-d2 { fill: #E8813D; animation-delay: 0.9s, 4.35s; }
.ss-rise .sp-d3 { fill: #E8A33D; animation-delay: 1.3s, 4.7s; }
.ss-rise .sp-d4 { fill: #7CB56B; animation-delay: 1.7s, 5.05s; }
.ss-rise .sp-d5 { fill: #5B8DD9; animation-delay: 2.1s, 5.4s; }
.ss-rise .sp-d6 { fill: #8B83F9; animation-delay: 2.5s, 5.75s; }
.ss-rise .sp-d7 { fill: #C084FC; animation-delay: 2.9s, 6.1s; }
.ss-rise .sp-aura { fill: none; stroke: rgba(192,132,252,0.6); stroke-width: 1.4; animation: kFadeIn 1.4s ease 3.4s both, kHalo 3.2s ease-in-out 4.4s infinite; transform-box: fill-box; transform-origin: center; }

/* ---------- Scene: spark (SCATTERED → FOCUSED) ---------- */
.ss-spark .sp-oring  { transform-box: view-box; transform-origin: 320px 150px; animation: kSpin 26s linear infinite; }
.ss-spark .sp-iring  { transform-box: view-box; transform-origin: 320px 150px; animation: kSpin 18s linear infinite reverse; }
.ss-spark .sp-odot, .ss-spark .sp-idot { animation: kPop 0.7s ease both; transform-box: fill-box; transform-origin: center; }
.ss-spark .sp-odot { fill: #8B83F9; } .ss-spark .sp-idot { fill: #F0C179; }
.ss-spark .sp-o1 { animation-delay: 0.1s; } .ss-spark .sp-o2 { animation-delay: 0.25s; } .ss-spark .sp-o3 { animation-delay: 0.4s; }
.ss-spark .sp-o4 { animation-delay: 0.55s; } .ss-spark .sp-o5 { animation-delay: 0.7s; } .ss-spark .sp-o6 { animation-delay: 0.85s; }
.ss-spark .sp-o7 { animation-delay: 1s; } .ss-spark .sp-o8 { animation-delay: 1.15s; }
.ss-spark .sp-i1 { animation-delay: 1.4s; } .ss-spark .sp-i2 { animation-delay: 1.55s; } .ss-spark .sp-i3 { animation-delay: 1.7s; }
.ss-spark .sp-i4 { animation-delay: 1.85s; } .ss-spark .sp-i5 { animation-delay: 2s; }
.ss-spark .sp-mandala { fill: none; stroke: rgba(232,163,61,0.6); stroke-dasharray: 4 8; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: kDrawIn 1.6s ease 2.2s both, kSpin 34s linear infinite; }
.ss-spark .sp-star { animation-delay: 3s, 3.8s; }

/* ---------- Reduced motion: show the finished scene, static ---------- */
@media (prefers-reduced-motion: reduce) {
  .journey-thread { display: none !important; }
  .story-scene * { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-RELEVANT EFFECT KIT
   Subject-specific motion so a page's animation says something about its
   own topic. Each effect is opt-in by class and plays once when the
   element (or an ancestor) gains `.in` from the site reveal observer in
   footer.html, so it stays in step with the rest of the page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fx-draw ── SVG line art that draws itself on, one shot.
   Set --dl to roughly the path length (default 240 covers most glyphs).
   Established pattern on this site: the vastu mandala SVGs already carry
   stroke-dasharray, so this generalises it instead of re-inventing it. */
.fx-draw {
  stroke-dasharray: var(--dl, 240);
  stroke-dashoffset: var(--dl, 240);
  transition: stroke-dashoffset 1.5s cubic-bezier(.25, .8, .3, 1);
}
.fx-draw.in, .in .fx-draw { stroke-dashoffset: 0; }
.fx-draw.d1 { transition-delay: .1s; }  .fx-draw.d2 { transition-delay: .28s; }
.fx-draw.d3 { transition-delay: .46s; } .fx-draw.d4 { transition-delay: .64s; }
.fx-draw.d5 { transition-delay: .82s; } .fx-draw.d6 { transition-delay: 1s; }
.fx-draw.d7 { transition-delay: 1.18s; } .fx-draw.d8 { transition-delay: 1.36s; }

/* ── fx-gridfill ── cells of a grid land one after another, reading order.
   Built for the Lo Shu 3x3 magic square: a square filling in sequence is
   the single most on-theme motion that page can have. Put the class on the
   grid container; every direct child becomes a cell. */
.fx-gridfill > * {
  opacity: 0;
  transform: scale(.62) translateY(10px);
  transition: opacity .42s ease, transform .52s cubic-bezier(.34, 1.5, .58, 1);
}
.fx-gridfill.in > * { opacity: 1; transform: scale(1) translateY(0); }
.fx-gridfill.in > *:nth-child(1) { transition-delay: .05s; }
.fx-gridfill.in > *:nth-child(2) { transition-delay: .14s; }
.fx-gridfill.in > *:nth-child(3) { transition-delay: .23s; }
.fx-gridfill.in > *:nth-child(4) { transition-delay: .32s; }
.fx-gridfill.in > *:nth-child(5) { transition-delay: .41s; }
.fx-gridfill.in > *:nth-child(6) { transition-delay: .50s; }
.fx-gridfill.in > *:nth-child(7) { transition-delay: .59s; }
.fx-gridfill.in > *:nth-child(8) { transition-delay: .68s; }
.fx-gridfill.in > *:nth-child(9) { transition-delay: .77s; }

/* ── fx-needle ── a compass needle swinging past north and damping onto it.
   For the Vastu pages, where "finding the right direction" is the whole
   subject. One shot, ~2.4s, then it holds true north. */
.fx-needle { transform-box: fill-box; transform-origin: center; }
.fx-needle.in, .in .fx-needle { animation: fxNeedle 2.4s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes fxNeedle {
  0%   { transform: rotate(-58deg); }
  35%  { transform: rotate(22deg); }
  58%  { transform: rotate(-11deg); }
  76%  { transform: rotate(5deg); }
  90%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
/* Hover: nudge the needle so the graphic answers the pointer. */
[data-orbit-hover]:hover .fx-needle, .fx-needle-host:hover .fx-needle {
  animation: fxNeedleNudge 1.1s cubic-bezier(.3, .7, .4, 1) both;
}
@keyframes fxNeedleNudge {
  0% { transform: rotate(0deg); } 30% { transform: rotate(-9deg); }
  62% { transform: rotate(4deg); } 100% { transform: rotate(0deg); }
}

/* ── fx-tile ── a numerology digit that turns over on hover and lifts.
   Gives the number pages a tactile, split-flap feel without JS. */
.fx-tile { transition: transform .45s cubic-bezier(.3, 1.4, .55, 1), box-shadow .4s ease, border-color .4s ease; will-change: transform; }
.fx-tile:hover {
  transform: translateY(-5px) rotateX(-12deg) scale(1.05);
  border-color: rgba(232,163,61,.65);
  box-shadow: 0 16px 30px -14px rgba(232,163,61,.45);
}

/* ── fx-halo ── a soft breathing ring behind chakra / energy graphics. */
.fx-halo { position: relative; }
.fx-halo::before {
  content: ''; position: absolute; inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(232,163,61,.28);
  animation: fxPing 3.6s ease-out infinite;
  pointer-events: none;
}

/* ── Reduced motion: every effect above resolves to its finished state ── */
@media (prefers-reduced-motion: reduce) {
  .fx-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .fx-gridfill > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-needle, .fx-needle.in, .in .fx-needle,
  [data-orbit-hover]:hover .fx-needle, .fx-needle-host:hover .fx-needle {
    animation: none !important; transform: none !important;
  }
  .fx-tile, .fx-tile:hover { transform: none !important; box-shadow: none !important; transition: none !important; }
  .fx-halo::before { animation: none !important; }
}