/* ============================================================
   ARCANA — Architectural Hero (Direction A)
   Drop-in stylesheet for index.html's <section class="arcana-hero">.
   Pairs with static/js/arcana-hero-mosaic.js.

   Scoped under .arcana-hero so it composes cleanly with the
   sitewide style.css (which already provides the page chrome,
   navbar, footer, features, suits and cta sections).
   ============================================================ */

/* Tokens local to the hero — names don't collide with style.css */
.arcana-hero {
  --ah-gold:       var(--gold-300);
  --ah-gold-pale:  var(--gold-100);
  --ah-gold-warm:  var(--gold-200);
  --ah-gold-dim:   var(--gold-500);
  --ah-gold-faint: color-mix(in srgb, var(--gold-300) 18%, transparent);
  --ah-gold-ghost: color-mix(in srgb, var(--gold-300) 8%, transparent);
  --ah-text:       var(--parchment);
  /* Brighter dim/mute tokens for WCAG-AA legibility against the near-black bg.
     mute was gold-500 (#6E5527 = 2.81:1, fails); now burnished gold #C9A84C
     (8.64:1). dim carries the hero's body copy (.card-desc), lifted again to
     #E5DCC4 (~14.7:1) so the light serif stops reading grey at 15px. */
  --ah-text-dim:   #E5DCC4;
  --ah-text-mute:  #C9A84C;
  --ah-rule:       color-mix(in srgb, var(--gold-300) 18%, transparent);
  --ah-bg-warm:    var(--ink-800);
  --ah-bg-glow:    var(--ink-700);

  /* Layout — the content is constrained to a max-width and CENTRED so the text
     column and the card sit together as one composition instead of being pinned
     to opposite screen edges with a black chasm between them. The two columns are
     sized to their content with a modest gap, and the whole group is centred. */
  position: relative;
  display: grid;
  /* text · card — the deck index now lives in the gauge pinned to the hero's
     base, not a left-margin column. */
  grid-template-columns: minmax(360px, 460px) auto;
  justify-content: center;        /* centre the column group horizontally */
  align-items: center;
  /* Tight gap — the card's own feathered transparent margin already provides
     visual breathing room, so the column gap just needs to clear the panel's
     right edge. Anything wider re-opens a dead strip between the rule and art. */
  column-gap: clamp(8px, 1vw, 16px);
  max-width: 1400px;
  margin-inline: auto;
  width: 100%;
  /* Hero spans the FULL viewport (the home page drops the 60px top gap); the
     fixed navbar overlays the top transparently. */
  min-height: 100vh;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ah-text);

  /* No section-level background — inherits the body radial gradient */
}


/* =================================================================
   LEFT TEXT COLUMN
   ================================================================= */
.arcana-hero .hero-left {
  position: relative;
  z-index: 2;
  /* Symmetric, lighter padding — no heavy left indent pinning text to the edge.
     The grid centring places this column next to the card. */
  padding: 24px 8px 24px 24px;
  display: flex; flex-direction: column;
  justify-content: center;
  /* The lower block (meta · CTA · gauge) is anchored by the text-stack's
     reserved height, so the sitewide 2.2rem inter-child gap would only re-open
     a chasm above the CTA — the individual margins below set the spacing. */
  gap: 0;
  min-width: 0;
}

.arcana-hero .eyebrow-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.arcana-hero .eyebrow-rule {
  width: 30px; height: 1px;
  background: var(--ah-gold-pale);
  display: inline-block;
}
.arcana-hero .eyebrow {
  font-family: var(--font-display);
  font-size: var(--caps-3-size);
  font-weight: var(--caps-3-weight);
  letter-spacing: var(--caps-3-track);
  color: var(--ah-gold-pale);
  text-transform: uppercase;
}

/* Text stack — children cascade in/out with a stagger.
   The whole stack still moves as a group via .is-out, but each
   child has its own animation-delay for the entry. */
.arcana-hero .text-stack {
  /* Bottom-aligned within its JS-reserved height: the meta table (last child)
     pins to a stable baseline while shorter cards absorb their slack ABOVE the
     title. That keeps the CTA + gauge sitting tight beneath the meta on every
     card, instead of the reserve opening a gap between meta and the buttons. */
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: opacity .25s ease, filter .25s ease;
}
.arcana-hero .text-stack.is-out {
  opacity: 0;
  filter: blur(4px);
}
.arcana-hero .text-stack.is-out > * {
  animation: ahTextOut .28s cubic-bezier(.55,.02,.42,1) forwards;
}
.arcana-hero .text-stack.is-in > * {
  animation: ahTextIn .48s cubic-bezier(.22,.7,.3,1) both;
}
/* Stagger entrance — keep the whole cascade under ~250ms so the last
   element finishes well within the flip-in animation. */
.arcana-hero .text-stack.is-in > *:nth-child(1) { animation-delay:   0ms; }
.arcana-hero .text-stack.is-in > *:nth-child(2) { animation-delay:  35ms; }
.arcana-hero .text-stack.is-in > *:nth-child(3) { animation-delay:  70ms; }
.arcana-hero .text-stack.is-in > *:nth-child(4) { animation-delay: 105ms; }
.arcana-hero .text-stack.is-in > *:nth-child(5) { animation-delay: 140ms; }
.arcana-hero .text-stack.is-in > *:nth-child(6) { animation-delay: 175ms; }

@keyframes ahTextOut {
  0%   { opacity: 1; transform: translateY(0)    translateX(0);     filter: blur(0); }
  100% { opacity: 0; transform: translateY(-8px) translateX(-12px); filter: blur(4px); }
}
@keyframes ahTextIn {
  0%   { opacity: 0; transform: translateY(14px) translateX(8px);   filter: blur(6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0)    translateX(0);     filter: blur(0); }
}
/* Mirror the X-offset when going to the previous card */
.arcana-hero .text-stack.dir-prev.is-out > * {
  animation-name: ahTextOutPrev;
}
.arcana-hero .text-stack.dir-prev.is-in > * {
  animation-name: ahTextInPrev;
}
@keyframes ahTextOutPrev {
  0%   { opacity: 1; transform: translateY(0)    translateX(0);    filter: blur(0); }
  100% { opacity: 0; transform: translateY(-8px) translateX(12px); filter: blur(4px); }
}
@keyframes ahTextInPrev {
  0%   { opacity: 0; transform: translateY(14px) translateX(-8px); filter: blur(6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0)    translateX(0);    filter: blur(0); }
}

.arcana-hero .card-num {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .34em;
  /* A quiet locator, deliberately dimmer than the keyword line below the title:
     burnished mute (#C9A84C, 8.64:1) rather than the brighter gold-200 it used
     to share with more important marks. The card number itself (.card-num-bold)
     stays pale so the eye still catches "CARD · 0". */
  font-weight: 500;
  color: var(--ah-text-mute);
  margin-bottom: 8px;
}
.arcana-hero .card-num-bold {
  color: var(--ah-gold-pale);
  font-weight: 600;
}

.arcana-hero .card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 52px);
  color: var(--ah-gold-pale);
  line-height: .9;
  letter-spacing: -.005em;
  text-shadow: 0 0 60px color-mix(in srgb, var(--gold-100) 12%, transparent);
  margin: 0;
}

.arcana-hero .card-roman {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: .25em;
  color: var(--ah-gold-pale);
  opacity: .8;
}

.arcana-hero .kw-row {
  display: flex; align-items: center;
  flex-wrap: wrap;
  /* The title runs at line-height .9, so its box already sits tight under the
     caps — this is the whole visible gap between name and keywords. */
  margin-top: 12px;
}
/* Separator diamond drawn INSIDE each keyword (after the first) via ::before, so
   it always travels with its keyword on a wrap — never stranded, never trailing. */
.arcana-hero .kw-sep::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 9px;           /* spacing that used to come from the flex gap */
  background: var(--ah-gold-pale);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  vertical-align: middle;
}
.arcana-hero .kw {
  font-family: var(--font-display);
  /* Tighter tracking so a three-keyword line (e.g. THE HIEROPHANT) fits without
     orphaning the last word; each keyword also stays unbroken internally. */
  font-size: var(--caps-4-size);
  font-weight: var(--caps-4-weight);
  letter-spacing: var(--caps-4-track);
  white-space: nowrap;
  /* The card's essence — lifted from the burnished #C9A84C it used to share with
     the field labels to the brighter warm gold-200 (#E7C878, ~12:1). Brighter
     tone + the heavier caps-4 weight now read this as content, not scaffolding. */
  color: var(--gold-200);
  text-transform: uppercase;
}

.arcana-hero .card-desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ah-text-dim);
  max-width: 460px;
}

/* The rule reads as a section break, so it needs air on BOTH sides: clear of the
   description above, and the ELEMENT/SYMBOL pairs standing off it below. */
.arcana-hero .meta {
  margin-top: 26px;
  display: flex; gap: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--ah-gold-ghost);
  max-width: 460px;
}
.arcana-hero .meta-row {
  display: flex; flex-direction: column; gap: 6px;
}
/* Tier 5, not 4: these are scaffolding words ("ELEMENT"), and the keywords under
   the title are content. Sizing the labels above the keywords inverted that. */
.arcana-hero .meta dt {
  font-family: var(--font-mono);
  font-size: var(--caps-5-size);
  font-weight: var(--caps-5-weight);
  letter-spacing: var(--caps-5-track);
  color: var(--ah-text-mute);
}
.arcana-hero .meta dd {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .2em;
  color: var(--ah-gold-pale);
}
/* Symbol glyph — large and luminous so the symbol (heart, etc.) reads clearly.
   MUST out-specify `.arcana-hero .meta dd` (0,2,1) or the font-size below is
   silently dropped and the glyph renders at 12px wearing a 28px glow — which is
   exactly what it did before, reading as a stray character. Hence `dd.meta-symbol`. */
.arcana-hero .meta dd.meta-symbol {
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
  /* Negative, deliberately: a 34px box and a 12px box share a top edge, so the
     glyph's optical centre otherwise hangs ~8.5px below the neighbouring values.
     This lifts it back onto their centre line. */
  margin-top: -6px;
  color: var(--ah-gold-pale);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--gold-100) 55%, transparent),
    0 0 28px color-mix(in srgb, var(--gold-200) 30%, transparent);
}

/* CTA row — overrides sitewide .btn-primary / .btn-ghost inside the hero
   so the hero has its architectural outline button instead of the solid
   amber one used elsewhere on the page. */
.arcana-hero .cta-row {
  /* 24px gap (not a margin on the ghost link) so the standoff from the primary
     survives a wrap onto its own line without indenting it. */
  display: flex; gap: 24px; align-items: center;
  /* hero-left's flex gap is now 0, so this margin alone sets the standoff from
     the meta table above — a compact gap so the CTA sits just beneath it. */
  margin-top: 26px;
  flex-wrap: wrap;
}

.arcana-hero .cta-row .btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 26px;
  /* Warm BURNISHED gold, native to the palette — anchored on #c9a84c with the
     top-light kept gold (blended toward gold-300, not the bright yellow gold-200)
     and the base deepened toward gold-400, so it reads as the same burnished tone
     as the borders/headings rather than a saturated yellow. The specular + glow
     give it dominance without the default-yellow pop. */
  background: linear-gradient(180deg,
    color-mix(in srgb, #C9A84C 80%, var(--gold-300)) 0%,
    #C9A84C 46%,
    color-mix(in srgb, #C9A84C 72%, var(--gold-400)) 100%);
  border: 1px solid color-mix(in srgb, #C9A84C 78%, var(--gold-400));
  color: var(--ink-900);
  font-family: var(--font-display);
  letter-spacing: .25em; font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    /* top-edge specular — warmer catchlight (gold-200, not the pale gold-100) */
    inset 0 1px 0 color-mix(in srgb, var(--gold-200) 45%, transparent),
    /* inner warmth */
    inset 0 0 14px color-mix(in srgb, var(--gold-300) 18%, transparent),
    /* outer ambient glow — burnished, not bright */
    0 0 22px color-mix(in srgb, #C9A84C 28%, transparent),
    0 4px 18px rgba(0,0,0,.45);
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  min-height: 44px;
}
.arcana-hero .cta-row .btn-primary::before {
  content: '';
  position: absolute; inset: -3px;
  border: 1px solid color-mix(in srgb, #C9A84C 35%, transparent);
  pointer-events: none;
}
.arcana-hero .cta-row .btn-primary:hover {
  /* Lift to a brighter BURNISHED gold on hover — luminous but still in the gold
     family (blended toward gold-300, deepened base toward gold-400), not yellow. */
  background: linear-gradient(180deg,
    color-mix(in srgb, #C9A84C 62%, var(--gold-200)) 0%,
    color-mix(in srgb, #C9A84C 85%, var(--gold-300)) 55%,
    color-mix(in srgb, #C9A84C 84%, var(--gold-400)) 100%);
  border-color: color-mix(in srgb, #C9A84C 70%, var(--gold-200));
  color: var(--ink-900);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-200) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--gold-300) 22%, transparent),
    0 0 36px color-mix(in srgb, #C9A84C 46%, transparent),
    0 6px 24px rgba(0,0,0,.5);
  transform: none;
}
.arcana-hero .btn-dot {
  width: 6px; height: 6px;
  background: var(--ah-gold);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* Secondary action — the double gold hairline used sitewide for this role
   (.st-meta-cta on the deck page, .panel-cta in the reading panel), so it reads
   as a control rather than a caption sitting beside the gold button. Horizontal
   padding is 0 so the rules bracket the words exactly; the standoff from the
   primary comes from the row's gap. */
.arcana-hero .cta-row .btn-ghost {
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--gold-300) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-300) 40%, transparent);
  color: var(--ah-text-dim);
  font-family: var(--font-display);
  letter-spacing: .25em; font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.arcana-hero .cta-row .btn-ghost:hover {
  color: var(--ah-gold-pale);
  border-color: color-mix(in srgb, var(--gold-200) 70%, transparent);
}

/* Side circles do a soft pop-scale when their image changes */
.arcana-hero .nav-btn-circle.is-changing {
  animation: ahSatellitePop .55s cubic-bezier(.22,.7,.3,1);
}
@keyframes ahSatellitePop {
  0%   { transform: scale(1)    rotate(0); opacity: .6; }
  40%  { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1)    rotate(0); opacity: 1; }
}

/* =================================================================
   GAUGE — the deck index as an astronomical graduation scale.
   A horizontal row of thin vertical hairlines at the foot of the text column,
   below the CTA: minor ticks short, major graduations (every fifth + the
   endpoints) taller, the current card's tick tallest and gold — the
   instrument's needle. A roman "n / XXI" readout sits beneath. Doubles as
   jump-to nav; reads as a measuring instrument, not a carousel.
   ================================================================= */
.arcana-hero .arcana-gauge {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* aligned to the column, under the buttons */
  gap: 10px;
  user-select: none;
}

/* Hairlines grow upward from a common baseline; the container is as tall as the
   tallest possible tick so the baseline never shifts as the needle moves. */
.arcana-hero .gauge-ticks {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 0.9vw, 12px);
  height: 26px;
}
.arcana-hero .gauge-tick {
  display: flex; align-items: flex-end;
  height: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.arcana-hero .gauge-tick:focus-visible { outline: none; }

/* The visible hairline — a 1px column whose height encodes its graduation. */
.arcana-hero .gauge-tick::before {
  content: '';
  width: 1px;
  height: 8px;                 /* minor graduation */
  background: color-mix(in srgb, var(--gold-300) 30%, transparent);
  transition: height .4s cubic-bezier(.22,.7,.3,1),
              background .3s ease, box-shadow .3s ease;
}
.arcana-hero .gauge-tick[data-major]::before {
  height: 15px;               /* major graduation — every fifth + endpoints */
  background: color-mix(in srgb, var(--gold-300) 45%, transparent);
}
.arcana-hero .gauge-tick:hover::before,
.arcana-hero .gauge-tick:focus-visible::before {
  background: var(--ah-gold-pale);
}

/* Current position — tallest, gold, softly lit. */
.arcana-hero .gauge-tick.is-active::before {
  height: 26px;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--gold-300) 40%, transparent), var(--ah-gold));
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold-200) 55%, transparent);
}

.arcana-hero .gauge-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .28em;
  color: var(--ah-text-mute);
  text-transform: uppercase;
}
.arcana-hero .gauge-label #gaugeCurrent { color: var(--gold-100); }

/* =================================================================
   RIGHT — ORBITAL DISPLAY
   ================================================================= */
.arcana-hero .hero-right {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: flex-start;
  /* No side push — the card sits right next to the text column (the grid gap is
     the only separation), so the two read as one grouped composition. */
  /* Nudge the card down a touch from the navbar. */
  padding-top: 80px;
  /* Pin height to the viewport so the card position never reacts to
     the left column's content (e.g. a long wrapping card title). The card is
     centred within this height and capped so it never reaches the navbar. */
  align-self: start;
  height: 100vh;
}

.arcana-hero .orbit-svg { display: none; }

/* While the card swaps, the text column dips out so the copy swap happens
   invisibly inside the transition (class toggled by the widget's
   transition-start / card-swapped events). Asymmetric, like the card's own
   dissolve: a quick ease-in departure that must finish inside the widget's
   200ms pre-swap hold — with real margin, not just barely, or the copy is still
   faintly legible when it swaps and you see it change — then a delayed, eased
   return.

   The RETURN DELAY is the load-bearing number. The widget fires card-swapped as
   soon as the new card is committed, but at that instant the new art is still
   hidden under a barely-faded dissolve ghost — so a text return that starts
   there makes the copy legible while the OLD picture is still on screen, and
   the words appear to change before the card does. The delay holds the copy
   down until the dissolve is well past halfway, so the picture always leads and
   the text settles in behind it. Keep it comfortably inside the 560ms dissolve.

   The card's own edge-dissolve particles live inside the widget canvas
   (arcana-card.js) — the hero background stays clean. */
.arcana-hero .text-stack { transition: opacity .3s cubic-bezier(.22,.61,.36,1) .12s; }
.arcana-hero.is-transitioning .text-stack {
  opacity: 0;
  transition: opacity .1s ease-in 0s;
}

/* Main card */
.arcana-hero .main-card-wrap {
  position: relative;
  /* DYNAMIC sizing — fills the FULL height between the navbar and the bottom of
     the viewport (no vertical scroll), while still not crowding the left text
     column on narrow screens. The card is tall (320:470 ≈ 1.47×):
       • height-bound: the entire space below the 60px navbar.
       • width-bound:  a share of the viewport width (its grid column is ~1.6fr),
                       so on narrow screens it shrinks instead of overlapping text.
     The smaller of the two wins; aspect-ratio derives the width. */
  /* Fill the available height (small gap top+bottom so the card's feathered edge
     clears the navbar text)… */
  --card-h-by-height: calc(100vh - 24px);
  /* …but also cap the WIDTH so the card + text group stays within the centred
     max-width band and the two columns sit close together (no chasm). The card
     column gets roughly the remaining width after the ~460px text column + gap.
     Expressed as an equivalent height via the tarot aspect ratio. */
  --card-w-max:       min(54vw, 820px);
  --card-h-by-width:  calc(var(--card-w-max) * (470 / 320));
  height: min(var(--card-h-by-height), var(--card-h-by-width));
  width: auto;
  /* Pull the card left by roughly its own transparent mosaic margin (~7/84 of its
     width ≈ 8.3%) so the tiled artwork starts right at the column edge instead of
     leaving a dead strip between the panel's right rule and the first visible tile. */
  margin-left: 0%;
  /* Match the card's natural tarot ratio so the mosaic card fills the frame
     without letterbox gaps and the dissolve renders identically to the
     standalone widget. */
  aspect-ratio: 320 / 470;
  z-index: 2;
  /* 3D context for layer rotations */
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.arcana-hero .main-card {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    /* deep depth-field glow — the card sits "in front of" the scene */
    0 0 220px color-mix(in srgb, var(--gold-300) 48%, transparent),
    0 0 80px  color-mix(in srgb, var(--gold-400) 30%, transparent),
    0 0 80px  rgba(0,0,0,.55),
    inset 0 0 80px rgba(0,0,0,.45);
}

/* Each image lives in its own absolutely-positioned layer so we can
   crossfade old→new with 3D rotation simultaneously. The new image is
   visible (low opacity, rotated in) from t=0 so there's no perceptual
   "wait for edge-on" lag. */
.arcana-hero .main-card-layer {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.arcana-hero .main-card-layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* The outgoing layer sits on top so it can fade away over the incoming. */
.arcana-hero .main-card-layer.is-out {
  animation: ahLayerOut .36s cubic-bezier(.55,.02,.42,1) forwards;
  z-index: 3;
}
.arcana-hero .main-card-layer.is-in {
  animation: ahLayerIn  .38s cubic-bezier(.22,.7,.3,1) forwards;
  z-index: 2;
}
.arcana-hero .main-card-layer.is-out.dir-prev { animation-name: ahLayerOutPrev; }
.arcana-hero .main-card-layer.is-in.dir-prev  { animation-name: ahLayerInPrev; }

@keyframes ahLayerOut {
  0%   { opacity: 1; transform: rotateY(0)     scale(1); }
  100% { opacity: 0; transform: rotateY(38deg) scale(1.05); }
}
@keyframes ahLayerIn {
  0%   { opacity: 0; transform: rotateY(-38deg) scale(.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0)      scale(1); }
}
@keyframes ahLayerOutPrev {
  0%   { opacity: 1; transform: rotateY(0)      scale(1); }
  100% { opacity: 0; transform: rotateY(-38deg) scale(1.05); }
}
@keyframes ahLayerInPrev {
  0%   { opacity: 0; transform: rotateY(38deg) scale(.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0)     scale(1); }
}

/* Glow and mask sit above the layers via source order. Ensure they
   stay on top even when layers gain z-index during transition. */
.arcana-hero .main-card-glow,
.arcana-hero .main-card-mask { z-index: 4; }

/* Gold shimmer that pulses at the moment of swap, centered on the card */
.arcana-hero .shimmer-pulse {
  position: absolute; inset: -8%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(circle at center,
      color-mix(in srgb, var(--gold-100) 45%, transparent) 0%,
      color-mix(in srgb, var(--gold-100) 18%, transparent) 28%,
      color-mix(in srgb, var(--gold-100) 0%, transparent)  60%);
  mix-blend-mode: screen;
  animation: ahShimmer .9s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes ahShimmer {
  0%   { opacity: 0; transform: scale(.45) rotateZ(0); }
  35%  { opacity: 1; transform: scale(1)   rotateZ(0); }
  100% { opacity: 0; transform: scale(1.18) rotateZ(0); }
}

/* A thin gold seam that appears along the center axis during the swap. */
.arcana-hero .main-card-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom,
    transparent 0%, color-mix(in srgb, var(--gold-100) 85%, transparent) 50%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .1s ease;
}
.arcana-hero .main-card-wrap.is-flipping::after {
  opacity: 1;
  animation: ahSeam .42s ease-out forwards;
}
@keyframes ahSeam {
  0%   { opacity: 0; transform: scaleY(.6); }
  35%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
.arcana-hero .main-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.arcana-hero .main-card-mask {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 60%, rgba(6,12,10,.45) 100%);
  pointer-events: none;
}
.arcana-hero .main-card-glow {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold-300) 35%, transparent);
  pointer-events: none;
}
.arcana-hero .main-card-orbit-ring {
  position: absolute; inset: -32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold-300) 12%, transparent);
  pointer-events: none;
}
.arcana-hero .main-card-label {
  position: absolute;
  bottom: -48px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: .5em;
  color: var(--ah-gold-pale);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .35s ease, transform .35s ease;
}
.arcana-hero .main-card-label.is-out {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

/* Prev / Next satellite buttons */
.arcana-hero .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px;
  background: none; border: 0;
  cursor: pointer;
  /* Above the card's interactive layers. The card mount uses overflow:visible
     and oversized inner layers (e.g. .ac-neb at 130%), which can extend over
     the buttons and swallow their clicks — a high z-index keeps the nav on top. */
  z-index: 20;
  transition: transform .3s ease, filter .3s ease;
}
.arcana-hero .nav-btn-prev { left: 4%; }
.arcana-hero .nav-btn-next { right: 4%; }
.arcana-hero .nav-btn:hover {
  transform: translateY(-50%) scale(1.06);
  filter: brightness(1.2);
}
.arcana-hero .nav-btn:hover .nav-btn-label { color: var(--ah-gold-pale); }

.arcana-hero .nav-disc {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  /* Clearly visible gold ring at rest so it reads as an interactive control. */
  border: 1.5px solid color-mix(in srgb, var(--gold-300) 70%, transparent);
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--gold-300) 18%, transparent), rgba(8,7,14,.55));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 8px 24px -10px rgba(0,0,0,.8);
  transition: border-color .25s ease, box-shadow .3s ease, background .3s ease;
}
.arcana-hero .nav-roman {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 16px; letter-spacing: .1em; line-height: 1;
  color: var(--ah-gold-pale);
}
/* Clear hover state: brighter ring, a soft gold glow, and a lit background so the
   control visibly responds to the pointer. */
.arcana-hero .nav-btn:hover .nav-disc,
.arcana-hero .nav-btn:focus-visible .nav-disc {
  border-color: var(--gold-200);
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--gold-200) 32%, transparent), rgba(8,7,14,.5));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold-200) 50%, transparent),
    0 0 26px -2px color-mix(in srgb, var(--gold-300) 60%, transparent);
}
.arcana-hero .nav-btn:hover .nav-roman,
.arcana-hero .nav-btn:focus-visible .nav-roman {
  color: var(--gold-100);
}
.arcana-hero .nav-btn-label {
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: .3em;
  color: var(--ah-text-mute);
  width: 100px; text-align: center;
  transition: color .25s ease;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1200px) {
  .arcana-hero { column-gap: clamp(20px, 3vw, 48px); }
  .arcana-hero .hero-left { padding: 24px 8px 24px 20px; }
  .arcana-hero .nav-disc { width: 44px; height: 44px; }
  .arcana-hero .nav-roman { font-size: 13px; }
  /* Slightly tighter text column so the two stay grouped on mid screens. */
  .arcana-hero { grid-template-columns: minmax(320px, 420px) auto; }
}

@media (max-width: 900px) {
  .arcana-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .arcana-hero .hero-left  { padding: 32px; }
  .arcana-hero .hero-right { min-height: 70vh; padding: 32px 0 80px; }
  /* The gauge now lives inside the text column (below the CTA), so it stacks
     with it naturally — no separate grid ordering needed. */
  .arcana-hero .hero-left  { order: 1; }
  .arcana-hero .hero-right { order: 2; }
  .arcana-hero .nav-btn-prev { left: 6%; }
  .arcana-hero .nav-btn-next { right: 6%; }
  /* Single column now — the card can use most of the screen width, and the
     height bound relaxes since the hero stacks and scrolls. */
  .arcana-hero .main-card-wrap {
    --card-h-by-width: calc(78vw * (470 / 320));
    --card-h-by-height: 80vh;
  }
}