/* SÁSTA.ai — "the ride": a page is a journey.
   Drop-in for any page: <link rel="stylesheet" href="/assets/v13/journey.css">
                         <script src="/assets/v13/journey.js" defer></script>
   journey.js builds the ride track and the scene layer; mark sections with
   data-scene="blue|cyan|gold|red|violet|green" and data-stop="Label".        */

@property --jr-a { syntax: '<color>'; inherits: true; initial-value: rgba(31,87,231,0); }
@property --jr-b { syntax: '<color>'; inherits: true; initial-value: rgba(231,26,95,0); }

html {
  --jr-ink: #f4f6ff; --jr-ink-dim: rgba(244,246,255,.55); --jr-rail: rgba(255,255,255,.12);
  --jr-glow: 1; --jr-dur: 1.4s;
  transition: --jr-a var(--jr-dur) ease, --jr-b var(--jr-dur) ease;
}
html[data-jr-theme="light"] {
  --jr-ink: #171a21; --jr-ink-dim: rgba(23,26,33,.55); --jr-rail: rgba(23,26,33,.14); --jr-glow: .6;
}

/* scene layer: two soft lights that change colour as you move between rooms */
.jr-scene {
  all: initial; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 8% 30%, var(--jr-a), transparent 70%),
    radial-gradient(55% 45% at 92% 70%, var(--jr-b), transparent 70%);
  opacity: var(--jr-glow);
}

/* the ball: a fixed cursor-ring particle field behind every page (ringfield.js) — content always wins */
.ring-bg { all: initial; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.ring-bg.gl-ok { opacity: .62; }
html[data-jr-theme="light"] .ring-bg.gl-ok { opacity: .38; }

/* ride track: a rail down the left with one station per section */
.jr-track {
  all: initial; box-sizing: border-box; position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 940;
  display: none; flex-direction: column; justify-content: space-between; height: 46vh; min-height: 300px; padding: 0;
}
@media (min-width: 1100px) { .jr-track { display: flex; } }
.jr-track::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--jr-rail); border-radius: 2px; }
.jr-track::after {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #4deeea, #d4a94e, #ff5e94);
  transform: scaleY(var(--jr-p, 0)); transform-origin: 50% 0;
}
.jr-stop {
  all: unset; box-sizing: border-box; position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; height: 12px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; color: var(--jr-ink-dim); font: 500 11px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.jr-stop i {
  all: unset; display: block; box-sizing: border-box; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--jr-rail); border: 2px solid transparent;
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s, box-shadow .3s;
}
.jr-stop span { all: unset; display: inline; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.jr-track:hover .jr-stop span, .jr-stop:focus-visible span { opacity: 1; transform: none; }
.jr-stop:hover, .jr-stop.is-on { color: var(--jr-ink); }
.jr-stop.is-on i { background: #4deeea; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(77,238,234,.18), 0 0 14px rgba(77,238,234,.6); }
.jr-stop.is-past i { background: var(--jr-ink-dim); }
.jr-stop:focus-visible { outline: 2px solid #4deeea; outline-offset: 4px; border-radius: 4px; }

/* Sally's orb: the concierge launcher (orb.js) — a glowing plasma sphere, bottom right */
.sally-orb { all: initial; position: fixed; right: 10px; bottom: 6px; z-index: 2147482999; display: flex; align-items: center; gap: 2px; font-family: "DM Sans", system-ui, sans-serif; }
.so-btn { all: unset; box-sizing: border-box; position: relative; display: block; width: 128px; height: 128px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.so-btn canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s; }
.so-btn canvas.gl-ok { opacity: 1; }
.so-halo { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(77,238,234,.62), rgba(31,87,231,.34) 52%, transparent 72%); filter: blur(9px); animation: so-breathe 3.4s ease-in-out infinite; }
.so-flat .so-halo { width: 70px; height: 70px; margin: -35px 0 0 -35px; filter: blur(4px); background: radial-gradient(circle at 40% 35%, #a1ffff, #4deeea 30%, #1f57e7 68%, #05070f 100%); }
.so-btn:hover .so-halo, .so-btn:focus-visible .so-halo { animation-duration: 1.6s; }
.so-btn:focus-visible { outline: 2px solid #4deeea; outline-offset: -14px; }
@keyframes so-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } }
.so-label { all: initial; display: grid; gap: 3px; padding: 10px 14px; border-radius: 14px; background: rgba(5,7,15,.78); border: 1px solid rgba(77,238,234,.28); backdrop-filter: blur(8px);
  color: #f4f6ff; font-family: "DM Sans", system-ui, sans-serif; text-align: right; opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .5s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.so-label b { font: 700 15px/1 "Exo 2", "DM Sans", sans-serif; letter-spacing: .01em; }
.so-label small { font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #4deeea; }
.sally-orb:hover .so-label, .sally-orb.so-hint .so-label, .so-btn:focus-visible + .so-label { opacity: 1; transform: none; }
html[data-jr-theme="light"] .so-label { background: rgba(255,255,255,.9); border-color: rgba(31,87,231,.25); color: #171a21; }
html[data-jr-theme="light"] .so-label small { color: #1f57e7; }
.so-note { all: initial; position: absolute; right: 18px; bottom: 118px; padding: 9px 13px; border-radius: 10px; background: rgba(5,7,15,.86); border: 1px solid rgba(77,238,234,.3);
  color: #f4f6ff; font: 500 12px/1.3 "DM Sans", system-ui, sans-serif; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s; pointer-events: none; }
.so-note.on { opacity: 1; transform: none; }
body.sally-open .sally-orb { opacity: 0; pointer-events: none; transition: opacity .25s; }
@media (max-width: 640px) { .so-btn { width: 100px; height: 100px; } .so-halo { width: 46px; height: 46px; margin: -23px 0 0 -23px; } .so-label { display: none; } .sally-orb { right: 4px; bottom: 2px; } }

@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
  .so-halo { animation: none; }
  .jr-track::after, .jr-stop i, .jr-stop span { transition: none; }
}