/* ===========================================================================
   hero.css — Reactor Boot Sequence hero. Loads after app.css; overrides win.
   Choreographs a machine power-on: title lines ignite, the graph well surges
   and a teal scanline sweeps once, corner brackets pop in, tag flips
   BOOTING -> LIVE. Transform / opacity / filter only; reduced-motion safe.
   =========================================================================== */

.hero--boot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(94vh, 980px);
  padding: clamp(40px, 8vh, 104px) 0 var(--space-8);
}

.hero__grid {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ---- Status row ---- */
.hero__status {
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  flex-wrap: wrap;
  animation: hero-rise 0.7s var(--ease-out-quart) 0.05s backwards;
}
.hero__boot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hero__boot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--type-chemical);
  box-shadow: 0 0 10px var(--type-chemical);
  animation: hero-blink 1.8s ease-in-out 1.7s infinite;
}

/* ---- Title ignition ---- */
.hero--boot .hero__title {
  position: relative;
  margin: var(--space-5) 0 0;
  font-size: clamp(3rem, 8.2vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero--boot .hero__line {
  display: block;
  animation: line-ignite 0.85s var(--ease-out-quint) backwards;
  animation-delay: calc(0.18s + var(--i) * 0.15s);
}
.hero--boot .hero__line:nth-child(2) {
  color: var(--accent);
  animation:
    line-ignite 0.85s var(--ease-out-quint) backwards,
    teal-flash 1.2s var(--ease-out-quart) backwards;
  animation-delay: calc(0.18s + 1 * 0.15s);
}
.hero--boot .hero__line:nth-child(3) {
  -webkit-text-stroke: 1.5px var(--fg-mute);
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__title-sweep {
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, oklch(0.82 0.15 195 / 0.14), transparent);
  transform: translateX(-140%);
  animation: title-sweep 1.1s var(--ease-out-quint) 0.55s 1 forwards;
}

/* ---- Copy reveals ---- */
.hero--boot .hero__blurb {
  max-width: 46ch;
  animation: hero-rise 0.7s var(--ease-out-quart) 0.62s backwards;
}
.hero--boot .hero__actions {
  animation: hero-rise 0.7s var(--ease-out-quart) 0.74s backwards;
}
.hero--boot .hero__actions .btn-primary {
  animation: primary-pulse 2.2s var(--ease-out-quart) 1.5s 1;
}
.hero--boot .hero__stats li {
  animation: hero-rise 0.6s var(--ease-out-quart) backwards;
  animation-delay: calc(0.82s + var(--i) * 0.08s);
}

/* ---- Graph well + power-on overlays ---- */
.hero--boot .hero__graph {
  position: static;
  aspect-ratio: auto;
  min-height: 0;
}
.hero__well {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.84;
  min-height: 360px;
}
.hero__well .graph-canvas--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__surge {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(42% 42% at 50% 52%, oklch(0.82 0.15 195 / 0.34), transparent 70%);
  opacity: 0;
  animation: surge 1.5s var(--ease-out-quint) 0.1s 1 forwards;
}
.hero__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  border-radius: var(--r-lg);
}
.hero__scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, oklch(0.82 0.15 195 / 0.12) 60%, oklch(0.82 0.15 195 / 0.42) 93%, transparent);
  transform: translateY(-120%);
  animation: scan 1.7s var(--ease-out-quint) 0.18s 1 forwards;
}
.hero__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero--boot .corner {
  width: 18px;
  height: 18px;
  opacity: 0.75;
  animation: corner-pop 0.5s var(--ease-out-quart) backwards;
}
.hero--boot .corner.tl { animation-delay: 0.5s; }
.hero--boot .corner.tr { animation-delay: 0.6s; }
.hero--boot .corner.bl { animation-delay: 0.7s; }
.hero--boot .corner.br { animation-delay: 0.8s; }

.hero__tag {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-grid;
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: oklch(0.145 0.02 250 / 0.6);
  padding: 4px 12px;
  border-radius: 20px;
}
.hero__tag-boot,
.hero__tag-live {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.hero__tag-boot {
  color: var(--accent-2);
  animation: boot-out 0.01s linear 1.55s forwards;
}
.hero__tag-live {
  color: var(--accent);
  opacity: 0;
  animation: live-in 0.45s var(--ease-out-quart) 1.55s forwards;
}
.hero__well .legend { z-index: 5; }

/* ---- Keyframes ---- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes line-ignite {
  0%   { opacity: 0; transform: translateY(24px) scaleY(0.9); filter: blur(7px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes teal-flash {
  0%   { text-shadow: 0 0 0 transparent; }
  45%  { text-shadow: 0 0 36px oklch(0.82 0.15 195 / 0.85); }
  100% { text-shadow: 0 0 0 transparent; }
}
@keyframes title-sweep {
  to { transform: translateX(420%); }
}
@keyframes primary-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.82 0.15 195 / 0.5); }
  60%  { box-shadow: 0 0 0 14px oklch(0.82 0.15 195 / 0); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes surge {
  0%   { opacity: 0; transform: scale(0.5); }
  22%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.28); }
}
@keyframes scan {
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(260%); }
}
@keyframes corner-pop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 0.75; transform: none; }
}
@keyframes boot-out {
  to { opacity: 0; visibility: hidden; }
}
@keyframes live-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__graph { order: -1; }
  .hero__well { min-height: 320px; }
}
@media (max-width: 620px) {
  .hero--boot { min-height: auto; padding-top: var(--space-6); }
  .hero__well { min-height: 280px; }
}

/* ---- Reduced motion: snap to final, no power-on theatrics ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__surge,
  .hero__scan,
  .hero__title-sweep { display: none; }
  .hero__boot-dot { animation: none; }
  .hero__tag-boot { display: none; }
  .hero__tag-live { opacity: 1; }
}