/* GoPoTa motion: visible content first, short responses to scroll and input.
   The header morph and product palettes remain in brand.css / brand.js. */
:root {
  --motion-settle: cubic-bezier(.2,.75,.2,1);
  --motion-press: cubic-bezier(.22,1,.36,1);
}

.brand-object[data-pass-object] {
  --pass-tilt-x: 0deg;
  --pass-tilt-y: 0deg;
  --pass-light-offset: -22%;
  --pass-scroll-y: 0px;
  --pass-scroll-turn: 0deg;
  --pass-scroll-light: 0%;
  transform: perspective(1100px) translate3d(0,var(--pass-scroll-y),0) rotateX(var(--pass-tilt-x)) rotateY(var(--pass-tilt-y)) rotateZ(var(--pass-scroll-turn));
  transition: transform 420ms var(--motion-settle);
}
.brand-object.is-tracking {
  transition-duration: 100ms;
  will-change: transform;
}
.brand-pass::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -5% -35%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255,255,255,.02) 40%, rgba(255,255,255,.2) 49%, rgba(255,255,255,.035) 56%, transparent 64%);
  transform: translate3d(calc(var(--pass-light-offset, -22%) + var(--pass-scroll-light, 0%)),0,0);
  opacity: .65;
  transition: transform 420ms var(--motion-settle), opacity 240ms ease;
}
.brand-pass--back::before { opacity: .45; }
.brand-object.is-tracking .brand-pass::before { transition-duration: 100ms; opacity: .9; }
.brand-pass {
  transition: transform 340ms var(--motion-settle), box-shadow 340ms var(--motion-settle), filter 140ms ease;
}
.brand-pass:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}
.brand-btn:focus-visible,
.brand-link:focus-visible,
.brand-product:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }

.brand-btn > span,
.brand-link > span,
.brand-hero-foot a > span,
.brand-pass-bottom > span:last-child {
  transition: transform 240ms var(--motion-settle);
}
.brand-product-art > .gp-art,
.brand-product-art .app-cover__img {
  transition: transform 500ms var(--motion-settle);
}
.brand-product-art { overflow: hidden; }

/* A single travelling highlight accompanies the product artwork's arrival. */
.page-product .app-main > .gp-art,
.page-product .app-main > .app-cover { isolation: isolate; overflow: hidden; }
.page-product .app-main > .gp-art::after,
.page-product .app-main > .app-cover::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.15) 42%, transparent 66%);
}
@media (prefers-reduced-motion: no-preference) {
  .page-product .app-main > .is-art-arriving::after { animation: brand-art-light 1100ms var(--motion-settle) both; }
}
@keyframes brand-art-light {
  0% { transform: translateX(-45%); opacity: 0; }
  24% { opacity: 1; }
  100% { transform: translateX(45%); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand-btn:hover > span,
  .brand-link:hover > span,
  .brand-pass:hover .brand-pass-bottom > span:last-child { transform: translateX(3px); }
  .brand-hero-foot a:hover > span { transform: translateY(3px); }
  .brand-product:hover .brand-product-art > .gp-art,
  .brand-product:hover .brand-product-art .app-cover__img { transform: scale(1.025); }
  .brand-pass:hover {
    box-shadow: 0 35px 38px -18px #172b2370, 0 3px 3px #12271f22, inset 0 1px 0 #ffffff45;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .brand-btn.is-released { animation: brand-button-release 260ms var(--motion-press); }
  .brand-pass:active { filter: brightness(1.08); }
  .brand-product:active .brand-product-art > .gp-art,
  .brand-product:active .brand-product-art .app-cover__img { transform: scale(.99); transition-duration: 120ms; }
}
@keyframes brand-button-release {
  from { transform: scale(.98); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-object[data-pass-object] { transform: none; transition: none; }
  .brand-pass,
  .brand-pass::before,
  .brand-btn,
  .brand-btn > span,
  .brand-link > span,
  .brand-hero-foot a > span,
  .brand-pass-bottom > span:last-child,
  .brand-product-art > .gp-art,
  .brand-product-art .app-cover__img,
  .page-product .app-main > .gp-art::after,
  .page-product .app-main > .app-cover::after { animation: none !important; transition: none !important; }
  .brand-pass::before { transform: translate3d(-22%,0,0); }
}