/* ================================================================================================
   CINEMATIC ENTRANCE AND DEPTH — restored, not deleted
   ================================================================================================
   "you removed the cinematic entrance of the page and the animations of the numbers and god — why do
    you keep removing broken stuff instead of fixing them"

   Fair, and it is the habit worth breaking. The first camera DID blink, and I deleted it rather than
   working out why. The why is knowable and small:

     PERSPECTIVE + translateZ on a large element forces the browser to rasterise that element on a
     separate composited layer at a new size on every frame. Nine full-width bands doing that at
     once, several of them containing backdrop-filter surfaces (which must re-sample everything
     behind them), is a repaint storm. That is the blink.

   Nothing about the EFFECT required any of that. Depth on a scrolling page is a difference in rate
   and scale between layers; it does not need a 3D camera. So this version keeps the look and drops
   the mechanism:

     no perspective        no translateZ        no backdrop-filter
     2D translate + scale only, which the compositor handles without re-rasterising
     one entrance that runs ONCE on load and then never repaints again

   The numbers were never removed — six prices carry data-mk-count and count up on reveal. They are
   listed here so the next person can see the whole cinematic system in one place.
================================================================================================= */

/* ---- THE ENTRANCE -------------------------------------------------------------------------------
   Runs once, on load, and only for the first screen. A page that animates its whole length on
   arrival makes the reader wait; a page that animates only what they can already see feels fast. */
.js .mk-entrance > .wrap,
.js .mk-entrance > .hero-bg {
  animation: mkArrive 1.25s cubic-bezier(.16, 1, .3, 1) both;
}
.js .mk-entrance > .hero-god,
.js .mk-entrance > .chapter-guide {
  animation: mkArriveFigure 1.55s cubic-bezier(.16, 1, .3, 1) .12s both;
}

@keyframes mkArrive {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
/* The figure arrives from slightly further out and a touch larger, so it reads as stepping forward
   into the frame rather than sliding up with the text. */
@keyframes mkArriveFigure {
  from { opacity: 0; transform: translate3d(0, 30px, 0) scale(1.03); }
  to   { opacity: .8; transform: none; }
}
.js .mk-entrance > .hero-god { --mk-figure-rest: 1; }

/* ---- SCROLL DEPTH -------------------------------------------------------------------------------
   Driven by assets/brand/cinematic.js, which writes only these two variables. Both are transforms,
   so a change costs a composite and not a layout. The defaults are the resting state, which is what
   a reader with JavaScript off, or reduced motion on, sees. */
.js .mk-depth {
  transform: translate3d(0, var(--depth-y, 0px), 0) scale(var(--depth-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The band's own backdrop travels at a different rate from its content. That difference IS the
   depth — it is the entire trick, and it costs one more composited transform. */
.js .mk-depth > .hero-bg,
.js .mk-depth > .closer-bg {
  transform: translate3d(0, var(--depth-bg, 0px), 0) scale(1.06);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .js .mk-entrance > .wrap,
  .js .mk-entrance > .hero-bg,
  .js .mk-entrance > .hero-god,
  .js .mk-entrance > .chapter-guide { animation: none; }
  .js .mk-depth,
  .js .mk-depth > .hero-bg,
  .js .mk-depth > .closer-bg { transform: none !important; will-change: auto; }
}

/* ================================================================================================
   THE ASIDE FIGURE — the specialist stands beside the form, in the space it was leaving empty
   ================================================================================================
   "fix the god, I want it clear from the box, it should be beside it in the empty area."

   He was an absolutely-positioned figure inside the intake section, so he sat BEHIND the form box:
   1059px tall in a 1081px band, hanging 32px past the bottom. What a reader saw was a pair of feet
   under a card.

   Here he is an ordinary element in the right-hand column. Because he is in normal flow the browser
   reserves his space, which means nothing can cover him and he cannot spill into the band below —
   the same principle that fixed the mobile bands. It also fills the void the short aside was
   leaving: measured 352px of dead column before this.
================================================================================================= */
.aside-figure {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.aside-figure img {
  display: block;
  width: min(78%, 300px);
  height: auto;
  /* Fades into the column rather than ending on a cut line, so a cut-out portrait reads as standing
     in the page instead of pasted onto it. */
  mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
  filter: saturate(106%) contrast(103%) drop-shadow(0 22px 30px rgba(0, 0, 0, .62));
}
/* A pool of light under the feet, which is what stops a floating figure looking weightless. */
.aside-figure::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 26px;
  width: min(70%, 260px); height: 42px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(216, 168, 75, .20), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}
.aside-figure figcaption {
  margin-top: -6px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold, #D8A84B);
  opacity: .8;
}

/* On a narrow screen the two columns stack, so the figure would sit between the form and the notes.
   It is smaller there and keeps its own row. */
@media (max-width: 980px) {
  .aside-figure img { width: min(52%, 200px); }
}

/* ================================================================================================
   BREATH — a standing figure that is completely still reads as a cut-out
   ================================================================================================
   Under 1% of scale and a few pixels of rise. Above that it stops looking like breathing and starts
   looking like a slow zoom. Each god carries its own period (--fig-sway, set by presence.js) so six
   figures on one page never fall into step, which is what would make them look mechanical.
================================================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .chapter-guide,
  .js .aside-figure img {
    animation: mkBreath var(--fig-sway, 6s) ease-in-out infinite;
  }
}
@keyframes mkBreath {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}
/* `translate` is a separate property from `transform`, so the breath and the pointer-tracking
   rotation compose instead of overwriting each other. Using transform for both is why this kind of
   effect usually fights itself. */


/* ================================================================================================
   SMOOTHED FOLLOW — the turn trails the pointer instead of snapping to it
   ================================================================================================
   The rotation was written straight from the cursor position, so the figure locked onto it instantly.
   That is the 'too fast' feeling: nothing alive tracks you with zero latency. A transition on the
   transform gives the turn about half a second of lag, and because the pointer handler is already
   throttled to one frame, this costs nothing extra.
================================================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .chapter-guide,
  .js .hero-god,
  .js .aside-figure img {
    transition: transform .62s cubic-bezier(.22, 1, .36, 1);
  }
}

/* ================================================================================================
   THE SITE MAP FINDER
   ================================================================================================
   Styled as a control panel rather than a form: it is the primary thing on that page, so it reads
   as the tool it is. Hidden until sitefind.js reveals it, so a reader without JavaScript never sees
   a search box that cannot search.
================================================================================================= */
.map-find {
  margin: 34px 0 8px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--surface-2, #1A2A50), var(--surface, #0F1F44));
  border: 1px solid rgba(216, 168, 75, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 44px -26px rgba(0, 0, 0, .7);
}
.map-find-label {
  display: block;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  color: var(--gold, #D8A84B); margin-bottom: 10px;
}
.map-find input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(7, 17, 38, .72);
  color: var(--fg, #F5EFE1);
  font: inherit;
  font-size: 15.5px;
  transition: border-color .28s, box-shadow .28s;
}
.map-find input::placeholder { color: var(--fg-faint, #8B98B5); }
.map-find input:focus {
  outline: none;
  border-color: rgba(216, 168, 75, .6);
  box-shadow: 0 0 0 3px rgba(216, 168, 75, .14);
}
.map-count {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--fg-dim, #9AA7C2);
}
.map-intents { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.map-intents button {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  color: var(--fg-dim, #9AA7C2);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: color .28s, border-color .28s, background .28s, transform .28s;
}
.map-intents button:hover { color: var(--gold-lt, #F0D48A); border-color: rgba(216, 168, 75, .5); transform: translateY(-1px); }
.map-intents button.is-active {
  color: #1c1305;
  background: linear-gradient(103deg, #D8A84B, #F0D48A);
  border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .map-find input, .map-intents button { transition: none; }
  .map-intents button:hover { transform: none; }
}

/* ================================================================================================
   THE ONWARD BAND — cards, not a paragraph of underlined links
   ================================================================================================
   Markup for .onward-grid and .onward-card was written when three repetitive teaser sections were
   merged into one band. The CSS never was. So the home page has been shipping its "where to next"
   band as three underlined sentences run together into a single line of text, and every check I ran
   said the band was present - because it was. Present and unstyled are not the same thing, and no
   static check I wrote could tell them apart. It took looking at the page.
================================================================================================= */
.onward-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 28px 0 30px;
}
.onward-card {
  display: block;
  text-decoration: none;
  padding: 22px 22px 24px;
  border-radius: 15px;
  background: linear-gradient(160deg, var(--surface-2, #1A2A50), var(--surface, #0F1F44));
  border: 1px solid rgba(255, 255, 255, .085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 16px 40px -26px rgba(0, 0, 0, .72);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .5s, box-shadow .5s;
  position: relative;
  overflow: hidden;
}
/* A gold hairline that arrives on hover, so the card reads as a door rather than a panel. */
.onward-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #8A5F1C, #D8A84B 30%, #FBEFC4 52%, #D8A84B 72%, #A87A28);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.onward-card:hover::before { transform: scaleX(1); }
.onward-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 168, 75, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 56px -28px rgba(0, 0, 0, .8);
}
.onward-card b {
  display: block;
  font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--fg, #F5EFE1);
  margin-bottom: 8px;
}
.onward-card span {
  display: block;
  font-size: 14px; line-height: 1.5;
  color: var(--fg-dim, #9AA7C2);
}
/* The arrow is the affordance; it moves on hover so the card says "through here". */
.onward-card b::after { content: " →"; color: var(--gold, #D8A84B); opacity: .7; transition: opacity .4s; }
.onward-card:hover b::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .onward-card, .onward-card::before, .onward-card b::after { transition: none; }
  .onward-card:hover { transform: none; }
}