/* The home page (version A, click through). The first screen is the night floor; section two asks why it is
   so hard to get value from AI and clicks through four reasons, each with its own photo and its line set on it. */

/* The first screen: seven lights come on, six go dark */
.a-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 12, 22, 0.55) 0%, rgba(7, 12, 22, 0) 16%),
    linear-gradient(0deg, rgba(7, 12, 22, 0.94) 0%, rgba(7, 12, 22, 0.72) 22%, rgba(7, 12, 22, 0) 38%);
}
.w-text { position: absolute; inset: auto 0 72px 0; z-index: 3; }
.a-hero h1 { font-size: clamp(30px, min(3.5vw, 5.4vh), 56px); line-height: 1.06; max-width: 26ch; }
.a-hero .lead { margin-top: 14px; font-size: clamp(17px, min(1.5vw, 2.4vh), 21px); line-height: 1.5; max-width: 46ch; }

@media (max-width: 700px), (max-aspect-ratio: 6/5) {
  .a-hero { min-height: 0; padding-top: 68px; }
  .a-hero::after { display: none; }
  .a-hero .w-frame { position: relative; aspect-ratio: 3 / 2; }
  .w-text { position: static; padding: 28px 0 48px; }
  .a-hero h1 { font-size: clamp(28px, 6.6vw, 44px); }
  .a-hero .lead { font-size: 18px; }
}

/* Why it is so hard */
.a-talk { padding: 110px 0 120px; background: var(--panel); border-block: 1px solid var(--line); }
.a-talk h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; max-width: 22ch; }

/* The four reasons as a row you can jump along: the one on screen is lit, the ones seen stay bright */
.a-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; margin-top: 40px; }
.a-tab {
  display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 56px; padding: 14px 0 10px;
  border: 0; border-top: 2px solid var(--line); background: none; text-align: left;
  font-size: 15px; line-height: 1.3; color: var(--ink-2); transition: color 0.2s ease, border-color 0.2s ease;
}
.a-tab b { font-variant-numeric: tabular-nums; }
.a-tab.is-seen { color: var(--ink); border-top-color: var(--line-2); }
.a-tab[aria-current="step"] { color: var(--warm); border-top-color: var(--warm); }
@media (hover: hover) { .a-tab:not([aria-current]):hover { color: var(--ink); } }

/* Each reason: its photo as wide as the page but never taller than half the screen, the line set on it, the
   note under it, so the photo, the note and the buttons fit on one screen together */
.a-body { --stage-h: min(calc((min(100vw, 1240px) - 96px) / 2.2), 50svh); margin-top: 18px; }
.a-step { position: relative; }
.a-step + .a-step { margin-top: 56px; }
.a-pic { position: relative; height: var(--stage-h); overflow: hidden; background: var(--night); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.8); }
.a-pic img { width: 100%; height: 100%; object-fit: cover; }
.a-pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 12, 22, 0.86) 0%, rgba(7, 12, 22, 0.55) 30%, rgba(7, 12, 22, 0) 54%);
}
.a-slide { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; padding: clamp(24px, 3.6vw, 52px); pointer-events: none; }
.a-slide h3 { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.1; max-width: 24ch; text-shadow: 0 2px 24px rgba(7, 12, 22, 0.8); }
.a-notes { padding-top: 30px; }
.a-notes .saw { font-weight: 500; color: var(--ink-2); font-size: 21px; max-width: 60ch; }

/* With the script: one reason at a time; the new photo settles in as its line comes up */
.a-talk.is-talk .a-step + .a-step { margin-top: 0; }
.a-talk.is-talk .a-step:not(.is-on) { display: none; }
.a-talk.is-talk .a-step.is-on .a-pic img { animation: a-pic 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.a-talk.is-talk .a-step.is-on .a-slide h3 { animation: a-in 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes a-pic { from { opacity: 0.25; transform: scale(1.04); } }
@keyframes a-in { from { opacity: 0.15; transform: translateY(12px); filter: blur(3px); } }
.a-w { opacity: 0; transition: opacity 0.28s ease-out; }
.a-w.is-in { opacity: 1; }

.a-ctrl { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.a-count { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.a-next { background: var(--warm); border-color: var(--warm); color: var(--on-warm); }
@media (hover: hover) { .a-next:not(:disabled):hover { background: #ffd795; border-color: #ffd795; } }

@media (max-width: 900px) {
  .a-tab span { display: none; }
  .a-tab { justify-content: center; font-size: 16px; }
}
@media (max-width: 700px) {
  .a-talk { padding: 80px 0 88px; }
  .a-body { --stage-h: calc((100vw - 40px) / 1.6); }
  .a-slide { position: static; padding: 26px 0 0; }
  .a-slide h3 { font-size: 25px; text-shadow: none; }
  .a-pic::after { display: none; }
  .a-notes { padding-top: 14px; }
  .a-notes .saw { font-size: 19px; }
  .a-ctrl .w-btn { flex: 1; padding: 0 12px; }
  .a-count { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .a-talk.is-talk .a-step.is-on .a-pic img,
  .a-talk.is-talk .a-step.is-on .a-slide h3 { animation: none; }
  .a-w { opacity: 1; transition: none; }
}