/* ============================================================
   IALF CPI™ — The header stage
   ------------------------------------------------------------
   Built after Orderful's hero: a dark panel held in perspective,
   the service shown as stacked step-cards with a glowing wire
   running through them, opening into a mosaic of every domain the
   framework reaches.

   Deliberately HTML, not hand-placed SVG text. The previous
   diagram collided — a number sat on top of its own meter arc, a
   dashed arc ran through a caption — because every label was
   positioned by coordinate. Real boxes in real flow cannot do that.
   ============================================================ */

@layer sections {

.stage3d {
  position: relative;
  width: 100%;
  max-width: 720px;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  margin-right: 0;
  margin-left: auto;
  margin-top: clamp(28px, 3.5vw, 54px);
}
@media (min-width: 1200px) {
  .stage3d { margin-right: 0; }
}

.stage3d__world {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.94fr);
  gap: 0;
  align-items: stretch;
  transform-origin: 50% 50%;
  transform: rotateY(-9deg) rotateX(2.5deg) rotateZ(-0.4deg) scale(1.02);
  transform-style: preserve-3d;
  transition: transform 900ms var(--ease-editorial);
}
@media (min-width: 1440px) {
  .stage3d__world { transform: rotateY(-9deg) rotateX(2.5deg) rotateZ(-0.4deg) scale(1.03); }
}

/* ---------------- left: the dark service panel ---------------- */
.s3-panel {
  position: relative;
  z-index: 2;
  padding: 18px 18px 20px;
  border-radius: 20px 6px 6px 20px;
  background: linear-gradient(155deg, #101c56 0%, #0c1754 52%, #070d31 100%);
  box-shadow: 0 30px 60px rgba(4, 9, 38, .42), 0 2px 0 rgba(255,255,255,.06) inset;
  transform: translateZ(36px);
  display: grid;
  gap: 10px;
  align-content: start;
}
/* Step index drives the cycle offsets. The panel's first two children
   are the label and the wire, so the cards are its divs 1..3. */
.s3-panel > div:nth-of-type(1) { --i: 0; }
.s3-panel > div:nth-of-type(2) { --i: 1; }
.s3-panel > div:nth-of-type(3) { --i: 2; }

.s3-panel__k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans-tight);
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 2px;
}
.s3-panel__k b {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-electric-cobalt);
  box-shadow: 0 0 10px 2px rgba(37,69,255,.85);
}

/* the wire that threads the three steps */
.s3-wire {
  position: absolute;
  left: 40px; top: 74px; bottom: 34px;
  width: 2px;
  background: linear-gradient(to bottom,
      rgba(37,69,255,0) 0%, rgba(37,69,255,.9) 12%,
      rgba(37,69,255,.9) 88%, rgba(37,69,255,0) 100%);
  box-shadow: 0 0 14px 1px rgba(37,69,255,.7);
  z-index: 0;
}
.s3-wire i {
  position: absolute; left: 50%; top: 0;
  width: 8px; height: 8px; margin-left: -4px; margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(37,69,255,.95);
  animation: s3-travel 4.6s var(--ease-inout) infinite;
}
@keyframes s3-travel {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* clean numbered stepper — replaces the vertical "wire" that read as
   a broken artifact. Numbers sit inside each card, so nothing lands
   in the gutter to look stray. */
.s3-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s3; }
.s3-step__k { display: flex; align-items: center; gap: 9px; }
.s3-step { counter-increment: s3; }
.s3-step__k::before {
  content: counter(s3, decimal-leading-zero);
  flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-sans-tight); font-size: 9.5px; font-weight: 700; letter-spacing: -.02em;
  color: #fff;
  /* lights on the same clock as its card, so the number turns cobalt
     as the step becomes active */
  animation: s3-node-cycle var(--s3-cycle, 13s) var(--ease-inout) infinite;
  animation-delay: calc(var(--i, 0) * (var(--s3-cycle, 13s) / 4));
}
@keyframes s3-node-cycle {
  0%, 2%   { background: rgba(255,255,255,.1);  border: 1.5px solid rgba(255,255,255,.26); }
  8%, 21%  { background: var(--color-electric-cobalt); border: 1.5px solid var(--color-electric-cobalt); }
  30%,100% { background: rgba(255,255,255,.1);  border: 1.5px solid rgba(255,255,255,.26); }
}

/* a step card — cycles through active on a continuous loop, so the
   journey reads as something running rather than a static picture */
.s3-step {
  position: relative; z-index: 1;
  display: grid; gap: 6px;
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  animation: s3-step-cycle var(--s3-cycle, 13s) var(--ease-inout) infinite;
  animation-delay: calc(var(--i, 0) * (var(--s3-cycle, 13s) / 4));
}
/* The first pass moved the card from rgba(255,255,255,.07) to
   rgba(37,69,255,.20) — on a navy panel that reads as almost nothing.
   The active step now clearly steps forward and the resting steps
   clearly drop back, so the cycle is visible at a glance. */
@keyframes s3-step-cycle {
  0%,  1% {
    background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08);
    transform: translateZ(0) scale(.985); opacity: .5; box-shadow: none;
  }
  7%, 21% {
    background: rgba(48,84,255,.42); border-color: rgba(150,172,255,.9);
    transform: translateZ(34px) scale(1.035); opacity: 1;
    box-shadow: 0 16px 38px rgba(0,0,0,.4), 0 0 0 1px rgba(150,172,255,.35), 0 0 34px rgba(37,69,255,.5);
  }
  30%,100% {
    background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08);
    transform: translateZ(0) scale(.985); opacity: .5; box-shadow: none;
  }
}

/* a light sweeps across the card as it takes its turn */
.s3-step::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: s3-sheen var(--s3-cycle, 13s) var(--ease-inout) infinite;
  animation-delay: calc(var(--i, 0) * (var(--s3-cycle, 13s) / 4));
}
@keyframes s3-sheen {
  0%, 4%   { transform: translateX(-120%); }
  16%      { transform: translateX(120%); }
  17%,100% { transform: translateX(120%); }
}

/* the step label brightens with its card */
.s3-step__k {
  animation: s3-k-cycle var(--s3-cycle, 13s) var(--ease-inout) infinite;
  animation-delay: calc(var(--i, 0) * (var(--s3-cycle, 13s) / 4));
}
@keyframes s3-k-cycle {
  0%,  2%  { color: rgba(255,255,255,.4); }
  8%, 21%  { color: #ffffff; }
  30%,100% { color: rgba(255,255,255,.4); }
}
.s3-step__k {
  font-family: var(--font-sans-tight);
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
/* min-width:0 stops a long option being clipped by the panel edge */
.s3-opts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.s3-opt {
  position: relative;
  max-width: 100%;
  padding: 4px 8px; border-radius: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 10.5px; font-weight: 500;
  color: rgba(255,255,255,.52);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.s3-opt--on {
  background: #fff; border-color: #fff; color: var(--color-ink-navy); font-weight: 600;
  padding-right: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,.24);
}
/* the tick lands when its step becomes active, and lifts when the
   step hands over — so the whole thing keeps moving */
.s3-opt--on::after {
  content: "";
  position: absolute; right: 5px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%;
  background: var(--color-electric-cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat;
  transform: scale(0);
  animation: s3-tick-cycle var(--s3-cycle, 13s) var(--ease-spring) infinite;
  animation-delay: calc(var(--i, 0) * (var(--s3-cycle, 13s) / 4));
}
@keyframes s3-tick-cycle {
  0%,  4%  { transform: scale(0); }
  9%, 24%  { transform: scale(1); }
  30%,100% { transform: scale(1); }
}

/* the step's readout counts itself in as the step activates */
.s3-step__out b { animation: s3-out var(--s3-cycle, 13s) var(--ease-editorial) infinite;
                  animation-delay: calc(var(--i, 0) * (var(--s3-cycle, 13s) / 4)); }
@keyframes s3-out {
  0%, 5%   { opacity: .45; transform: translateY(3px); }
  11%, 26% { opacity: 1;   transform: none; }
  32%,100% { opacity: .82; transform: none; }
}

.s3-step__out {
  display: flex; align-items: baseline; gap: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11px; color: rgba(255,255,255,.62);
}
.s3-step__out b {
  font-family: var(--font-sans-tight);
  font-size: 14px; font-weight: 700; letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.s3-step__out em {
  font-style: normal; margin-left: auto;
  color: #9fb0ff; font-weight: 600; font-size: 10.5px;
}

/* ---------------- right: the reach mosaic ---------------- */
/* The tiles stretch to fill the panel instead of leaving the dead
   half that the first version left under them. */
.s3-mosaic {
  position: relative; z-index: 1;
  padding: 16px 16px;
  border-radius: 6px 20px 20px 6px;
  background: var(--surface-paper);
  box-shadow: 0 24px 50px rgba(75,68,57,.18);
  transform: translateZ(4px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
.s3-mosaic__k {
  font-family: var(--font-sans-tight);
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-stone);
}
.s3-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-auto-rows: 1fr;
  gap: 7px;
}
/* Each tile brightens in turn in the last quarter of the cycle, so
   the reach ripples through after the three steps have run. */
.s3-tile {
  display: grid; gap: 2px; align-content: center;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-canvas);
  border: 1px solid var(--color-cream-border);
  animation: s3-tile-ripple var(--s3-cycle, 13s) var(--ease-inout) infinite;
  animation-delay: calc(var(--s3-cycle, 13s) * .66 + var(--i, 0) * (var(--s3-cycle, 13s) / 26));
}
@keyframes s3-tile-ripple {
  0%,  2%  { transform: none; box-shadow: none; }
  6%       { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(75,68,57,.18); }
  14%,100% { transform: none; box-shadow: none; }
}
.s3-tile__n {
  font-family: var(--font-sans-tight);
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-stone);
}
.s3-tile__t {
  font-family: var(--font-sans-tight);
  font-size: 12.5px; font-weight: 600; letter-spacing: -.028em; line-height: 1.15;
  color: var(--color-charcoal);
}
.s3-tile--lav  { background: var(--tint-lavender); border-color: transparent; }
.s3-tile--lav .s3-tile__n { color: #6b74b8; }
.s3-tile--lav .s3-tile__t { color: var(--color-ink-navy); }
.s3-tile--ink  { background: var(--surface-ink); border-color: transparent; }
.s3-tile--ink .s3-tile__n { color: rgba(255,255,255,.5); }
.s3-tile--ink .s3-tile__t { color: #fff; }
.s3-tile--peach { background: var(--tint-peach); border-color: transparent; }
.s3-tile--peach .s3-tile__n { color: #b4735c; }

.s3-mosaic__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--color-cream-border);
  font-size: 11.5px; color: var(--color-graphite);
}
.s3-mosaic__foot b { font-family: var(--font-sans-tight); font-weight: 700; color: var(--color-electric-cobalt); }

/* Pinned to the seam, this kept getting sliced by the dark panel —
   the rotated world's visual bottom edge moves with the viewport, so
   no absolute offset is safe at every width. It now sits in normal
   flow beneath the stage, where nothing can cut it. */
.s3-loop {
  position: relative; z-index: 4;
  margin: 20px auto 0;
  width: fit-content;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--radius-buttons);
  background: var(--color-electric-cobalt); color: #fff;
  font-family: var(--font-sans-tight); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(37,69,255,.36);
  white-space: nowrap;
}
.s3-loop svg { width: 14px; height: 14px; animation: loop-turn 9s linear infinite; }

/* ---------------- responsive: flatten, then stack ---------------- */
@media (max-width: 1100px) {
  .stage3d__world { transform: rotateY(-8deg) rotateX(2deg); }
}
@media (max-width: 860px) {
  .stage3d { perspective: none; margin-top: 16px; }
  .stage3d__world {
    grid-template-columns: minmax(0, 1fr);
    transform: none;
    gap: 12px;
  }
  .s3-panel, .s3-mosaic { transform: none; border-radius: 20px; }
  .s3-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .s3-loop { margin: 14px 0 0; }
}
@media (max-width: 520px) {
  .s3-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s3-opts { gap: 5px; }
  .s3-opt { font-size: 10.5px; padding: 5px 9px; }
}

/* ---------------- hover: ease the tilt off ---------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .stage3d:hover .stage3d__world { transform: rotateY(-6deg) rotateX(2deg) rotateZ(-.4deg); }
}

/* ---------------- safety net ----------------
   The cycle animations all start from a VISIBLE state, so they need
   no rescue — the earlier `hero-done` override has been removed
   because it froze the very loop this section exists for. The one
   exception is the tick, which starts at scale(0). */
html.hero-done .s3-opt--on::after { transform: scale(1); }

/* ---------------- motion opt-out ----------------
   Everything settles: no tilt, no cycling, all three steps shown
   equally, every tick present, every tile at rest. */
html.motion-off .stage3d__world { transform: none !important; }
html.motion-off .s3-loop svg,
html.motion-off .s3-tile,
html.motion-off .s3-step,
html.motion-off .s3-step::before,
html.motion-off .s3-step__k::before,
html.motion-off .s3-step__out b,
html.motion-off .s3-opt--on::after { animation: none !important; }
html.motion-off .s3-step::before { display: none; }
html.motion-off .s3-step__k::before { background: var(--color-electric-cobalt); border: 1.5px solid var(--color-electric-cobalt); }
html.motion-off .s3-tile,
html.motion-off .s3-step { opacity: 1; transform: none; box-shadow: none; }
html.motion-off .s3-step__out b { opacity: 1; transform: none; }
html.motion-off .s3-opt--on::after { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) .stage3d__world { transform: none !important; }
  html:not(.motion-forced) .s3-loop svg,
  html:not(.motion-forced) .s3-tile,
  html:not(.motion-forced) .s3-step,
  html:not(.motion-forced) .s3-step::before,
  html:not(.motion-forced) .s3-step__k::before,
  html:not(.motion-forced) .s3-step__out b,
  html:not(.motion-forced) .s3-opt--on::after { animation: none !important; }
  html:not(.motion-forced) .s3-step::before { display: none; }
  html:not(.motion-forced) .s3-step__k::before { background: var(--color-electric-cobalt); border: 1.5px solid var(--color-electric-cobalt); }
  html:not(.motion-forced) .s3-tile,
  html:not(.motion-forced) .s3-step { opacity: 1; transform: none; box-shadow: none; }
  html:not(.motion-forced) .s3-step__out b { opacity: 1; transform: none; }
  html:not(.motion-forced) .s3-opt--on::after { transform: scale(1); }
}

}