/* ── Horizon scroll crossfade (site + dashboard) ── */
:root {
  --horizon-header-offset: calc(3.35rem + env(safe-area-inset-top, 0px));
  --horizon-aria-gap: 12px;
  --horizon-slot-h: clamp(320px, 48dvh, 580px);
  --horizon-scroll-pad: 34dvh;
  --horizon-dwell-pad: 18dvh;
}

main {
  perspective: none;
}

.horizon-stage {
  position: relative;
  overflow: visible;
  min-height: calc(var(--horizon-slot-h) + var(--horizon-scroll-pad) + var(--horizon-dwell-pad));
}

.horizon-stage-sticky {
  position: sticky;
  top: var(--horizon-header-offset);
  z-index: 3;
  height: var(--horizon-slot-h);
  min-height: 0;
  display: block;
  overflow: hidden;
  contain: layout paint style;
}

/* Calm first paint — avoid stop/start until horizon JS sets slot vars */
html:not(.horizon-layout-ready) .horizon-stage-sticky {
  opacity: 0;
}

html.horizon-layout-ready .horizon-stage-sticky {
  opacity: 1;
  transition: opacity 0.15s ease-out;
}

.horizon-scroll-pad,
.horizon-dwell-pad {
  pointer-events: none;
}

.horizon-scroll-pad {
  height: var(--horizon-scroll-pad);
}

.horizon-dwell-pad {
  height: var(--horizon-dwell-pad);
}

.horizon-from {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  opacity: 1;
  will-change: opacity;
}

.horizon-to.horizon-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  z-index: 5;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  overflow: visible;
}

.horizon-to.horizon-overlay.is-interactive {
  pointer-events: auto;
}

.horizon-from-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--horizon-aria-gap) 0 0.5rem;
  box-sizing: border-box;
}

.section-after-horizon {
  position: relative;
  z-index: 10;
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: 0;
  isolation: isolate;
}

/* ── Site: hero → Aria ── */
#horizonStage .horizon-stage-sticky {
  overflow: visible;
}

.horizon-pull {
  padding: var(--horizon-aria-gap) 0 0.35rem;
}

.horizon-pull .hero--full {
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.horizon-pull .hero-banner--unified {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: min(1440px, calc(100vw - 2rem));
  min-height: 0;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  aspect-ratio: unset;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.horizon-pull .hero--full .hero-banner {
  border-radius: var(--radius);
  border: none;
  box-shadow: none;
}

@media (min-width: 769px) {
  .horizon-pull .hero-banner--unified img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    background: #060810;
  }
}

.horizon-compact #aria.aria-horizon-overlay .aria-hero-overlay {
  padding: 0.45rem 0.5rem;
}

/* Mobile Aria title size — see style.css @media (max-width: 768px) */

#aria.aria-horizon-overlay {
  padding: var(--horizon-aria-gap) 0 0.5rem;
  border-bottom: none;
  background: transparent;
}

#aria.aria-horizon-overlay .container {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 0;
}

#aria.aria-horizon-overlay .aria-banner-wrap {
  width: 100%;
  max-width: min(1440px, calc(100vw - 2rem));
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  margin: 0 auto;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

#aria.aria-horizon-overlay .aria-banner-wrap > .aria-pong {
  inset: 0;
}

#aria.aria-horizon-overlay .aria-banner-wrap,
#aria.aria-horizon-overlay .aria-hero-overlay {
  min-height: 0;
}

#aria.aria-horizon-overlay .aria-hero-overlay {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 0;
  padding: clamp(0.55rem, 1.5vw, 1rem);
}

#aria.aria-horizon-overlay .aria-stage-row {
  width: min(98%, 1240px);
  min-height: 0;
}

/* ── Dashboard: gateway → cameras ── */
/* LOCKED: preview only in slot — full grid lives in .cam-wall-feeds below stage.
   See docs/stages/CAMERA-WALL-LAYOUT-LOCKED.md — do not put .cam-wall-grid here. */
.horizon-stage--dash .horizon-from,
.horizon-stage--dash .horizon-to.horizon-overlay {
  padding: 0.35rem 0 0.5rem;
  overflow: hidden;
}

.horizon-stage--dash .horizon-from .gear-hero,
.horizon-stage--dash .horizon-to .cam-wall {
  height: 100%;
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.horizon-stage--dash .horizon-from .gear-hero {
  margin-bottom: 0;
}

/* Gear grid: no nested scroll — page scroll only (network grid lives outside sticky slot now) */
.horizon-stage--dash .horizon-from .gear-hero-grid {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow: visible;
  padding-right: 0;
}

.horizon-stage--dash .horizon-from .gear-hero-grid .net-card,
.horizon-stage--dash .horizon-from .gear-hero-grid .gear-card,
.horizon-stage--dash .horizon-from .gear-hero-grid .net-services-scroll {
  overflow: visible !important;
  max-height: none !important;
}

.horizon-stage--dash .horizon-to .cam-wall {
  margin-bottom: 0;
  padding: 1rem;
}

.horizon-stage--dash .horizon-to .cam-wall--slot .cam-motion-banner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.horizon-stage--dash .horizon-to .cam-wall--slot .cam-motion-strip {
  flex: 1 1 auto;
  min-height: 0;
}

.dashboard-page .section-after-horizon {
  padding-top: 0.75rem;
}

/* ── Mobile / narrow — keep horizon slot proportional (same HTML as desktop) ── */
@media (max-width: 768px) {
  :root {
    --horizon-header-offset: calc(3rem + env(safe-area-inset-top, 0px));
    --horizon-aria-gap: 8px;
    --horizon-slot-h: clamp(210px, 38dvh, 272px);
    --horizon-scroll-pad: 24dvh;
    --horizon-dwell-pad: 10dvh;
  }

  .horizon-pull .hero-banner--unified {
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
  }

  /* Sun left; clip-path trims letterbox without scaling (keeps Earth in frame) */
  #horizonStage .horizon-pull .hero-banner.hero-banner--probes.hero-banner--unified > img {
    --hero-map-pan: 0px;
    --hero-map-base-shift: -70px;
    --hero-map-v-crop-top: 17%;
    --hero-map-v-crop-bottom: 27%;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    inset: unset !important;
    margin: 0 !important;
    width: auto !important;
    height: 100% !important;
    min-height: unset !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateX(calc(var(--hero-map-base-shift) - var(--hero-map-pan))) !important;
    clip-path: inset(
      var(--hero-map-v-crop-top) 0 var(--hero-map-v-crop-bottom) 0
    ) !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: #060810;
  }

  #aria.aria-horizon-overlay .aria-banner-wrap {
    max-width: 100%;
    border-radius: 10px;
  }

  #aria.aria-horizon-overlay .aria-hero-overlay {
    padding: 0.5rem 0.45rem;
    justify-content: flex-start;
  }

  .horizon-stage--dash .horizon-to .cam-wall {
    padding: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .horizon-scroll-pad,
  .horizon-dwell-pad {
    height: 0;
  }

  .horizon-stage {
    min-height: 0;
  }

  .horizon-stage-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .horizon-from,
  .horizon-to.horizon-overlay {
    position: relative;
    opacity: 1 !important;
    pointer-events: auto;
    will-change: auto;
  }

  .horizon-to.horizon-overlay {
    margin-top: 0.5rem;
  }

  #aria.aria-horizon-overlay {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(20, 14, 12, 0.55) 0%, transparent 100%);
  }
}