/* Home — a single stage: the collage, the route line, and one composer. */
.home-page { background: var(--bg); }
.home-page .site-header { position: relative; }

.home-stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  min-height: min(820px, calc(100dvh - var(--header-h) - 20px));
  margin: 0 clamp(10px, 1.6vw, 24px); border-radius: clamp(18px, 2.2vw, 30px);
  color: #fff; background: var(--navy);
  box-shadow: var(--shadow-3);
}
.stage-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.stage-image {
  position: absolute; inset: -24px;
  background: url("./assets/member-collage.jpg") center / cover no-repeat;
  transform-origin: 50% 60%; will-change: transform;
}
.stage-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(5, 18, 38, .2) 0%, rgba(5, 18, 38, .62) 62%, rgba(4, 13, 28, .86) 100%),
    linear-gradient(180deg, rgba(6, 18, 38, .32) 0%, rgba(6, 18, 38, .08) 40%, rgba(5, 14, 30, .62) 100%);
  transition: background var(--d-scene) var(--ease-soft);
}
html[data-theme="dark"] .stage-shade {
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(3, 9, 20, .5) 0%, rgba(3, 9, 20, .82) 62%, rgba(2, 6, 14, .95) 100%),
    linear-gradient(180deg, rgba(3, 9, 20, .5), rgba(3, 9, 20, .2) 40%, rgba(2, 6, 14, .8));
}
html[data-theme="dark"] .stage-image { filter: saturate(.75) brightness(.8); }

/* The route line. Drawn by home.js; static (fully drawn) without motion. */
.stage-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route { fill: none; stroke-linecap: round; }
.route-main { stroke: url(#route-gradient); stroke-width: 2.2; }
.route-glow { stroke: #7ab3ff; stroke-width: 10; opacity: .45; }
.route-faint { stroke: rgba(200, 225, 255, .28); stroke-width: 1.2; }
.route-dashed { stroke-dasharray: 2 9; stroke: rgba(200, 225, 255, .4); }
.route-node .node-core { fill: #fff; }
.route-node .node-pulse { fill: none; stroke: rgba(170, 210, 255, .7); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
html.motion-ok .route-node .node-pulse { animation: node-pulse 2.8s var(--ease-out) infinite; }
html.motion-ok .route-node-destination .node-pulse { animation-delay: 1.4s; }
@keyframes node-pulse { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.route-plane { opacity: 0; }
html.motion-reduce .route-plane { opacity: 1; transform: translate(1380px, 196px); }

.stage-content {
  width: min(880px, calc(100% - 2 * var(--gutter)));
  padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(2rem, 5vh, 3rem); text-align: center;
}
.stage-eyebrow { justify-content: center; color: #cfe3ff; }
.stage-eyebrow .star-mark { color: #9cc7ff; }
html.motion-ok .stage-eyebrow .star-mark { animation: twinkle 4.8s var(--ease-in-out) infinite; }
.stage-title {
  font-size: var(--fs-display); font-weight: 600; line-height: .98; letter-spacing: -.045em;
  color: #fff; text-shadow: 0 10px 50px rgba(2, 10, 24, .25);
}
.stage-title .line { display: block; overflow: hidden; padding: .02em .06em .1em; margin: -.02em -.06em -.1em; }
.stage-title .line-inner { display: inline-block; will-change: transform; }
.stage-title .line + .line .line-inner {
  background: linear-gradient(100deg, #ffffff 18%, #cfe3ff 55%, #8fbfff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.motion-ok.is-booting .stage-title .line-inner { transform: translateY(110%); }
html[lang="zh-CN"] .stage-title {
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.12; letter-spacing: .02em; font-weight: 600;
}
html[lang="zh-CN"] .stage-title .line { white-space: nowrap; }
.stage-intro {
  max-width: 560px; margin: 1.5rem auto 2.2rem; color: rgba(232, 242, 255, .9);
  font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6;
}

/* Composer — tinted glass, never pure white. */
.prompt { width: min(760px, 100%); margin: 0 auto; text-align: left; }
.prompt-box {
  position: relative; isolation: isolate; view-transition-name: altier-prompt;
  padding: 1rem 1rem .75rem 1.25rem; border-radius: 26px;
  background: linear-gradient(135deg, rgba(214, 231, 252, .3), rgba(160, 196, 240, .16));
  border: 1px solid rgba(214, 234, 255, .42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 30px 80px -24px rgba(1, 10, 26, .65);
  backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  transition: background var(--d-ui) var(--ease-out), border-color var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out);
}
html[data-theme="dark"] .prompt-box { background: linear-gradient(135deg, rgba(36, 66, 108, .45), rgba(16, 34, 62, .4)); border-color: rgba(120, 170, 235, .26); }
.prompt-box:focus-within {
  background: linear-gradient(135deg, rgba(226, 238, 253, .38), rgba(176, 207, 245, .22));
  border-color: rgba(222, 238, 255, .7); transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 40px 100px -24px rgba(1, 10, 26, .75), 0 0 0 6px rgba(156, 199, 255, .14);
}
/* A slow comet of light travels the edge while you type. */
@property --ring-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.prompt-ring {
  position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ring-angle), transparent 0 70%, rgba(170, 210, 255, .95) 82%, #fff 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity var(--d-ui) var(--ease-out);
}
html.motion-ok .prompt-box:focus-within .prompt-ring { opacity: 1; animation: ring-spin 5.5s linear infinite; }
@keyframes ring-spin { to { --ring-angle: 360deg; } }
.prompt-box textarea {
  display: block; width: 100%; min-height: 64px; max-height: 220px; padding: .25rem 0; border: 0; outline: 0; resize: none;
  background: transparent; color: #fff; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; letter-spacing: -.005em;
  field-sizing: content;
}
.prompt-box textarea::placeholder { color: rgba(226, 238, 255, .72); opacity: 1; }
.prompt-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: .4rem; min-height: 48px; }
.prompt-detected { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 30px; align-content: flex-end; }
.detected-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .7rem 0 .55rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(220, 236, 255, .3); color: #fff;
  font-size: .8rem; font-weight: 560; white-space: nowrap;
}
.detected-chip small { color: rgba(214, 232, 255, .75); font-size: .72rem; font-weight: 600; }
.detected-chip b { font-weight: 650; letter-spacing: .02em; }
.detected-chip svg { width: 14px; height: 14px; color: #9cc7ff; }
.prompt-send {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: #fff; color: var(--navy); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); overflow: hidden;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-quick) ease;
}
.prompt-send svg { width: 22px; height: 22px; transition: transform var(--d-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .prompt-send:hover svg { transform: translateX(3px); } }
.prompt-send:active { transform: scale(.92); }
.prompt-send.is-leaving svg { transform: translateX(160%); transition-duration: 380ms; }
html[data-theme="dark"] .prompt-send { background: var(--accent); color: #fff; }

.prompt-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.suggestion {
  min-height: 36px; padding: 0 .95rem; border: 1px solid rgba(214, 234, 255, .3); border-radius: var(--r-pill);
  background: rgba(10, 30, 60, .28); color: rgba(236, 245, 255, .92); font-size: .84rem; font-weight: 560;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--d-quick) ease, border-color var(--d-quick) ease, transform var(--d-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .suggestion:hover { background: rgba(255, 255, 255, .18); border-color: rgba(230, 242, 255, .6); } }
.suggestion:active { transform: scale(.96); }

.stage-readout {
  display: flex; align-items: center; gap: .9rem; justify-self: end; margin: 0 clamp(18px, 2.4vw, 34px) clamp(16px, 2.2vw, 28px) 0;
  color: rgba(225, 238, 255, .82); font-size: .78rem; font-weight: 600;
}
.readout-codes { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-size: 1.05rem; letter-spacing: .14em; }
.readout-codes b { font-weight: 650; font-variant-numeric: tabular-nums; }
.readout-codes svg { width: 34px; color: #9cc7ff; }

/* Quick tiles below the stage. */
.home-quick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px);
  margin: clamp(14px, 1.8vw, 22px) clamp(10px, 1.6vw, 24px) 0;
}
.quick-tile {
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1);
  transition: border-color var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out), transform var(--d-press) var(--ease-out), background-color var(--d-ui) var(--ease-soft);
}
.quick-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.quick-icon svg { width: 22px; height: 22px; }
.quick-copy { display: grid; gap: .1rem; min-width: 0; }
.quick-copy strong { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.quick-copy small { color: var(--ink-3); font-size: .84rem; }
.quick-arrow { margin-left: auto; color: var(--ink-3); transition: transform var(--d-ui) var(--ease-out), color var(--d-quick) ease; }
.quick-arrow svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .quick-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
  .quick-tile:hover .quick-arrow { transform: translateX(4px); color: var(--accent-ink); }
}
.quick-tile:active { transform: scale(.985); }

/* Account placeholder pages (#orders, #profile…). */
.member-placeholder {
  width: min(760px, calc(100% - 2 * var(--gutter))); margin: clamp(2rem, 8vh, 5rem) auto; padding: clamp(2rem, 6vw, 4.5rem);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); text-align: center; box-shadow: var(--shadow-2);
}
.member-placeholder .eyebrow { justify-content: center; }
.placeholder-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.4rem; border-radius: 20px; background: var(--accent-soft); color: var(--accent); }
.placeholder-icon svg { width: 28px; height: 28px; }
html.motion-ok .placeholder-icon svg { animation: twinkle 4.8s var(--ease-in-out) infinite; }
.member-placeholder h1 { font-size: var(--fs-2xl); }
.member-placeholder p:not(.eyebrow) { max-width: 46ch; margin: 1rem auto 2rem; color: var(--ink-3); }
html.motion-ok .member-placeholder:not([hidden]) { animation: rise-in var(--d-step) var(--ease-out) both; }

.home-page .site-footer { margin-top: clamp(2rem, 6vh, 4rem); }

@media (max-width: 900px) {
  .home-quick { grid-template-columns: 1fr; }
  .stage-readout { justify-self: center; margin: 0 0 1.2rem; }
}
@media (max-width: 620px) {
  .home-stage { min-height: calc(100dvh - var(--header-h) - 10px); border-radius: 20px; }
  .stage-content { padding-top: 2.4rem; }
  .stage-title { font-size: clamp(2.7rem, 13vw, 3.6rem); }
  html[lang="zh-CN"] .stage-title { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .prompt-box { padding: .85rem .8rem .65rem 1rem; border-radius: 22px; }
  .prompt-suggestions { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 6px; scrollbar-width: none; }
  .prompt-suggestions::-webkit-scrollbar { display: none; }
  .suggestion { flex: 0 0 auto; }
}