/* Motion layer. Only active when js/motion.js has set html.motion
   (JS on, no reduced-motion preference), so the page stays fully visible without JavaScript. */

:root { --ease: cubic-bezier(.2, .7, .2, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Base reveal ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s),
              clip-path 1.2s var(--ease) var(--d, 0s), letter-spacing 1.2s var(--ease) var(--d, 0s);
}
.motion [data-reveal="left"]  { transform: translate3d(-56px, 0, 0); }
.motion [data-reveal="right"] { transform: translate3d(56px, 0, 0); }
.motion [data-reveal="zoom"]  { transform: scale(.92); }
.motion [data-reveal="pop"]   { transform: translate3d(0, 18px, 0) scale(.8); transition-timing-function: var(--ease-back); }
.motion [data-reveal="fade"]  { transform: none; }
.motion [data-reveal].is-in   { opacity: 1; transform: none; }

/* Labels: letters close in */
.motion [data-reveal="track"] { transform: none; letter-spacing: .3em; }
.motion [data-reveal="track"].is-in { letter-spacing: .08em; }

/* Image wipes: the picture is uncovered like a curtain and settles from a slight zoom */
.motion [data-reveal^="wipe"] { opacity: 1; transform: scale(1.12); clip-path: inset(0 100% 0 0); }
.motion [data-reveal="wipe-left"] { clip-path: inset(0 0 0 100%); }
.motion [data-reveal="wipe-up"]   { clip-path: inset(100% 0 0 0); transform: scale(1.06); }
.motion [data-reveal^="wipe"].is-in { clip-path: inset(0 0 0 0); transform: none; }
.motion .tile[data-reveal^="wipe"] { transform: none; }

/* ---------- Headlines: words rise out of a mask ---------- */
.motion .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.motion .split .w > span { display: inline-block; transform: translate3d(0, 105%, 0); opacity: 0;
  transition: transform .9s var(--ease) var(--d, 0s), opacity .9s var(--ease) var(--d, 0s); }
.motion .split.is-in .w > span { transform: none; opacity: 1; }

/* ---------- How it works: timeline draws through the dots ---------- */
.motion .flow::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .2s; }
.motion .flow.is-in::before { transform: scaleX(1); }
.motion .flow li:last-child .dot.is-in { animation: dot-pulse 2.4s ease-out 1.4s infinite; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,134,232,.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(47,134,232,0); } }

/* Phase lines draw from left to right */
.motion .phase-row span { border-top-color: transparent; position: relative; }
.motion .phase-row span::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%;
  background: var(--paper-ink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease);
}
.motion .phase-row span:last-child::before { background: var(--blue); transition-delay: .5s; }
.motion .phase-row.is-in span::before { transform: scaleX(1); }

/* ---------- Devices: icons draw themselves ---------- */
.motion .device svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .3s; }
.motion .device svg.is-in * { stroke-dashoffset: 0; }
.device { transition: transform .35s ease, box-shadow .35s ease; }
.device:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(98,170,255,.35); }
.motion .device.is-in { transition: transform .35s ease, box-shadow .35s ease, opacity .9s ease; }
.motion .device.is-in:hover { transform: translateY(-6px); }

/* ---------- Problem → answer arrows nudge ---------- */
.motion .ps-row.is-in .ps-arrow { display: inline-block; animation: nudge 2.2s ease-in-out 1s infinite; color: var(--blue-hi); }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* ---------- Benefits ---------- */
.ben { overflow: hidden; }
.motion .ben > img.ph { transform: scale(1.2); transition: transform 2.6s var(--ease); }
.motion .ben.is-in > img.ph { transform: scale(1.1); }
/* the existing blue left border is replaced by a line that grows downwards */
.motion .ben-list li { position: relative; border-left-color: transparent; }
.motion .ben-list li::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease) calc(var(--d, 0s) + .3s); }
.motion .ben-list li.is-in::before { transform: scaleY(1); }

/* ---------- Tiles: photo zooms, caption follows ---------- */
.tile { overflow: hidden; }
.tile > img.ph { transition: transform .9s var(--ease); }
.tile:hover > img.ph { transform: scale(1.06); }

/* ---------- Buttons: a light sweep runs across the primary CTAs ---------- */
.motion .btn:not(.ghost) { position: relative; overflow: hidden; }
.motion .btn:not(.ghost)::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: shine 5s ease-in-out 2s infinite;
}
@keyframes shine { 0%, 70% { transform: translateX(-160%) skewX(-20deg); } 85%, 100% { transform: translateX(360%) skewX(-20deg); } }

/* ---------- Scroll progress + compact nav ---------- */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 20; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-hi)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.motion .nav .wrap { transition: padding .35s var(--ease); }
.motion .nav.is-compact .wrap { padding-block: 8px; }
.motion .nav .logo img { transition: height .35s var(--ease); }
.motion .nav.is-compact .logo img { height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal], .motion .split .w > span { opacity: 1; transform: none; clip-path: none; }
}