/* WHY AI STALLS (homepage, 2026-09-24)
   The three first moves most companies try, each drawn as itself with one
   short line under it, so the point lands before anything is read. Sits in
   the first scaled stage (drawn at the 1440 design width) where "There's no
   wrong place to start" used to be, and hands straight to the stack band,
   whose headline is the reframe. Cream, so the page still alternates: hero
   white, this cream, stack white, Services cream.

   Each drawing has one idea and one loop of its own verb:
     01 licenses: three chats type away while files pile up between them;
     02 strategy: the calendar flips JAN to JUN, the pin hops and stays put;
     03 pilot:    the plug lunges for your systems and falls short.
   Salmon is the one stall mark in each (the piles, the pin, the plug).
   Every base style is the finished frame (full piles, JUN, plug at rest),
   so reduced motion and no JS show a complete picture; loops start on
   .is-seen, set by the observer in index.html. */
.why { background: var(--cream); padding: 112px var(--pad) 120px; }
.why .section-head { text-align: center; }

.why__list { list-style: none; margin: 56px auto 0; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.why__card { display: flex; flex-direction: column; }
.why__art { margin: 0; aspect-ratio: 3 / 2; border: 1.5px solid #000; border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 rgba(0, 0, 0, .07); overflow: hidden; }
.why__art svg { display: block; width: 100%; height: 100%; }
.why__try { margin: 24px 0 0; padding: 0 4px; display: flex; align-items: center; gap: 10px; font: 500 12px/1 "Neue Montreal", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #333; }
.why__try b { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1.2px solid #000; border-radius: 50%; background: #fff; font-weight: 500; letter-spacing: 0; color: #000; }
.why__card h3 { margin: 12px 0 0; padding: 0 4px; font: 500 24px/1.2 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; text-wrap: balance; }

/* ---- motion ---- */
.why .why-type circle, .why .why-page { transform-box: fill-box; }
.why .why-page { transform-origin: 50% 0; }
/* rest frame: every page but JUN has already been torn off */
.why .why-page--0, .why .why-page--1, .why .why-page--2, .why .why-page--3, .why .why-page--4 { transform: scaleY(0); }

/* 01: the assistants type fast; the handoffs fill up anyway */
.why__list.is-seen .why-type circle { animation: why-type 1.1s ease-in-out var(--d, 0s) infinite; }
.why__list.is-seen .why-type circle:nth-child(2) { animation-delay: calc(var(--d, 0s) + .14s); }
.why__list.is-seen .why-type circle:nth-child(3) { animation-delay: calc(var(--d, 0s) + .28s); }
@keyframes why-type { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-2px); opacity: 1; } }
.why__list.is-seen .why-doc--0 { animation: why-doc-0 6.2s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) infinite; }
.why__list.is-seen .why-doc--1 { animation: why-doc-1 6.2s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) infinite; }
.why__list.is-seen .why-doc--2 { animation: why-doc-2 6.2s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) infinite; }
.why__list.is-seen .why-doc--3 { animation: why-doc-3 6.2s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) infinite; }
@keyframes why-doc-0 { 0%, 4% { opacity: 0; transform: translateY(-18px); } 10% { opacity: 1; transform: translateY(1.5px); } 13%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes why-doc-1 { 0%, 18% { opacity: 0; transform: translateY(-18px); } 24% { opacity: 1; transform: translateY(1.5px); } 27%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes why-doc-2 { 0%, 32% { opacity: 0; transform: translateY(-18px); } 38% { opacity: 1; transform: translateY(1.5px); } 41%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes why-doc-3 { 0%, 46% { opacity: 0; transform: translateY(-18px); } 52% { opacity: 1; transform: translateY(1.5px); } 55%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }

/* 02: a page tears off every 1.5s; the pin hops right after each one and
   lands where it started. 10.5s is seven pin hops, so the two stay in step. */
.why__list.is-seen .why-pin { animation: why-pin 1.5s cubic-bezier(.3, .7, .3, 1) infinite; }
@keyframes why-pin { 0%, 8% { transform: none; } 22% { transform: translateY(-9px); } 34% { transform: none; } 40% { transform: translateY(-2px); } 46%, 100% { transform: none; } }
.why__list.is-seen .why-page--0 { animation: why-page-0 10.5s ease-in infinite; }
.why__list.is-seen .why-page--1 { animation: why-page-1 10.5s ease-in infinite; }
.why__list.is-seen .why-page--2 { animation: why-page-2 10.5s ease-in infinite; }
.why__list.is-seen .why-page--3 { animation: why-page-3 10.5s ease-in infinite; }
.why__list.is-seen .why-page--4 { animation: why-page-4 10.5s ease-in infinite; }
@keyframes why-page-0 { 0%, 11.3% { transform: none; opacity: 1; } 14.3%, 96% { transform: scaleY(0); opacity: 1; } 96.1% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes why-page-1 { 0%, 25.6% { transform: none; opacity: 1; } 28.6%, 96% { transform: scaleY(0); opacity: 1; } 96.1% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes why-page-2 { 0%, 39.9% { transform: none; opacity: 1; } 42.9%, 96% { transform: scaleY(0); opacity: 1; } 96.1% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes why-page-3 { 0%, 54.1% { transform: none; opacity: 1; } 57.1%, 96% { transform: scaleY(0); opacity: 1; } 96.1% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes why-page-4 { 0%, 68.4% { transform: none; opacity: 1; } 71.4%, 96% { transform: scaleY(0); opacity: 1; } 96.1% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }

/* 03: the plug reaches for the socket, strains, and slides back. At full
   reach the prongs stop 20 units short of the socket, so it never reads as
   plugged in; the cable ends under the plug body at every point. */
.why__list.is-seen .why-plug { animation: why-plug 5.6s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes why-plug { 0%, 26% { transform: none; } 44% { transform: translateX(11px); } 48% { transform: translateX(8.5px); } 52%, 70% { transform: translateX(11px); } 88%, 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .why__list.is-seen .why-type circle, .why__list.is-seen .why-doc--0, .why__list.is-seen .why-doc--1,
  .why__list.is-seen .why-doc--2, .why__list.is-seen .why-doc--3, .why__list.is-seen .why-pin,
  .why__list.is-seen .why-page--0, .why__list.is-seen .why-page--1, .why__list.is-seen .why-page--2,
  .why__list.is-seen .why-page--3, .why__list.is-seen .why-page--4, .why__list.is-seen .why-plug { animation: none; }
}

@media (max-width: 899px) {
  .why { padding: 64px var(--pad) 72px; }
  .why__list { margin-top: 36px; grid-template-columns: 1fr; gap: 36px; }
  .why__try { margin-top: 18px; }
  .why__card h3 { font-size: 22px; }
}