/* =============================================================================
   AEOS page — per-page styles.
   Dark theme throughout: every section uses --c-bg-dark / --c-bg-dark-2.
   Foundation classes (section, hero, card, stat, etc.) come from style.css.
   This file: layout composition, AEOS-specific components, motion.
   ============================================================================= */

/* =============================================================================
   1. HERO
   ============================================================================= */

/* Ensure all headings in the dark hero render in --c-on-dark.
   .hero--dark sets color on the container but the foundation heading rule
   (h1,h2,h3,h4 { color: var(--c-ink) }) has equal specificity and wins on
   some browsers; override explicitly here. */
.aeos-hero h1,
.aeos-hero h2,
.aeos-hero h3 {
  color: var(--c-on-dark);
}

/* The AEOS hero runs the dark variant; --nav-h offset is handled by .hero--dark
   in style.css. We extend it with a subtle radial glow. */
.aeos-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(46, 163, 242, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--c-bg-dark) 0%, var(--c-bg-dark-2) 100%);
}

/* Hero media — video frame */
.aeos-hero__media {
  position: relative;
  margin-top: var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Reserve a 16/9 frame so there is zero CLS while the video loads */
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Hero video — fills the reserved 16/9 frame */
.aeos-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* Mute/unmute toggle — overlaid bottom-right of the hero video.
   Wired by js/aeos-hero-video.js. */
.aeos-hero__sound {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}

.aeos-hero__sound:hover { background: rgba(0, 0, 0, 0.78); }
.aeos-hero__sound:active { transform: scale(0.94); }
.aeos-hero__sound:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.aeos-hero__sound svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

/* Show the muted icon by default; swap to the sound icon once unmuted. */
.aeos-hero__sound .icon-sound { display: none; }
.aeos-hero__sound.is-unmuted .icon-muted { display: none; }
.aeos-hero__sound.is-unmuted .icon-sound { display: block; }

/* =============================================================================
   2. WHAT AEOS IS — schematic + differentiator
   ============================================================================= */

.aeos-schematic-wrap {
  margin-top: var(--sp-6);
}

/* The schematic SVG inherits .schematic base rules from style.css.
   Wire and node colors already reference CSS vars; just ensure the
   light wire colour works on dark. */
.aeos-schematic .wire { stroke: rgba(245, 245, 247, 0.30); }
.aeos-schematic .label { fill: var(--c-on-dark-2); }

/* Deterministic differentiator callout block */
.aeos-differentiator {
  margin-top: var(--sp-6);
  border-left: 2px solid var(--c-accent);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(46, 163, 242, 0.06);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.aeos-differentiator__inner .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.aeos-differentiator__inner h3 {
  font-size: var(--t-h3);
  color: var(--c-on-dark);
  margin-bottom: var(--sp-2);
}

.aeos-differentiator__inner p {
  max-width: var(--w-text);
  color: var(--c-on-dark);
}

/* =============================================================================
   3. HOW IT WORKS — gesture-stepped pinned sequence
   Engine: js/step-scroller.js · wiring: js/aeos-how.js
   One scroll gesture advances exactly one step; the engine owns the scroll,
   CSS transitions own the visuals.
   ============================================================================= */

/* The section keeps its intro head, then the stepper runs flush below it. */
#how-it-works {
  padding-block-start: var(--section-pad);
  padding-block-end: 0;
}

/* --- Stepper scaffold --- */
.aeos-stepper { position: relative; }

.aeos-stepper__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The runway: one spacer block per step. The negative margin pulls the
   runway up over the sticky stage's own flow box (one viewport tall), so
   the first step begins exactly where the stage pins — no dead scroll zone. */
.aeos-stepper__track {
  margin-top: calc(-100svh + var(--nav-h));
  pointer-events: none;
}
.aeos-stepper__block { height: 100svh; }

/* Two-column layout inside the pinned stage */
.aeos-stepper__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}

/* --- Visual layers (left column) ---
   Four layers stack in the same grid cell; only is-active is opaque. Three of
   the four are animated MacBook scenes inside <iframe>s (lazy-loaded by
   js/aeos-how.js on first activation). The fourth (step 2) reuses the
   homepage AEOS hero render. Slot is sized to the MacBook's 1320×810 aspect
   so the iframe content sits edge-to-edge without letterboxing. */
.aeos-stepper__visuals {
  display: grid;
  width: 100%;
  max-width: 600px;
}

.aeos-stepper__visual {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.55s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.aeos-stepper__visual.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.aeos-stepper__visual.is-passed {
  opacity: 0;
  transform: translateY(-12px);
}

/* MacBook iframe slot — 1320:810 (the upstream MacBook frame's outer aspect)
   so the autoscaling demo.html sits flush with no visible letterbox. */
.aeos-stepper__visual--macbook {
  width: 100%;
}
.aeos-stepper__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 1320 / 810;
  border: 0;
  background: transparent;
  color-scheme: light; /* iframe paints its own light surfaces; opt out of dark-mode UA tint */
}

/* Still image (step 2) — same aspect treatment for visual continuity. */
.aeos-stepper__visual--still {
  width: 100%;
}
.aeos-stepper__visual--still picture,
.aeos-stepper__visual--still img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Card layers (right column) ---
   Four cards stack in one grid cell; only is-active is opaque. */
.aeos-stepper__cards { display: grid; }

.aeos-stepper__card {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 460px;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(46, 163, 242, 0.05);
  border: 1px solid var(--c-line-dark);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(44px) scale(0.97);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.aeos-stepper__card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.aeos-stepper__card.is-passed {
  opacity: 0;
  transform: translateY(-44px) scale(0.97);
}

.aeos-step-num {
  display: block;
  color: var(--c-accent);
  margin-bottom: 0.25rem;
}

.aeos-stepper__card h3 {
  font-size: var(--t-h3);
  color: var(--c-on-dark);
}

.aeos-stepper__card p {
  color: var(--c-on-dark);
  max-width: 40ch;
}

/* --- Static fallback: reduced motion AND no-JS ---
   step-scroller.js is inert under prefers-reduced-motion, so the CSS must
   stand in: unpin the stage, hide the scroll runway, and unstack both the
   visual and card layers so every step is visible and legible. */
@media (prefers-reduced-motion: reduce) {
  .aeos-stepper__stage {
    position: static;
    height: auto;
    overflow: visible;
  }
  .aeos-stepper__track { display: none; }
  .aeos-stepper__layout {
    align-items: start;
    padding-block: var(--sp-6);
  }
  .aeos-stepper__visuals {
    gap: var(--sp-4);
    display: flex;
    flex-direction: column;
  }
  .aeos-stepper__visual {
    grid-area: auto;
    opacity: 1 !important;
    transform: none !important;
  }
  .aeos-stepper__cards {
    gap: var(--sp-4);
    display: flex;
    flex-direction: column;
  }
  .aeos-stepper__card {
    grid-area: auto;
    opacity: 1 !important;
    transform: none !important;
    max-width: 100%;
  }
}

.no-js .aeos-stepper__stage {
  position: static;
  height: auto;
  overflow: visible;
}
.no-js .aeos-stepper__track { display: none; }
.no-js .aeos-stepper__layout { align-items: start; padding-block: var(--sp-6); }
.no-js .aeos-stepper__visuals {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.no-js .aeos-stepper__visual {
  grid-area: auto;
  opacity: 1;
  transform: none;
}
.no-js .aeos-stepper__cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.no-js .aeos-stepper__card {
  grid-area: auto;
  opacity: 1;
  transform: none;
  max-width: 100%;
}

/* =============================================================================
   4. CROSS-LINK — Start with Standard
   ============================================================================= */

/* Override foundation .placeholder (light stripes) with dark variant for this page */
.page-aeos .placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 14px,
      rgba(255, 255, 255, 0.06) 14px,
      rgba(255, 255, 255, 0.06) 28px
    );
  color: var(--c-on-dark-2);
}

.aeos-cross-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-xl);
}

.aeos-cross-link__content .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.aeos-cross-link__content h2 {
  font-size: var(--t-h2);
  color: var(--c-on-dark);
  margin-bottom: var(--sp-2);
}

.aeos-cross-link__content p {
  max-width: var(--w-text);
  color: var(--c-on-dark);
  margin-bottom: var(--sp-4);
}

/* Visual: link wrapping the Start-with-Standard fan render. Sized to match
   the home-page SWS tile's treatment. Hover lift mirrors the eyebrow/button
   affordance so the image reads as clickable. */
.aeos-cross-link__visual {
  display: block;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;  /* center inside the grid cell when the layout
                            collapses to a single column on mobile */
  line-height: 0;
  transition: transform 0.3s ease;
}
.aeos-cross-link__visual:hover,
.aeos-cross-link__visual:focus-visible {
  transform: translateY(-2px);
}
.aeos-cross-link__visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================================
   5. WAITLIST / FINAL CTA
   ============================================================================= */

/* The final CTA section uses .cta-band from style.css. We add the microcopy
   and ensure the band is dark. */
.aeos-microcopy {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
  margin-top: var(--sp-2);
}

/* Override .cta-band p default (which uses --c-on-dark-2 in style.css) */
#waitlist .cta-band__inner > p:not(.aeos-microcopy) {
  color: var(--c-on-dark);
  max-width: 48ch;
  margin-inline: auto;
}

/* Waitlist form — inline email + submit on one row. Submits to HubSpot Forms
   API via js/forms.js; the `cta-form__row` / `cta-form__submit` /
   `cta-form__status` class hooks are what forms.js queries (it hides the row
   + button on success, then surfaces the status message). Collapses to
   stacked at narrow widths so the email field never gets crushed below an
   un-tappable size. */
.aeos-waitlist-form {
  width: 100%;
  max-width: 480px;
  margin: var(--sp-2) auto 0;
}
.aeos-waitlist-form__row {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}
.aeos-waitlist-form__email {
  flex: 1;
  min-width: 0;
  padding: 0 1.1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--c-on-dark);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-md);
  -webkit-appearance: none;
  appearance: none;
}
.aeos-waitlist-form__email::placeholder { color: var(--c-on-dark-2); }
.aeos-waitlist-form__email:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(46, 163, 242, 0.22);
  background: rgba(255, 255, 255, 0.09);
}
.aeos-waitlist-form__submit {
  flex-shrink: 0;
  white-space: nowrap;
}
.aeos-waitlist-form__status {
  margin: var(--sp-3) 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  color: var(--c-on-dark);
}
.aeos-waitlist-form__status.cta-form__status--ok {
  color: var(--c-accent);
  font-weight: 600;
}
.aeos-waitlist-form__status.cta-form__status--error { color: #f87171; }
.aeos-waitlist-form__status a { color: inherit; text-decoration: underline; }

@media (max-width: 520px) {
  .aeos-waitlist-form__row { flex-direction: column; }
  .aeos-waitlist-form__email { padding-block: 0.85rem; }
  .aeos-waitlist-form__submit { width: 100%; }
}

/* =============================================================================
   6b. DARK SECTION BODY TEXT — contrast override
   The foundation uses --c-on-dark-2 (large-text-only token) for .section-head p
   on dark sections. Override to --c-on-dark for all body-size copy on this page.
   ============================================================================= */
.page-aeos .section--dark .section-head p,
.page-aeos .section--dark .lead {
  color: var(--c-on-dark);
}

/* =============================================================================
   6. BODY BACKGROUND
   The AEOS page runs full dark. Set the body background so there is no
   flash of white between sections at the very bottom / top of the page.
   ============================================================================= */
.page-aeos {
  background: var(--c-bg-dark);
}

/* =============================================================================
   7. REDUCED MOTION — collapse non-stepper AEOS motion to final state
   (The stepper's own reduced-motion fallback lives in §3 above.)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .aeos-differentiator,
  .aeos-cross-link {
    transition: none;
  }
}

/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  /* Stepper: collapse to single column — diagram on top, card below */
  .aeos-stepper__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .aeos-cross-link {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .aeos-differentiator {
    padding: var(--sp-3) var(--sp-3);
  }

  .aeos-cross-link {
    padding: var(--sp-4);
  }

  /* Hide visuals on mobile; card column carries the content */
  .aeos-stepper__visuals {
    display: none;
  }

  .aeos-stepper__card {
    max-width: 100%;
    padding: var(--sp-4);
  }
}

@media (max-width: 480px) {
  .aeos-hero__media {
    margin-top: var(--sp-4);
    border-radius: var(--r-md);
  }
}