/* =============================================================
   Bud Gaia — page hero carousel
   Pairs with assets/js/gaia-hero-carousel.js and the
   [data-gah-blade] markup (gaia/index.html §hero).
   Fork of novaria-hero-carousel.css, namespaced gah-*.
   Replaces film.css + gaia-film.css on /gaia.
   Tokens only — no literals beyond motif ground alphas.
   ============================================================= */

/* ---------- Blade ---------- */
.gah-blade{
  position: relative; overflow: hidden;
  background: var(--bud-midnight-purple);
  color: var(--fg1);
  height: min(max(520px, 64vh), calc(100vh - var(--nav-h, 71px)));
  min-height: 520px;
}
/* tabindex="0" makes the blade a tab stop — keep a visible ring for keyboards only */
.gah-blade:focus{ outline: none; }
.gah-blade:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.gah-motif{ position: absolute; inset: 0; transition: opacity .6s var(--ease-out-expo); opacity: 1; }
/* bud-motifs.js only sizes `.motif-stage > bud-grid`; the grid is nested one
   level here, so it needs the absolute/inset rule locally or it renders 0×0. */
.gah-motif > bud-grid{ position: absolute; inset: 0; display: block; pointer-events: none; }
.gah-blade[data-motif="story"] .gah-motif{ opacity: .12; }
.gah-glow, .gah-vignette{ position: absolute; inset: 0; pointer-events: none; }
.gah-glow{
  background: radial-gradient(ellipse 70% 90% at 18% 42%,
    rgba(140,51,239,.30) 0%, rgba(140,51,239,.10) 45%, rgba(10,7,18,0) 78%);
}
.gah-vignette{
  background: radial-gradient(ellipse 120% 100% at 50% 50%,
    rgba(10,7,18,0) 40%, rgba(10,7,18,.72) 100%);
}
.gah-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* timeline bar — the /film chrome, story frames only; the two hero
   book-ends fade it out (driver sets width + opacity). */
.gah-prog{
  position: absolute; top: 0; left: 0; z-index: 6; height: 2px; width: 0; opacity: 0;
  pointer-events: none; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--bud-electric), var(--bud-electric-2), var(--bud-green));
  box-shadow: 0 0 10px rgba(140,51,239,.6);
  transition: width .8s var(--ease-out-expo), opacity .5s var(--ease-out-expo);
}
.gah-blade.no-js .gah-prog{ display: none; }

/* ---------- Scenes ---------- */
.gah-scene{
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 56px 46px 96px;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease-out-expo);
}
.gah-scene[data-on="1"]{ opacity: 1; pointer-events: auto; }
.gah-scene--center{ justify-content: center; }
.gah-inner{ width: 100%; max-width: 1240px; margin: 0 auto; }
.gah-inner--narrow{ max-width: 1080px; }
.gah-inner--hero{ max-width: 940px; }
.gah-split{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.gah-split--os{ grid-template-columns: .92fr 1.08fr; }
.gah-split--value{ grid-template-columns: 1.02fr .98fr; }
/* copy column + card visual (frames 1 and 4): stretch so the two boxes
   share a top and bottom edge; the card distributes its own rows. */
.gah-split:not(.gah-split--os){ align-items: stretch; }
.gah-split:not(.gah-split--os) .gah-viz{ justify-content: space-between; }
.gah-col{ display: flex; flex-direction: column; gap: 18px; }
.gah-stackc{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
/* Hero book-ends run the motif at full strength — a soft scrim behind the
   content column keeps type and chips legible over the grid. */
.gah-inner--hero{ position: relative; isolation: isolate; }
.gah-inner--hero::before{
  content: ""; position: absolute; inset: -40px -64px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 64% at 50% 50%,
    rgba(10,7,18,.88) 0%, rgba(10,7,18,.70) 52%, rgba(10,7,18,0) 100%);
}

/* ---------- Entrances ---------- */
@keyframes gah-rise{ from{ opacity:0; transform: translateY(9px); } to{ opacity:1; transform:none; } }
.gah-scene[data-on="0"] [data-fx]{ opacity: 0; }
.gah-scene[data-on="1"] [data-fx]{
  animation: gah-rise .52s var(--ease-out-expo) both;
  animation-delay: var(--d, 0s);
}

/* ---------- Type ---------- */
.gah-kick{ font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent); }
.gah-kick--red{ color: var(--bud-red); }
.gah-kick--green{ color: var(--bud-green); }
.gah-pill{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--bud-electric-3);
  padding: 7px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: linear-gradient(var(--accent-muted), var(--accent-muted)), rgba(18,14,28,.78);
  backdrop-filter: blur(10px);
}
.gah-pill .dot{ width:5px; height:5px; border-radius:999px; background: var(--bud-green); box-shadow: 0 0 8px var(--bud-green); }
.gah-h1{ margin:0; font-size: clamp(34px, 4.6vw, 56px); font-weight: var(--fw-bold);
  line-height: 1.06; letter-spacing: var(--tracking-tight); text-wrap: balance; }
.gah-h2{ margin:0; font-size: clamp(28px, 3.4vw, 42px); font-weight: var(--fw-bold);
  line-height: 1.1; letter-spacing: var(--tracking-tight); text-wrap: balance; }
.gah-h2--big{ font-size: clamp(30px, 4vw, 50px); line-height: 1.06; }
.gah-accent{ color: var(--accent); }
.gah-red{ color: var(--bud-red); }
.gah-lede{ margin:0; max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--fg2); text-wrap: pretty; }
.gah-grace{ color: var(--bud-footer-bar); font-style: italic; }
.gah-cue{ margin: 10px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.gah-sign{ margin: 8px 0 0; font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg3); }
.gah-punch{ margin:0; font-size: clamp(18px, 2vw, 24px); font-weight: var(--fw-bold); color: var(--fg1); }
.gah-close{
  margin:0; font-size: clamp(17px, 1.6vw, 21px); font-weight: var(--fw-semibold); line-height: 1.35;
  background: linear-gradient(90deg, var(--bud-white) 0%, var(--bud-electric-3) 55%, var(--bud-electric) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- CTAs (site .btn vocabulary, scoped copy for the blade) ---------- */
.gah-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }
.gah-stackc .gah-ctas{ justify-content: center; }

/* ---------- Frame 1 · problem ---------- */
.gah-hw{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gah-hw-tile{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 15px; }
.gah-hw-tile b{ display:block; font-size: 24px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--fg1); }
.gah-hw-tile b span.u{ font-size: 13px; font-weight: var(--fw-semibold); color: var(--fg2); }
.gah-qual{ font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); margin-top: 6px; }
.gah-arc{ display: flex; flex-direction: column; gap: 7px; }
.gah-arc div{ display: flex; gap: 12px; align-items: baseline; }
.gah-arc dt, .gah-arc .d{ min-width: 52px; font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--bud-footer-bar); }
.gah-arc .t{ font-size: 15.5px; color: var(--fg2); }
.gah-lead{ margin:0; font-size: 16px; font-weight: var(--fw-semibold); color: var(--fg1); }

.gah-viz{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 20px;
  box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 16px;
}
.gah-viz-lbl{ font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); }
.gah-slots{ display: flex; flex-direction: column; gap: 8px; }
.gah-slot{ display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px dashed rgba(183,133,244,.18); }
.gah-slot i{ width: 7px; height: 7px; background: #3B3550; }
.gah-slot span{ font-size: 13.5px; color: var(--fg3); }
.gah-slot--on{ background: rgba(140,51,239,.18); border: 1px solid rgba(140,51,239,.55); }
.gah-slot--on i{ background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.gah-slot--on span{ font-weight: var(--fw-semibold); color: var(--fg1); }
.gah-slot--on em{ margin-left: auto; font-style: normal; font-size: 11px; color: var(--bud-electric-3); }
.gah-rule{ height: 1px; background: var(--border); }
.gah-trace{ display: flex; align-items: flex-end; gap: 4px; height: 58px; }
.gah-trace i{ flex: 1; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent), rgba(140,51,239,.25)); }
.gah-trace i.mid{ background: linear-gradient(180deg, var(--bud-violet), rgba(109,40,217,.2)); }
.gah-trace i.low{ background: var(--bud-violet-deep); }
.gah-trace i.flat{ background: #3B3550; }
.gah-trace-x{ display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: var(--fg3); }

/* ---------- Frame 2 · layer stack ---------- */
.gah-stack{ display: flex; flex-direction: column; gap: 6px; }
.gah-layer{ display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--lc); }
.gah-layer .n{ font-size: 11px; font-weight: var(--fw-bold); color: var(--lc); min-width: 20px; }
.gah-layer .nm{ font-size: 14.5px; font-weight: var(--fw-semibold); color: var(--fg1); min-width: 96px; }
.gah-layer .ds{ font-size: 12px; color: var(--bud-footer-bar); }
.gah-l6{ --lc: #8C33EF; } .gah-l5{ --lc: #8C33EF; } .gah-l4{ --lc: #8C33EF; }
.gah-l3{ --lc: #8C33EF; } .gah-l2{ --lc: #8C33EF; } .gah-l1{ --lc: #8C33EF; }
.gah-points{ display: flex; flex-direction: column; gap: 11px; }
.gah-points div{ display: flex; gap: 11px; }
.gah-points .m{ color: var(--accent); font-weight: var(--fw-bold); }
.gah-points .t{ font-size: 15.5px; color: var(--fg2); }
.gah-points .t strong{ color: var(--fg1); font-weight: var(--fw-semibold); }

/* ---------- Frame 3 · felt experience ---------- */
.gah-wake{ display: inline-flex; align-items: center; gap: 14px; padding: 11px 18px;
  border-radius: var(--radius-pill); background: rgba(30,26,43,.8); border: 1px solid var(--border); }
.gah-wake .s{ font-size: 13px; color: var(--fg2); }
.gah-wake .a{ font-size: 13px; color: var(--fg3); }
.gah-wake .v{ font-size: 19px; font-weight: var(--fw-bold); color: var(--fg1); }
.gah-tag{ font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bud-yellow);
  border: 1px solid rgba(242,195,65,.4); border-radius: var(--radius-pill); padding: 3px 8px; }
.gah-tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; text-align: left; }
.gah-tile{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 20px; box-shadow: var(--shadow-3); }
.gah-tile b{ display:block; font-size: 26px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--fg1); }
.gah-tile .k{ font-size: 14px; font-weight: var(--fw-semibold); color: var(--bud-electric-3); margin-top: 4px; }
.gah-tile p{ margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--bud-footer-bar); }
.gah-tile p .il{ color: var(--fg3); }

/* ---------- Frame 4 · value + local-first router ---------- */
.gah-vals{ display: flex; flex-direction: column; gap: 10px; }
.gah-val{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 17px; }
.gah-val b{ display:block; font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg1); }
.gah-val p{ margin: 5px 0 0; font-size: 13.5px; color: var(--bud-footer-bar); }
.gah-router{ display: flex; align-items: center; gap: 14px; }
.gah-router-src{ flex: 0 0 auto; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,.03); }
.gah-router-src b{ display:block; font-size: 20px; font-weight: var(--fw-bold); color: var(--fg1); }
.gah-router-src span{ font-size: 11px; color: var(--bud-footer-bar); }
.gah-wire{ flex: 1; height: 2px; background: linear-gradient(90deg, var(--border), var(--accent)); }
.gah-router-node{ flex: 0 0 auto; padding: 14px 16px; border-radius: var(--radius-lg);
  background: rgba(140,51,239,.18); border: 1px solid rgba(140,51,239,.55); box-shadow: var(--shadow-glow); }
.gah-router-node b{ display:block; font-size: 15px; font-weight: var(--fw-bold); color: var(--fg1); }
.gah-router-node span{ font-size: 11.5px; color: var(--bud-electric-3); }
.gah-branch{ display: flex; align-items: center; gap: 14px; padding-left: 34%; }
.gah-elbow{ width: 36px; height: 26px; border-left: 1px dashed rgba(183,133,244,.35);
  border-bottom: 1px dashed rgba(183,133,244,.35); border-radius: 0 0 0 8px; }
.gah-router-alt{ flex: 1; padding: 11px 14px; border-radius: 10px;
  border: 1px dashed rgba(183,133,244,.28); background: rgba(255,255,255,.02); }
.gah-router-alt b{ display:block; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--fg2); }
.gah-router-alt span{ font-size: 11.5px; color: var(--fg3); }
.gah-viz p.note{ margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--bud-footer-bar); }

/* ---------- Frame 5 · ladder ---------- */
.gah-ladder{ width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.gah-rung{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); backdrop-filter: blur(8px); }
.gah-rung .a{ font-size: 14px; color: var(--bud-footer-bar); }
.gah-rung .m{ color: var(--fg3); }
.gah-rung .b{ font-size: 14px; color: var(--fg2); text-align: right; }
.gah-rung--now{ padding: 12px 16px; border: 1px solid rgba(140,51,239,.55);
  background: linear-gradient(rgba(140,51,239,.26), rgba(140,51,239,.26)), var(--surface); }
.gah-rung--now .a{ font-weight: var(--fw-semibold); color: var(--fg1); }
.gah-rung--now .m{ color: var(--bud-electric-3); }
.gah-rung--now .b{ font-weight: var(--fw-bold); color: var(--fg1); }

/* ---------- Chrome ---------- */
.gah-nav{ position: absolute; left: 0; right: 0; bottom: 22px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 16px; }
.gah-arrow{ width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: rgba(30,26,43,.85); backdrop-filter: blur(16px); color: var(--fg2);
  font-size: 14px; cursor: pointer; transition: background var(--duration-md), color var(--duration-md); }
.gah-arrow:hover{ background: rgba(140,51,239,.20); color: var(--fg1); }
.gah-dots{ display: flex; align-items: center; gap: 8px; }
.gah-dot{ width: 6px; height: 6px; border: 0; padding: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--border-strong); transition: width .25s var(--ease-out-expo), background .25s; }
.gah-dot[data-on="1"]{ width: 26px; background: var(--accent); }
.gah-count{ font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .14em;
  color: var(--fg3); font-variant-numeric: tabular-nums; min-width: 56px; }

/* ---------- No-JS resting state: frame 0 complete ---------- */
.gah-blade.no-js .gah-scene[data-gah-scene="0"]{ opacity: 1; pointer-events: auto; }
.gah-blade.no-js .gah-scene [data-fx]{ opacity: 1; animation: none; }
.gah-blade.no-js .gah-nav{ display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gah-scene, .gah-motif, .gah-dot, .gah-prog{ transition: none; }
  .gah-scene [data-fx]{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Short viewports ----------
   The blade floors at 520px while the frames were composed on a tall
   canvas, so on 1080p-and-below displays the vertical rhythm is
   compressed to keep every frame inside the blade (no clipping, no
   collision with the chrome). Above 1080px tall the spec rhythm runs. */
@media (min-width: 861px) and (max-height: 1080px){
  .gah-scene{ padding: 32px 46px 78px; }
  .gah-stackc{ gap: 11px; }
  .gah-col{ gap: 13px; }
  .gah-lede{ font-size: 16px; }
  .gah-h2--big{ font-size: clamp(26px, 3.2vw, 40px); }
  .gah-cue{ margin-top: 2px; }
  .gah-sign{ margin-top: 2px; }
  .gah-hw-tile{ padding: 12px 13px; }
  .gah-hw-tile b{ font-size: 22px; }
  .gah-arc{ gap: 5px; }
  .gah-viz{ padding: 17px; gap: 13px; }
  .gah-slots{ gap: 6px; }
  .gah-slot{ padding: 9px 13px; }
  .gah-points{ gap: 9px; }
  .gah-layer{ padding: 10px 15px; }
  .gah-tile{ padding: 16px; }
  .gah-tile b{ font-size: 23px; }
  .gah-val{ padding: 12px 15px; }
  .gah-vals{ gap: 8px; }
  .gah-ladder{ gap: 4px; }
  .gah-rung{ padding: 6px 16px; }
  .gah-rung--now{ padding: 8px 16px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1120px){
  .gah-split, .gah-split--os, .gah-split--value{ gap: 34px; }
  .gah-layer .ds{ display: none; }
}
@media (max-width: 860px){
  .gah-blade{ height: auto; min-height: min(760px, calc(100vh - var(--nav-h, 71px))); }
  .gah-scene{ position: relative; inset: auto; padding: 40px 22px 84px; display: none; }
  .gah-scene[data-on="1"]{ display: flex; }
  .gah-split, .gah-split--os, .gah-split--value{ grid-template-columns: 1fr; }
  [data-gah-narrow-hide]{ display: none !important; }
  .gah-hw{ grid-template-columns: 1fr; }
  .gah-tiles{ grid-template-columns: 1fr; }
  .gah-h1{ font-size: clamp(28px, 7vw, 38px); }
  .gah-h2, .gah-h2--big{ font-size: clamp(24px, 6.4vw, 32px); }
  .gah-wake{ flex-wrap: wrap; justify-content: center; }
}

/* ── copy scrim: the hero book-ends already pool dark behind their column
      (.gah-inner--hero::before); the story frames' copy column gets the
      same treatment so type holds over the motif. ── */
.gah-split > .gah-col{ position: relative; isolation: isolate; }
.gah-split > .gah-col::before{
  content: ""; position: absolute; inset: -26px -42px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 64% 66% at 40% 50%,
    rgba(10,7,18,.86) 0%, rgba(10,7,18,.58) 56%, rgba(10,7,18,0) 100%);
}