/* ============================================================
   PIN ENGINE LAYOUT + KINETIC TEXT
   ============================================================ */

.pin-wrap {
  position: relative;
  width: 100%;
  perspective: 1800px;
  perspective-origin: 50% 45%;
}
.pin-wrap[data-pin="2"] { height: 200vh; height: 200svh; }
.pin-wrap[data-pin="3"] { height: 300vh; height: 300svh; }
.pin-wrap[data-pin="4"] { height: 400vh; height: 400svh; }
.pin-wrap[data-pin="5"] { height: 500vh; height: 500svh; }
.pin-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;     /* mobile: ignores collapsing URL bar */
  height: 100dvh;     /* fallback / modern browsers */
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  --p: 0;
  /* Cinematic depth dissolve — the section flares + falls back through
     the screen on a perspective axis, replacing the old "slide up" with
     a film-cut feel (boot → identity uses the same vocabulary).
     Exit window is 0.86 → 1.0. */
  perspective: 1600px;
  perspective-origin: 50% 45%;
  --exit-amt: max(0, calc(var(--p, 0) - 0.86));
  opacity: clamp(0, calc((1 - var(--p, 0)) / 0.12), 1);
  transform:
    scale(calc(1 + var(--exit-amt) * 0.14))
    translateZ(calc(var(--exit-amt) * 140px));
  filter: blur(calc(var(--exit-amt) * 26px));
  transform-origin: center 50%;
  will-change: opacity, transform, filter;
}

/* Aperture light-leak — soft circular bloom that flares during the
   exit, masking the natural sticky scroll-up so the handoff reads as
   a pure dissolve. */
.pin-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 50% 50%,
      rgba(255,255,255,0.12) 0%,
      var(--accent-faint) 30%,
      transparent 70%);
  opacity: calc(max(0, calc(var(--p, 0) - 0.86)) * 7);
  mix-blend-mode: screen;
  z-index: 50;
}
.pin-stage {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 11vh 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform-style: preserve-3d;
}

/* ============================================================
   LAYERED STAGE — cinematic phases occupying the same screen real estate.
   Each .phase fades in & out as scroll progress passes through its range.
   This is what makes the experience feel like ONE locked screen with
   morphing content, instead of a tall stack you scroll through.
   ============================================================ */
.stage-layered {
  position: relative;
  display: block;
}
.stage-layered > .phase {
  position: absolute;
  inset: 11vh 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Cinematic depth-dissolve — phases breathe into existence on the
     z-axis instead of sliding vertically. The kinetic text inside each
     phase carries the per-character split-flap flip, so the wrapper
     only needs a gentle depth pulse to sell the scene change. */
  transform-style: preserve-3d;
  --in:  clamp(0, calc(var(--ep, 0) / 0.16), 1);
  --out: clamp(0, calc((1 - var(--ep, 0)) / 0.16), 1);
  --vis: min(var(--in), var(--out));
  opacity: var(--vis);
  transform:
    perspective(1400px)
    scale(calc(0.96 + var(--in) * 0.04 - (1 - var(--out)) * 0.03))
    translateZ(calc((1 - var(--in)) * -80px + (1 - var(--out)) * 60px));
  filter: blur(calc((1 - var(--vis)) * 8px));
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.stage-layered > .phase[style*="--ep:1.0000"],
.stage-layered > .phase[style*="--ep:0.0000"] { pointer-events: none; }
/* Re-enable pointer events when phase is comfortably visible */
.stage-layered > .phase {
  pointer-events: auto;
}

/* When the stage is split (pinned section with a side panel), the layered
   half lives on the left and the visual panel on the right. */
.pin-infra .pin-stage,
.pin-intel .pin-stage {
  position: relative;
}
.pin-infra .infra-left.stage-layered,
.pin-intel .intel-left.stage-layered {
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 0;
}
.pin-infra .infra-left.stage-layered > .phase,
.pin-intel .intel-left.stage-layered > .phase {
  inset: 0;
  padding: 0;
}

/* ============================================================
   KINETIC TEXT — chars/words controlled by --ep (element progress 0..1)
   ============================================================ */

/* Split-flap board reveal — each character flips down from above
   like an old airport departures display. The parent kinetic span
   sets the perspective so the flips happen in real 3D space. */
.kinetic {
  display: inline-block;
  perspective: 900px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
}
.ks {
  display: inline-block;
  position: relative;
  --stagger: 0.012;
  --start: calc(var(--i) * var(--stagger));
  --local: clamp(0, calc((var(--ep, 0) - var(--start)) * 6), 1);
  /* baseline of 8% opacity = "semi-transparent, scattered" landing state */
  opacity: calc(0.08 + var(--local) * 0.92);
  filter: blur(calc((1 - var(--local)) * 8px));
  transform-origin: 50% 0% -2px;
  transform:
    rotateX(calc((1 - var(--local)) * -78deg))
    translateY(calc((1 - var(--local)) * 4px));
  transition: none;
  will-change: opacity, filter, transform;
  backface-visibility: hidden;
}
/* italic shows a softer flip — keeps the gesture but cuts hostility */
.kinetic[style*="italic"] .ks {
  transform-origin: 50% 50%;
  transform:
    rotateX(calc((1 - var(--local)) * -60deg))
    translateY(calc((1 - var(--local)) * 4px));
}

/* Container element progress (used by parent) */
[data-anim] {
  --ep: 0;
}

/* Fade-and-rise primitive */
.anim-fade {
  opacity: var(--ep, 0);
  transform: translateY(calc((1 - var(--ep, 0)) * 18px));
  will-change: opacity, transform;
}

/* Clip-path masked reveal (sliding up from below razor line) */
.anim-clip {
  clip-path: inset(calc((1 - var(--ep, 0)) * 100%) 0 0 0);
  -webkit-clip-path: inset(calc((1 - var(--ep, 0)) * 100%) 0 0 0);
  transform: translateY(calc((1 - var(--ep, 0)) * 8px));
}

/* Razor reveal line — shows during reveal then fades */
.anim-clip-line {
  position: relative;
}
.anim-clip-line::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  top: calc((1 - var(--ep, 0)) * 100% - 0.5px);
  opacity: calc(1 - var(--ep, 0));
  pointer-events: none;
}

/* Dissolve — scattering particles fade in to letters */
.anim-dissolve {
  --local: var(--ep, 0);
  opacity: var(--local);
}
.anim-dissolve .ks {
  --stagger: 0.008;
  filter: blur(calc((1 - var(--local)) * 18px));
}

/* Fade OUT primitive (for dissolves between statements on same real estate) */
.anim-fadeout {
  opacity: calc(1 - var(--ep, 0));
  transform: translateY(calc(var(--ep, 0) * -14px));
  filter: blur(calc(var(--ep, 0) * 6px));
}

/* Width-grow underline */
.anim-grow-x {
  transform: scaleX(var(--ep, 0));
  transform-origin: left center;
  transition: none;
}

/* SVG draw-on — apply pathLength="1" + stroke-dasharray="1" + stroke-dashoffset = calc(1 - --ep) */
.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ep, 0));
}

/* Stacked-slide primitive (dissolve / next on same real estate) */
.layer-stack {
  position: relative;
  display: grid;
}
.layer-stack > * {
  grid-area: 1 / 1;
}

/* ============================================================
   IDENTITY (pinned)
   ============================================================ */

.pin-identity .pin-stage {
  max-width: 1320px;
  margin: 0 auto;
}
.pin-identity .hero-meta {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-mono);
  font-size: 12.5px; letter-spacing: 0.22em;
  color: var(--fg-dim); text-transform: uppercase;
  margin-bottom: 40px;
  font-weight: 500;
}
.pin-identity .hero-meta .sep { width: 32px; height: 1px; background: var(--hairline-strong); }
.pin-identity .hero-meta .pill {
  padding: 7px 14px;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
}
.pin-identity .hero-meta .accent {
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
}

.kx-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(48px, 11.5vw, 180px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg);
  font-feature-settings: "ss01";
  margin-bottom: 32px;
  text-shadow: 0 0 60px rgba(0,0,0,0.6);
}
.kx-name .italic { font-style: italic; color: var(--accent); text-shadow: 0 0 50px var(--accent-glow); }
.kx-name .row { display: block; padding-bottom: 0.12em; }

.kx-byline {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-mono);
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--fg-dim); text-transform: uppercase;
  margin-top: 8px;
  font-weight: 500;
}
.kx-byline .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.kx-doctrine {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.4vw, 56px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--fg);
  max-width: 1100px;
  font-weight: 400;
}

.kx-creed {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 56px);
  color: var(--fg);
  line-height: 1.2;
  max-width: 900px;
  margin-bottom: 0;
  font-weight: 400;
}
.kx-creed em {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 28px var(--accent-glow);
}
.kx-creed::before {
  content: "—  ";
  color: var(--accent);
  font-style: normal;
}

.identity-statline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 48px;
  padding-top: 0;
  border-top: 0;
  max-width: 1100px;
}
.identity-statline .stat {
  flex: 1;
  padding: 22px 22px;
  border-right: 0;
  position: relative;
}
.identity-statline .stat:last-child { padding-right: 22px; }
.identity-statline .stat .num {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 6px;
}
.identity-statline .stat .num small {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--fg-dim);
  vertical-align: top;
  margin-left: 4px;
  letter-spacing: 0;
}
.identity-statline .stat .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

/* Phase indicator (right-side scroll progress display) */
.pin-phase {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
  z-index: 8;
}
.pin-phase-row {
  display: flex; align-items: center; gap: 10px;
  opacity: 0.4;
  transition: opacity .4s var(--ease-out), color .4s var(--ease-out);
}
.pin-phase-row.live { opacity: 1; color: var(--fg); }
.pin-phase-row.live .pin-phase-tick {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.pin-phase-row.done { opacity: 0.7; }
.pin-phase-tick {
  width: 8px; height: 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  transition: all .4s var(--ease-out);
}
.pin-phase-row.done .pin-phase-tick {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Hint */
.pin-scrollhint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--fg-mute);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: calc(1 - var(--p) * 4);
  pointer-events: none;
}
.pin-scrollhint .tick {
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

/* ============================================================
   INFRASTRUCTURE (pinned, scroll-assembling cluster)
   ============================================================ */

.pin-infra .pin-stage {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: stretch;
}
.pin-infra .infra-left {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0;
}
.pin-infra .infra-right {
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.pin-infra .infra-right .cluster-wrap {
  width: 100%;
  max-height: 100%;
}
.pin-infra .infra-head {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 24px;
}
.pin-infra .infra-head em { font-style: italic; color: var(--accent); text-shadow: 0 0 32px var(--accent-glow); }
.pin-infra .infra-lede {
  font-size: 17px;
  color: var(--fg-dim);
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 520px;
  letter-spacing: -0.003em;
}

.infra-list-pin {
  display: flex; flex-direction: column;
  gap: 8px;
  border-top: 0;
}
.infra-list-pin .infra-row {
  padding: 16px 22px;
  border: 0;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 18px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.infra-list-pin .infra-row .idx { color: var(--accent); font-size: 11px; font-weight: 500; text-shadow: 0 0 10px var(--accent-glow); }
.infra-list-pin .infra-row .label { color: var(--fg); letter-spacing: 0.02em; font-family: var(--f-sans); font-size: 14px; }
.infra-list-pin .infra-row .meta { color: var(--accent-soft); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* Cluster diagram, scroll-driven */
.cluster-wrap {
  aspect-ratio: 1 / 1;
  position: relative;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(135deg, transparent 30%, var(--accent-faint) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 32px, var(--grid-line) 32px, var(--grid-line) 33px),
    repeating-linear-gradient(90deg, transparent, transparent 32px, var(--grid-line) 32px, var(--grid-line) 33px);
  overflow: hidden;
}
.cluster-wrap::before, .cluster-wrap::after {
  content: ""; position: absolute; width: 14px; height: 14px;
}
.cluster-wrap::before { top: -1px; left: -1px;
  border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.cluster-wrap::after { bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

.cluster-wrap .cluster-label {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 7px 11px;
  z-index: 4;
  font-weight: 500;
}
.cluster-wrap .cluster-label.tl { top: 14px; left: 14px; }
.cluster-wrap .cluster-label.tr { top: 14px; right: 14px; color: var(--accent); border-color: var(--accent); }
.cluster-wrap .cluster-label.bl { bottom: 14px; left: 14px; }
.cluster-wrap .cluster-label.br { bottom: 14px; right: 14px; }

.cluster-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ============================================================
   AI/ML (pinned, scroll-driven neural activation)
   ============================================================ */

.pin-intel .pin-stage {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.pin-intel .intel-left {
  position: relative;
  min-height: 0;
  display: flex; flex-direction: column;
}
.pin-intel .intel-right {
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.pin-intel .intel-right .neural-panel-pin {
  width: 100%;
  max-height: 100%;
}
.pin-intel .intel-head {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.pin-intel .intel-head em { font-style: italic; color: var(--accent); text-shadow: 0 0 32px var(--accent-glow); }
.pin-intel .intel-lede {
  font-size: 17px; color: var(--fg-dim); line-height: 1.6;
  margin-bottom: 0; max-width: 540px;
  letter-spacing: -0.003em;
}

.cert-grid-pin {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cert-grid-pin .cert-cell {
  padding: 22px 22px;
}
.cert-grid-pin .badge {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
  font-weight: 500;
}
.cert-grid-pin .title {
  font-size: 16px; line-height: 1.35; color: var(--fg);
  letter-spacing: -0.005em;
}
.cert-grid-pin .sub {
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim);
  letter-spacing: 0.08em; margin-top: 8px;
  text-transform: uppercase;
}

.neural-panel-pin {
  position: relative;
  border: 1px solid var(--hairline);
  background: var(--bg-1);
  aspect-ratio: 1 / 1.2;
  overflow: hidden;
}
.neural-panel-pin .corner-label {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg);
  display: flex; align-items: center; gap: 8px;
  z-index: 3;
  font-weight: 500;
  padding: 7px 11px;
}
.neural-panel-pin .corner-label.right { left: auto; right: 14px; color: var(--accent); }
.neural-panel-pin .corner-label .dot {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}
/* SVG reserves the bottom 64px for the readout strip so the layer
   labels (INPUT / HIDDEN / OUTPUT) and the MODEL · MX-7 footer can't
   collide. */
.neural-panel-pin svg {
  position: absolute;
  inset: 0 0 64px 0;
  width: 100%;
  height: calc(100% - 64px);
}
.neural-panel-pin .readout {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 48px;
  margin: 0 14px 14px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--fg-dim); letter-spacing: 0.08em;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--hairline); padding-top: 10px;
  text-transform: uppercase;
}
.neural-panel-pin .readout .v { color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .pin-infra .pin-stage,
  .pin-intel .pin-stage {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 14vh 6vw 8vh;
    overflow-y: auto;
  }
  .cluster-wrap, .neural-panel-pin { aspect-ratio: 4 / 3; }
  .pin-phase { display: none; }
}

@media (max-width: 720px) {
  .pin-identity .pin-stage { padding: 14vh 6vw 8vh; }
  .identity-statline { flex-direction: column; gap: 12px; }
  .identity-statline .stat {
    border-right: 0 !important;
    border-bottom: 1px solid var(--hairline);
    padding: 12px 0;
  }
  .cert-grid-pin { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE FIXES — only adjust spacing, no design changes
   ============================================================ */
@media (max-width: 720px) {
  /* Clear fixed header on all pinned sections */
  .pin-stage {
    padding-top: calc(11vh + 60px) !important;
  }

  /* Prevent content from being cut off at the bottom on very short screens */
  .pin-identity .pin-stage,
  .pin-infra .pin-stage,
  .pin-intel .pin-stage {
    padding-bottom: 20vh !important;
  }
}