/* DOCA landing — motion layer (Phase E). Loaded after styles.css.
   Transform, opacity and clip-path only. Everything is visible by default: the `motion` class (set before first
   paint, only when the visitor has not asked for reduced motion) arms the hidden start states, and main.js marks
   elements `is-in` as they enter. The hero needs no script: it is a CSS entrance. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-ui: 200ms;
  --t-reveal: 500ms;
}

/* ---- Controls: fast feedback, no loops */
.btn, .tab, .route__stops a, .board__cta, .lang, .link {
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, text-decoration-color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.btn:active, .tab:active, .route__stops a:active { transform: scale(0.97); }
.board__cta:active { transform: scale(0.99); }
.board__arrow { transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .board__cta:hover .board__arrow { transform: translate(4px, -4px); }
}

/* ---- Bar: gains a ground once the page moves under it */
.bar { transition: background-color var(--t-ui) ease; }
.bar.is-scrolled {
  background-color: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); /* taste-skill-ignore: the one sticky bar, requested treatment */
  backdrop-filter: saturate(1.4) blur(12px); /* taste-skill-ignore: the one sticky bar */
  box-shadow: 0 1px 0 rgb(7 26 49 / 0.06); /* taste-skill-ignore: edge of the sticky bar over scrolled content */
}

/* ---- Hero: words rise, then the product is revealed (pure CSS, runs once) */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes unveil {
  from { opacity: 0; clip-path: inset(0 0 14% 0); transform: translateY(28px) scale(0.985); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.motion .hero__copy > * { animation: rise 640ms var(--ease-out) both; }
.motion .hero__copy > :nth-child(2) { animation-delay: 80ms; }
.motion .hero__copy > :nth-child(3) { animation-delay: 160ms; }
.motion .hero__shot .shot { animation: unveil 700ms var(--ease-out) 180ms both; }

/* ---- Generic reveal (headings, leads, tiles, screens) */
.motion [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal='screen'] {
  transform: translateY(24px) scale(0.985);
  clip-path: inset(0 0 10% 0);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), clip-path 600ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* ---- IoT chain: each link draws in turn, device to action */
.chain h3 { position: relative; padding-bottom: 10px; }
.chain h3::after {
  content: ''; position: absolute; left: 0; right: 24px; bottom: 0; height: 3px; background: var(--gold);
  transform-origin: left; transform: scaleX(1);
}
.motion .chain h3::after { transform: scaleX(0); transition: transform 400ms var(--ease-out); transition-delay: calc(var(--d, 0ms) + 100ms); }
.motion .chain li.is-in h3::after { transform: scaleX(1); }
.motion .plate__panel { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style { .motion .plate__panel { opacity: 0; transform: translateY(8px); } }
.motion .plate[data-instant='true'] .plate__panel { transition: none; }

/* ---- Handheld: lift on a fine pointer only */
@media (hover: hover) and (pointer: fine) {
  .device .shot { transition: transform var(--t-ui) var(--ease-out); }
  .device:hover .shot { transform: translateY(-4px); }
}

/* ---- Sites: the stock's route as one story (structure built by main.js) */
.route__stops a[aria-current='step'] { background: var(--ink); color: #fff; }
.route__progress { display: none; }
.story-stage { display: none; }
.route__progress span { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.route__progress span::after {
  content: ''; display: block; height: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out);
}
.route__progress span.is-done::after { transform: scaleX(1); }

@media (min-width: 1101px) {
  .route.is-story .route__story {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 72px);
    margin-top: clamp(64px, 5vw, 96px);
  }
  .route.is-story .stop { grid-column: 1; margin: 0; min-height: 76vh; display: flex; align-items: center; }
  .route.is-story .stop:last-of-type { min-height: 88vh; }
  .route.is-story .stop__stage { display: none; }
  .route.is-story .stop__text,
  .route.is-story .stop--device .stop__text {
    display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0 0 0 calc(var(--margin) + 20px);
    max-width: 30rem; position: relative;
  }
  .route.is-story .stop__text p, .route.is-story .stop__text .stop__closing { padding: 0; }
  .route.is-story .stop__text::before {
    content: ''; position: absolute; left: var(--margin); top: 4px; bottom: 4px; width: 4px; background: var(--gold);
    transform: scaleY(0); transform-origin: top; transition: transform 420ms var(--ease-out);
  }
  .route.is-story .stop__title { color: var(--muted); transition: color 300ms ease; font-size: clamp(1.75rem, 1.2rem + 0.7vw, 2rem); }
  .route.is-story .stop.is-active .stop__title { color: var(--ink); }
  .route.is-story .stop.is-active .stop__text::before { transform: scaleY(1); }

  .route.is-story .story-stage {
    display: block; grid-column: 2; grid-row: 1 / span 5;
    position: sticky; top: 104px; align-self: start;
    height: min(calc(100vh - 140px), 700px);
    background: var(--surface); overflow: hidden;
  }
  .story-stage .route__progress { display: flex; gap: 6px; position: absolute; left: 48px; right: 48px; top: 24px; z-index: 2; }
  .story-stage__frame {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transform: translateY(16px) scale(0.985);
    transition: opacity 160ms var(--ease-out), transform 0s linear 160ms, visibility 0s linear 160ms;
  }
  .story-stage__frame.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 380ms var(--ease-out) 80ms, transform 520ms var(--ease-out) 80ms, visibility 0s linear 0s;
  }
  .story-stage__frame .shot--true { position: absolute; left: 48px; top: 64px; width: 1040px; }
  .story-stage__frame .shot--device { position: absolute; left: 50%; top: 64px; width: 340px; margin-left: -170px; }
}

/* Phone and tablet: a slim sticky progress bar over the vertical sequence */
@media (max-width: 1100px) {
  .route.is-story > .route__progress {
    display: flex; gap: 4px; position: sticky; top: 76px; z-index: 5;
    padding: 12px var(--margin); margin-top: 24px; background: rgb(255 255 255 / 0.92);
  }
}
@media (max-width: 640px) { .route.is-story > .route__progress { top: 64px; } }

/* ---- Reduced motion: no travel, no parallax; state changes stay as quick fades */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .tab:active, .route__stops a:active, .board__cta:active { transform: none; }
  .device:hover .shot, .board__cta:hover .board__arrow { transform: none; }
  .plate__panel { transform: none !important; }
  .story-stage__frame { transform: none !important; transition: opacity 160ms linear, visibility 0s linear 160ms !important; }
  .story-stage__frame.is-active { transition: opacity 160ms linear !important; }
  .route__progress span::after, .route.is-story .stop__text::before { transition: none !important; }
}