/* Homepage-only layer: readability fixes and restrained motion.
   Shared rules live in homepage-*.css (also used by the blog); keep this file scoped to `/`.
   Every hidden/initial animation state is gated on html.motion, which the inline head script
   sets only when reduced motion is not requested — without it the page renders as before. */
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --dur-enter: 760ms;
  --dur-hover: 220ms;
}

/* ---------- Readability: no supporting text below 11px ---------- */
.hero-capabilities { font-size: 12px; }
.case-topline { font-size: 12px; }
.case-flow { font-size: 13px; flex-wrap: wrap; }
.case-copy > p:not(.eyebrow) { font-size: 15px; }
.case-copy dl { font-size: 13px; }
.case-copy .text-link { font-size: 14px; }
.mobile-case .eyebrow,
.store-note { font-size: 12px; }
.mobile-case p:not(.eyebrow) { font-size: 14px; }
.mobile-case .text-link { font-size: 13px; }
.work p { font-size: 14px; }
.delivery-rows p { font-size: 14px; }
.delivery-rows article > span,
.delivery-rows small { font-size: 12px; }

@media (max-width: 760px) {
  .hero-capabilities { font-size: 11px; }
  .case-topline { font-size: 11px; }
  .case-flow { font-size: 12px; gap: 6px 8px; }
}

/* ---------- Micro-interactions (transitions are already disabled under reduced motion) ---------- */
/* The wrapped arrow becomes a flex item; keep the original one-space distance, not the flex gap. */
.has-arrow { gap: .3em; }
.arrow { display: inline-block; transition: transform var(--dur-hover) var(--ease-out-quart); }
a:hover .arrow-e { transform: translateX(4px); }
a:hover .arrow-ne,
.work:hover b { transform: translate(3px, -3px); }
.work b { display: inline-block; transition: transform var(--dur-hover) var(--ease-out-quart); }
.work h3 { transition: transform var(--dur-hover) var(--ease-out-quart); }
.work:hover h3 { transform: translateX(4px); }
.button { transition: background .18s ease-out, transform 120ms var(--ease-out-quart); }
.button:active { transform: scale(.98); }
.mobile-case img { transition: transform 600ms var(--ease-out-expo); }
.mobile-case:hover img { transform: translateY(-8px); }

/* ---------- Hero entrance (the one orchestrated moment) ---------- */
@keyframes home-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes home-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.motion .hero .eyebrow { animation: home-rise 640ms var(--ease-out-expo) 40ms both; }
.motion .hero h1 { animation: home-rise var(--dur-enter) var(--ease-out-expo) 100ms both; }
.motion .hero h1 span { display: inline-block; animation: home-rise var(--dur-enter) var(--ease-out-expo) 240ms both; }
.motion .hero .intro { animation: home-rise var(--dur-enter) var(--ease-out-expo) 360ms both; }
.motion .hero .actions { animation: home-rise var(--dur-enter) var(--ease-out-expo) 460ms both; }
.motion .hero-capabilities { animation: home-fade 900ms ease-out 640ms both; }

/* ---------- Scroll reveals (data-reveal is assigned by home-motion js) ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms ease-out var(--reveal-delay, 0ms),
    transform 900ms var(--ease-out-expo) var(--reveal-delay, 0ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Case flow: each step lights up in order, showing the service sequence ---------- */
.case-flow span {
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  padding-bottom: 4px;
}
.motion .case-flow span,
.motion .case-flow b {
  opacity: .4;
  transition:
    opacity 500ms ease-out calc(var(--step, 0) * 220ms + 200ms),
    background-size 600ms var(--ease-out-expo) calc(var(--step, 0) * 220ms + 200ms);
}
.motion .case-flow span { background-size: 0% 1px; }
.motion .case-flow.is-lit span,
.motion .case-flow.is-lit b { opacity: 1; }
.motion .case-flow.is-lit span { background-size: 100% 1px; }

/* ---------- Hero spec board: technical scope and price, one service at a time ---------- */
.spec-board { min-width: 0; color: var(--paper); }
.spec-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid oklch(40% .025 155); }
.spec-tab {
  position: relative;
  min-height: 56px;
  padding: 12px 8px 14px 0;
  border: 0;
  background: none;
  color: oklch(72% .02 155);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-hover) ease-out;
}
.spec-tab span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: oklch(64% .025 155); }
.spec-tab:hover,
.spec-tab[aria-selected="true"] { color: var(--paper); }
.spec-tab:focus-visible { outline-color: oklch(83% .045 155); outline-offset: -2px; }
.spec-tab i {
  position: absolute;
  left: 0;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: oklch(83% .045 155);
  transform: scaleX(0);
  transform-origin: left;
}
.spec-tab[aria-selected="true"] i { transform: scaleX(1); }
@keyframes spec-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.spec-board.is-auto .spec-tab[aria-selected="true"] i { animation: spec-progress 6500ms linear both; }
.spec-board.is-auto:hover .spec-tab i,
.spec-board.is-auto:focus-within .spec-tab i,
.spec-board.is-offscreen .spec-tab i { animation-play-state: paused; }

/* Panels share one grid cell, so the board keeps the tallest panel's height and never jumps. */
.spec-panels { display: grid; padding-top: 32px; }
.spec-panel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-out, visibility 0s linear 300ms;
}
.spec-panel.is-active { opacity: 1; visibility: visible; transition: opacity 400ms ease-out; }
.spec-eyebrow { font-size: 13px; color: oklch(78% .03 155); letter-spacing: .02em; }
.spec-price {
  margin-top: 12px;
  color: var(--paper);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.spec-price small { padding-left: 8px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: oklch(78% .03 155); }
.spec-sub { margin-top: 6px; font-size: 15px; font-weight: 700; color: oklch(83% .045 155); }
.spec-panel dl { margin: 28px 0 0; border-bottom: 1px solid oklch(38% .025 155); }
.spec-panel dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding-block: 12px; border-top: 1px solid oklch(38% .025 155); }
.spec-panel dt { font-size: 12px; color: oklch(70% .02 155); padding-top: 2px; }
.spec-panel dd { margin: 0; font-size: 15px; color: oklch(91% .01 155); }
.spec-note { margin-top: 16px; font-size: 13px; color: oklch(74% .02 155); }
.hero .spec-link { margin-top: 4px; color: var(--paper); }

.motion .spec-board { animation: home-rise 1000ms var(--ease-out-expo) 300ms both; }
.motion .spec-panel.is-active .spec-price { animation: home-rise 700ms var(--ease-out-expo) 60ms both; }
.motion .spec-panel.is-active .spec-sub { animation: home-rise 700ms var(--ease-out-expo) 120ms both; }
.motion .spec-panel.is-active dl > div { animation: home-rise 600ms var(--ease-out-expo) both; }
.motion .spec-panel.is-active dl > div:nth-child(1) { animation-delay: 180ms; }
.motion .spec-panel.is-active dl > div:nth-child(2) { animation-delay: 240ms; }
.motion .spec-panel.is-active dl > div:nth-child(3) { animation-delay: 300ms; }
.motion .spec-panel.is-active dl > div:nth-child(4) { animation-delay: 360ms; }

/* Mobile: headline, then the spec board inside the first screen, then intro and actions. */
@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; }
  .spec-board { order: 3; margin-top: 28px; }
  .hero .intro { order: 4; margin-top: 32px; }
  .hero .actions { order: 5; }
  .hero-capabilities { order: 6; }
  .spec-tab { min-height: 52px; font-size: 13px; padding-right: 4px; }
  .spec-tab span { font-size: 10px; }
  .spec-panels { padding-top: 20px; }
  .spec-price { font-size: 36px; margin-top: 8px; }
  .spec-sub { font-size: 14px; }
  .spec-panel dl { margin-top: 18px; }
  .spec-panel dl > div { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding-block: 10px; }
  .spec-panel dd { font-size: 14px; }
  .spec-note { font-size: 12px; margin-top: 12px; }
}