/* Divine Oracle Tech · The Observatory, immersive layer.
   Pairs with assets/js/observatory.js (hero sky + gold emblem) and assets/js/motion.js.
   Gold stays line, lettering and light: no flat gold fills. Everything decorative is
   aria-hidden; under prefers-reduced-motion the page is a finished, static composition
   (motion.js never adds .has-motion, so none of the motion rules below apply). */

@property --ring { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

/* ---------- Fine grain over the whole page ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Hero: WebGL sky + gold emblem ---------- */
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s var(--ease); }
.hero.is-gl .hero__gl { opacity: 1; }
.hero__emblem { max-width: 33rem; }
@media (max-width: 880px) { .hero__emblem { max-width: 16rem; margin-top: 1.5rem; } }
.hero__emblem img { translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 6px); transition: opacity .8s var(--ease) .1s; }
.hero.is-gl .hero__emblem img { opacity: 0; }
.hero__emblem img, .orbit, .cst { will-change: translate; }
/* While the sky renders live, the nav drops its backdrop blur (re-blurring a live canvas every frame is costly). */
.hero-live .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 10, 10, .9); }
.hero-live body::after { display: none; } /* the sky shader carries its own grain */
.orbit { translate: calc(var(--px, 0) * 11px) calc(var(--py, 0) * 11px); }
.orbit--3 { translate: calc(var(--px, 0) * 3px) calc(var(--py, 0) * 3px); }

/* The constellation: the Chairman at the eye, its agents around it */
.cst { position: absolute; inset: -12%; width: 124%; height: 124%; overflow: visible; pointer-events: none; z-index: 2; translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 16px); }
.cst line { fill: none; stroke: var(--gold); stroke-linecap: round; }
.cst__ring line { stroke-width: .24; stroke-opacity: .6; }
.cst__spokes line { stroke-width: .18; stroke-opacity: .5; }
.cst__star { transform-box: fill-box; transform-origin: center; }
.cst__core { fill: #FFF3D1; }
.cst__chair .cst__core { fill: #FFFBEF; }
.cst__glint { fill: #FFF6DC; opacity: .9; }
.cst-pulse { /* the Chairman's halo: an HTML layer so the pulse stays on the compositor */
  position: absolute; left: 50%; top: 40%; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; border-radius: 50%; pointer-events: none; z-index: 2;
  border: 1px solid rgba(212, 175, 55, .7); opacity: 0;
  translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 16px);
  animation: cst-pulse 4.8s var(--ease) infinite 2s;
}
@keyframes cst-pulse { 0% { transform: scale(.4); opacity: 0; } 15% { opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }

.has-motion .cst line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.has-motion .cst.is-assembled line { stroke-dashoffset: 0; }
.cst__ring line:nth-child(1) { transition-delay: 0.65s; } .cst__ring line:nth-child(2) { transition-delay: 0.72s; }
.cst__ring line:nth-child(3) { transition-delay: 0.79s; } .cst__ring line:nth-child(4) { transition-delay: 0.86s; }
.cst__ring line:nth-child(5) { transition-delay: 0.93s; } .cst__ring line:nth-child(6) { transition-delay: 1.00s; }
.cst__ring line:nth-child(7) { transition-delay: 1.07s; } .cst__ring line:nth-child(8) { transition-delay: 1.14s; }
.cst__spokes line { transition-delay: 1.1s !important; transition-duration: 1.1s !important; }
.has-motion .cst__star { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.35); transition: opacity .8s var(--ease) calc(var(--i, 0) * 50ms + .1s), transform 1.1s var(--ease) calc(var(--i, 0) * 50ms + .1s); }
.has-motion .cst.is-assembled .cst__star { opacity: 1; transform: none; }

/* Visitor controls: pause motion everywhere; enable tilt on iOS only (shown by JS) */
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 3; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; pointer-events: none;
}
.hero__foot > * { pointer-events: auto; }
.hero__foot .hero__scroll { position: static; transform: none; grid-column: 2; padding: .5rem 0; }
.hero__controls { grid-column: 3; justify-self: start; display: flex; gap: .4rem; }
.hero__ctl {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgba(10, 10, 10, .45); color: var(--faint);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hero__ctl:hover, .hero__ctl:focus-visible { color: var(--white); border-color: var(--gold-dim); }
.hero__ctl[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-dim); }
.hero__ctl[hidden] { display: none; }
.hero__ctl::after { /* tooltip, from the button's own accessible name */
  content: attr(aria-label); position: absolute; bottom: calc(100% + .5rem); left: 50%; translate: -50% 4px; white-space: nowrap; pointer-events: none;
  padding: .4rem .6rem; border-radius: var(--radius); border: 1px solid var(--gold-line); background: rgba(10, 10, 10, .92); color: var(--text);
  font: 500 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .2s var(--ease), translate .2s var(--ease);
}
.hero__ctl:hover::after, .hero__ctl:focus-visible::after { opacity: 1; translate: -50% 0; }
.hero__ctl-ico { display: inline-flex; gap: 2px; }
.hero__ctl-ico i { width: 2px; height: 9px; background: currentColor; border-radius: 1px; }
.hero__ctl[aria-pressed="true"] .hero__ctl-ico i:first-child { width: 0; height: 0; background: none; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-radius: 0; margin-left: 2px; }
.hero__ctl[aria-pressed="true"] .hero__ctl-ico i:last-child { display: none; }
.hero__ctl-svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
/* Phones: the cluster sits left of the cue, clear of the fixed chat launcher on the right. */
@media (max-width: 520px) {
  .hero__controls { grid-column: 1; grid-row: 1; justify-self: end; }
  .hero__ctl::after { left: 0; translate: 0 4px; }
  .hero__ctl:hover::after, .hero__ctl:focus-visible::after { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { [data-motion-toggle] { display: none; } }

/* No WebGL: a CSS light sweep across the emblem keeps it premium */
.hero.no-gl .hero__emblem::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 200, .7) 49%, transparent 60%) no-repeat;
  background-size: 260% 100%; animation: sheen 9s var(--ease) infinite 1s;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 45%, transparent 66%); mask-image: radial-gradient(circle at 50% 48%, #000 45%, transparent 66%);
}
@keyframes sheen { 0% { background-position: 130% 0; } 40%, 100% { background-position: -40% 0; } }

/* ---------- Meridian: the gold line draws as you descend ---------- */
.meridian { --m-left: calc(var(--gutter) + 1.1rem); }
@media (min-width: 1240px) { .meridian { --m-left: calc((100vw - var(--max)) / 2 - 2.5rem); } }
.meridian__draw, .meridian__comet { position: absolute; left: var(--m-left); width: 1px; pointer-events: none; }
.meridian__draw { top: 0; bottom: 0; transform-origin: top; background: linear-gradient(180deg, transparent, var(--gold) 3%, rgba(240, 214, 140, .85) 97%, transparent); opacity: .75; }
.meridian__comet { top: -100%; height: 100%; }
.meridian__comet i { position: absolute; bottom: -4px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 10px 2px rgba(212, 175, 55, .9), 0 0 32px 8px rgba(212, 175, 55, .3); }
:root:not(.has-motion) .meridian__draw { opacity: .45; }
:root:not(.has-motion) .meridian__comet { display: none; }
.has-motion .meridian__draw { transform: scaleY(0); }
.has-motion .meridian__comet { transform: translateY(0); }
@supports (animation-timeline: view()) {
  .has-motion .meridian { view-timeline: --meridian block; }
  .has-motion .meridian__draw, .has-motion .meridian__comet { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --meridian; animation-range: cover 40vh cover calc(100% - 60vh); }
  .has-motion .meridian__draw { animation-name: m-draw; }
  .has-motion .meridian__comet { animation-name: m-comet; }
}
@keyframes m-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes m-comet { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ---------- Chapters: horizon hairline, drawn numerals, quiet constellations ---------- */
.chapter::after {
  content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 1.125rem); width: min(40rem, 62%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-dim), transparent); transform-origin: left;
}
@media (min-width: 1240px) { .chapter::after { left: -2.5rem; } }
.has-motion .chapter::after { transform: scaleX(0); transition: transform 1.6s var(--ease); }
.has-motion .chapter.is-lit::after { transform: none; }

.numeral { transition: color .9s var(--ease) .35s, letter-spacing .9s var(--ease) .35s, box-shadow .6s var(--ease); }
.numeral::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; pointer-events: none;
  background: conic-gradient(from -90deg, var(--gold) var(--ring), transparent var(--ring));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: --ring 1.3s var(--ease) .1s;
}
.has-motion .chapter:not(.is-lit) .numeral { color: transparent; letter-spacing: .6em; }
.has-motion .chapter:not(.is-lit) .numeral::before { --ring: 0deg; }
.chapter.is-current .numeral { box-shadow: 0 0 0 5px rgba(212, 175, 55, .07), 0 0 26px -2px rgba(212, 175, 55, .55); }

.chapter__cst { position: absolute; top: clamp(4.5rem, 9vw, 7rem); right: var(--gutter); width: 13rem; height: auto; pointer-events: none; display: none; opacity: .6; transition: opacity .8s var(--ease); }
@media (min-width: 1200px) { .chapter__cst { display: block; } }
.chapter.is-current .chapter__cst { opacity: 1; }
.ccst__lines line { stroke: var(--gold); stroke-opacity: .45; stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) calc(var(--i, 0) * .15s + .35s); }
.chapter.is-lit .ccst__lines line { stroke-dashoffset: 0; }
.ccst__stars circle { fill: #F3E6BC; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .9s var(--ease) calc(var(--i, 0) * .12s); }
.ccst__stars circle:first-child { fill: var(--gold); }
.chapter.is-lit .ccst__stars circle { transform: none; }

/* Kinetic headings: each word rises out of a mask */
.kw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.kw__i { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease) calc(var(--i, 0) * 45ms + .12s); }
.chapter__head.is-in .kw__i { transform: none; }

/* ---------- Surfaces: obsidian glass with real light ---------- */
.tier, .step, .habit, .anatomy__part, .fork__path, .model, .book__expect {
  background: linear-gradient(155deg, rgba(34, 50, 74, .42), rgba(14, 20, 29, .6) 40%, rgba(10, 10, 10, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 50px -30px rgba(0, 0, 0, .95), 0 2px 6px -2px rgba(0, 0, 0, .6);
}
.tier--mid { background: linear-gradient(155deg, rgba(43, 63, 92, .6), rgba(14, 20, 29, .7) 45%, rgba(10, 10, 10, .9)); }
.sprint, .book__main, .layers, .days, .isnot, .fit { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -36px rgba(0, 0, 0, .95); }

.lit { position: relative; isolation: isolate; }
.lit::before, .lit::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s var(--ease); }
.lit::before { inset: 0; z-index: -1; background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 236, 190, .07), transparent 60%); }
.lit::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 230, 165, .85), rgba(212, 175, 55, .25) 40%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lit:hover::before, .lit:hover::after { opacity: 1; }

.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), border-color .3s; }
.tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); transition: transform .18s linear, border-color .3s; }

/* ---------- Buttons: magnetic pull and a glow that follows the pointer ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  translate: var(--tx, 0px) var(--ty, 0px);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), translate .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(7rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 226, 150, .3), transparent 70%);
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; }
.btn--gold:hover { box-shadow: 0 0 0 1px var(--gold), 0 10px 34px -10px rgba(212, 175, 55, .7), 0 0 60px -20px rgba(212, 175, 55, .5); }

/* ---------- Depth: cards drift at different rates as they cross the view ---------- */
@supports (animation-timeline: view()) {
  .has-motion :is(.tiers > .tier, .habits > .habit, .steps > .step, .own > .own__col, .models__grid > .model, .fork__paths > .fork__path),
  .has-motion .chapter__cst {
    animation: drift-a linear both; animation-timeline: view(); animation-range: cover;
  }
  .has-motion :is(.tiers > .tier, .habits > .habit, .steps > .step, .own > .own__col, .models__grid > .model, .fork__paths > .fork__path):nth-child(2) { animation-name: drift-b; }
  .has-motion :is(.tiers > .tier, .habits > .habit, .steps > .step, .own > .own__col):nth-child(3) { animation-name: drift-c; }
  .has-motion .chapter__cst { animation-name: drift-d; }
}
@keyframes drift-a { from { translate: 0 16px; } to { translate: 0 -16px; } }
@keyframes drift-b { from { translate: 0 34px; } to { translate: 0 -34px; } }
@keyframes drift-c { from { translate: 0 24px; } to { translate: 0 -24px; } }
@keyframes drift-d { from { translate: 0 60px; } to { translate: 0 -60px; } }

/* ---------- The Chairman's frame opens like an aperture ---------- */
.has-motion .chairman.reveal .chairman__media { clip-path: circle(14% at 50% 50%); transition: clip-path 1.7s var(--ease) .1s; }
.has-motion .chairman.reveal.is-in .chairman__media { clip-path: circle(75% at 50% 50%); }

/* ---------- Booking: open days read as points on a star chart ---------- */
.picker__day { position: relative; }
.picker__day::before { content: ""; position: absolute; top: 6px; right: 6px; width: 3px; height: 3px; border-radius: 50%; background: #F3E6BC; box-shadow: 0 0 6px 1px rgba(212, 175, 55, .8); opacity: .75; }
.picker__day[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 9px 2px rgba(212, 175, 55, .95); }

/* ---------- Visitor paused motion: stop everything that moves on its own ---------- */
.motion-paused :is(.orbit, .chairman__rings i, .cst-pulse),
.motion-paused .hero.no-gl .hero__emblem::after { animation-play-state: paused !important; }
html:not(.js) [data-motion-toggle] { display: none; }