/* Motion is progressive enhancement: the original layout stays visible without JS. */
.motion-enabled .hero-art {
  perspective: 1200px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

.motion-enabled .depth-layer {
  transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), var(--depth-z, 0px))
    rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg))
    rotate(var(--base-rotation, 0deg));
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1), box-shadow 420ms ease;
}

.motion-enabled .photo-note {
  box-shadow: 0 18px 30px -14px #23241f45, 0 3px 8px #23241f16;
}

.motion-enabled .project-image {
  transform: perspective(850px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
  transition: transform 350ms cubic-bezier(.2, .7, .2, 1), box-shadow 350ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .motion-enabled .project-image:hover {
    box-shadow: 0 18px 28px -17px #23241f70;
  }
  .motion-enabled .project-image .image-open {
    transition: background 200ms ease, rotate 350ms ease;
  }
  .motion-enabled .project-image:hover .image-open {
    rotate: 45deg;
  }
}

.motion-enabled .reveal-ready {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 700ms ease var(--reveal-delay, 0ms),
    translate 700ms cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms);
}

.motion-enabled .reveal-ready.is-revealed,
.motion-enabled .reveal-ready:focus-within {
  opacity: 1;
  translate: 0 0;
}

.motion-enabled .smile-sticker {
  animation: sticker-float 7s ease-in-out infinite;
  animation-play-state: paused;
}

.motion-enabled .heading-star {
  animation: star-turn 12s ease-in-out infinite;
  animation-play-state: paused;
}

.motion-enabled.motion-hero-visible .smile-sticker,
.motion-enabled.motion-hero-visible .heading-star {
  animation-play-state: running;
}

@keyframes sticker-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes star-turn {
  0%, 100% { rotate: -8deg; }
  50% { rotate: 20deg; }
}

.footer-bottom #motion-toggle {
  width: auto;
  white-space: nowrap;
  padding: 0;
  order: 0;
  text-align: left;
}

#motion-toggle:hover { color: var(--accent); }
#motion-toggle:disabled { cursor: default; color: var(--muted); }

html.motion-paused { scroll-behavior: auto; }
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation: none !important;
  transition: none !important;
}
.motion-paused .project-image:hover img,
.motion-paused .button:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .depth-layer,
  .motion-enabled .project-image {
    transform: none;
  }
  .motion-enabled .reveal-ready {
    opacity: 1;
    translate: none;
  }
  .motion-enabled .smile-sticker,
  .motion-enabled .heading-star {
    animation: none;
  }
}