/* ============================================================
   BEAM Experience Engine v2 — Living Architecture (shared)
   The experience layer that makes five destinations feel like five
   rooms of one intelligent place. Each room is built from five depth
   strata, injected behind content by the engine (no page markup):

     horizon      (.x-horizon)   — where the room's light comes from
     architecture (.x-arch)      — the structure that frames the room
     ambient      (.x-signature) — the light field the member sits in
     content      (the page)     — untouched
     foreground   (.x-fg)        — near-field framing, pulls depth close

   Motion is never decorative: each room moves only in the way its
   purpose moves (Daily: light settles · Compass: breathing stillness ·
   Discover: environmental drift · Command: purposeful convergence ·
   Founder: structural precision). Purely additive — namespaced --x-* /
   .x-* / [data-place]; all strata are fixed, non-interactive, behind
   content, compositor-only (opacity/transform). Unsupported browsers
   fall back to ordinary navigation with zero visual cost.
   Cinematic references explored via Higgsfield, translated (not
   copied) into light + geometry here.
   ============================================================ */

:root {
  /* Shared easing + timing (one language across every destination) */
  --x-ease: cubic-bezier(.22, 1, .36, 1);
  --x-ease-out: cubic-bezier(.16, 1, .3, 1);
  --x-exact: cubic-bezier(.2, 0, 0, 1);       /* Founder: precise, no wobble */
  --x-dur-in: 460ms;
  --x-dur-out: 340ms;
  /* Depth scale (foreground → background) */
  --x-z-bg: -3; --x-z-ambient: -2; --x-z-content: 1; --x-z-fg: 20;
  /* Parallax offsets (driven by JS; 0 by default so nothing moves) */
  --x-px: 0px; --x-py: 0px;
  /* Returning home to Daily warms the settle (JS sets to 1) */
  --x-home: 0;
  /* Per-destination identity signature (hue, warmth) — overridden per place */
  --x-signature: 42 70% 58%;   /* default gold */
}

/* Destination signatures — each place its own atmosphere/accent. */
:root[data-place="daily"]     { --x-signature: 38 92% 62%; }  /* morning warmth */
:root[data-place="compass"]   { --x-signature: 45 60% 60%; }  /* centered calm */
:root[data-place="discover"]  { --x-signature: 168 55% 52%; } /* curiosity (teal) */
:root[data-place="command"]   { --x-signature: 42 85% 55%; }  /* purpose (gold) */
:root[data-place="founder"]   { --x-signature: 210 40% 62%; } /* precision (cool) */

/* ── Cross-document transitions: moving between rooms of one place ────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: x-room-out var(--x-dur-out) var(--x-ease) both; }
::view-transition-new(root) { animation: x-room-in var(--x-dur-in) var(--x-ease-out) both; }

@keyframes x-room-out { to   { opacity: 0; transform: scale(.99) translateY(-8px); } }
@keyframes x-room-in  { from { opacity: 0; transform: scale(1.014) translateY(12px); } to { opacity: 1; transform: none; } }

/* Directional orientation — forward advances deeper, back returns. JS tags the
   transition type from the destination's place order (Daily→Compass→Discover→Command→Founder). */
:root:active-view-transition-type(x-forward)::view-transition-old(root) { animation-name: x-out-fwd; }
:root:active-view-transition-type(x-forward)::view-transition-new(root) { animation-name: x-in-fwd; }
:root:active-view-transition-type(x-back)::view-transition-old(root)    { animation-name: x-out-back; }
:root:active-view-transition-type(x-back)::view-transition-new(root)    { animation-name: x-in-back; }

@keyframes x-out-fwd  { to   { opacity: 0; transform: translateX(-4%) scale(.985); } }
@keyframes x-in-fwd   { from { opacity: 0; transform: translateX(5%)  scale(1.01);  } to { opacity: 1; transform: none; } }
@keyframes x-out-back { to   { opacity: 0; transform: translateX(4%)  scale(.985); } }
@keyframes x-in-back  { from { opacity: 0; transform: translateX(-5%) scale(1.01);  } to { opacity: 1; transform: none; } }

/* ── The strata (injected by the engine; all decorative, all behind content) ── */
.x-horizon, .x-arch, .x-signature, .x-fg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
.x-horizon, .x-arch, .x-signature {
  opacity: 0; will-change: opacity, transform;
  transition: opacity 1.1s var(--x-ease-out), transform 1.5s var(--x-ease-out);
}
.x-fg { opacity: 0; transition: opacity 1.6s var(--x-ease-out); }
:root.x-arrived .x-horizon,
:root.x-arrived .x-arch,
:root.x-arrived .x-signature,
:root.x-arrived .x-fg { opacity: 1; transform: none; }

/* Reusable depth + ambient utilities (opt-in; never applied destructively) */
.x-layer-bg      { position: fixed; inset: 0; z-index: var(--x-z-bg); pointer-events: none; }
.x-layer-ambient { position: fixed; inset: 0; z-index: var(--x-z-ambient); pointer-events: none; }
.x-haze {
  position: fixed; inset: 0; z-index: var(--x-z-ambient); pointer-events: none;
  background: radial-gradient(130% 90% at 50% -12%, transparent 58%, rgba(0, 0, 0, .28) 100%);
  mix-blend-mode: multiply; opacity: .6;
}

/* Parallax: strata drift with the pointer to build spatial depth. Distant
   layers move least (horizon .5 · architecture .8 · page env 1). Content: never. */
[data-x-depth] {
  will-change: transform;
  transform: translate3d(calc(var(--x-px) * var(--x-depth, 0)), calc(var(--x-py) * var(--x-depth, 0)), 0);
  transition: transform .6s var(--x-ease-out);
}

/* ════════════════════════════════════════════════════════════════════════════
   DAILY — The Morning Room. Prepared before you arrive.
   Light source: a low, distant horizon — the day itself, already waiting —
   framed by dark architecture above. Motion: the light settles, once.
   ════════════════════════════════════════════════════════════════════════════ */
[data-place="daily"] .x-horizon {
  background:
    /* the sun, just clearing the horizon (warmer when returning home) */
    radial-gradient(30% 18% at 63% 29%, hsla(36, 96%, 68%, calc(.30 + .12 * var(--x-home))), transparent 70%),
    /* the horizon line — a thin bright seam with glow above and below */
    linear-gradient(180deg, transparent 26.5%, hsla(38, 92%, 66%, .05) 28.2%, hsla(38, 94%, 66%, calc(.26 + .08 * var(--x-home))) 29.4%, hsla(38, 90%, 62%, .10) 31.4%, transparent 45%),
    /* dawn haze rising off the horizon */
    linear-gradient(180deg, transparent 16%, hsla(34, 82%, 58%, .08) 29%, transparent 42%);
  transform: translateY(-1.6%);
  transition-duration: 1.6s, calc(2.1s + .9s * var(--x-home));
}
[data-place="daily"] .x-arch {
  background:
    /* the dark ceiling plane that frames the morning */
    linear-gradient(180deg, rgba(5, 5, 8, .55), rgba(5, 5, 8, .2) 8%, transparent 17%),
    /* near walls, left and right */
    linear-gradient(90deg,  rgba(5, 5, 8, .38), transparent 9%),
    linear-gradient(270deg, rgba(5, 5, 8, .38), transparent 9%);
}
[data-place="daily"] .x-signature {
  background: radial-gradient(120% 60% at 50% 24%, hsla(38, 90%, 62%, .10), transparent 62%);
}
[data-place="daily"] .x-fg {
  background:
    /* the floor catching the morning — a soft reflected sheen */
    radial-gradient(85% 26% at 50% 103%, hsla(36, 72%, 52%, .07), transparent 70%),
    radial-gradient(145% 115% at 50% 48%, transparent 60%, rgba(2, 2, 4, .34) 100%);
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPASS — The Sanctuary. Everything pulls toward the center.
   Light source: a single floor-anchored bloom with fine concentric rings.
   Motion: breathing stillness — a slow exhale, nothing else.
   ════════════════════════════════════════════════════════════════════════════ */
[data-place="compass"] .x-horizon { background: none; }  /* the center IS the destination */
[data-place="compass"] .x-signature {
  background:
    /* the floor pool */
    radial-gradient(21% 13% at 50% 72%, hsla(46, 82%, 66%, .28), transparent 70%),
    /* the light rising from it */
    radial-gradient(9% 27% at 50% 55%, hsla(46, 76%, 64%, .13), transparent 72%),
    /* its warmth reaching the room */
    radial-gradient(54% 42% at 50% 71%, hsla(45, 60%, 58%, .10), transparent 68%);
  transform-origin: 50% 72%;
  animation: x-breathe 9s ease-in-out 2.2s infinite;
}
[data-place="compass"] .x-arch {
  /* fine concentric rings on the floor — the room orients to its center */
  background: repeating-radial-gradient(circle at 50% 72%,
    transparent 0 86px, hsla(46, 72%, 62%, .06) 86px 87.5px);
  -webkit-mask-image: radial-gradient(56% 44% at 50% 72%, #000 18%, transparent 74%);
          mask-image: radial-gradient(56% 44% at 50% 72%, #000 18%, transparent 74%);
}
[data-place="compass"] .x-fg {
  /* walls dissolve into darkness — the center is the only destination */
  background: radial-gradient(115% 92% at 50% 62%, transparent 42%, rgba(4, 4, 7, .5) 100%);
}
@keyframes x-breathe {
  0%, 100% { transform: scale(1);     opacity: 1;   }
  50%      { transform: scale(1.022); opacity: .87; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DISCOVER — The Exploration Gallery. Always something just beyond.
   Light source: a cool teal distance seen past warm thresholds at the edges —
   adjacent rooms glowing through their doorways. Motion: slow environmental drift.
   ════════════════════════════════════════════════════════════════════════════ */
[data-place="discover"] .x-horizon {
  background:
    /* the luminous distance line */
    radial-gradient(44% 3.4% at 50% 45%, hsla(172, 82%, 74%, .34), transparent 78%),
    /* its glow into the dark above */
    radial-gradient(50% 26% at 50% 42%, hsla(170, 60%, 50%, .18), transparent 72%),
    /* its spill onto the floor */
    radial-gradient(54% 30% at 50% 53%, hsla(168, 56%, 46%, .12), transparent 72%);
  animation: x-drift 46s ease-in-out infinite;
}
[data-place="discover"] .x-arch {
  background:
    /* threshold pillars framing the distance */
    linear-gradient(90deg,  rgba(3, 5, 7, .6) 0 3%, transparent 14%),
    linear-gradient(270deg, rgba(3, 5, 7, .6) 0 3%, transparent 14%),
    /* warm doorways at the edges — other rooms, just out of view (right nearer) */
    radial-gradient(4.5% 34% at 4% 58%,  hsla(40, 85%, 60%, .12), transparent 70%),
    radial-gradient(5.5% 40% at 96.5% 55%, hsla(40, 88%, 62%, .18), transparent 70%);
}
[data-place="discover"] .x-signature {
  background:
    radial-gradient(56% 48% at 10% 18%, hsla(168, 62%, 54%, .14), transparent 58%),
    radial-gradient(50% 44% at 92% 30%, hsla(176, 56%, 52%, .10), transparent 58%);
}
[data-place="discover"] .x-fg {
  /* dark near-field frames the endlessness so it never overwhelms */
  background: radial-gradient(130% 105% at 50% 50%, transparent 52%, rgba(2, 4, 6, .42) 100%);
}
@keyframes x-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-1.8%, .6%, 0) scale(1.02); } }

/* ════════════════════════════════════════════════════════════════════════════
   COMMAND — Mission Control. One decisive axis; every line agrees: forward.
   Light source: convergence from above onto a lit path receding to a vanishing
   point. Motion: the path lights up after the room — purpose, in sequence.
   ════════════════════════════════════════════════════════════════════════════ */
[data-place="command"] .x-horizon {
  background:
    /* the vanishing point — where this path leads */
    radial-gradient(19% 11% at 50% 30%, hsla(44, 95%, 64%, .30), transparent 70%),
    /* overhead rails converging toward it */
    conic-gradient(from 169deg at 36% -12%, transparent 0 6.5%, hsla(42, 88%, 58%, .09) 8%, transparent 10.5%),
    conic-gradient(from 178deg at 50% -12%, transparent 0 5.5%, hsla(42, 90%, 60%, .12) 7%, transparent 9.5%),
    conic-gradient(from 187deg at 64% -12%, transparent 0 6.5%, hsla(42, 88%, 58%, .09) 8%, transparent 10.5%);
}
[data-place="command"] .x-arch {
  background:
    /* pools of light along the path, receding toward the vanishing point */
    radial-gradient(6.5% 2.4% at 50% 46%, hsla(44, 92%, 64%, .18), transparent 76%),
    radial-gradient(9.5% 3.2% at 50% 57%, hsla(44, 92%, 62%, .15), transparent 76%),
    radial-gradient(13.5% 4.1% at 50% 70%, hsla(44, 90%, 60%, .13), transparent 76%),
    radial-gradient(18.5% 5.2% at 50% 85%, hsla(44, 88%, 58%, .10), transparent 76%),
    /* floor seams agreeing on the direction */
    conic-gradient(from 353deg at 50% 128%, transparent 0 41%, hsla(44, 70%, 55%, .05) 50%, transparent 59%);
  transition-delay: .28s;   /* the room appears, then the path lights — sequence, not spectacle */
}
[data-place="command"] .x-signature {
  background: radial-gradient(58% 42% at 50% -6%, hsla(42, 90%, 58%, .16), transparent 56%);
}
[data-place="command"] .x-fg {
  /* dark periphery concentrates everything on the axis */
  background: radial-gradient(120% 100% at 50% 55%, transparent 46%, rgba(3, 3, 5, .46) 100%);
}

/* ════════════════════════════════════════════════════════════════════════════
   FOUNDER — The Operations Center. Engineered light; every line has a reason.
   Light source: a cool aperture from the right, a crisp diagonal on the floor,
   a measured grid on the walls. Motion: one precise reveal, then stillness.
   ════════════════════════════════════════════════════════════════════════════ */
[data-place="founder"] .x-horizon {
  background:
    /* the aperture */
    radial-gradient(15% 36% at 101% 38%, hsla(210, 72%, 74%, .22), transparent 74%),
    /* its light crossing the room */
    linear-gradient(251deg, hsla(210, 60%, 70%, .10), transparent 36%),
    /* the crisp diagonal it cuts on the floor */
    linear-gradient(200deg, transparent 58%, hsla(210, 55%, 68%, .07) 66%, hsla(210, 55%, 68%, .05) 82%, transparent 94%);
  transition: opacity .7s var(--x-exact), transform .8s var(--x-exact);
}
[data-place="founder"] .x-arch {
  /* the measured grid — structure you can trust at a glance */
  background:
    repeating-linear-gradient(90deg, transparent 0 219px, hsla(210, 46%, 70%, .05) 219px 220px),
    repeating-linear-gradient(0deg,  transparent 0 259px, hsla(210, 46%, 70%, .04) 259px 260px);
  -webkit-mask-image: radial-gradient(120% 92% at 76% 42%, #000 28%, transparent 86%);
          mask-image: radial-gradient(120% 92% at 76% 42%, #000 28%, transparent 86%);
  transition: opacity .7s var(--x-exact) .12s;
}
[data-place="founder"] .x-signature {
  background: radial-gradient(42% 54% at 100% 40%, hsla(212, 52%, 66%, .14), transparent 66%);
  transition: opacity .7s var(--x-exact);
}
[data-place="founder"] .x-fg {
  background: radial-gradient(135% 110% at 50% 50%, transparent 58%, rgba(3, 4, 6, .38) 100%);
}

/* ── Micro-moments: small acknowledgments, no fireworks ─────────────────────
   Doorway preview — hovering a link to another room previews that room's
   light, so navigation feels like looking through a doorway, not clicking a
   tab. Zero-specificity (:where) so any page's own styling always wins. */
:where([data-place]) :where(a[href="/app"], a[href="/compass"], a[href="/discover"], a[href="/command"], a[href="/founder"]) {
  transition: color .18s ease, text-shadow .25s ease;
}
:where([data-place]) :where(a[href="/app"]):hover      { color: hsl(38 92% 70%);  text-shadow: 0 0 16px hsla(38, 92%, 62%, .5); }
:where([data-place]) :where(a[href="/compass"]):hover  { color: hsl(45 70% 70%);  text-shadow: 0 0 16px hsla(45, 65%, 60%, .5); }
:where([data-place]) :where(a[href="/discover"]):hover { color: hsl(168 60% 62%); text-shadow: 0 0 16px hsla(168, 55%, 52%, .5); }
:where([data-place]) :where(a[href="/command"]):hover  { color: hsl(42 88% 66%);  text-shadow: 0 0 16px hsla(42, 85%, 55%, .5); }
:where([data-place]) :where(a[href="/founder"]):hover  { color: hsl(210 55% 72%); text-shadow: 0 0 16px hsla(210, 45%, 62%, .5); }

/* Selection: the room acknowledges your touch — a breath of brightness. */
:where([data-place]) :where(a, button):active { filter: brightness(1.07); }
:where([data-place]) :where(a, button) { transition-property: filter; transition-duration: .12s; }

/* Focus carries the room's light — orientation and accessibility in one. */
:where([data-place]) :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid hsl(var(--x-signature) / .85);
  outline-offset: 2px;
}

/* Progress acknowledged: BeamExperience.moment() — the room's light answers a
   meaningful act (completing a Command step, opening a pathway). One breath. */
:root.x-moment .x-signature { animation: x-ack .85s var(--x-ease-out) 1; }
:root.x-moment[data-place="command"] .x-arch { animation: x-ack .85s var(--x-ease-out) 1; }
@keyframes x-ack { 35% { filter: brightness(1.45) saturate(1.08); } }

/* ── Accessibility: reduced-motion equivalents ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: x-fade 120ms linear both !important; }
  [data-x-depth] { transform: none !important; transition: none !important; }
  /* Every room keeps its identity — instantly, and perfectly still. */
  .x-horizon, .x-arch, .x-signature, .x-fg {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  :root.x-moment .x-signature, :root.x-moment .x-arch { animation: none !important; }
}
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }

/* Never let a transition trap focus or hide content: view-transition pseudo
   snapshots are non-interactive by spec and removed on completion; real DOM is
   always present and reachable underneath. */
::view-transition-group(*) { animation-timing-function: var(--x-ease); }