/* ============================================================
   AMALAB — use-case-flow.css
   One pre-warmed continuous pipeline: related tools arrive on a uniform beat,
   the Amalab core responds at ingestion, and each use case reveals directly
   in one of three stable output lanes.
   ============================================================ */

/* Let the section breathe: air before the title, after the title, and below
   the closing CTA. */
#cas-usage .section-head {
  margin-top: var(--s-7);
  margin-bottom: clamp(64px, 7vw, 112px);
}
#cas-usage .flow-action {
  margin-top: var(--s-6);
  margin-bottom: var(--s-7);
}

/* Full-bleed out of the centred container.
   The old `margin-left: calc(50% - 50vw)` looked equivalent but is not: this
   band is a grid item (see the ≥921px block below), and the percentage
   resolved against a basis that drifts from the grid area on very wide
   screens — at 2560px the band landed 104px right of the viewport and the
   whole page scrolled sideways. Reconstructing the container's own left inset
   from the two tokens that define it (--container, --gutter) removes the
   percentage entirely and is exact at every width. Same construction as
   `--bleed-rest-margin` in panel-bleed.css. */
.use-case-flow {
  --bleed-inset: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter));
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--bleed-inset));
  overflow: hidden;
  background: var(--white);
  isolation: isolate;
}

.flow-stage {
  position: relative;
  height: clamp(560px, 44vw, 650px);
}

/* ---------- Tool library / incoming wave ---------- */
.flow-input {
  position: absolute;
  inset: 0 52% 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(48px, 70px));
  align-content: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6);
}

/* Explicit width AND height everywhere in this engine: aspect-ratio alone
   collapsed the tiles/mark into rectangles on browsers without support
   (older Safari), and the height also scales with the viewport so clusters
   stop crowding each other on shorter screens. */
.flow-app {
  position: relative;
  z-index: 3;
  --app-size: clamp(48px, min(5.7vw, 8.5vh), 84px);
  width: var(--app-size);
  height: var(--app-size);
  opacity: 0.96;
  will-change: transform, opacity;
}

.flow-app img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 3px rgba(10, 26, 32, 0.08))
    drop-shadow(0 12px 22px rgba(10, 26, 32, 0.11));
}

.use-case-flow.is-looping .flow-input {
  display: block;
  padding: 0;
}

.use-case-flow.is-looping .flow-app {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.use-case-flow.is-looping .flow-flight {
  display: block;
  pointer-events: none;
}

/* ---------- Amalab activation core ---------- */
.flow-core {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
}

.flow-core-logo {
  position: relative;
  --core-size: clamp(120px, min(11.5vw, 20vh), 176px);
  width: var(--core-size);
  height: var(--core-size);
  padding: clamp(15px, 1.6vw, 22px);
  border: 1px solid var(--border-strong);
  border-radius: clamp(24px, 2.3vw, 34px);
  background: var(--white);
  box-shadow:
    0 2px 5px rgba(10, 26, 32, 0.08),
    0 14px 30px rgba(10, 26, 32, 0.09);
  will-change: transform, box-shadow;
}

/* Halo rings hug the mark: at the old -13px inset + 1.52 release scale the
   rings and the long drop-shadow merged into a large murky frame that read
   as a rectangle behind the mark. */
.flow-core-logo::before,
.flow-core-logo::after {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0;
  border-radius: calc(clamp(24px, 2.3vw, 34px) + 8px);
}

/* Intake ring: closes inward each time the mark aspires an application. */
.flow-core-logo::before {
  border: 1px solid var(--teal);
  transform: scale(1.16);
}

/* Release halo: opens outward when the combined tools become a use case.
   Plain rgba fallback first — color-mix is invalid on older Safari and
   would leave the halo borderless there. */
.flow-core-logo::after {
  border: 1px solid rgba(45, 125, 138, 0.52);
  border-color: color-mix(in srgb, var(--teal) 52%, transparent);
  transform: scale(0.9);
}

.flow-core.is-activating .flow-core-logo::before {
  animation: flow-core-intake 520ms var(--ease-out) both;
}

.flow-core.is-producing .flow-core-logo::after {
  animation: flow-core-release 760ms var(--ease-out) both;
}

.flow-core-logo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes flow-core-intake {
  0% { opacity: 0; transform: scale(1.16); }
  38% { opacity: 0.4; }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes flow-core-release {
  0% { opacity: 0; transform: scale(0.9); }
  34% { opacity: 0.42; }
  100% { opacity: 0; transform: scale(1.28); }
}

/* Production no longer scatters particles. The use case now emerges directly
   from the mark and the release halo carries the moment, keeping the field
   calm rather than explosive. */

/* ---------- Produced use cases ---------- */
.flow-output {
  position: absolute;
  z-index: 4;
  inset: 5% 2.5% 8% 55%;
}

/* Rounded-square dot field behind the produced cases — same brand lattice as
   the closing band, anchored to the right and fading left so each case reads
   as surfacing out of it. V14: palette retuned — dense secondary (teal)
   carries 80% of the right-side mass, sparse tertiary (orange) keeps the
   20% accent. Navy is gone from this field. Teal opacity set to 0.26 per
   brand review — keeps the field present without crowding the case cards. */
.flow-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='72'%3E%3Crect%20x='9.7'%20y='33.7'%20width='4.6'%20height='4.6'%20rx='1.5'%20fill='%23E65F1D'%20fill-opacity='0.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Crect%20x='9.7'%20y='9.7'%20width='4.6'%20height='4.6'%20rx='1.5'%20fill='%232D7D8A'%20fill-opacity='0.26'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  -webkit-mask-image: radial-gradient(125% 108% at 100% 48%, #000 52%, transparent 100%);
  mask-image: radial-gradient(125% 108% at 100% 48%, #000 52%, transparent 100%);
}

.flow-case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  height: 100%;
  align-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.flow-case {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: var(--s-4) var(--s-4) var(--s-4) 48px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 2px 4px rgba(10, 26, 32, 0.05),
    0 14px 30px rgba(10, 26, 32, 0.07);
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.12vw, 1.04rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

.flow-case::before {
  content: "";
  position: absolute;
  left: var(--s-4);
  top: 50%;
  width: 12px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 4px;
  background: var(--teal);
}

.flow-case:nth-child(even)::before { background: var(--navy); }

/* Sector anchor under each case label — body face, muted, so the prospect
   spots their own sector without the line competing with the case name. */
.flow-case .case-anchor {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fg-muted);
}

.use-case-flow.is-looping .flow-case-list {
  position: absolute;
  inset: 0;
  display: block;
}

.use-case-flow.is-looping .flow-case {
  position: absolute;
  display: none;
  width: clamp(230px, 23vw, 320px);
  min-height: clamp(76px, 6vw, 88px);
  opacity: 0;
  will-change: transform, opacity;
}

.use-case-flow.is-looping .flow-case.is-current { display: flex; }

.use-case-flow.is-looping .flow-case[data-lane="0"] { left: 2%; top: 2%; }
.use-case-flow.is-looping .flow-case[data-lane="1"] { right: 1%; top: 39%; }
/* Lane 2 anchors to the stage bottom — on short viewports the lane-top math
   pushed its card past the clipped stage edge; bottom-anchored it always
   lands fully inside, at any height. */
.use-case-flow.is-looping .flow-case[data-lane="2"] { left: 12%; top: auto; bottom: 3%; }

/* The whole section, including its CTA, fits below the persistent header on
   desktop — one screen at every desktop size, so a 650px-high laptop window
   shows the same composition as a tall display, just tighter. Every vertical
   in here breathes with vh (head margin, paddings, mark, tiles, card
   heights); the 640px floor only catches truly tiny windows, which fall back
   to natural scrolling flow. */
@media (min-width: 921px) and (min-height: 640px) {
  #cas-usage {
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    padding-block: clamp(12px, 2.2vh, 36px);
  }

  #cas-usage > .container {
    display: grid;
    /* The column is pinned. Without it the implicit `auto` column sized itself
       to the widest item — the 100vw full-bleed band — so the section head and
       the CTA were centred on a 1496px column inside a 1200px container and
       sat 212px right of the page axis at 1920px (372px at 2560px). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
  }

  #cas-usage .section-head { margin-top: clamp(4px, 3.5vh, 56px); margin-bottom: 0; }
  #cas-usage .use-case-flow { min-height: 0; }
  #cas-usage .flow-stage { height: 100%; }
  #cas-usage .flow-action { margin-top: var(--s-2); }

  .use-case-flow.is-looping .flow-case { min-height: clamp(60px, 9vh, 88px); }
}

/* ---------- Tablet ---------- */
@media (max-width: 920px) {
  .flow-stage { height: clamp(650px, 86vw, 740px); }

  .flow-core {
    left: 50%;
    top: 32%;
  }

  .flow-core-logo { --core-size: clamp(126px, 18vw, 154px); }

  .flow-output { inset: 51% 4% 4%; }

  .use-case-flow.is-looping .flow-case {
    width: clamp(210px, 42vw, 280px);
  }

  .use-case-flow.is-looping .flow-case[data-lane="0"] { left: 5%; top: 0; }
  .use-case-flow.is-looping .flow-case[data-lane="1"] { right: 3%; top: 34%; }
  .use-case-flow.is-looping .flow-case[data-lane="2"] { left: 18%; top: 68%; bottom: auto; }
}

/* ---------- Mobile ---------- */
/* The mark sits high with clusters riding in level with it (use-case-flow.js
   narrows the flight corridor on stacked layouts), and the produced cases
   land two per row below — the section reads in one screen instead of a
   full-height column of cards. */
@media (max-width: 600px) {
  .flow-stage { height: 540px; }

  .flow-app { --app-size: clamp(44px, 13vw, 56px); }

  .flow-core { top: 24%; }
  .flow-core-logo { --core-size: 116px; border-radius: 24px; }

  .flow-output { inset: 46% var(--s-4) 4%; }

  .flow-case {
    min-height: 64px;
    padding: 10px 12px 10px 32px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .flow-case::before { left: 12px; width: 9px; }

  /* 0.72rem resolved to 11.5px — under the 12px floor the rest of the site
     holds, and this line carries the sector the prospect is scanning for. */
  .flow-case .case-anchor { font-size: 0.75rem; }

  .use-case-flow.is-looping .flow-case {
    width: 48.5%;
    min-height: 64px;
  }

  .use-case-flow.is-looping .flow-case[data-lane="0"] { left: 0; right: auto; top: 0; }
  .use-case-flow.is-looping .flow-case[data-lane="1"] { left: auto; right: 0; top: 0; }
  .use-case-flow.is-looping .flow-case[data-lane="2"] { left: 25.75%; right: auto; top: 54%; bottom: auto; }

  .use-case-flow.is-static .flow-stage {
    display: grid;
    height: auto;
    min-height: 0;
    padding: var(--s-7) var(--s-4);
    gap: var(--s-6);
  }

  .use-case-flow.is-static .flow-input {
    position: relative;
    inset: auto;
    grid-template-columns: repeat(4, 42px);
    gap: var(--s-3);
    padding: 0;
  }

  .use-case-flow.is-static .flow-app { --app-size: 42px; }

  .use-case-flow.is-static .flow-core {
    position: relative;
    inset: auto;
    transform: none;
    justify-self: center;
  }

  .use-case-flow.is-static .flow-output {
    position: relative;
    inset: auto;
  }

  .use-case-flow.is-static .flow-case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .use-case-flow *,
  .use-case-flow *::before,
  .use-case-flow *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}