/* ============================================================
   AIfred page hero: "The still centre", an interactive point cloud
   (js/aifred-cloud.js). One pinned scene: standby, three beats of
   copy, then the headline. A small mono HUD counts along.
   Without JS/WebGL (.is-js missing): poster + headline, nothing hidden.
   ============================================================ */
.st-cloud { position: relative; background: #05101d; border-bottom: 1px solid var(--line); }
.st-cloud__stage { position: relative; height: calc(100svh - var(--hdr, 72px)); min-height: 560px; overflow: hidden; }
.st-cloud__poster, .st-cloud__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-cloud__poster { object-fit: cover; transition: opacity 0.8s ease; }
.st-cloud__canvas { display: block; cursor: default; }
.st-cloud.is-js .st-cloud__poster { opacity: 0; }
.st-cloud__grade { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.8s ease;
  background: linear-gradient(90deg, rgba(5,16,29,0.78) 0%, rgba(5,16,29,0.35) 32%, rgba(5,16,29,0) 55%),
              linear-gradient(0deg, rgba(5,16,29,0.55) 0%, rgba(5,16,29,0) 30%); }

/* ---------- HUD: status top left, live counters bottom right ---------- */
.st-cloud__hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--text-muted); }
.st-cloud__hud-tl { position: absolute; left: var(--container-pad); top: var(--sp-5); display: flex; gap: var(--sp-2); align-items: baseline; }
.st-cloud__hud-tl .aifred { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0; color: #f9fafb; }
.st-cloud__status { color: var(--teal-500); }
.st-cloud__hud-br { position: absolute; right: var(--container-pad); bottom: var(--sp-6); margin: 0; display: grid; gap: 6px; min-width: 210px; }
.st-cloud__hud-br div { display: flex; justify-content: space-between; gap: var(--sp-5); padding-top: 6px; border-top: 1px solid rgba(249,250,251,0.12); }
.st-cloud__hud-br dt { text-transform: uppercase; }
.st-cloud__hud-br dd { margin: 0; color: #f9fafb; font-variant-numeric: tabular-nums; }
.st-cloud__hud-br div:last-child dd { color: var(--gold-500); }
.st-cloud:not(.is-js) .st-cloud__hud { display: none; }

/* ---------- standby: only the void and one word ---------- */
.st-cloud__intro { position: absolute; left: 50%; bottom: var(--sp-7); z-index: 1; transform: translateX(-50%); display: none;
  flex-direction: column; align-items: center; gap: var(--sp-3); pointer-events: none; transition: opacity 0.5s ease; }
.st-cloud.is-js .st-cloud__intro { display: flex; opacity: 0; }
.st-cloud.is-js.is-idle .st-cloud__intro { opacity: 1; }
.st-cloud__intro-txt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #f9fafb; }
.st-cloud__intro-line { order: 2; width: 1px; height: 56px; background: linear-gradient(180deg, rgba(42,191,176,0), var(--teal-500)); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  .st-cloud__intro-line { animation: st-cloud-drop 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
}
@keyframes st-cloud-drop { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- the three beats ---------- */
.st-cloud__copy { position: absolute; left: 0; right: 0; bottom: var(--sp-8); z-index: 1; pointer-events: none; display: none; transition: opacity 0.5s ease; }
.st-cloud.is-js .st-cloud__copy { display: block; }
.st-cloud.is-idle .st-cloud__copy, .st-cloud.is-final .st-cloud__copy { opacity: 0; }
.st-cloud__label { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.06em; color: var(--text-muted); }
.st-cloud__n b { font-weight: 400; color: var(--teal-500); }
.st-cloud__beats { position: relative; min-height: 3.4em; font-size: clamp(30px, 3.8vw, 54px); }
.st-cloud__beat { position: absolute; left: 0; bottom: 0; max-width: 16ch; margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 1em; line-height: 1.08; letter-spacing: -0.03em;
  color: #f9fafb; opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.st-cloud__beat.is-on { opacity: 1; transform: none; }
.st-cloud__beat em { font-style: normal; color: var(--gold-500); }

/* ---------- the headline: shown at once without JS, arrives last with it ---------- */
.st-cloud__hero { position: absolute; left: 0; right: 0; bottom: var(--sp-8); z-index: 2; display: flex; flex-direction: column; gap: var(--sp-5); }
.st-cloud__hero h1 { max-width: 12ch; font-size: clamp(44px, 6vw, var(--fs-display)); line-height: var(--lh-display); letter-spacing: -0.03em; color: #f9fafb; }
.st-cloud__lead { max-width: 36em; color: rgba(249,250,251,0.82); font-size: var(--fs-body); line-height: var(--lh-body); }
.st-cloud__ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }
.st-cloud.is-js .st-cloud__hero { opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.7s; }
.st-cloud.is-js.is-final .st-cloud__hero { opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
.st-cloud.is-final .st-cloud__grade, .st-cloud:not(.is-js) .st-cloud__grade {
  background: linear-gradient(90deg, rgba(5,16,29,0.9) 0%, rgba(5,16,29,0.6) 38%, rgba(5,16,29,0.1) 70%),
              linear-gradient(0deg, rgba(5,16,29,0.7) 0%, rgba(5,16,29,0) 40%); }

@media (max-width: 800px) {
  .st-cloud__hud-br { right: auto; left: var(--container-pad); top: calc(var(--sp-5) + 26px); bottom: auto; min-width: 0; grid-auto-flow: column; gap: var(--sp-4); }
  .st-cloud__hud-br div { flex-direction: column; gap: 2px; border-top: 0; padding-top: 0; }
  .st-cloud__hud-br div:first-child { display: none; }
  .st-cloud__copy, .st-cloud__hero { bottom: var(--sp-6); }
  .st-cloud__grade { background: linear-gradient(0deg, rgba(5,16,29,0.9) 0%, rgba(5,16,29,0.25) 50%, rgba(5,16,29,0) 72%); }
  .st-cloud.is-final .st-cloud__grade, .st-cloud:not(.is-js) .st-cloud__grade { background: linear-gradient(0deg, rgba(5,16,29,0.94) 0%, rgba(5,16,29,0.55) 60%, rgba(5,16,29,0.2) 100%); }
  .st-cloud__lead { font-size: var(--fs-small); line-height: var(--lh-small); }
}
@media (prefers-reduced-motion: reduce) {
  .st-cloud__beat, .st-cloud__hero, .st-cloud__intro, .st-cloud__copy { transition: none !important; }
}