html.motion { scroll-behavior: smooth; }

.motion .header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  pointer-events: none;
  background: #e4e5e8;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}
.motion .page-home .header:not([data-open="true"]) {
  background: rgb(5 5 5 / var(--header-opacity, .56));
  transition-property: border-color;
}

.motion .hero {
  --hero-runway: clamp(140px, 22svh, 250px);
}
.motion .hero::after { content: ""; display: block; height: var(--hero-runway); }
.motion .hero-scene { position: sticky; top: 0; }
.motion .hero-image {
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(var(--hero-scale, 1.035));
  transform-origin: 65% 52%;
}
.motion .hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #050505 0%, #05050528 66%);
  opacity: var(--hero-grade, 0);
}
.motion .hero-copy {
  opacity: var(--hero-copy-opacity, 1);
  transform: translate3d(0, var(--hero-copy-y, 0px), 0);
}
.motion .hero h1 { transform: translate3d(0, var(--hero-mark-y, 0px), 0); }
.motion .hero-company, .motion .hero h1 img, .motion .hero-mantra, .motion .hero-en {
animation: hero-enter 580ms var(--ease-out) backwards;
}
.motion .hero h1 img { animation-delay: 70ms; }
.motion .hero-mantra { animation-delay: 130ms; }
.motion .hero-en { animation-delay: 180ms; }

@keyframes hero-enter {
from { opacity: .42; translate: 0 23px; }
to { opacity: 1; translate: 0 0; }
}
.motion .hero-next {
  opacity: var(--hero-cue-opacity, 1);
  transform: translate3d(0, var(--hero-cue-y, 0px), 0);
}
.motion .hero-copy:has(:focus-visible), .motion .hero-next:focus-visible {
  opacity: 1;
  transform: none;
}
.motion .hero-next .round-icon svg { transition: transform var(--motion-fast) var(--ease-out); }
.motion .hero-next:hover .round-icon svg { transform: translateY(3px); }

.motion .manifesto {
  --sheet-lip: clamp(32px, 5vw, 72px);
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--sheet-lip));
  border-radius: var(--sheet-lip) var(--sheet-lip) 0 0;
}
.motion .manifesto-art { position: sticky; top: calc(var(--header-height) + 44px); }
.motion .manifesto-art .focus-lines, .motion .compact-diagram .focus-lines {
  transform: scale(var(--focus-scale, 1));
}
.motion .manifesto-step > :not(svg) {
  opacity: var(--reading-opacity, 1);
  transform: translate3d(0, var(--reading-y, 0px), 0);
}

.motion .product-section { position: relative; isolation: isolate; overflow: clip; }
.motion .product-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 80% 42%, #50575e80, transparent 64%);
  opacity: var(--media-light, 0);
}
.motion .product-lamora::before {
  background: radial-gradient(ellipse at 23% 45%, #fff9ee, transparent 64%);
}
.motion .product-copy > :not(a), .motion .product-window {
  opacity: var(--arrival-opacity, 1);
  transform: translate3d(0, var(--arrival-y, 0px), 0);
}
.motion .product-copy .product-name { transform: translate3d(0, var(--title-y, 0px), 0); }
.motion .product-window {
  transform: translate3d(var(--media-x, 0px), var(--arrival-y, 0px), 0) scale(var(--media-scale, 1));
}
.motion .product-window img {
  transform: translate3d(0, var(--image-y, 0px), 0) scale(var(--image-scale, 1));
}
.motion .product-media figcaption { opacity: var(--arrival-opacity, 1); }
.motion .product-media:focus-within figcaption { opacity: 1; }

.motion .section-heading > *, .motion .about-teaser-inner, .motion .detail-info > h2,
.motion .about-content > *, .motion .about-projects .shell, .motion .footer-grid {
  opacity: var(--reading-opacity, 1);
  transform: translate3d(0, var(--reading-y, 0px), 0);
}
.motion .about-teaser-inner:has(:focus-visible), .motion .about-projects .shell:has(:focus-visible),
.motion .footer-grid:has(:focus-visible) {
  --reading-opacity: 1;
  --reading-y: 0px;
}

.motion .pill { transition-property: background-color, border-color, color, scale; }
.motion .pill:active { scale: .97; }
.motion .pill[data-arrow="down"]:hover svg { transform: translateY(3px); }
.motion .pill[data-arrow="upRight"]:hover svg, .motion .header-cta:hover svg { transform: translate(2px, -2px); }
.motion .header-cta svg { transition: transform var(--motion-fast) var(--ease-out); }

@media (max-width: 800px) {
  .motion .hero { --hero-runway: clamp(70px, 12svh, 120px); }
  .motion .manifesto { --sheet-lip: 27px; }
  .motion .mobile-nav {
    opacity: 0;
    translate: 0 -8px;
    transition: opacity 230ms ease, translate 230ms var(--ease-out), display 230ms allow-discrete;
  }
  .motion .header[data-open="true"] .mobile-nav { opacity: 1; translate: 0 0; }
  @starting-style {
    .motion .header[data-open="true"] .mobile-nav { opacity: 0; translate: 0 -8px; }
  }
}

@media (max-height: 540px) {
  .motion .hero { --hero-runway: 0px; }
  .motion .hero-scene { position: relative; }
  .motion .manifesto { --sheet-lip: 0px; }
  .motion .manifesto-art { position: static; }
}