/* ============================================================
   Linktier v3 — hero media composition + sticky scroll story
   6 states (s1–s6), Lightfield-grade pacing, subtle motion
   ============================================================ */

/* ------------------------------------------------------------
   Hero media — single image composite
   linktier_hero.png is the finished art-directed asset.
   We frame it with generous air and a very soft ambient shadow
   so it sits naturally in the off-white hero field.
   ------------------------------------------------------------ */

/* soft cool ambient field — page-level atmosphere.
   Slightly wider + cooler behind the media column so the image's
   cool-gray ground dissolves into it instead of sitting on warm bg. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(76% 96% at 74% 32%, #E9EDF3 0%, rgba(233, 237, 243, 0) 70%),
    radial-gradient(42% 54% at 26% 86%, rgba(238, 242, 248, 0.8) 0%, rgba(238, 242, 248, 0) 70%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

/* container: vertically centered, right-side media column */
.hero-stage {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 8px 0;
}

/* the image itself — finished art-directed asset.
   A 4-edge fade mask dissolves its baked-in ground into the
   hero's ambient field: no border, no card frame, no hard seam. */
.hero-stage .hero-img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 3.5%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 3.5%, #000 91%, transparent 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  /* entrance */
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 1s var(--ease),
    translate 1s var(--ease),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.21, 1);
}

/* reveal on scroll-in */
.hero-stage.is-in .hero-img {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.12s;
}

/* subtle hover lift — only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .hero-stage.is-in .hero-img:hover {
    transform: scale(1.012) translateY(-4px);
  }
}

/* wide desktop — let the media breathe a little past the text column */
@media (min-width: 1201px) {
  .hero-stage .hero-img { margin-right: -32px; }
}

/* tablet — single column, centered under copy */
@media (max-width: 1200px) {
  .hero-stage { justify-content: center; padding: 4px 0 0; }
  .hero-stage .hero-img { max-width: 660px; }
}

/* mobile — stack below copy, full width with safe padding */
@media (max-width: 960px) {
  .hero-stage { padding: 0; }
  .hero-stage .hero-img { max-width: 100%; }
}

/* ------------------------------------------------------------
   Scroll story — section scaffold
   ------------------------------------------------------------ */
.story {
  background: var(--bg-white);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 80px 0 60px;
}

.story-intro {
  max-width: 760px;
  padding: 60px 0 36px;
}

.story-intro h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(340px, 440px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ---------- left: text steps ---------- */
.story-steps { display: flex; flex-direction: column; }

.story-step {
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  /* center content in the area BELOW the fixed header, not the raw viewport */
  padding-top: calc(var(--header-h, 88px) / 2);
  opacity: 0.42;
  transition: opacity 0.6s var(--ease);
}

.story-step.is-active { opacity: 1; }
.story-step.is-active h3 { color: var(--ink); }
.story-step.is-active p { color: var(--ink-2); }
.story-step.is-active .chip { background: #fff; color: var(--ink-2); }
.story-step.is-active .chip i { background: var(--accent); }

.story-step .step-index {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-step .step-index::after {
  content: "";
  height: 1px;
  width: 36px;
  background: var(--line);
}

.story-step h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

.story-step p {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--ink-2);
  max-width: 400px;
  text-wrap: pretty;
}

.step-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-top: 6px;
}

.step-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.step-chips .chip i {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--mut-2);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- right: sticky stage ---------- */
.story-stage-wrap {
  position: sticky;
  /* pin safely below the fixed header, with breathing room */
  top: calc(var(--header-h, 88px) + 16px);
  height: calc(100vh - var(--header-h, 88px) - 16px);
  display: flex;
  align-items: center;
}

.story-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 8.2;
  /* never taller than the area below the fixed header */
  max-height: min(80vh, calc(100vh - var(--header-h, 88px) - 56px));
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 80% at 20% 0%, rgba(255, 255, 255, 0.75), transparent 50%),
    linear-gradient(165deg, #F0F1F3 0%, #E9EBEF 55%, #E3E7ED 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* chaos texture — fades out as order arrives */
.story-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(27, 31, 36, 0.06) 1.1px, transparent 1.3px);
  background-size: 23px 29px;
  opacity: 0.9;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}

.stage-gridlines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(27, 31, 36, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 31, 36, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}

.story-stage[data-state="s2"]::before { opacity: 0.35; }
.story-stage[data-state="s3"]::before,
.story-stage[data-state="s4"]::before,
.story-stage[data-state="s5"]::before { opacity: 0.12; }
.story-stage[data-state="s6"]::before { opacity: 0; }
.story-stage[data-state="s2"] .stage-gridlines { opacity: 0.55; }
.story-stage[data-state="s6"] .stage-gridlines { opacity: 1; }

/* layer transition model */
.stage-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  pointer-events: none;
}

.stage-layer.is-on {
  opacity: 1;
  filter: blur(0);
  transform: translateY(calc(var(--par, 0) * 1px));
}

.stage-layer.is-behind {
  opacity: 0.12;
  filter: blur(3px);
  transform: translateY(calc(var(--par, 0) * 1px)) scale(0.96);
}

/* state caption + progress */
.stage-caption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 10;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut);
  display: flex;
  align-items: center;
  gap: 10px;
}
.stage-caption::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.stage-caption span { display: none; }
.story-stage[data-state="s1"] .stage-caption span[data-for="s1"],
.story-stage[data-state="s2"] .stage-caption span[data-for="s2"],
.story-stage[data-state="s3"] .stage-caption span[data-for="s3"],
.story-stage[data-state="s4"] .stage-caption span[data-for="s4"],
.story-stage[data-state="s5"] .stage-caption span[data-for="s5"],
.story-stage[data-state="s6"] .stage-caption span[data-for="s6"] { display: inline; }

.stage-progress {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stage-progress i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--mut-2);
  opacity: 0.35;
  transition: width 0.45s var(--ease), background 0.45s var(--ease), opacity 0.45s var(--ease);
}
.story-stage[data-state="s1"] .stage-progress i[data-st="s1"],
.story-stage[data-state="s2"] .stage-progress i[data-st="s2"],
.story-stage[data-state="s3"] .stage-progress i[data-st="s3"],
.story-stage[data-state="s4"] .stage-progress i[data-st="s4"],
.story-stage[data-state="s5"] .stage-progress i[data-st="s5"],
.story-stage[data-state="s6"] .stage-progress i[data-st="s6"] {
  width: 18px;
  background: var(--accent);
  opacity: 1;
}

/* shared: framed product screenshot inside the stage */
.shot-card {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(27, 31, 36, 0.055),
    0 2px 5px rgba(15, 27, 45, 0.06),
    0 30px 64px -16px rgba(15, 27, 45, 0.18);
}
.shot-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
  display: block;
}

/* shared: floating label pill at top of stage */
.stage-pill {
  position: absolute;
  top: 7.5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mut);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.stage-pill .pulse {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}

/* ============================================================
   S1 — scattered fragments
   ============================================================ */
.frag {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  transform: rotate(var(--sr, 0deg));
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(27, 31, 36, 0.05), 0 14px 32px rgba(27, 31, 36, 0.07);
  padding: 11px 14px 12px;
  width: 168px;
  transition: left 1.1s var(--ease), top 1.1s var(--ease),
    transform 1.1s var(--ease), opacity 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}

.frag .frag-kind {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mut-2);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.frag .frag-kind::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: var(--mut-2);
}
.frag .frag-ttl { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.frag .frag-lines { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.frag .frag-lines i { display: block; height: 5px; border-radius: 3px; background: var(--line-soft); }
.frag .frag-lines i.w70 { width: 70%; }
.frag .frag-lines i.w50 { width: 50%; }

/* converge into s2 */
.story-stage:not([data-state="s1"]) .layer-frag .frag {
  left: var(--cx, 42%);
  top: var(--cy, 12%);
  transform: rotate(0deg) scale(0.7);
  opacity: 0;
}

/* keep frag layer technically visible during s2 so the converge reads */
.story-stage[data-state="s2"] .layer-frag {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ============================================================
   S2 — execution map (to-be design)
   ============================================================ */
.layer-map {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13% 9% 10%;
}

.map-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  background: rgba(255, 255, 255, 0.45);
}

.map-node {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  box-shadow: 0 2px 6px rgba(27, 31, 36, 0.04), 0 14px 32px rgba(27, 31, 36, 0.06);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}

.stage-layer.is-on .map-node,
.stage-layer.is-behind .map-node { opacity: 1; transform: none; }

.map-node .mn-glyph {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.map-node .mn-label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.map-node .mn-line { width: 64%; height: 4.5px; border-radius: 3px; background: var(--line-soft); }

/* ============================================================
   S3 / S4 / S5 — product screenshots with key chips
   ============================================================ */
.layer-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8% 5.5% 11%;
}

.layer-shot .shot-card {
  width: 100%;
  aspect-ratio: 16 / 9.6;
  transition: transform 0.9s var(--ease);
}

/* S3 — dashboard: anchor on the agent health summary, top-left */
.layer-shot-dash .shot-card img { object-position: 0% 0%; }

/* S4 — approval queue: anchor on the review detail, right side */
.layer-drafts .shot-card img { object-position: 88% 0%; }

/* S5 — audit log is a squat capture; let it breathe */
.layer-shot-approve .shot-card { aspect-ratio: 16 / 8.2; }
.layer-shot-approve .shot-card img { object-position: 50% 0%; }

.shot-keys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shot-keys .sk {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 2px 8px rgba(27, 31, 36, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}
.shot-keys .sk i {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}
.shot-keys .sk.ok i { background: #2E9E6B; border-radius: 999px; transform: none; }

.stage-layer.is-on .shot-keys .sk { opacity: 1; transform: none; }

/* S4 uses the shared .layer-shot scaffold; pill sits above the card */
.layer-drafts { padding-top: 13%; }

/* ============================================================
   S6 — calm outcome
   ============================================================ */
.layer-outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 12%;
}

.outcome-stack {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oc-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(27, 31, 36, 0.04), 0 12px 28px rgba(27, 31, 36, 0.05);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: var(--d, 0s);
}

.stage-layer.is-on .oc-row { opacity: 1; transform: none; }

.oc-row .oc-check {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--accent);
  flex: none;
  display: grid;
  place-items: center;
}
.oc-row .oc-check::after {
  content: "";
  width: 8px;
  height: 4.5px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.oc-row .oc-label { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.oc-row .oc-line { flex: 1; height: 5px; border-radius: 3px; background: var(--line-soft); }

.outcome-tagline {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mut);
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.55s;
}
.stage-layer.is-on .outcome-tagline { opacity: 1; }

/* ============================================================
   Responsive — mobile simplification
   ============================================================ */
@media (max-width: 960px) {
  .story { padding: 56px 0 40px; }
  .story-intro { padding: 40px 0 24px; }
  .story-grid { grid-template-columns: 1fr; gap: 0; }

  .story-stage-wrap {
    position: sticky;
    top: calc(var(--header-h, 112px) + 4px); /* clears the wrapped fixed header */
    height: auto;
    z-index: 5;
    align-items: flex-start;
    order: -1;
    padding-top: 8px;
    background: linear-gradient(var(--bg-white) 82%, transparent);
  }

  .story-stage { aspect-ratio: 10 / 8.6; max-height: 52vh; }

  .story-step { min-height: 64vh; padding-top: 0; }
  .story-step:first-child { padding-top: 4vh; }

  .frag { width: 128px; padding: 9px 11px 10px; }
  .frag .frag-lines { display: none; }

  .map-board { padding: 14px; gap: 9px; }
  .map-node { padding: 12px 8px 10px; }
  .map-node .mn-glyph { width: 26px; height: 26px; }
  .map-node .mn-label { font-size: 10.5px; }

  .layer-shot { padding: 10% 5%; gap: 12px; }
  .shot-keys .sk { font-size: 10.5px; padding: 5px 11px; }

  .layer-drafts { padding-top: 12%; }

  .outcome-stack { width: min(360px, 88%); gap: 7px; }
  .oc-row { padding: 9px 13px; }
  .oc-row .oc-label { font-size: 11.5px; }

  .stage-pill { display: none; }
  .stage-caption { display: none; }
  .stage-progress { right: 16px; bottom: 14px; }
}


/* Homepage final copy media tuning */
@media (min-width: 1201px) {
  .hero-stage .hero-img {
    width: 102%;
    max-width: 790px;
    margin-right: -20px;
  }

  .story-grid {
    grid-template-columns: minmax(500px, 560px) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 56px);
  }

  .story-step h3,
  .story-step p {
    max-width: 680px;
  }

  .story-stage-wrap {
    justify-content: flex-end;
  }

  .story-stage {
    transform: scale(0.94);
    transform-origin: center right;
  }

}

/* English homepage story microcopy tuning */
.en-page .step-chips .chip {
  max-width: 100%;
  border-radius: 18px;
  align-items: flex-start;
  line-height: 1.35;
  white-space: normal;
}

.en-page .frag {
  width: 190px;
}

.en-page .frag .frag-kind {
  font-size: 8.5px;
}

.en-page .frag .frag-ttl {
  font-size: 10.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.en-page .stage-pill {
  max-width: 86%;
  white-space: normal;
  text-align: center;
  justify-content: center;
  line-height: 1.25;
}

.en-page .map-node {
  padding: 16px 10px 14px;
}

.en-page .map-node .mn-label {
  font-size: 11px;
  line-height: 1.18;
  text-align: center;
}

.en-page .shot-keys .sk {
  font-size: 10.5px;
  line-height: 1.25;
  padding: 6px 12px;
}

.en-page .layer-shot .shot-card img {
  object-fit: contain;
  object-position: 50% 50%;
  background: #fff;
}

.en-page .layer-shot-approve .shot-card {
  aspect-ratio: 1474 / 703;
}

.en-page .oc-row .oc-label {
  white-space: normal;
  line-height: 1.25;
}

@media (max-width: 680px) {
  .en-page .hero h1 {
    font-size: 31px;
    line-height: 1.42;
  }

  .en-page .frag {
    width: 150px;
    padding: 9px 11px 10px;
  }

  .en-page .frag .frag-kind {
    font-size: 7.5px;
    gap: 5px;
  }

  .en-page .frag .frag-ttl {
    font-size: 9.5px;
  }

  .en-page .footer-links {
    max-width: 100%;
  }
}