/* ═══════════════════════════════════════════════════════════════════
   GUARDIANS · PORTAL-PLUS (portal-plus.css)
   The GLOBAL additive layer — loaded on every portal page after
   portal.css. css/portal.css is LAW and is never modified; global
   fixes and polish live here. Page-scoped styles stay in their own
   files (training.css etc).
   ═══════════════════════════════════════════════════════════════════ */

/* ── FIX: the trio were being stretched ─────────────────────────────
   portal.css sizes .trio-strip img by width only; the HTML width/height
   attributes then pinned the height and distorted the bots. Aspect is
   now honored everywhere. */
.trio-strip img { height: auto; }
img { max-width: 100%; }               /* general belt-and-braces */

/* ── THE TITLE ZONE WAKES (hover enchantments) ──────────────────────
   These lines are not links, so the effects must read as enchantment,
   not affordance: glow and shine, magnify only a whisper. One effect
   per line type, identical on every page. Hover-capable devices only;
   stilled under reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  /* 1 · The k-label — the sparks ignite. */
  .k-label { transition: letter-spacing 0.45s ease, text-shadow 0.45s ease; }
  .k-label .spark { transition: text-shadow 0.45s ease, color 0.45s ease; }
  .k-label:hover { letter-spacing: 0.4em; text-shadow: 0 0 18px rgba(183, 154, 224, 0.55); }
  .k-label:hover .spark {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255, 207, 136, 0.95), 0 0 26px rgba(255, 207, 136, 0.55);
  }

  /* 2 · The H1 — the shine. Solid line blooms; prism line shimmers. */
  .stage-name { transition: transform 0.45s ease; }
  .stage-name:hover { transform: scale(1.015); }
  .stage-name .g1 { transition: text-shadow 0.45s ease; }
  .stage-name:hover .g1 {
    text-shadow: 0 3px 26px rgba(0, 0, 0, 0.85),
                 0 0 46px rgba(255, 255, 255, 0.35),
                 0 0 90px rgba(183, 154, 224, 0.85);
  }
  .stage-name:hover .g2 { animation: prism-shimmer 2.6s linear infinite; }
  /* the same bloom for band-style heroes (interior pages without a stage) */
  .hero h1 { transition: text-shadow 0.45s ease, transform 0.45s ease; }
  .hero h1:hover {
    transform: scale(1.015);
    text-shadow: 0 0 60px rgba(183, 154, 224, 0.75), 0 0 26px rgba(255, 255, 255, 0.25);
  }

  /* 3 · The question / pitch — the whisper brightens. */
  .stage-bottom .question, .hero .pitch {
    transition: text-shadow 0.45s ease, color 0.45s ease;
  }
  .stage-bottom .question:hover, .hero .pitch:hover {
    color: #f8f4fd;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9), 0 0 34px rgba(183, 154, 224, 0.65);
  }
  .stage-bottom .question:hover .prism-text { filter: saturate(1.5) brightness(1.15); }
  .prism-text { transition: filter 0.45s ease; }

  /* 4 · The proof line — Tela's thread. The one line about the machine
     keeping its promise, so it carries the only teal in the zone. */
  .proof {
    transition: color 0.45s ease, text-shadow 0.45s ease, background-size 0.5s ease;
    background: linear-gradient(90deg, transparent, var(--teal-soft), transparent) no-repeat 50% 100% / 0% 1px;
    padding-bottom: 3px;
  }
  .proof:hover {
    color: #bfe9ee;
    text-shadow: 0 0 16px rgba(0, 212, 212, 0.45);
    background-size: 100% 1px;
  }
}

@keyframes prism-shimmer {
  0%   { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9)) hue-rotate(0deg)   brightness(1); }
  50%  { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9)) hue-rotate(40deg)  brightness(1.25); }
  100% { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9)) hue-rotate(0deg)   brightness(1); }
}

/* ── THE UNIFIED FOOTER ─────────────────────────────────────────────
   One footer, every page: the work signed by its author. */
.g-footer .byline { font-family: var(--f-arc); font-size: 0.95rem; color: #ab9fc4; }
.g-footer .byline a { color: var(--arc-hi); border-bottom-color: var(--arc-soft); }
.g-footer .byline a:hover { color: #f0eaf8; border-bottom-color: var(--arc); }

/* ── THE UNIFORM DOOR (all CTAs, one grammar) ───────────────────────
   Erez's ruling, and the better one: over hero art an opaque button is
   a hole in the painting, and one shape learned once beats two shapes
   justified cleverly. ALL doors share the ghost's transparent body,
   sized up and identical. Distinction lives in the AWAKENING:
   ordinary doors wake violet; the page's ONE main door (.artifact-cta)
   wakes GOLD. Same body, different soul, revealed only by touch. */
.btn-ghost, .artifact-cta {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--arc-hi);
  background: transparent;
  border: 1px solid var(--arc-soft);
  border-radius: 4px;
  padding: 17px 36px;
  text-decoration: none;
  box-shadow: none; transform: none; text-shadow: none;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
}
.btn-ghost:hover {
  border-color: var(--arc);
  color: #f2ecfa;
  box-shadow: 0 0 22px var(--arc-glow);
}
/* the gold awakening — one per page */
.artifact-cta:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 28px rgba(255, 207, 136, 0.35), inset 0 0 18px rgba(255, 207, 136, 0.06);
  text-shadow: 0 0 14px rgba(255, 207, 136, 0.55);
}
/* the poetry moves out of the button, into a whisper beneath it */
.cta-caption {
  margin: 10px 0 0;
  font-family: var(--f-arc); font-style: italic;
  font-size: 0.9rem; color: #9d92b8;
}
@media (prefers-reduced-motion: reduce) {
  .btn-ghost, .artifact-cta { transition: none; }
}

/* ── THE GALLERY GLASS (lightbox — global) ──────────────────────────
   Learned the hard way on the codex: [hidden] must always win. */
.glass-overlay[hidden] { display: none; }
.glass-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 4, 12, 0.92);
  display: grid; place-items: center; padding: 4vh 3vw;
  cursor: zoom-out;
}
.glass-bound { cursor: zoom-in; }
.glass-frame { margin: 0; max-width: 94vw; max-height: 88vh; text-align: center; }
.glass-frame img {
  max-width: 94vw; max-height: 80vh; width: auto; height: auto;
  border-radius: 8px; cursor: default;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 50px rgba(183, 154, 224, 0.15);
}
.glass-frame figcaption {
  margin-top: 12px; font-family: var(--f-arc); font-style: italic;
  color: #c9bfdd; font-size: 0.95rem;
}
.glass-close {
  position: fixed; top: 18px; right: 22px; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 1.1rem; color: #f0eaf8;
  background: rgba(16, 13, 30, 0.8); border: 1px solid var(--arc-soft);
}
.glass-close:hover { border-color: var(--arc); box-shadow: 0 0 18px var(--arc-glow); }
.glass-dl {
  position: fixed; top: 26px; left: 26px;
  font-family: var(--f-ui); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 4px;
  padding: 11px 18px; background: rgba(10, 9, 22, 0.6);
}
.glass-dl:hover { box-shadow: 0 0 20px rgba(255, 207, 136, 0.3); }

/* ── THE ARMORY, FIVE STRONG ─────────────────────────────────────────
   portal.css lays the tools out with auto-fit/minmax(250px), which gave
   four across and a fifth stranded alone on the right. With five living
   tools a fixed three-column grid reads as 3 + 2 — balanced, and the
   cards grow rather than shrink. portal.css is LAW; the fix lives here. */
@media (min-width: 880px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
}