/* ============================================================
   CADAKAY BIM CHEST — "The Royal Chest" interactive band
   + site motion package (buttons / reveals / card lift).
   Shared by index.html and wishlist.html (design locked from
   mocks/royal-chest-mock.html, Carl 2026-07-24: seal glyphs only).
   Loaded AFTER each page's inline <style>; deliberately a separate
   file so the styles.css re-inline workflow can never wipe it.
   Colors ride the pages' brand CSS variables — no new hexes here
   beyond seal-art tones baked in the chest SVG itself.
   ============================================================ */

/* ---------- the band ---------- */
.chestband { position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 46% at 50% 96%, rgba(212,160,23,.14) 0%, rgba(212,160,23,.05) 42%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(212,160,23,.028) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(212,160,23,.028) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, var(--charcoal-deep) 0%, #232323 55%, #262421 100%);
}
/* 880, not 660: the card now sits ABOVE the coins instead of over them, so the
   band has to carry a card-sized band of headroom that did not exist before.
   Carl: "reposition it to make it open above the coins not on top... this way
   you can still click the coins and see the related issue/solution." */
.chestband .inner { position: relative; height: 880px; max-width: 1240px; margin: 0 auto; }
.chestband.compactband .inner { height: 520px; }
.chesthead { position: absolute; top: 44px; left: 0; right: 0; text-align: center; z-index: 5; pointer-events: none; }
.chesthead .eyebrow { margin-bottom: 12px; }
.chesthead h2 .count { color: var(--gold); }
.chesthead .sub { font-size: 15.5px; color: var(--muted-2); font-weight: 300; margin: 10px auto 0; max-width: 680px; }
.chesthead .legend { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: #8a8a8a; text-transform: uppercase; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px -1px 14px; }
.legend i.lg { background: linear-gradient(145deg, #F0D27A, var(--gold)); }
.legend i.lw { background: #F2EFE6; box-shadow: 0 0 0 1.5px var(--gold); }
.legend i.lc { background: #0c3238; box-shadow: 0 0 0 1.5px var(--cyan); }
.chestband.compactband .chesthead { top: 30px; }
.chestband.compactband .chesthead .legend { display: none; }
.chestband.compactband .chesthead .sub { font-size: 14px; }

.chestband canvas.dust { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* ---------- the chest ---------- */
.chest { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4;
  width: 300px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chest svg { overflow: visible; display: block; width: 100%; }
.chest .lid { transform-origin: 96px 130px; transform: rotate(0deg); transition: transform 1s cubic-bezier(.34,1.3,.4,1); }
.chestband.open .chest .lid { transform: rotate(-35deg) translate(-6px,-5px); }
.chest .glow { opacity: 0; transition: opacity 1.2s ease .25s; }
.chestband.open .chest .glow { opacity: 1; animation: glowbreathe 4.2s ease-in-out infinite 1.2s; }
@keyframes glowbreathe { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.chest .mound { opacity: 0; transition: opacity .9s ease .55s; }
.chestband.open .chest .mound { opacity: 1; }
.chest .spark { transform-box: fill-box; transform-origin: center; opacity: .2;
  animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.15); } }
.chest .hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: -22px; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: #8a7433; text-transform: uppercase;
  opacity: 0; transition: opacity .5s ease 1.6s; }
.chestband.open .chest .hint { opacity: 1; }
.chest:hover .hint { color: var(--gold); }

/* ---------- coins ---------- */
.tokfield { position: absolute; inset: 0; z-index: 3; }
.tok { position: absolute; top: 0; left: 0; border-radius: 50%; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #F0D27A, var(--gold) 46%, #9A7415); padding: 3px;
  box-shadow: 0 7px 16px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
  will-change: transform; opacity: 0; }
.tok .face { width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 36%, #3a3a3a, #1f1f1f);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; color: var(--white); }
.tok .face::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -50%; width: 36%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28) 50%, transparent);
  transform: skewX(-18deg) translateX(-150%); }
.tok:hover .face::after, .tok.hot .face::after { animation: sheen 1s ease forwards; }
.tok:hover, .tok.hot { z-index: 40; }
.tok.ai { background: linear-gradient(145deg, #7ff3ff, #00b9cf 46%, #045d69); }
.tok.ai .face { background: radial-gradient(circle at 50% 36%, #0e3a41, #071e22); color: var(--cyan);
  /* 🔒 MAKE THE ODD ONE OUT LOOK DELIBERATE, NOT BROKEN.
     Kaydan, 2026-08-06: "when I went to the chest with the animations that one had no picture."
     Royal Herald has no ribbon glyph ON PURPOSE — it is the AI/MCP companion, not a button — so
     the coin falls back to the letters AI. But at the inherited 10px, sitting in a field of 40
     coins that all carry a crisp white glyph, it read as the one whose image failed to load.
     A deliberate difference has to LOOK deliberate or it just looks like a defect. */
     ⚠ The SIZE is set inline by the script (it scales with the coin), so it lives there, not here. */
  font-weight: 800; letter-spacing: .06em;
  text-shadow: 0 0 10px rgba(0,229,255,.55); }
.tok.gone { pointer-events: none; }
/* seal-glyph faces (the shipped look — coin IS the ribbon seal) */
.tok.imgface { background: none; padding: 0; box-shadow: 0 7px 16px rgba(0,0,0,.5); }
.tok.imgface .face { background: none; border: none; }
.tok .face img { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* shared hover label */
.toklabel { position: absolute; z-index: 45; pointer-events: none; transform: translate(-50%, -100%);
  background: #171512; border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 12px 5px;
  font-family: var(--serif); font-size: 13.5px; color: var(--gold-bright); white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.5); opacity: 0; transition: opacity .15s ease; }
.toklabel small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  color: #8a8a8a; text-transform: uppercase; text-align: center; margin-top: 1px; }
.toklabel.on { opacity: 1; }

/* ---------- expanded card ---------- */

/* ---------- the problem -> solution rotation ----------
   Carl 2026-08-22: the card used to read a tool's NAME, which only lands on
   someone who already knows they have that problem. Now it names the PROBLEM
   first and flips to the tool that answers it, on its own, once the coins land.

   The rotation is deliberately NOT modal: no veil, pointer-events stay off the
   card body, so the page keeps scrolling and the coins keep drifting behind it.
   Clicking a coin still opens that tool and stops the rotation. */
/* The rotation no longer dims or blocks anything: the card is in its own space,
   so the coins underneath stay live and clickable the whole time. */
.chestband.cycling .tokcard { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: none; }
.chestband.cycling .tokveil { opacity: 0; pointer-events: none; }
.chestband.cycling .tokcard .actions,
.chestband.cycling .tokcard .tokx { pointer-events: auto; }
.chestband.cycling.held .tokcard { pointer-events: auto; }

/* The problem is the headline until the flip; then the tool takes over.
   Both halves are always in the DOM - a crossfade, not a rebuild, so nothing
   reflows mid-sentence and a screen reader is not handed a moving target. */
/* ⚠ THE TWO FACES MUST OCCUPY THE SAME SPACE, NOT STACK IN FLOW. The first
   cut left .problem in normal flow beside .row/.blurb and only faded them: the
   card grew to hold both, and mid-transition the problem text showed THROUGH
   the tool name. Caught by looking at it in a browser rather than trusting the
   markup. The solution half keeps its place in flow (it sets the card height,
   so nothing jumps between faces); the problem is laid OVER that same box. */
.tokcard .problem { display: none; margin: 0; font-family: var(--serif);
  font-size: 21px; line-height: 1.3; color: #F7F5EF; }
/* Measured both faces in a browser: problem 217px, solution 263px. Left alone
   the card resizes on every flip and, being centre-anchored, it grows in both
   directions at once - a small pulse the eye reads as a glitch. Floor it at the
   taller face so the box never moves; only the words change. */
.tokcard.hasproblem { min-height: 250px; }
.tokcard.hasproblem .problem { display: flex; align-items: center;
  position: absolute; left: 26px; right: 26px; top: 26px; bottom: 74px;
  opacity: 1; transition: opacity .3s ease, transform .3s ease; }
.tokcard.hasproblem .row,
.tokcard.hasproblem .blurb { opacity: 0; transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease; }

.tokcard.hasproblem.flip .problem { opacity: 0; transform: translateY(-5px); pointer-events: none; }
.tokcard.hasproblem.flip .row,
.tokcard.hasproblem.flip .blurb { opacity: 1; transform: none; }

/* the gold rail doubles as the read-timer */
/* one full sweep = one full pair (HOLD_PROBLEM + HOLD_SOLUTION in the script) */
.chestband.cycling .tokcard .rail { animation: railsweep 9.8s linear infinite; }
.chestband.cycling.held .tokcard .rail { animation-play-state: paused; }
@keyframes railsweep {
  0%   { background: linear-gradient(90deg, transparent, var(--gold) 4%, transparent 12%); }
  100% { background: linear-gradient(90deg, transparent 88%, var(--gold) 96%, transparent); }
}

/* A reduced-motion seat gets no rotation at all (the script never starts it) --
   the coins stay clickable exactly as before, which is the accessible path,
   not a degraded one. */
@media (prefers-reduced-motion: reduce) {
  .chestband.cycling .tokcard { opacity: 0; pointer-events: none; }
  .chestband.cycling .tokcard .rail { animation: none; }
}

.tokveil { position: absolute; inset: 0; z-index: 50; background: rgba(20,19,16,.45);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
/* Was a modal veil. With the card out of the coins' way there is nothing to
   dim -- veiling now would switch OFF the clicking this repositioning enabled. */
.chestband.carded .tokveil { opacity: 0; pointer-events: none; }
.tokcard { position: absolute; z-index: 55; left: 50%; top: 238px; width: min(520px, calc(100% - 40px));
  transform: translate(-50%, 0) scale(.94); opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.8,.3,1.15), opacity .22s ease;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong); border-radius: 18px; padding: 26px 26px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); }
.tokcard .rail { position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.chestband.carded .tokcard { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.tokcard .row { display: flex; align-items: center; gap: 16px; }
.tokcard .bigcoin { flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3.5px;
  background: linear-gradient(145deg, #F0D27A, var(--gold) 46%, #9A7415);
  box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5); }
.tokcard .bigcoin div { width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #3a3a3a, #1f1f1f); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--white); }
.tokcard .bigcoin.imgface { background: none; padding: 0; }
.tokcard .bigcoin.imgface div { background: none; border: none; }
.tokcard .bigcoin img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.tokcard.isai .bigcoin { background: linear-gradient(145deg, #7ff3ff, #00b9cf 46%, #045d69); }
.tokcard.isai .bigcoin div { background: radial-gradient(circle at 50% 36%, #0e3a41, #071e22); color: var(--cyan); }
.tokcard h3 { font-family: var(--serif); color: #F7F5EF; margin: 0; line-height: 1.1; font-size: 22px; }
/* card CTA is self-sufficient so the band works on pages without the site's .btn rules (wishlist) */
.tokcard .actions .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  text-decoration: none; letter-spacing: .01em; cursor: pointer; border: 1px solid transparent; }
.tokcard .actions .btn-gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink); border-color: #EFD178;
  box-shadow: 0 10px 30px rgba(212,160,23,.34), inset 0 1px 1px rgba(255,255,255,.45); }
.tokcard .pills { margin-top: 7px; display: flex; gap: 8px; flex-wrap: wrap; }
.tokcard .pill { display: inline-block; padding: 3px 11px; border-radius: 20px; border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--gold); }
.tokcard .pill.free { color: var(--green); border-color: var(--green); }
.tokcard .pill.pay { color: var(--gold-bright); border-color: var(--gold); background: rgba(212,160,23,.10); }
.tokcard .pill.aik { color: var(--cyan); border-color: rgba(0,229,255,.5); }
.tokcard .pill.herop { color: #2B2B2B; background: linear-gradient(180deg,#F6DE95,#D9AE2E); border-color: #EFD178; font-weight: 500; }
.tokcard p.blurb { font-size: 15px; color: #C9C9C9; margin: 16px 0 0; line-height: 1.55; }
.tokcard .actions { display: flex; gap: 12px; margin-top: 20px; align-items: center; }
.tokcard .actions .btn { padding: 10px 18px; font-size: 13.5px; border-radius: 9px; }
.tokcard .actions a.more { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--muted-2); text-decoration: none; }
.tokcard .actions a.more:hover { color: var(--gold); }
.tokx { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: #9a9a9a; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.tokx:hover { color: var(--white); border-color: var(--line-strong); background: rgba(255,255,255,.04); }

/* ============================================================
   site motion package (validated in the mock: "Buttons feel great")
   ============================================================ */
.btn { position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.7,.3,1.4), box-shadow .18s ease, border-color .18s ease; }
.btn:active { transform: translateY(0) scale(.97); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(212,160,23,.55); }
.btn-ghost:hover { transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(212,160,23,.35), 0 10px 26px rgba(0,0,0,.35); }
.btn::after, .navlinks a.cta::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 34%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 100%);
  transform: skewX(-18deg) translateX(-140%); opacity: 0; pointer-events: none; }
.btn-ghost::after { background: linear-gradient(105deg, transparent 0%, rgba(212,160,23,.4) 48%, transparent 100%); }
.btn:hover::after, .navlinks a.cta:hover::after { animation: sheen .8s ease forwards; }
.navlinks a.cta { position: relative; overflow: hidden; }
@keyframes sheen { 0% { transform: skewX(-18deg) translateX(-160%); opacity: 0; }
  18% { opacity: 1; } 100% { transform: skewX(-18deg) translateX(460%); opacity: 0; } }
.btn-pulse { animation: goldpulse 3.6s ease-in-out infinite; }
@keyframes goldpulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(212,160,23,.34), inset 0 1px 1px rgba(255,255,255,.45); }
  50% { box-shadow: 0 12px 42px rgba(212,160,23,.6), 0 0 0 5px rgba(212,160,23,.07), inset 0 1px 1px rgba(255,255,255,.45); } }

/* wishlist form button rides the same motion (it's a native <button>, not a .btn link) */
.wl-btn { position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.7,.3,1.4), box-shadow .18s ease; }
.wl-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(212,160,23,.5); }
.wl-btn:active { transform: translateY(0) scale(.97); }
.wl-btn::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 34%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 100%);
  transform: skewX(-18deg) translateX(-140%); opacity: 0; pointer-events: none; }
.wl-btn:hover::after { animation: sheen .8s ease forwards; }

/* cards lift toward the cursor; gold rail shimmers */
.card, .tier { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease; }
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 26px 60px rgba(0,0,0,.45); }
.tier:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,.4); }
.card .rail { background-size: 200% 100%; transition: background-position .6s ease; }
.card:hover .rail { background-position: 100% 0; }

/* scroll reveals (elements get .reveal from JS, .in when scrolled to) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive + reduced motion ---------- */
@media (max-width: 640px) {
  /* Narrow screens carry the card too, so the full band needs the same headroom
     it got on desktop -- 540 would put the card straight back on the coins.
     compactband (wishlist) has no rotation and keeps the short version. */
  /* Measured on a 375px viewport: at 720/200 the card ran to 523 and the coins
     started at 480 - a 43px overlap. Taller band, higher card, smaller problem
     type, and the coins pushed below all of it. */
  .chestband .inner { height: 840px; }
  .chestband.compactband .inner { height: 540px; }
  .tokcard { top: 186px; padding: 20px 20px 18px; }
  .tokcard .problem { font-size: 18px; line-height: 1.26; }
  .tokcard.hasproblem { min-height: 214px; }
  .tokcard.hasproblem .problem { left: 20px; right: 20px; top: 20px; bottom: 66px; }
  .chesthead { top: 30px; padding: 0 18px; }
  .chesthead .legend { display: none; }
  .chest { width: 225px; }
}
@media (prefers-reduced-motion: reduce) {
  .chestband *, .btn, .btn::after, .navlinks a.cta::after, .card, .tier, .reveal,
  .btn-pulse, .chest .spark, .chest .lid, .chest .glow, .chest .mound {
    animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .chest .glow, .chest .mound { opacity: 1; }
}