/* ==========================================================================
   veil.css — Interaction & motion layer for the Dungeon Ark marketing site.
   Additive only: layered on top of site.css. Every new class is namespaced
   so it never collides with the existing design system. Consumes the existing
   design tokens (--gold, --night, --ink, --muted, --line, --violet) and only
   ADDS a few new variables of its own.
   ========================================================================== */

:root {
  /* New, additive tokens (do not override existing site.css tokens). */
  --veil: #141a35;
  --moon: #c6d4ff;
  --ember: #ff7a45;
  --astral: #a888ff;
}

/* --------------------------------------------------------------------------
   Ambient veil canvas + grain overlay (fixed, non-interactive).
   Sit above section backgrounds but below the header / frame / toast so the
   navigation and chrome stay crisp. pointer-events:none keeps every click,
   tap and hover reaching the real page beneath.
   -------------------------------------------------------------------------- */
.veil-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: 0.5;
  pointer-events: none;
}

.veil-grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Toast — shared status region for in-world confirmations.
   -------------------------------------------------------------------------- */
.veil-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  z-index: 120;
  max-width: min(90vw, 460px);
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--gold);
  background: rgba(20, 26, 53, 0.96);
  color: var(--gold-bright);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, 180%);
  transition: transform 460ms cubic-bezier(0.2, 1.1, 0.3, 1);
  pointer-events: none;
}
.veil-toast.is-visible { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Cursor familiar (the moon cat).
   -------------------------------------------------------------------------- */
.familiar {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  will-change: transform;
}
.familiar.is-awake { opacity: 0.9; }
@media (hover: none) { .familiar { display: none !important; } }

/* --------------------------------------------------------------------------
   Hero dragon — flies as a foreground layer over the existing hero art
   (asset decision A: screen-01 stays, the dragon is added on top).
   -------------------------------------------------------------------------- */
.hero-dragon {
  position: absolute;
  z-index: 3;
  top: 12%;
  right: 3%;
  width: min(240px, 30%);
  cursor: pointer;
  filter: drop-shadow(0 0 26px rgba(255, 122, 69, 0.35));
  will-change: transform;
}
.hero-dragon:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; }

@media (max-width: 980px) {
  .hero-dragon { top: 4%; right: 2%; width: 150px; opacity: 0.72; }
}
@media (max-width: 720px) {
  .hero-dragon {
    top: auto;
    bottom: 8%;
    right: 6%;
    left: auto;
    width: 118px;
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   Rite Wheel — signature radial selector. The existing .rite-grid remains in
   the DOM as the no-JS / reduced fallback; JS reveals the wheel and hides the
   grid via the .rw-active flag on the section.
   -------------------------------------------------------------------------- */
.rite-wheel { display: none; margin: 0 0 20px; }
.rites.rw-active .rite-wheel { display: block; }
.rites.rw-active .rite-grid { display: none; }

.rw-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.rw-stage { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1; }
.rw-stage svg { width: 100%; height: 100%; overflow: visible; }

.rw-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.rw-ring.rw-spin { transform-origin: 50% 50%; animation: rw-spin 60s linear infinite; }
.rw-ring.rw-spin-rev { transform-origin: 50% 50%; animation: rw-spin 60s linear infinite reverse; }
@keyframes rw-spin { to { transform: rotate(360deg); } }

.rw-core {
  fill: var(--gold);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-anchor: middle;
}

.rw-node { cursor: pointer; transition: opacity 300ms ease; }
.rw-node circle { transition: r 320ms ease, fill 320ms ease; }
.rw-node text {
  fill: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-anchor: middle;
  transition: fill 300ms ease;
}
.rw-node:hover circle,
.rw-node.is-active circle { fill: var(--gold); r: 15; }
.rw-node:hover text,
.rw-node.is-active text { fill: var(--ink); }
.rw-node.is-locked { cursor: not-allowed; opacity: 0.4; }
.rw-node.is-locked:hover circle { fill: var(--night); r: 11; }
.rw-node.is-locked:hover text { fill: var(--muted); }
.rw-node:focus-visible { outline: none; }
.rw-node:focus-visible circle { stroke: var(--gold-bright); stroke-width: 2.5; }

.rw-panel { min-height: 300px; }
.rw-panel-index {
  margin: 0 0 6px;
  color: var(--gold);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rw-panel h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 400;
  line-height: 1.05;
}
.rw-panel-body { margin: 0; color: var(--muted); }
.rw-panel figure { margin: 22px 0 0; }
.rw-panel figure img {
  width: 100%;
  max-width: 320px;
  height: auto;
  max-height: 70vh;
  margin: 0 auto;
  display: block;
  border: 1px solid var(--line-soft);
  object-fit: contain;
}
.rw-panel figure[hidden] { display: none; }
.rw-panel-locked {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.rw-swap { animation: rw-swap 500ms ease; }
@keyframes rw-swap {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.rw-hint {
  margin: 22px 0 0;
  color: rgba(224, 182, 76, 0.6);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .rw-shell { grid-template-columns: 1fr; }
  .rw-stage { max-width: 360px; }
}

/* --------------------------------------------------------------------------
   Bloodline picker — a compact interactive band. Selecting a lineage recolors
   the page (--gold) and the ambient particles. Implemented as a radiogroup.
   -------------------------------------------------------------------------- */
.bloodline { width: var(--page); margin: 0 auto; padding: 40px 0 20px; }
.bloodline > h2 {
  margin: 6px 0 12px;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.bloodline-lead { max-width: 52ch; margin: 0; color: var(--muted); }
.bloodline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}
@media (max-width: 720px) {
  .bloodline-grid { grid-template-columns: 1fr; }
}
.blood[data-blood="noble"] { --blood-glow: #e0b64c; }
.blood[data-blood="mage"] { --blood-glow: #66d9e8; }
.blood[data-blood="dragon"] { --blood-glow: #ff7a45; }
.blood[data-blood="astral"] { --blood-glow: #a888ff; }
.blood {
  position: relative;
  overflow: hidden;
  padding: 26px 22px;
  border: 1px solid var(--line-soft);
  background: rgba(20, 25, 47, 0.42);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 380ms ease, border-color 380ms ease;
}
.blood::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  background: radial-gradient(circle at 50% 125%, var(--blood-glow), transparent 70%);
  transition: opacity 380ms ease;
}
.blood:hover::before,
.blood[aria-checked="true"]::before { opacity: 0.55; }
.blood:hover,
.blood[aria-checked="true"] { transform: translateY(-6px); border-color: var(--blood-glow); }
.blood-sigil {
  position: relative;
  display: block;
  margin-bottom: 12px;
  font-size: 1.7rem;
  line-height: 1;
}
.blood-name {
  position: relative;
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}
.blood-role {
  position: relative;
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.blood-chosen {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  padding: 0.16rem 0.5rem;
  background: var(--blood-glow);
  color: #0b0b12;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 300ms ease;
}
.blood[aria-checked="true"] .blood-chosen { opacity: 1; }

/* --------------------------------------------------------------------------
   Moon + veiled foxes, added into the existing .world-band.
   -------------------------------------------------------------------------- */
.world-band { position: relative; }
.moon {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 50%;
  width: clamp(120px, 18vw, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fdfbf2, var(--moon) 55%, #6f7fb8);
  box-shadow: 0 0 90px rgba(198, 212, 255, 0.32), inset -16px -10px 36px rgba(60, 70, 110, 0.55);
  cursor: pointer;
  transform: translateX(-50%);
  transition: box-shadow 500ms ease;
}
.moon:hover,
.moon:focus-visible { box-shadow: 0 0 140px rgba(198, 212, 255, 0.6), inset -16px -10px 36px rgba(60, 70, 110, 0.55); }
.foxes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.moon-hint {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@media (max-width: 720px) { .moon { top: 26px; } }

/* --------------------------------------------------------------------------
   Fragment flip cards — enhance the existing .artifact gallery figures.
   The image box becomes a 3D flip; the existing figcaption stays put so the
   gallery composition is unchanged.
   -------------------------------------------------------------------------- */
.frag { perspective: 1100px; }
.frag-flip { position: relative; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(0.4, 0.2, 0.2, 1); }
.frag.is-flipped .frag-flip { transform: rotateY(180deg); }
.frag-front { backface-visibility: hidden; }
.frag-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(224, 182, 76, 0.08), rgba(10, 15, 34, 0.96));
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.frag-back p {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-style: italic;
  line-height: 1.5;
}
.frag-hint {
  display: block;
  margin-top: 4px;
  color: rgba(224, 182, 76, 0.66);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Sigil Forge — draw-your-mark canvas at the final CTA. Added alongside the
   existing "Answer the call" anchor, which is left fully intact.
   -------------------------------------------------------------------------- */
.forge {
  grid-column: 1 / -1;
  margin-top: 60px;
  padding-top: 44px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.forge-eyebrow { margin: 0 0 14px; }
.forge-lead { max-width: 46ch; margin: 0 auto; color: var(--muted); }
.forge-canvas {
  width: 260px;
  height: 260px;
  margin: 26px auto 12px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 26, 53, 0.85), transparent 72%);
  cursor: crosshair;
  touch-action: none;
}
.forge-name {
  min-height: 2.2rem;
  margin: 0;
  color: var(--gold-bright);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: 0.1em;
}
.forge-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.forge-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.forge-actions .button {
  width: 240px;
  height: 56px;
  min-height: 0;
  margin-top: 0;
  background: rgba(224, 182, 76, 0.06);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Reduced motion — halt every added animation, hide the free-flying
   characters, and make sure nothing that carries content is left invisible.
   The JS also reads prefers-reduced-motion and never starts its RAF loops.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .veil-canvas,
  .veil-grain,
  .familiar,
  .hero-dragon,
  .foxes { display: none !important; }

  .rw-ring.rw-spin,
  .rw-ring.rw-spin-rev { animation: none !important; }
  .rw-swap { animation: none !important; }
  .frag-flip { transition: none !important; }
  .veil-toast { transition: none !important; }
  .blood { transition: none !important; }
}