/* Motion layers share one transform, so reveal and pointer tilt never overwrite one another. */
.scroll-progress {
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

.motion-enabled .tilt-card,
.motion-enabled .reveal.motion-observed {
  transform: perspective(1400px) translate3d(0, var(--enter-y, 0px), 0)
    rotateX(calc(var(--enter-turn, 0deg) + var(--tilt-x, 0deg)))
    rotateY(var(--tilt-y, 0deg)) scale(var(--enter-scale, 1));
  transform-origin: center center;
  transition: opacity 700ms ease, transform 1000ms cubic-bezier(.16, 1, .3, 1);
}

.motion-enabled .reveal.motion-observed {
  --enter-y: 38px;
  --enter-turn: 2deg;
  --enter-scale: .985;
  opacity: 0;
}

.motion-enabled .reveal.motion-observed.is-visible,
.motion-enabled .reveal.motion-observed:focus-within {
  --enter-y: 0px;
  --enter-turn: 0deg;
  --enter-scale: 1;
  opacity: 1;
  transition-delay: var(--motion-stagger, 0ms);
}

.motion-enabled .tilt-card {
  position: relative;
  isolation: isolate;
  backface-visibility: hidden;
}

.motion-enabled .tilt-card.is-tilting {
  transition-duration: 180ms;
  transition-delay: 0ms;
}

.motion-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.motion-sheen::before {
  content: '';
  position: absolute;
  inset: -30% -80%;
  opacity: 0;
  background: linear-gradient(112deg, transparent 40%, rgb(255 255 255 / .015) 46%, rgb(255 255 255 / .09) 50%, rgb(255 255 255 / .015) 54%, transparent 60%);
  animation: vetro-sheen 9s cubic-bezier(.45, 0, .3, 1) infinite;
  animation-delay: var(--motion-stagger, 0ms);
  animation-play-state: paused;
}

.motion-sheen::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 0%), rgb(255 255 255 / .12), transparent 58%);
  transition: opacity 350ms ease;
}

.motion-enabled .tilt-card.is-inview > .motion-sheen::before { animation-play-state: running; }
.motion-enabled .tilt-card.is-tilting > .motion-sheen::after { opacity: 1; }

.motion-enabled .parallax-photo { overflow: hidden; }
.motion-enabled .parallax-photo img {
  transform: translate3d(0, var(--photo-shift, 0px), 0) scale(1.09);
  transition: transform 420ms cubic-bezier(.2, .7, .3, 1);
}

/* Color selection is functional; the light preview itself does not tilt or drift. */
.motion-enabled .light-preview { transform: none !important; }

.motion-toggle:disabled { cursor: default; opacity: .6; }
.motion-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.motion-enabled dialog[open] {
  animation: vetro-dialog-enter 420ms cubic-bezier(.16, 1, .3, 1) both;
}
.motion-enabled dialog[open]::backdrop { animation: vetro-backdrop-enter 300ms ease both; }

@keyframes vetro-sheen {
  0%, 52% { transform: translate3d(-75%, 0, 0); opacity: 0; }
  60% { opacity: 1; }
  82%, 100% { transform: translate3d(75%, 0, 0); opacity: 0; }
}
@keyframes vetro-dialog-enter {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vetro-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

.motion-page-hidden *,
.motion-page-hidden *::before,
.motion-page-hidden *::after,
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after { animation-play-state: paused !important; }

.motion-paused .reveal,
.motion-paused .tilt-card,
.motion-reduced .reveal,
.motion-reduced .tilt-card {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.motion-paused .parallax-photo img,
.motion-reduced .parallax-photo img { transform: none !important; transition: none !important; }
.motion-paused .motion-sheen,
.motion-reduced .motion-sheen { display: none; }
.motion-paused dialog,
.motion-paused dialog::backdrop,
.motion-reduced dialog,
.motion-reduced dialog::backdrop { animation: none !important; }

/* The user's opening composition stays still, including all decorative descendants. */
.hero--static,
.hero--static *,
.hero--static *::before,
.hero--static *::after { animation: none !important; transition: none !important; }
.hero--static .reveal,
.hero--static .tilt-card,
.hero--static .parallax-photo img { opacity: 1 !important; transform: none !important; }
.hero--static .motion-sheen { display: none !important; }

@media (max-width: 720px) {
  .motion-enabled .reveal.motion-observed { --enter-y: 26px; --enter-turn: 0deg; --enter-scale: .99; }
  .motion-enabled .reveal.motion-observed.is-visible,
  .motion-enabled .reveal.motion-observed:focus-within { --enter-y: 0px; --enter-scale: 1; }
  .motion-enabled .parallax-photo img { transform: translate3d(0, var(--photo-shift, 0px), 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .motion-enabled .reveal,
  .motion-enabled .tilt-card,
  .motion-enabled .parallax-photo img { opacity: 1 !important; transform: none !important; }
  .motion-sheen { display: none !important; }
}