/* UNFINITX — stage, home: the kinetic title and the engine (docs/design/PREMIUM_MOTION_REDESIGN.md).
   Loaded only on the home page; case studies use stage-case.css. Same layers and tokens as site.css.
   Rules of the layer: the server renders the complete, final state; motion only moves decorative parts (aria-hidden) with
   transform / opacity / clip-path / stroke; text is never hidden or dimmed; without JS or with reduced motion the final
   state is what you see. JS (stage.js) adds .is-run (initial state) and then step classes. */

@layer sections {
  /* Switching into the initial run state must not animate (stage.js removes this after two frames). */
  .is-prep, .is-prep * { transition: none !important; }

  /* ===================== Home: kinetic title ===================== */
  .hero--engine .hero__title { margin-top: var(--sp-5); }
  :lang(hy) .hero--engine .hero__title { font-size: clamp(2.125rem, 1.4rem + 2.9vw, 4rem); }
  :lang(ru) .hero--engine .hero__title { font-size: clamp(2.125rem, 1.45rem + 2.9vw, 4.25rem); }
  /* Each word sits in its own mask; the clip margin keeps diacritics and descenders whole. */
  .kw { display: inline-block; overflow: clip; overflow-clip-margin: 0.25em; vertical-align: top; }
  .kw > span { display: inline-block; }
  /* The space between words always uses the local metric-matched fallback: it never swaps when Inter Latin arrives, so the
     line breaks of the large title cannot change (that swap re-wrapped the ru Kelvin cover at 768 px). */
  .kw-sp { font-family: "Inter Fallback", sans-serif; }

  /* ===================== Home: the engine ===================== */
  .engine { position: relative; margin: 0; width: min(100%, 36rem); justify-self: end; container-type: inline-size; }
  @media (max-width: 1099px) { .engine { justify-self: stretch; width: 100%; max-width: 40rem; } }
  .engine__caption { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-4); font-size: 0.875rem; color: var(--ink-400); line-height: 1.4; }
  .engine__caption-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--lime); flex: none; box-shadow: 0 0 0 4px rgb(236 247 109 / 0.15); }

  .engine__stage {
    --rx: 0deg; --ry: 0deg;
    position: relative; padding: clamp(0.9rem, 0.6rem + 1.4vw, 1.4rem); border: 1px solid rgb(251 251 247 / 0.1); border-radius: 22px;
    background:
      radial-gradient(120% 70% at 85% 0%, rgb(236 247 109 / 0.07), transparent 60%),
      linear-gradient(180deg, rgb(251 251 247 / 0.035), rgb(251 251 247 / 0.01)),
      var(--ink-950);
    box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(251 251 247 / 0.06);
    transform: perspective(1400px) rotateX(var(--ry)) rotateY(var(--rx));
    transform-style: preserve-3d; transition: transform 700ms var(--ease-out);
  }
  .engine__stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background-image: var(--grid-lines); background-size: 28px 28px; opacity: 0.6;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }

  /* Input: the business problem */
  .engine__input { position: relative; display: grid; gap: 0.35rem; padding: 0.85rem 1rem; border-radius: 14px; border: 1px dashed rgb(251 251 247 / 0.22); background: rgb(251 251 247 / 0.03); }
  .engine__tag { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
  :lang(hy) .engine__tag { text-transform: none; letter-spacing: 0.01em; font-size: 0.8125rem; }
  .engine__problems { list-style: none; padding: 0; margin: 0; display: grid; }
  .engine__problem { font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem); font-weight: 500; line-height: 1.35; color: var(--white); }
  /* The example problems share one place (the tallest one sets the height, so nothing moves when the script starts); the
     current one is shown, the others stay in the list for assistive technology and take turns with the replay control. */
  .engine__problem { grid-area: 1 / 1; transition: opacity 360ms var(--ease), transform 460ms var(--ease-out); }
  .engine__problem:not(.is-current) { opacity: 0; transform: translateY(0.6em); pointer-events: none; }
  /* The input feeds the rail */
  .engine__input::after { content: ""; position: absolute; left: calc(1.15rem + 1px); top: 100%; width: 1px; height: 0.9rem; background: rgb(251 251 247 / 0.25); }

  /* Lanes: a vertical rail of five steps, each producing its tile */
  .engine__lanes { --p: 1; list-style: none; padding: 0; margin: 0.9rem 0 0; position: relative; display: grid; }
  .engine__lanes::before, .engine__lanes::after { content: ""; position: absolute; left: 1.15rem; top: 1.4rem; bottom: 1.4rem; width: 1px; }
  .engine__lanes::before { background: rgb(251 251 247 / 0.14); }
  .engine__lanes::after { background: linear-gradient(180deg, var(--lime), rgb(236 247 109 / 0.5)); transform-origin: top; transform: scaleY(var(--p)); transition: transform 620ms var(--ease-out); }
  .engine__lane { position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) minmax(1rem, 2.5rem) 7.25rem; align-items: center; gap: 0 0.75rem; padding-block: 0.5rem; }
  .engine__node { position: relative; z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background: var(--lime); color: var(--ink-950); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 5px rgb(236 247 109 / 0.12); transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 400ms var(--ease); }
  .engine__text { display: grid; gap: 0.1rem; min-width: 0; }
  .engine__name { font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--white); }
  .engine__desc { font-size: 0.8125rem; line-height: 1.35; color: var(--ink-400); }
  .engine__wire { height: 1px; background: linear-gradient(90deg, var(--lime), rgb(236 247 109 / 0.35)); transform-origin: left; transition: transform 420ms var(--ease-out); }

  /* Tiles: abstract output of each lane (decorative, no data) */
  .tile { position: relative; display: grid; height: 3.4rem; padding: 0.45rem; border-radius: 10px; border: 1px solid rgb(251 251 247 / 0.14); background: var(--ink-900); overflow: hidden;
    transition: opacity 420ms var(--ease), transform 560ms var(--ease-out), border-color 400ms var(--ease); }
  .tile i, .tile span { display: block; }
  .tile--strategy { align-content: center; gap: 0.3rem; }
  .tile__bar { height: 0.32rem; border-radius: 99px; background: rgb(251 251 247 / 0.2); transform-origin: left; transition: transform 520ms var(--ease-out); }
  .tile__bar:nth-child(1) { width: 85%; background: var(--lime); }
  .tile__bar:nth-child(2) { width: 62%; transition-delay: 70ms; }
  .tile__bar:nth-child(3) { width: 40%; transition-delay: 140ms; }
  .tile--brand { grid-template-columns: auto 1fr 1fr 1fr; align-items: center; gap: 0.3rem; }
  .tile__mark { width: 1.6rem; height: 1.6rem; margin-right: 0.15rem; transition: transform 520ms var(--ease-out); }
  .tile__swatch { height: 1.55rem; border-radius: 5px; transition: transform 460ms var(--ease-out); }
  .tile__swatch:nth-of-type(1) { background: var(--lime); }
  .tile__swatch:nth-of-type(2) { background: var(--white); transition-delay: 60ms; }
  .tile__swatch:nth-of-type(3) { background: var(--ink-600); transition-delay: 120ms; }
  .tile--website { padding: 0; grid-template-rows: 0.6rem 1fr; }
  .tile__chrome { display: flex !important; gap: 0.18rem; align-items: center; padding-inline: 0.35rem; background: rgb(251 251 247 / 0.08); }
  .tile__chrome i { width: 0.22rem; height: 0.22rem; border-radius: 50%; background: rgb(251 251 247 / 0.35); }
  .tile__hero { margin: 0.4rem 0.45rem 0; height: 0.45rem; width: 70%; border-radius: 99px; background: rgb(251 251 247 / 0.55); transform-origin: left; transition: transform 480ms var(--ease-out); }
  .tile__cta { position: absolute; left: 0.45rem; bottom: 0.4rem; width: 2.1rem; height: 0.7rem; border-radius: 99px; background: var(--lime); transition: transform 460ms var(--ease-out) 120ms; }
  .tile--crm { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
  .tile__col { display: grid !important; align-content: start; gap: 0.2rem; padding: 0.2rem; border-radius: 5px; background: rgb(251 251 247 / 0.05); }
  .tile__col i { height: 0.55rem; border-radius: 3px; background: rgb(251 251 247 / 0.28); }
  .tile__col .tile__moving { background: var(--lime); transition: transform 620ms var(--ease-out) 160ms; }
  .tile--growth { align-content: center; }
  .tile__chart { width: 100%; height: 100%; overflow: visible; }
  .tile__chart path { fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-out); }

  /* The assembled system: the tiles chain into one column that ends in the closing statement */
  .engine__lane::after { content: ""; position: absolute; right: 3.6rem; top: calc(50% + 1.7rem); height: calc(100% - 3.4rem); width: 1px;
    background: rgb(236 247 109 / 0.45); transform-origin: top; transition: transform 420ms var(--ease-out); }
  .engine__lane:last-child::after { height: calc(50% - 1.7rem + 0.75rem); }
  .engine__node::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--lime); opacity: 0; pointer-events: none; }
  .engine__output { position: relative; display: flex; align-items: center; gap: 0.7rem; margin-top: 0.75rem; padding: 0.8rem 1rem; border-radius: 14px;
    background: var(--lime); color: var(--ink-950); font-weight: 600; line-height: 1.3; transition: transform 520ms var(--ease-out), box-shadow 600ms var(--ease); }
  .engine__output-mark { width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; border: 2px solid var(--ink-950);
    background: radial-gradient(circle, var(--ink-950) 0 28%, transparent 30%); }

  /* Replay: appears after the sequence */
  .engine__replay { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--target-min); margin-top: var(--sp-3); padding-inline: 0.25rem; color: var(--ink-400); font-size: 0.875rem; }
  .engine__replay:hover, .engine__replay:focus-visible { color: var(--white); }
  /* Space always reserved; shown (and focusable) only once the sequence has run and there is another example. */
  .engine__replay { visibility: hidden; }
  .engine.is-done:has(.engine__problem + .engine__problem) .engine__replay { visibility: visible; }
  .engine__replay-icon { width: 1rem; height: 1rem; transform: rotate(-90deg); }

  /* ---- Phones: own composition — no wires, a compact rail, tiles as a strip under each name ---- */
  @media (max-width: 639px) {
    .engine__lane { grid-template-columns: 2rem minmax(0, 1fr) 5.25rem; gap: 0 0.7rem; padding-block: 0.4rem; }
    .engine__node { width: 2rem; height: 2rem; font-size: 0.6875rem; }
    .engine__lanes::before, .engine__lanes::after { left: 1rem; }
    .engine__input::after { left: calc(1rem + 1px); }
    .engine__wire { display: none; }
    .tile { height: 2.75rem; padding: 0.35rem; border-radius: 8px; }
    .tile__swatch { height: 1.2rem; }
    .tile__mark { width: 1.2rem; height: 1.2rem; }
    .engine__name { font-size: 0.9375rem; }
    .engine__desc { font-size: 0.78rem; }
    .engine__lane::after { right: 2.625rem; top: calc(50% + 1.375rem); height: calc(100% - 2.75rem); }
    .engine__lane:last-child::after { height: calc(50% - 1.375rem + 0.75rem); }
  }
  @media (max-width: 359.98px) {
    .engine__lane { grid-template-columns: 1.85rem minmax(0, 1fr) 4.25rem; gap: 0 0.55rem; }
    .engine__node { width: 1.85rem; height: 1.85rem; }
    .engine__lanes::before, .engine__lanes::after { left: 0.92rem; }
    .tile { height: 2.4rem; }
    .engine__lane::after { right: 2.125rem; top: calc(50% + 1.2rem); height: calc(100% - 2.4rem); }
    .engine__lane:last-child::after { height: calc(50% - 1.2rem + 0.75rem); }
    .tile--brand .tile__swatch:nth-of-type(3) { display: none; }
    .tile--brand { grid-template-columns: auto 1fr 1fr; }
  }

  /* ---- Run states (JS). .is-run = waiting; .is-on = a lane has been reached; .is-done = assembled ---- */
  .engine.is-run .engine__lane:not(.is-on) .engine__node { background: var(--ink-900); color: var(--ink-400); box-shadow: inset 0 0 0 1px rgb(251 251 247 / 0.22); }
  .engine.is-run .engine__lane:not(.is-on) .engine__wire { transform: scaleX(0); }
  .engine.is-run .engine__lane:not(.is-on) .tile { opacity: 0.25; transform: translateX(10px) scale(0.96); border-color: rgb(251 251 247 / 0.06); }
  .engine.is-run .engine__lane:not(.is-on) .tile__bar,
  .engine.is-run .engine__lane:not(.is-on) .tile__hero { transform: scaleX(0); }
  .engine.is-run .engine__lane:not(.is-on) .tile__swatch { transform: translateY(120%); }
  .engine.is-run .engine__lane:not(.is-on) .tile__mark { transform: scale(0.4) rotate(-40deg); }
  .engine.is-run .engine__lane:not(.is-on) .tile__cta { transform: translateY(180%); }
  .engine.is-run .engine__lane:not(.is-on) .tile__moving { transform: translateX(-120%); }
  .engine.is-run .engine__lane:not(.is-on) .tile__chart path { stroke-dashoffset: 140; }
  .engine.is-run .engine__lane.is-active .tile { border-color: rgb(236 247 109 / 0.6); }
  .engine.is-run .engine__lane.is-active .engine__node { box-shadow: 0 0 0 7px rgb(236 247 109 / 0.2); }
  .engine.is-run:not(.is-done) .engine__lane::after { transform: scaleY(0); }
  .engine.is-done .engine__lane:nth-child(2)::after { transition-delay: 60ms; }
  .engine.is-done .engine__lane:nth-child(3)::after { transition-delay: 120ms; }
  .engine.is-done .engine__lane:nth-child(4)::after { transition-delay: 180ms; }
  .engine.is-done .engine__lane:nth-child(5)::after { transition-delay: 240ms; }
  .engine.is-run:not(.is-done) .engine__output { transform: translateY(6px); box-shadow: none; }
  .engine.is-done .engine__output { box-shadow: 0 18px 40px -18px rgb(236 247 109 / 0.55); }
  /* Hover / focus on a lane highlights its tile once assembled */
  .engine__lane:hover .tile { border-color: rgb(236 247 109 / 0.6); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Words start half visible: the heading is the LCP element and must paint on the first frame (a fully clipped word
     does not count as painted). */
  @keyframes kw-rise { from { transform: translateY(52%); } to { transform: none; } }
  .kw > span { animation: kw-rise 820ms var(--ease-out) both; }
  /* Hero texts settle into place without fading, so the lead (a possible LCP element) is painted from the first frame. */
  .hero--engine .enter { animation-name: settle-in; }
  /* Words sit at odd positions (a .kw-sp space between them). */
  .kw:nth-child(3) > span { animation-delay: 40ms; } .kw:nth-child(5) > span { animation-delay: 80ms; } .kw:nth-child(7) > span { animation-delay: 120ms; } .kw:nth-child(9) > span { animation-delay: 160ms; } .kw:nth-child(11) > span { animation-delay: 200ms; } .kw:nth-child(13) > span { animation-delay: 240ms; } .kw:nth-child(15) > span { animation-delay: 280ms; } .kw:nth-child(17) > span { animation-delay: 320ms; } .kw:nth-child(19) > span { animation-delay: 360ms; }
  .kw:nth-child(n + 21) > span { animation-delay: 400ms; }
  @keyframes ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
  .engine__lane.is-active .engine__node::after { animation: ping 900ms var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .engine__stage { transform: none; transition: none; }
}