/* ================================================================
   OUTCOME SECTION — "The Horizon Track"
   A scroll-jacked horizontal gallery. The section occupies 400vh
   of vertical scroll space. The inner sticky stage pins to 100vh
   and GSAP translates the card track horizontally as the user
   scrolls, revealing each glass monolith outcome card one at a time.
   The "Cost of Delay" block rises from below when the track ends.
================================================================ */

/* ── Scroll track (400vh) ───────────────────────────────────── */
.hs-outcome {
  position: relative;
  height: 400vh;
  background-color: transparent;
}

/* ── Pinned cinema stage ─────────────────────────────────────── */
.hs-outcome__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Section header ─────────────────────────────────────────── */
.hs-outcome__header {
  padding-top: var(--hs-space-24); /* Keeps it high, out of the way of cards */
  text-align: center;
  max-width: var(--hs-container-md);
  margin-inline: auto;
  padding-inline: var(--hs-container-pad-x);
  width: 100%;
  flex-shrink: 0;
  z-index: 5;
}

.hs-outcome__eyebrow {
  display: block;
  margin-inline: auto;
  width: fit-content;
  color: var(--hs-color-text-accent);
  margin-bottom: var(--hs-space-4);
  letter-spacing: var(--hs-tracking-wider);
}

.hs-outcome__headline {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-section-h);
  font-weight: var(--hs-font-extrabold);
  line-height: var(--hs-leading-heading);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-color-text-brand);
  margin-bottom: var(--hs-space-4);
}

.hs-outcome__sub {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-base);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-secondary);
  max-width: 52ch;
  margin-inline: auto;
}

/* ── Horizon line ───────────────────────────────────────────── */
/* A thin, glowing horizontal beam that the cards appear to rest on */
.hs-outcome__horizon {
  position: absolute;
  left: 0;
  right: 0;
  /* Vertically centered at roughly 60% of the viewport — just below cards */
  top: 62%;
  z-index: 1;
}

.hs-outcome__horizon-line {
  width: 100%;
  height: var(--hs-border-1);
  background: linear-gradient(
    90deg,
    transparent                 0%,
    var(--hs-color-border-accent-subtle) 15%,
    var(--hs-palette-accent-400) 50%,
    var(--hs-color-border-accent-subtle) 85%,
    transparent                 100%
  );
  box-shadow:
    0 0 12px 2px rgba(43, 197, 241, 0.25),
    0 0 40px 6px rgba(43, 197, 241, 0.08);
  /* Starts at 0, GSAP will animate scaleX to 1 as you scroll */
  transform-origin: left;
  transform: scaleX(0);
}

/* ── Viewport clipping container ────────────────────────────── */
/* Takes remaining height below the header */
.hs-outcome__viewport {
  flex-grow: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}

/* ── Horizontal card track — GSAP moves this ────────────────── */
/*
 * The track starts translated so card 1 is centred on screen.
 * GSAP will animate its X position leftward as the user scrolls.
 */
.hs-outcome__track {
  position: absolute;
  top: 50%;
  /* GSAP sets the initial left offset. This default avoids layout flash. */
  left: 0;
  transform: translateY(-50%);
  display: flex;
  gap: var(--hs-space-12);
  padding-inline: calc((100vw - var(--hs-outcome-card-w, 540px)) / 2);
  will-change: transform;
}

/* ── Individual glass monolith card ─────────────────────────── */
.hs-outcome__card {
  --hs-outcome-card-w: 520px;

  width: var(--hs-outcome-card-w);
  min-height: 52vh;
  flex-shrink: 0;

  /* Glass surface */
  background:          var(--hs-glass-bg);
  backdrop-filter:     var(--hs-glass-blur);
  -webkit-backdrop-filter: var(--hs-glass-blur);
  border:              var(--hs-border-1) solid var(--hs-glass-border);
  border-radius:       var(--hs-radius-2xl);
  box-shadow:          var(--hs-glass-shadow);
  padding:             var(--hs-space-12) var(--hs-space-10);

  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Content anchors to the bottom */
  gap: var(--hs-space-5);

  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  /* Cards start invisible — GSAP entrance runs on scroll-in */
  opacity: 0;
}

/* Edge-light highlight */
.hs-outcome__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    140deg,
    var(--hs-glass-edge-top)  0%,
    var(--hs-glass-edge-left) 25%,
    transparent               60%
  );
  pointer-events: none;
}

.hs-outcome__card-num {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-8xl);
  font-weight: var(--hs-font-extrabold);
  line-height: 1;
  letter-spacing: var(--hs-tracking-tighter);
  color: var(--hs-color-border-accent-subtle);
  position: absolute;
  top: var(--hs-space-8);
  right: var(--hs-space-10);
  opacity: 0.5;
}

.hs-outcome__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hs-space-16);
  height: var(--hs-space-16);
  background: var(--hs-color-bg-accent-subtle);
  border-radius: var(--hs-radius-xl);
  padding: var(--hs-space-4);
  flex-shrink: 0;
  margin-bottom: var(--hs-space-2);
}

.hs-outcome__card-title {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-font-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-color-text-brand);
}

.hs-outcome__card-body {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-base);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-secondary);
}

/* ── Cost of Delay warning card ─────────────────────────────── */
/* 
 * The final card on the track. Breaks from standard blue styling
 * to use a high-contrast amber/orange warning palette. 
 */
.hs-outcome__card--warning {
  width: 820px; /* Noticeably wider than standard cards */
  max-width: 90vw; /* Safety for smaller screens */
  justify-content: center;
  text-align: center;

  /* Background image replaces the tinted glass */
  background: var(--hs-palette-navy-900);
  border: var(--hs-border-1) solid rgba(255, 152, 0, 0.25);
  box-shadow:
    0 0 0 1px rgba(255, 152, 0, 0.12) inset,
    0 8px 40px rgba(255, 152, 0, 0.12),
    0 0 80px rgba(255, 152, 0, 0.06);
}

.hs-outcome__warning-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.hs-outcome__card--warning::before {
  background: linear-gradient(
    140deg,
    rgba(255, 152, 0, 0.25) 0%,
    rgba(255, 152, 0, 0.1)  25%,
    transparent 60%
  );
}

.hs-outcome__warning-label {
  display: block;
  margin-inline: auto;
  width: fit-content;
  color: #ffb347; /* warm amber accent */
  letter-spacing: var(--hs-tracking-wider);
  margin-bottom: var(--hs-space-6);
  position: relative;
  z-index: 1;
}

.hs-outcome__warning-headline {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-font-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-color-text-inverse); /* Brightened to white */
  margin-bottom: var(--hs-space-4);
  position: relative;
  z-index: 1;
}

.hs-outcome__warning-sub {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-base);
  line-height: var(--hs-leading-relaxed);
  color: var(--hs-color-text-inverse-muted); /* Brightened to light grey/white */
  position: relative;
  z-index: 1;
}

/* ── Tablet: 1024px → 769px — horizontal scroll stays ───────── */
@media (max-width: 1024px) {
  .hs-outcome__header {
    padding-top: var(--hs-space-16);
    max-width: var(--hs-container-sm);
  }

  .hs-outcome__headline {
    font-size: var(--hs-text-3xl);
  }

  .hs-outcome__sub {
    font-size: var(--hs-text-sm);
    max-width: 46ch;
  }

  /* Narrower cards — better proportion at tablet widths */
  .hs-outcome__card {
    --hs-outcome-card-w: 400px;
    width: 400px;
    min-height: 46vh;
    padding: var(--hs-space-8) var(--hs-space-8);
    gap: var(--hs-space-4);
  }

  .hs-outcome__track {
    gap: var(--hs-space-8);
    padding-inline: calc((100vw - 400px) / 2);
  }

  .hs-outcome__card--warning {
    width: 640px;
  }

  .hs-outcome__card-num {
    font-size: var(--hs-text-6xl);
  }

  .hs-outcome__card-icon {
    width: var(--hs-space-14);
    height: var(--hs-space-14);
    padding: var(--hs-space-3);
  }

  .hs-outcome__card-title {
    font-size: var(--hs-text-xl);
  }

  .hs-outcome__card-body {
    font-size: var(--hs-text-sm);
  }

  .hs-outcome__warning-headline {
    font-size: var(--hs-text-xl);
  }

  .hs-outcome__warning-sub {
    font-size: var(--hs-text-sm);
  }
}

/* ── 768px — vertical stacked layout, animation skipped ─────── */
@media (max-width: 767px) {
  .hs-outcome {
    height: auto;
  }

  .hs-outcome__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--hs-section-pad-y) var(--hs-container-pad-x);
    gap: var(--hs-space-6);
  }

  .hs-outcome__header {
    padding-top: 0;
    padding-inline: 0;
    opacity: 1;
  }

  /* Progress line not meaningful in vertical layout */
  .hs-outcome__horizon { display: none; }

  .hs-outcome__viewport {
    position: static;
    overflow: visible;
  }

  .hs-outcome__track {
    position: static;
    transform: none;
    flex-direction: column;
    padding-inline: 0;
    gap: var(--hs-space-6);
  }

  .hs-outcome__card {
    width: 100%;
    min-height: auto;
    opacity: 1;
    padding: var(--hs-space-8) var(--hs-space-7);
  }

  .hs-outcome__card--warning {
    width: 100%;
  }
}

/* ── Mobile: ≤425px ─────────────────────────────────────────── */
@media (max-width: 425px) {
  .hs-outcome__sticky {
    padding-block: var(--hs-section-pad-y-sm);
    gap: var(--hs-space-5);
  }

  .hs-outcome__card {
    padding: var(--hs-space-6) var(--hs-space-5);
  }

  .hs-outcome__card-icon {
    width: var(--hs-space-12);
    height: var(--hs-space-12);
    padding: var(--hs-space-3);
  }

  .hs-outcome__card-num {
    font-size: var(--hs-text-5xl);
    top: var(--hs-space-5);
    right: var(--hs-space-5);
  }

  .hs-outcome__card-title {
    font-size: var(--hs-text-xl);
  }

  .hs-outcome__card-body {
    font-size: var(--hs-text-sm);
  }

  .hs-outcome__warning-headline {
    font-size: var(--hs-text-xl);
  }

  .hs-outcome__warning-sub {
    font-size: var(--hs-text-sm);
  }
}

/* ================================================================
   HEIGHT RESPONSIVE
   The header's generous padding-top is the primary space consumer.
   Reducing it moves the whole stage upward. Cards are secondarily
   compressed via min-height and padding reductions.
   Scoped to min-width: 768px — the ≤767px static vertical layout
   is not affected by viewport height constraints.
   1920 × 1080 baseline unaffected (1080px > 900px).
================================================================ */

/* ── Threshold 1: 900px — Trim header breathing room ─────────── */
@media (max-height: 900px) and (min-width: 768px) {

  .hs-outcome__header {
    padding-top: var(--hs-space-16);
  }

  .hs-outcome__headline {
    margin-bottom: var(--hs-space-3);
  }
}

/* ── Threshold 2: 780px — Tighter header + shorter cards ──────── */
@media (max-height: 780px) and (min-width: 768px) {

  .hs-outcome__header {
    padding-top: var(--hs-space-12);
  }

  .hs-outcome__eyebrow {
    margin-bottom: var(--hs-space-3);
  }

  .hs-outcome__headline {
    margin-bottom: var(--hs-space-2);
  }

  .hs-outcome__card {
    min-height: 44vh;
    padding: var(--hs-space-8);
  }
}

/* ── Threshold 3: 680px — Minimal header, compact cards ──────── */
@media (max-height: 680px) and (min-width: 768px) {

  .hs-outcome__header {
    padding-top: var(--hs-space-8);
  }

  .hs-outcome__eyebrow {
    margin-bottom: var(--hs-space-2);
  }

  .hs-outcome__headline {
    font-size: var(--hs-text-2xl);
    margin-bottom: var(--hs-space-2);
  }

  .hs-outcome__sub {
    font-size: var(--hs-text-sm);
  }

  .hs-outcome__card {
    min-height: 38vh;
    padding: var(--hs-space-6);
    gap: var(--hs-space-3);
  }

  .hs-outcome__card-icon {
    width: var(--hs-space-12);
    height: var(--hs-space-12);
    padding: var(--hs-space-3);
    margin-bottom: 0;
  }

  .hs-outcome__card-num {
    font-size: var(--hs-text-6xl);
    top: var(--hs-space-5);
    right: var(--hs-space-6);
  }

  .hs-outcome__card-title {
    font-size: var(--hs-text-xl);
  }

  .hs-outcome__card-body {
    font-size: var(--hs-text-sm);
  }

  .hs-outcome__warning-headline {
    font-size: var(--hs-text-xl);
  }

  .hs-outcome__warning-sub {
    font-size: var(--hs-text-sm);
  }
}


/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hs-outcome {
    height: auto;
  }

  .hs-outcome__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  .hs-outcome__track {
    position: static;
    transform: none;
    flex-direction: column;
    padding-inline: var(--hs-container-pad-x);
  }

  .hs-outcome__card {
    width: 100%;
    opacity: 1;
  }
}