/* ==========================================================================
   Motion layer — everything that moves lives here and in js/motion.js.
   Remove the two motion tags from a page's <head> to get the still baseline.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-distance: 0.6rem;     /* how far things rise as they appear */
  --reveal-duration: 500ms;
  --hover-zoom: 1.015;           /* thumbnail zoom on the home page */
  --page-out: 140ms;             /* page-to-page fade */
  --page-in: 260ms;
}

/* ---- 1. Scroll reveal (classes are added by js/motion.js) --------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- 2. Page-to-page transitions (Chrome, Safari, Edge) --------------- */
  @view-transition { navigation: auto; }

  .sidebar { view-transition-name: sidebar; }   /* stays put between pages */

  /* a project's first image morphs to and from its home-page thumbnail */
  body:not([data-page="home"]) main > .bodycopy > .cols:first-child > .col > .media:first-of-type {
    view-transition-name: hero;
  }

  ::view-transition-old(root) { animation: page-out var(--page-out) ease-in both; }
  ::view-transition-new(root) { animation: page-in var(--page-in) var(--ease-out) 60ms both; }
  ::view-transition-group(hero) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }

  @keyframes page-out { to { opacity: 0; } }
  @keyframes page-in { from { opacity: 0; } }

  /* ---- 3. Hover --------------------------------------------------------- */
  /* home thumbnails: slow zoom inside the frame */
  a.media { overflow: hidden; }
  a.media img { transition: transform 600ms var(--ease-out); }
  a.media:hover img { transform: scale(var(--hover-zoom)); }

  /* "More details →": the arrow leans forward, also when the thumbnail is hovered */
  .bodycopy a .icon { transition: transform 300ms var(--ease-out); }
  .bodycopy a:hover > .icon,
  .cols:has(a.media:hover) a > .icon { transform: translateX(0.2em); }
  /* back arrows on project pages lean the other way */
  body:not([data-page="home"]) main .cols:first-child a:hover .icon { transform: translateX(-0.2em); }

  /* ---- 4. Lightbox ------------------------------------------------------ */
  .lightbox.is-open img,
  .lightbox.is-open video { animation: lightbox-in 220ms var(--ease-out) both; }
  @keyframes lightbox-in { from { opacity: 0; } }
}