/* ==========================================================
   Motion layer, shared by index.html and the three case pages.
   Subtle by design: short, soft, never in the way of reading.
   Everything is disabled under prefers-reduced-motion.
   ========================================================== */

:root {
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Page transitions (same-origin, progressive) ---------- */
@view-transition { navigation: auto; }
@keyframes mo-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-fade-out { from { opacity: 1; } to { opacity: 0; } }
::view-transition-old(root) { animation: mo-fade-out .2s ease both; }
::view-transition-new(root) { animation: mo-fade-in .35s var(--mo-ease) both; }

/* ---------- Scroll reveal ----------
   Hidden only when JS is running (html.js), so content is never lost.
   motion.js removes these classes once the animation has finished,
   so each element goes back to its own native styles and hovers. */
html.js .mo-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .7s var(--mo-ease), transform .7s var(--mo-ease);
  transition-delay: var(--mo-d, 0ms);
  will-change: opacity, transform;
}
html.js .mo-reveal.mo-img { transform: translate3d(0, 24px, 0) scale(.985); }
html.js .mo-reveal.mo-in  { opacity: 1; transform: none; }

/* ---------- Hover and navigation ---------- */
.nav__links a { position: relative; transition: opacity .2s ease; }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .35s var(--mo-ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.back-link .arrow { transition: transform .3s var(--mo-ease); }
.back-link:hover .arrow { transform: translateX(-4px) scaleX(-1); }

/* homepage case cards: soft zoom of the preview */
.card .case__media-inner img,
.card .case__media-inner video { transition: transform .9s var(--mo-ease); }
.card:hover .case__media-inner img,
.card:hover .case__media-inner video { transform: scale(1.03); }

/* "Other cases" cards on the case pages */
.project-card { transition: opacity .25s ease; }
.project-card__image img { transition: transform .6s var(--mo-ease); }
.project-card:hover .project-card__image img { transform: translateY(-4px) scale(1.02); }

/* ---------- Reading progress (case pages) ---------- */
#mo-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; background: #111;
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 100; pointer-events: none;
}

/* ---------- Accessibility and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .mo-reveal,
  html.js .mo-reveal.mo-img { opacity: 1; transform: none; transition: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .card .case__media-inner img,
  .card .case__media-inner video,
  .project-card__image img,
  .back-link .arrow,
  .nav__links a::after { transition: none; }
  .card:hover .case__media-inner img,
  .card:hover .case__media-inner video,
  .project-card:hover .project-card__image img { transform: none; }
  #mo-progress { display: none; }
}
@media print {
  html.js .mo-reveal { opacity: 1; transform: none; transition: none; }
  #mo-progress { display: none; }
}