/* Anime layer for the homepage: same scroll-story layout, but the stage
   renders a cel-shaded world with a real sky, so the copy sits on a scrim
   instead of on the page background. */

/* ---- story: a frameless stage bleeding to the left edge, copy on the right ---- */
.ember-story { padding-top: 40px; overflow: visible; }
.story-head { margin-bottom: 0; }
/* the stage spans the whole viewport and sits behind the copy; the copy column stays aligned with the container's right edge */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 560px); column-gap: 48px; align-items: start; width: 100vw; margin-left: calc(50% - 50vw); padding-right: max(24px, calc(50vw - 580px)); }
.story-stage { position: sticky; top: 0; height: 100vh; grid-column: 1 / -1; grid-row: 1; width: 100vw; margin-left: calc(-1 * max(24px, calc(50vw - 580px)) * 0); pointer-events: none; }
.story-panels { grid-column: 2; grid-row: 1; position: relative; z-index: 2; }
.vox-story { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.vox-story.on { opacity: 1; }
.vox-story canvas { display: block; }
/* soften the stage's top and bottom into the page so the sticky hand-off never shows a hard edge */
/* top/bottom into the page, and a scrim under the copy column */
.story-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, #18181b 0%, rgba(24, 24, 27, 0.55) 8%, rgba(24, 24, 27, 0) 22%, rgba(24, 24, 27, 0) 76%, rgba(24, 24, 27, 0.75) 92%, #18181b 100%),
  linear-gradient(90deg, rgba(24, 24, 27, 0) 34%, rgba(20, 18, 24, 0.72) 56%, rgba(18, 16, 22, 0.92) 74%); }
.story-rail { position: absolute; left: max(28px, calc(50vw - 580px)); bottom: 34px; display: flex; gap: 1.2rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(155, 155, 163, 0.55); pointer-events: none; }
.story-rail span { position: relative; padding-left: 12px; transition: color 0.3s; }
.story-rail span::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 1px; background: currentColor; }
.story-rail span.is-on { color: #ff7a18; }

.story-panels { display: flex; flex-direction: column; }
.story-panel { height: 100vh; display: flex; align-items: center; padding: 9vh 0 5vh; }
.story-panel-in { max-height: 88vh; overflow: visible; }
.story-panel-in { width: 100%; opacity: 0.1; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.story-panel.is-on .story-panel-in { opacity: 1; transform: none; }

.chap { display: flex; align-items: baseline; gap: 0.5rem; font-family: "JetBrains Mono", ui-monospace, monospace; margin-bottom: 12px; }
.chap .num { font-size: 2.1rem; font-weight: 700; color: #ff7a18; letter-spacing: -0.03em; line-height: 1; }
.chap .of { font-size: 0.75rem; color: #6b6b73; letter-spacing: 0.08em; }
.chap .tag { margin-left: 0.8rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ff7a18; border: 1px solid rgba(255, 122, 24, 0.45); padding: 0.28rem 0.55rem; border-radius: 6px; }
.chap .tag-green { color: #2ecc71; border-color: rgba(46, 204, 113, 0.45); }
.chap .tag-blue { color: #60a5fa; border-color: rgba(96, 165, 250, 0.45); }
.story-panel h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 12px; }
.story-panel p { color: #c7c2cb; line-height: 1.6; margin: 0 0 16px; max-width: 50ch; font-size: 0.98rem; }

.spec { margin: 0 0 16px; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.spec > div { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); align-items: baseline; }
.spec dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a93; }
.spec dd { margin: 0; font-size: 0.92rem; color: #f0edf2; }
.spec dd.hi { font-family: "JetBrains Mono", ui-monospace, monospace; color: #ff7a18; font-weight: 700; }
.spec.modes > div { grid-template-columns: 80px 1fr; }

/* live integrity feed — matches the wireframe: warm near-black card, filled chips */
.feed { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 24px; background: #0d0b09; padding: 18px 20px 20px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.feed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: #b8b2a8; }
.feed-head .live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #6fbf7a; margin-right: 12px; vertical-align: 0; }
.feed-head .region { text-transform: none; letter-spacing: 0.04em; color: #8d867c; font-size: 0.86rem; }
.feed-rows { display: flex; flex-direction: column; gap: 8px; }
.feed-row { display: grid; grid-template-columns: 48px auto 1fr; gap: 12px; align-items: center; padding: 11px 18px; border-radius: 14px; background: #171411; font-size: 0.88rem; color: #e6e0d6; white-space: nowrap; overflow: hidden; transition: opacity 0.5s; }
.feed-row .t { color: #7a746b; }
.feed-row .msg { overflow: hidden; text-overflow: ellipsis; }
.feed-row.enter { animation: feedIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-10px); } }
.feed-row:nth-child(3) { opacity: 0.75; } .feed-row:nth-child(4) { opacity: 0.42; }
.badge { display: inline-block; padding: 5px 11px; border-radius: 9px; font-size: 0.8rem; letter-spacing: 0.08em; }
.badge.ok { color: #86c996; background: #1e2b20; }
.badge.scan { color: #b3aca1; background: #2a2723; }
.badge.watch { color: #e2a45c; background: #3a2613; }
.badge.block { color: #e0755a; background: #3a1c14; }
.feed-bar { margin-top: 14px; height: 7px; border-radius: 4px; background: #24201c; overflow: hidden; }
.feed-bar i { display: block; height: 100%; width: 0; background: #e8792e; border-radius: 4px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.14em; padding: 0.4rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; color: #e4e4e7; }
.chips .more { color: #8a8a93; border-style: dashed; }

.story-panel .topic-mastery { margin: 0 0 22px; }
.story-panel .bento-link { margin-top: 4px; }

.story-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 72px; }

/* voxel tier badges above each text badge */
.tier-vox { width: 52px; height: 52px; display: block; margin-bottom: 6px; }

/* scroll reveal (applied only once JS runs) */
.vr { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vr.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .story { grid-template-columns: 1fr; column-gap: 0; }
  .story { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 20px; }
  .story-stage { grid-column: 1; grid-row: auto; width: auto; position: sticky; top: 64px; height: 48vh; z-index: 1; }
  .story-panels { grid-column: 1; grid-row: auto; }
  .story-rail { display: none; }
  .story-panels { padding-top: 12px; padding-bottom: 6vh; }
  .story-panel { min-height: 70vh; padding: 6vh 0; }
  .story-stats { grid-template-columns: 1fr; margin-top: 40px; }
  .spec > div { grid-template-columns: 104px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vr { opacity: 1; transform: none; transition: none; }
  .story-panel-in { opacity: 1; transform: none; }
}

/* ---- pricing: sidebar + detail with a voxel figure ---- */
.plans-section { padding-top: 40px; }
.plans-head { margin-bottom: 28px; }
.plans { text-align: left; }
.plan-list, .plan-item { text-align: left; }
.plans { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: stretch; }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-item { appearance: none; text-align: left; background: #1f1f23; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 14px 16px; color: #f6f6f6; cursor: pointer; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tier price" "name price" "blurb blurb"; column-gap: 12px; transition: border-color 0.15s, background 0.15s, transform 0.15s; font-family: "Inter", sans-serif; }
.plan-item:hover { border-color: rgba(255, 122, 24, 0.5); }
.plan-item.active { border-color: #ff7a18; background: #232327; transform: translateX(6px); }
.plan-item:focus-visible { outline: 2px solid #ff7a18; outline-offset: 2px; }
.pi-tier { grid-area: tier; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8a8a93; }
.plan-item.active .pi-tier { color: #ff7a18; }
.pi-name { grid-area: name; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }
.pi-blurb { grid-area: blurb; font-size: 0.8rem; color: #a1a1aa; margin-top: 4px; line-height: 1.45; }
.pi-price { grid-area: price; align-self: start; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.86rem; font-weight: 700; color: #f6f6f6; white-space: nowrap; }

.plan-detail { position: relative; background: #1f1f23; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; min-height: 520px; }
.plan-scene { position: relative; min-height: 320px; opacity: 0; transition: opacity 0.8s; }
.plan-scene.on { opacity: 1; }
.plan-scene canvas { display: block; }
.plan-body { padding: 34px 34px 28px; display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, 0.07); text-align: left; }
.plan-body.swap { animation: planSwap 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes planSwap { from { opacity: 0; transform: translateY(10px); } }
.plan-tier { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ff7a18; }
.plan-name { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 8px; }
.plan-detail .plan-price { display: flex; align-items: baseline; gap: 3px; margin: 0 0 12px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.plan-detail .plan-price .cur { font-size: 1rem; color: #9b9ba3; }
.plan-detail .plan-price .amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #f6f6f6; }
.plan-detail .plan-price .amount.custom { font-size: 1.35rem; }
.plan-detail .plan-price .per { font-size: 0.72rem; color: #9b9ba3; margin-left: 4px; }
.plan-detail .plan-desc { color: #a1a1aa; line-height: 1.6; font-size: 0.95rem; margin: 0 0 20px; }
.plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.plan-k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8a8a93; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 10px; }
.plan-unique, .plan-incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; color: #e4e4e7; }
.plan-unique li::before { content: "—"; color: #ff7a18; margin-right: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.plan-incl li { color: #a1a1aa; }
.plan-incl li::before { content: "—"; color: #5b5b63; margin-right: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.plan-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-cta { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: #26262b; color: #f6f6f6; font: 700 0.9rem "Inter", sans-serif; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.plan-cta:hover { border-color: #ff7a18; }
.plan-cta.primary { background: #ff7a18; border-color: #ff7a18; color: #141414; }
.plan-cta.primary:hover { background: #c85a0e; border-color: #c85a0e; }
.plan-nav { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; color: #8a8a93; }
.plan-nav button { appearance: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: #f6f6f6; cursor: pointer; font-family: inherit; }
.plan-nav button:hover { border-color: #ff7a18; }
.plans-note { margin-top: 18px; }

@media (max-width: 960px) {
  .plans { grid-template-columns: 1fr; }
  .plan-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .plan-item { min-width: 220px; }
  .plan-item.active { transform: none; }
  .plan-detail { grid-template-columns: 1fr; min-height: 0; }
  .plan-scene { min-height: 260px; }
  .plan-body { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 24px 20px; }
  .plan-cols { grid-template-columns: 1fr; }
}


/* the anime plan figure gets a warm vignette instead of a flat panel */
.plan-scene { background: radial-gradient(120% 90% at 35% 25%, rgba(255, 160, 90, 0.14), rgba(24, 24, 27, 0) 60%); }

/* ---- hero cast: cel-shaded figures staged around the quiz card ---- */
.hero { position: relative; }
/* extends above the hero so the figure on the card's top edge isn't clipped */
#heroCast { position: absolute; top: -170px; left: 0; right: -240px; bottom: -140px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
#heroCast.on { opacity: 1; }
#heroCast canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { #heroCast { display: none; } }