/* ══════════════════════════════════════════════════════════════════════════
   s8-solution-hero-journey
   Solution hero whose illustration alternates between the product dashboard
   and an employee-journey screen.

   Every dimension inside the visual is a percentage of the 598px design
   width, so the illustration scales as one unit. Breakpoints are container
   queries, not media queries — the module has to respond to its own width,
   not the viewport, or it breaks inside a two-column dnd row.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens (fine-tune here) ─────────────────────────────────── */

.s8-solution-hero {
  --mod-hero-bg:            #DCD5E5;
  --mod-hero-padding:       120px;
  --mod-col-gap:            32px;
  --mod-content-gap:        24px;
  --mod-heading-size:       56px;
  --mod-heading-weight:     600;
  --mod-heading-tracking:   -0.02em;
  --mod-heading-color:      #36244E;
  --mod-desc-size:          20px;
  --mod-desc-color:         #36244E;
  --mod-visual-width:       579px;
  --mod-visual-height:      384px;
  --mod-dashboard-width:    598px;
  --mod-dashboard-height:   370px;

  /* Pulse rings — percentages of the visual box */
  --mod-rings-left:         104.85%;
  --mod-rings-top:          52.34%;
  --mod-rings-size:         116.56%;
  --mod-rings-color:        rgba(54, 36, 78, 0.15);
  --mod-rings-stroke:       10px;
  --mod-rings-duration:     7.2s;
  --mod-rings-scale-start:  0.58;
  --mod-rings-scale-end:    1.24;

  /* Slide crossfade — duration + step interval come from fields via JS */
  --mod-slide-fade:         650ms;

  /* Product UI palette, sampled from dashboard.png */
  --mod-ui-ink:             #36244E;
  --mod-ui-ink-soft:        #6E6280;
  --mod-ui-canvas:          #FAF7F3;
  --mod-ui-nav:             #4A3A63;
  --mod-ui-skeleton:        #E4E1E7;
  --mod-ui-skeleton-strong: #C9C4CF;
  --mod-ui-pill:            #EDE9E2;
  --mod-ui-pill-done:       #DCD5E5;
  --mod-ui-pill-active:     #FEE1DA;
  --mod-ui-progress:        #85B671;
  --mod-ui-accent:          #9474BE;
}

.s8-solution-hero-wrap { container-type: inline-size; }

/* ── Solution Hero ───────────────────────────────────────────── */

.s8-solution-hero {
  position: relative;
  padding: var(--mod-hero-padding) 0;
  background-color: var(--mod-hero-bg);
}

.s8-solution-hero__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--mod-col-gap);
}

.s8-solution-hero--content-right .s8-solution-hero__row { flex-direction: row-reverse; }

.s8-solution-hero__content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--mod-content-gap);
}

.s8-solution-hero__heading {
  font-family: 'Figtree', sans-serif;
  font-size: var(--mod-heading-size);
  font-weight: var(--mod-heading-weight);
  line-height: 1.12;
  letter-spacing: var(--mod-heading-tracking);
  text-transform: uppercase;
  color: var(--mod-heading-color);
  margin: 0;
}

.s8-solution-hero__description p {
  font-size: var(--mod-desc-size);
  line-height: 1.4;
  color: var(--mod-desc-color);
  margin: 0;
}

.s8-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Visual box ──────────────────────────────────────────────── */

.s8-solution-hero__visual-outer {
  flex: 0 0 var(--mod-visual-width);
  /* Overflow intentionally visible — frames extend beyond the dashboard */
}

.s8-solution-hero__visual {
  position: relative;
  width: 100%;
  max-width: var(--mod-dashboard-width);
  height: auto;
  aspect-ratio: 598 / 384;
}

/* ── Pulse rings (z-index 0) ─────────────────────────────────── */

.s8-solution-hero__rings,
.s8-solution-hero__pulse-rings {
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
}

.s8-solution-hero__rings { z-index: 0; }

.s8-solution-hero__ring {
  animation: s8-solution-ring-pulse var(--mod-rings-duration) ease-out infinite both;
  /* width is a % of the container's inline size; height MUST come from
     aspect-ratio. Setting height to the same % resolves against the
     container's block size instead, which makes the rings oval. */
  aspect-ratio: 1 / 1;
  border: var(--mod-rings-stroke) solid var(--mod-rings-color);
  border-radius: 9999px;
  width: var(--mod-rings-size);
  height: auto;
  left: var(--mod-rings-left);
  top: var(--mod-rings-top);
  opacity: 0;
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--mod-rings-scale-start));
  will-change: transform, opacity;
}

.s8-solution-hero__ring--2 { animation-delay: 0.9s; }
.s8-solution-hero__ring--3 { animation-delay: 1.8s; }

@keyframes s8-solution-ring-pulse {
  0%   { opacity: 0.28; transform: translate(-50%, -50%) scale(var(--mod-rings-scale-start)); }
  65%  { opacity: 0.12; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(var(--mod-rings-scale-end)); }
}

/* ── Slide layer (z-index 1) ─────────────────────────────────── */

.s8-solution-hero__slides { position: absolute; inset: 0; z-index: 1; }

.s8-solution-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(.99);
  transition:
    opacity var(--mod-slide-fade) ease,
    transform var(--mod-slide-fade) ease,
    visibility 0s linear var(--mod-slide-fade);
}

.s8-solution-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

/* Animations idle on the hidden slide instead of burning CPU */
.s8-solution-hero__slide:not(.is-active) * { animation-play-state: paused !important; }

/* ── Slide 0: dashboard + floating frames ────────────────────── */

.s8-solution-hero__dashboard {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  background: #fdf8f5;
  border-radius: 4%;
}

.s8-solution-hero__dashboard img { display: block; width: 100%; height: auto; }

.s8-solution-hero__dashboard-overlay,
.s8-solution-hero__trend-line-svg {
  left: 0;
  pointer-events: none;
  position: absolute;
  top: -18%;
  width: 100%;
  height: auto;
}

.s8-solution-hero__frame {
  position: absolute;
  will-change: transform;
  z-index: 2;
}

.s8-solution-hero__frame svg,
.s8-solution-hero__frame img { display: block; width: 100%; height: auto; }

/* Frame widths as a share of the 598px design width */
.s8-solution-hero__frame--1 { width: 32.78%; }
.s8-solution-hero__frame--2 { width: 45.48%; }
.s8-solution-hero__frame--3 { width: 14.21%; }

/* ── Float animations ────────────────────────────────────────── */
/* Two axes at different periods produce an organic elliptical drift.
   `translate` and `transform` are separate composable properties, so both
   animate on the same element without a wrapper. */

@keyframes s8-solution-float-x {
  from { translate: 0 0; }
  to   { translate: var(--mod-drift-x, 4px) 0; }
}

@keyframes s8-solution-float-y {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--mod-drift-y, 10px))); }
}

.s8-solution-hero__frame--1 {
  --mod-drift-x: 4px; --mod-drift-y: 10px;
  animation:
    s8-solution-float-x 5s ease-in-out infinite alternate,
    s8-solution-float-y 4s ease-in-out infinite alternate 0.7s;
}

.s8-solution-hero__frame--2 {
  --mod-drift-x: -3px; --mod-drift-y: 7px;
  animation:
    s8-solution-float-x 4s ease-in-out infinite alternate 0.5s,
    s8-solution-float-y 3s ease-in-out infinite alternate 1.2s;
}

.s8-solution-hero__frame--3 {
  --mod-drift-x: 5px; --mod-drift-y: 12px;
  animation:
    s8-solution-float-x 3.5s ease-in-out infinite alternate 1s,
    s8-solution-float-y 4.5s ease-in-out infinite alternate 1.8s;
}

/* ── Dashboard SVG animations ────────────────────────────────── */

@keyframes s8-solution-bar-grow {
  from { transform: scaleY(.3); }
  to   { transform: scaleY(1.2); }
}

.s8-solution-hero__bar {
  animation: s8-solution-bar-grow 3.5s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.s8-solution-hero__bar--2 { animation-delay: 0.15s; animation-duration: 4.1s; }
.s8-solution-hero__bar--3 { animation-delay: 0.30s; animation-duration: 4.6s; }

@keyframes s8-solution-line-draw {
  from { stroke-dashoffset: 400; }
  to   { stroke-dashoffset: -400; }
}

.s8-solution-hero__trend-line {
  animation: s8-solution-line-draw 5s ease-in-out infinite 1s;
  opacity: 0.6;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

@keyframes s8-solution-donut-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(25deg); }
}

.s8-solution-hero__donut-sweep {
  animation: s8-solution-donut-sweep 3s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: bottom left;
}

.s8-solution-hero__frame-card { position: relative; line-height: 0; }

.s8-solution-hero__frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Frame 2 arcs — circumference 2π × 28.5 ≈ 179.07 */
@keyframes s8-solution-arc-1 { from { stroke-dashoffset: 179.07; } to { stroke-dashoffset: 0; } }
@keyframes s8-solution-arc-2 { from { stroke-dashoffset: 179.07; } to { stroke-dashoffset: 127.91; } }
@keyframes s8-solution-arc-3 { from { stroke-dashoffset: 179.07; } to { stroke-dashoffset: 102.33; } }

.s8-solution-hero__arc--1 { animation: s8-solution-arc-1 3.0s ease-in-out infinite alternate; }
.s8-solution-hero__arc--2 { animation: s8-solution-arc-2 2.4s ease-in-out infinite alternate 0.6s backwards; }
.s8-solution-hero__arc--3 { animation: s8-solution-arc-3 2.8s ease-in-out infinite alternate 1.2s backwards; }

/* Dashboard circles — circumference 2π × 20.5 ≈ 128.81 */
@keyframes s8-solution-circle-1 { from { stroke-dashoffset: 128.81; } to { stroke-dashoffset: 32.20; } }
@keyframes s8-solution-circle-2 { from { stroke-dashoffset: 128.81; } to { stroke-dashoffset: 57.96; } }
@keyframes s8-solution-circle-3 { from { stroke-dashoffset: 128.81; } to { stroke-dashoffset: 83.73; } }

.s8-solution-hero__circle-arc {
  stroke-dasharray: 128.81;
  stroke-dashoffset: 128.81;
  stroke-linecap: round;
}

.s8-solution-hero__circle-arc--1 { animation: s8-solution-circle-1 1.4s cubic-bezier(.25,.46,.45,.94) 0.30s forwards; }
.s8-solution-hero__circle-arc--2 { animation: s8-solution-circle-2 1.4s cubic-bezier(.25,.46,.45,.94) 0.55s forwards; }
.s8-solution-hero__circle-arc--3 { animation: s8-solution-circle-3 1.4s cubic-bezier(.25,.46,.45,.94) 0.80s forwards; }

/* ── Slide 1: employee journey screen ────────────────────────── */

.s8-journey { position: absolute; inset: 0; display: flex; align-items: center; }
.s8-journey svg { display: block; width: 100%; height: auto; }
.s8-journey__portrait { display: none; }

.s8-journey__row-bg,
.s8-journey__tick,
.s8-journey__cur     { transition: opacity 300ms ease; }

.s8-journey__icon,
.s8-journey__skeleton,
.s8-journey__pill,
.s8-journey__stage   { transition: fill 300ms ease, stroke 300ms ease; }

.s8-journey__spine,
.s8-journey__ring    { transition: stroke-dashoffset 550ms cubic-bezier(.4, 0, .2, 1); }

/* ── Slide indicator ─────────────────────────────────────────── */

.s8-solution-hero__slide-nav {
  position: absolute;
  left: 0;
  bottom: -30px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.s8-solution-hero__dot {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: rgba(54, 36, 78, 0.38);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 300ms ease, width 300ms ease;
}

.s8-solution-hero__dot.is-active {
  background: var(--mod-ui-ink);
  width: 42px;
}

/* ── Reduced motion ─────────────────────────────────────────────
   An auto-swapping hero illustration is precisely what this query is
   for: alternation stops, slide 0 stays, the dots still work. */

@media (prefers-reduced-motion: reduce) {
  .s8-solution-hero__frame,
  .s8-solution-hero__ring {
    animation: none;
    translate: none;
  }

  .s8-solution-hero__bar { animation: none; transform: scaleY(1); }

  .s8-solution-hero__donut-sweep,
  .s8-solution-hero__arc--1,
  .s8-solution-hero__arc--2,
  .s8-solution-hero__arc--3,
  .s8-solution-hero__trend-line {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .s8-solution-hero__circle-arc--1,
  .s8-solution-hero__circle-arc--2,
  .s8-solution-hero__circle-arc--3 {
    animation: none;
    stroke-dashoffset: 0;
  }

  .s8-solution-hero__slide { transition-duration: 1ms; }
}

/* ── Tablet ──────────────────────────────────────────────────── */

@container (max-width: 991px) {
  .s8-solution-hero { --mod-hero-padding: 80px; }

  .s8-solution-hero__row,
  .s8-solution-hero--content-right .s8-solution-hero__row {
    flex-direction: column;
  }

  .s8-solution-hero__visual-outer {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* ── Mobile ──────────────────────────────────────────────────────
   Both slides share one 360×420 box so the hero doesn't change
   height when the illustration swaps. */

@container (max-width: 767px) {
  .s8-solution-hero { --mod-hero-padding: 72px; --mod-dashboard-width: 100%; }

  .s8-solution-hero__heading { font-size: calc(var(--mod-heading-size) * 0.6); }

  .s8-solution-hero__visual { aspect-ratio: 360 / 420; }

  .s8-solution-hero__slide { display: flex; align-items: center; }

  .s8-solution-hero__dashboard { position: relative; width: 100%; height: auto; }

  /* Decorative elements that don't survive the narrow box */
  .s8-solution-hero__rings,
  .s8-solution-hero__frame { display: none; }

  .s8-journey__landscape { display: none; }
  .s8-journey__portrait  { display: block; }

  .s8-solution-hero__slide-nav { bottom: -26px; }
}

/* ── Fallback for browsers without container queries (pre-2023) ── */

@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .s8-solution-hero { --mod-hero-padding: 80px; }
    .s8-solution-hero__row,
    .s8-solution-hero--content-right .s8-solution-hero__row { flex-direction: column; }
    .s8-solution-hero__visual-outer { flex: 0 0 auto; width: 100%; display: flex; justify-content: center; }
  }

  @media (max-width: 767px) {
    .s8-solution-hero { --mod-hero-padding: 72px; --mod-dashboard-width: 100%; }
    .s8-solution-hero__heading { font-size: calc(var(--mod-heading-size) * 0.6); }
    .s8-solution-hero__visual { aspect-ratio: 360 / 420; }
    .s8-solution-hero__slide { display: flex; align-items: center; }
    .s8-solution-hero__dashboard { position: relative; width: 100%; height: auto; }
    .s8-solution-hero__rings, .s8-solution-hero__frame { display: none; }
    .s8-journey__landscape { display: none; }
    .s8-journey__portrait  { display: block; }
    .s8-solution-hero__slide-nav { bottom: -26px; }
  }
}