/* Motion — preview only, 26 October 2026. Loaded after refined.css; delete motion.css and motion.js to return to a still page.
   Reference: the Apple (España) style on styles.refero.design. What it takes from that page:
   - headings arrive pale and sharpen to full ink as they reach the reader;
   - content rises into place on scroll, cards one after another;
   - figures count up when they come into view;
   - portfolio tiles drift at two speeds, like the floating product collage;
   - a frosted header that lets the page show through.
   Every hidden starting state waits for html.motion, which the head script sets only when the visitor allows motion,
   so the page reads in full without JavaScript or with reduced motion. */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- frosted header ---------- */
.site-header { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }

/* ---------- hero: the lines arrive in order on load ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.motion .hero-group .eyebrow, .motion .hero-group .hero-ask, .motion .hero-group h1 .h1-line, .motion .hero-group .lead,
.motion .hero-group .hero-actions, .motion .page-hero .container > div:first-child > * { animation: rise .9s var(--ease-out) both; }
.motion .hero-group .hero-ask { animation-delay: .08s; }
.motion .hero-group h1 .h1-line:first-child { animation-delay: .16s; }
.motion .hero-group h1 em.h1-line { animation-delay: .28s; }
.motion .hero-group .lead { animation-delay: .4s; }
.motion .hero-group .hero-actions { animation-delay: .52s; }
.motion .page-hero .container > div:first-child > :nth-child(2) { animation-delay: .1s; }
.motion .page-hero .container > div:first-child > :nth-child(3) { animation-delay: .2s; }
.motion .page-hero .container > div:first-child > :nth-child(n+4) { animation-delay: .3s; }

/* ---------- scroll reveals (motion.js marks the elements) ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), border-color .18s, color .18s; transition-delay: var(--d, 0s); }
/* Section headings start pale rather than invisible, then sharpen: the Apple headline effect. */
.motion [data-reveal="head"] { opacity: .12; transform: translateY(16px); transition-duration: 1.2s, 1.2s, .18s, .18s; }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Portfolio images settle from a slight zoom as their tile arrives, and lean in on hover. */
.work-tile img { transition: transform 1.4s var(--ease-out); }
.motion .work-grid > [data-reveal]:not(.is-in) img { transform: scale(1.08); }
.work-tile:hover img { transform: scale(1.04); }
.work-grid > li { will-change: translate; }

/* Process timeline: each step's stretch of line fills as the step arrives, so the line runs through in order. */
.motion .step::after { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform 1s var(--ease-out); transition-delay: calc(var(--d, 0s) + .2s); }
html[dir="ltr"] .motion .step::after { transform-origin: 0 50%; }
.motion .section-dark .step::after { background: var(--aqua); }
.motion .step.is-in::after { transform: scaleX(1); }
@media (max-width: 899px) {
  .motion .step::after { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: -1px; width: 2px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .motion .step.is-in::after { transform: scaleY(1); }
}
.motion .steps.stack .step::after { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: -1px; width: 2px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
.motion .steps.stack .step.is-in::after { transform: scaleY(1); }

/* Figures keep their width steady while counting. */
.count { font-variant-numeric: tabular-nums; }