/* ==========================================================================
   § 00 · 首屏三段：获客 → 进化 → 助理（3.2：随滚动切换，见 css/hero-card.css）
   Every rotating piece keeps its three variants stacked in ONE grid cell — the accent line,
   the lead, the text inside each satellite — so the hero has the same geometry in every scene
   and the origin dock never moves. js/hero.js (createHeroScenes) only flips attributes:
     section[data-scene]        acquire | evolve | assist      → light, rings, accents
     section[data-hero-auto]    waiting | playing | paused | reduced
     [data-scene-item][data-state]  current | before (above) | after (below); [data-instant] = no transition
   Without JavaScript the first scene shows, complete; reduced motion swaps instantly.
   ========================================================================== */

.hero {
  --hero-dwell: 3600ms;
  --scene-accent: var(--blue);
  --scene-accent-soft: var(--blue-soft);
  --scene-wire: rgba(112, 170, 255, 0.55);
  --hero-turn: 0deg;
}
.hero[data-scene="evolve"] { --scene-accent: #1d9ae4; --scene-accent-soft: #93dcff; --scene-wire: rgba(104, 206, 246, 0.6); }
.hero[data-scene="assist"] { --scene-accent: #5468ff; --scene-accent-soft: #c3c8ff; --scene-wire: rgba(170, 176, 255, 0.58); }

/* ------------------------------------------------------------ type scale
   The longest line (最懂你的超级智能助理, 10 characters) sets the headline size, so all three
   scenes are set at one size on one line. 9.85cqi ≈ 10 × (1 − 0.035em tracking) + padding. */
.hero-copy { container-type: inline-size; }
.hero h1 { font-size: min(var(--fs-display-xl), 9.85cqi); margin-bottom: clamp(20px, 2.1vw, 30px); }

.hero-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ the accent line
   The line itself is the mask (.line { overflow: hidden } from the reveal system); the line's
   inner span (.hero-rotor) still rises with the headline entrance, so the first scene arrives
   together with the other two lines. */
.hero h1 .hero-rotor-line > .hero-rotor {
  display: inline-grid; vertical-align: top;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--blue-soft); padding-right: 0;
}
.rotor-item {
  --grad: linear-gradient(100deg, var(--blue-mist) 0%, var(--blue-soft) 38%, #6aa2ff 70%, var(--blue-soft) 100%);
  grid-area: 1 / 1; padding-right: 0.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rotor-item[data-scene-item="evolve"] { --grad: linear-gradient(100deg, #dff5ff 0%, #a3e0ff 38%, #5dbcff 70%, #a3e0ff 100%); }
.rotor-item[data-scene-item="assist"] { --grad: linear-gradient(100deg, #ecebff 0%, #c6cbff 38%, #93a0ff 70%, #c6cbff 100%); }
.rotor-item.is-split { background: none; }
.rotor-item .word { display: inline-block; white-space: nowrap; }
/* One continuous gradient across the word, although each character moves on its own. */
.rotor-item .ch {
  display: inline-block; padding-right: 0.08em; margin-right: -0.08em; /* room for ink past the tracked advance */
  background: var(--grad) calc(var(--i) * -0.965em) 0 / calc(var(--n) * 0.965em) 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* ------------------------------------------------------------ leads */
.hero-leads { display: grid; }
.hero-leads > .hero-lead { grid-area: 1 / 1; }

/* ------------------------------------------------------------ satellites */
.hero-signal .signal-stack { display: grid; }
.hero-signal .signal-text { grid-area: 1 / 1; }
.signal-1 { --sd: 0ms; }
.signal-2 { --sd: 120ms; }
.signal-3 { --sd: 240ms; }

/* ------------------------------------------------------------ variant states
   Before JavaScript takes over (or without it) only the first variant of each stack shows. */
.hero-rotor > .rotor-item:not(:first-child),
.hero-leads > .hero-lead:not(:first-child),
.signal-stack > .signal-text:not(:first-child) { visibility: hidden; opacity: 0; }

.hero[data-hero-ready] [data-scene-item] { visibility: hidden; opacity: 0; }
.hero[data-hero-ready] [data-scene-item][data-state="current"] { visibility: visible; opacity: 1; }
.hero[data-hero-ready] .rotor-item[data-state] { opacity: 1; } /* characters fade, not the item */

/* Accent line: characters rise through the line's mask one after another. */
.hero[data-hero-ready] .rotor-item { transition: visibility 0s linear 0.8s; }
.hero[data-hero-ready] .rotor-item[data-state="current"] { transition-delay: 0s; }
.rotor-item[data-state="current"] .ch {
  transform: none; opacity: 1;
  transition: transform 0.82s var(--ease-out) calc(0.12s + var(--i) * 24ms), opacity 0.6s ease calc(0.12s + var(--i) * 24ms);
}
.rotor-item[data-state="before"] .ch,
.rotor-item[data-state="after"] .ch {
  opacity: 0;
  transition: transform 0.52s cubic-bezier(0.55, 0, 0.5, 1) calc(var(--i) * 14ms), opacity 0.36s ease calc(0.1s + var(--i) * 14ms);
}
.rotor-item[data-state="before"] .ch { transform: translate3d(0, -108%, 0); }
.rotor-item[data-state="after"] .ch { transform: translate3d(0, 108%, 0); }

/* Lead: the old one fades first, the new one follows with a short rise. */
.hero[data-hero-ready] .hero-lead[data-state="current"] {
  transform: none;
  transition: opacity 0.75s ease 0.26s, transform 0.95s var(--ease-out) 0.26s, visibility 0s;
}
.hero[data-hero-ready] .hero-lead[data-state="before"],
.hero[data-hero-ready] .hero-lead[data-state="after"] {
  transition: opacity 0.38s ease, transform 0.5s cubic-bezier(0.55, 0, 0.5, 1), visibility 0s linear 0.5s;
}
.hero[data-hero-ready] .hero-lead[data-state="before"] { transform: translate3d(0, -0.22em, 0); }
.hero[data-hero-ready] .hero-lead[data-state="after"] { transform: translate3d(0, 0.4em, 0); }

/* Satellites: the same swap, one after another (01 → 02 → 03). */
.hero[data-hero-ready] .signal-text[data-state="current"] {
  transform: none;
  transition: opacity 0.55s ease calc(0.26s + var(--sd)), transform 0.75s var(--ease-out) calc(0.26s + var(--sd)), visibility 0s;
}
.hero[data-hero-ready] .signal-text[data-state="before"],
.hero[data-hero-ready] .signal-text[data-state="after"] {
  transition: opacity 0.3s ease var(--sd), transform 0.4s cubic-bezier(0.55, 0, 0.5, 1) var(--sd), visibility 0s linear calc(0.4s + var(--sd));
}
.hero[data-hero-ready] .signal-text[data-state="before"] { transform: translate3d(0, -6px, 0); }
.hero[data-hero-ready] .signal-text[data-state="after"] { transform: translate3d(0, 7px, 0); }

/* Start positions are placed without a transition. */
.hero [data-instant], .hero [data-instant] .ch { transition: none !important; }

/* A small ring answers each switch on the satellite's number; the name changes per scene so it replays. */
.hero[data-hero-auto] .hero-signal b { animation: signal-ping-a 1.1s var(--ease-out) calc(0.3s + var(--sd)) both; }
.hero[data-scene="evolve"] .hero-signal b { animation-name: signal-ping-b; }
.hero[data-scene="assist"] .hero-signal b { animation-name: signal-ping-c; }
@keyframes signal-ping-a { from { box-shadow: 0 0 0 0 rgba(108, 162, 255, 0.55); } to { box-shadow: 0 0 0 11px rgba(108, 162, 255, 0); } }
@keyframes signal-ping-b { from { box-shadow: 0 0 0 0 rgba(104, 206, 246, 0.55); } to { box-shadow: 0 0 0 11px rgba(104, 206, 246, 0); } }
@keyframes signal-ping-c { from { box-shadow: 0 0 0 0 rgba(170, 176, 255, 0.55); } to { box-shadow: 0 0 0 11px rgba(170, 176, 255, 0); } }

/* ------------------------------------------------------------ light per scene
   Restrained: the glow's colour temperature shifts (cool cyan for 进化, soft indigo for 助理) and
   a second, smaller halo fades in; the rings' wires and the figures' light take the scene's tint
   and the dashed dial turns a few degrees. All CSS transitions on elements the director moves
   only by transform, so its parallax keeps working. */
.hero-glow { transition: filter 1.8s var(--ease-in-out); }
.hero-glow::before, .hero-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  transition: opacity 1.8s var(--ease-in-out);
}
.hero-glow::before { background: radial-gradient(34% 34% at 60% 40%, rgba(70, 196, 255, 0.2), rgba(70, 196, 255, 0.06) 55%, transparent 100%); }
.hero-glow::after { background: radial-gradient(36% 32% at 44% 62%, rgba(176, 168, 255, 0.16), rgba(176, 168, 255, 0.05) 55%, transparent 100%); }
.hero[data-scene="evolve"] .hero-glow { filter: hue-rotate(-16deg) saturate(1.08); }
.hero[data-scene="assist"] .hero-glow { filter: hue-rotate(13deg) saturate(0.9); }
.hero[data-scene="evolve"] .hero-glow::before, .hero[data-scene="assist"] .hero-glow::after { opacity: 1; }

.hero-rings .wire { stroke: var(--scene-wire); transition: stroke 1.6s var(--ease-in-out); }
.hero-rings .rings-dial {
  transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--hero-turn));
  transition: transform 2.2s var(--ease-in-out);
}

/* ------------------------------------------------------------ reduced motion
   (system setting or the header toggle → body.motion-reduced; store.reduced stops the autoplay)
   No travel: whatever is chosen is shown at once, the pressed tab full. Without JavaScript nothing
   switches, so there is nothing to reduce. */
.motion-reduced .hero [data-scene-item], .motion-reduced .hero .ch { transform: none !important; }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 520px) {
  .hero h1 { margin-bottom: 16px; }
}

/* Entrance order (reveal.js): headline lines → tabs → lead → actions → origin card. */
.hero-leads[data-reveal] { --d: 300ms; }