/* Front-page hero: dark glass panel holding the 3D timeline (scene.js) or, without it, the static month chart.
   .hero--3d is set by scene.js once the 3D view is running. */
.hero { max-width: 70rem; margin: 0 0 1.5rem; --cy: #4ff0d0; --glass-line: rgba(127, 180, 255, .22); }
.hero-panel {
  position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1rem;
  background: radial-gradient(900px 520px at 70% -10%, #16233d 0, #07090d 65%);
  border: 1px solid var(--glass-line); border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero-hud h2 {
  margin: 0; font-size: 1.25rem; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(90deg, #fff, #7fb4ff 60%, var(--cy)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .5rem 0 0; color: var(--muted); font-size: .75rem; }
.hero-stats b { display: block; font-size: 1.2rem; color: #fff; }
/* Key: sphere = AI incident, octahedron = cyber incident, arc = correlation link. Shown with both views. */
.hero-key { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .6rem 0 0; font-size: .75rem; color: var(--fg); }
.hero-key > span { display: inline-flex; align-items: center; gap: .35rem; }
.hero-key svg { width: .8rem; height: .8rem; flex: none; }
.hero-key svg[viewBox="0 0 22 12"] { width: 1.4rem; }
.hero-key .muted { font-size: .7rem; }

/* Static fallback chart. */
.hero-static { margin: 0; }
.hero-static > svg { display: block; width: 100%; max-width: 32rem; height: auto; }
.hero-static text { fill: #c9d6ff; font-size: 12px; text-anchor: middle; }
.hero-static text.y, .hero-static text.n { fill: var(--muted); font-size: 10px; }
.hero-arcs path { stroke-width: 1.6; stroke-opacity: .55; stroke-linecap: round; }
.hero-arcs path:hover { stroke-opacity: 1; stroke-width: 2.6; }
.hero-static path.cyb { stroke: #fff; stroke-opacity: .5; stroke-width: .8; }
.hero-static figcaption { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; font-size: .8rem; }
.hero-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.hero-legend svg { display: inline-block; width: .6rem; height: .6rem; margin-right: .35rem; vertical-align: baseline; }

/* Text list: visible with the static chart; with the 3D view it stays in the page for screen readers and
   shows itself when a keyboard user tabs into it. */
.hero-list { margin-top: .75rem; max-height: 16rem; overflow-y: auto; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 8px; }
.hero-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-list h3 { font-size: .9rem; margin: 0 0 .4rem; }
.hero-list ol { margin: 0; padding-left: 1.4rem; font-size: .85rem; }
.hero-list li { margin: .3rem 0; }
.hero--3d .hero-list:not(:focus-within) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 3D view. The canvas clears to the panel's base color, so the glow above the HUD fades out before it. */
.hero--3d .hero-static { display: none; }
.hero--3d .hero-panel { background: #07090d; }
@media (min-width: 601px) {
  /* Wide screens: the HUD floats over the canvas, as glass. */
  .hero--3d .hero-panel { padding-top: 0; }
  /* The stage is the panel's top edge here; it clips its own corners since the panel no longer does. */
  .hero--3d .hero-stage { border-radius: 15px 15px 0 0; }
  .hero--3d .hero-hud { position: absolute; z-index: 1; left: 1rem; top: 1rem; max-width: 22rem; padding: .75rem 1rem; border: 1px solid var(--glass-line); border-radius: 14px; background: rgba(18, 24, 36, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) saturate(140%); }
  .hero--3d .hero-stage { height: clamp(24rem, 68vh, 40rem); }
}
.hero-stage { position: relative; height: clamp(18rem, 52vh, 34rem); margin: 0 -1rem; overflow: hidden; }
.hero-stage canvas { display: block; max-width: 100%; }
.hero-tip, .hero-controls button {
  background: rgba(18, 24, 36, .7); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) saturate(140%);
}
.hero-tip { position: absolute; z-index: 2; max-width: min(18rem, calc(100% - 1rem)); padding: .6rem .75rem; border-radius: 12px; font-size: .8rem; pointer-events: none; opacity: 0; transition: opacity .15s; }
.hero-tip.on { opacity: 1; }
.hero-tip .id { color: var(--cy); font-weight: 700; font-size: .7rem; letter-spacing: .08em; }
.hero-tip .id.cyber, .hero-tip .lt { color: #e65cff; }
.hero-tip .lt { font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; margin-top: .25rem; }
.hero-tip .h, .hero-tip .go { color: var(--muted); font-size: .75rem; margin-top: .25rem; }
.hero-hint { position: absolute; left: 1rem; bottom: .5rem; margin: 0; color: var(--muted); font-size: .75rem; pointer-events: none; }

.hero-controls { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.hero-controls button { font: inherit; font-size: .8rem; color: var(--fg); border-radius: 999px; padding: .3rem .75rem; min-height: 2rem; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.hero-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-controls button[aria-pressed="true"] { background: rgba(127, 180, 255, .22); border-color: var(--accent); box-shadow: 0 0 14px rgba(127, 180, 255, .35); }
.hero-seg { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; max-width: 100%; }
.hero-chip i { display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.hero-controls .hero-chip[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 14px var(--c); }
.hero-seg button[data-mode="cyber"][aria-pressed="true"] { background: rgba(230, 92, 255, .2); border-color: #e65cff; box-shadow: 0 0 14px rgba(230, 92, 255, .4); }
.hero-scrub { display: flex; align-items: center; gap: .6rem; width: min(32rem, 100%); }
.hero-scrub input { flex: 1; min-width: 0; accent-color: var(--cy); }
.hero-scrub output { min-width: 4.5rem; color: var(--cy); font-size: .8rem; }
.hero-controls .hero-play { width: 2.25rem; padding: 0; flex: none; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .75rem; }
.hero-count { margin: 0; color: var(--muted); font-size: .8rem; }

/* Touch screens: bigger targets. */
@media (pointer: coarse) {
  .hero-controls button { min-height: 2.75rem; }
  .hero-controls .hero-play { width: 2.75rem; }
  .hero-scrub input { height: 2.75rem; }
}

/* Phones: the 3D stage takes most of the screen height, so the helix is large enough to tap its nodes, but is
   capped so the incident list stays close. The panel grows with its contents, so the controls below the stage
   are never cut off on short or narrow screens. */
@media (max-width: 600px) {
  .hero-panel { padding: .75rem; gap: .5rem; }
  .hero-hud h2 { font-size: 1.05rem; }
  .hero-sub { font-size: .78rem; }
  .hero--3d .hero-stats, .hero-hint { display: none; }
  .hero-key { font-size: .7rem; gap: .2rem .75rem; }
  .hero-key .muted { display: none; }
  .hero-stage { height: clamp(20rem, 68vh, 34rem); height: clamp(20rem, 68svh, 34rem); margin: 0 -.75rem; }
  .hero-controls { gap: .4rem; }
  .hero-controls button { font-size: .75rem; padding: .25rem .6rem; }
  /* One scrollable row of chips instead of several wrapped rows. */
  .hero-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: .2rem; scrollbar-width: thin; }
  .hero-chip { flex: none; white-space: nowrap; }
  .hero-list { max-height: 13rem; }
}