/* effects.css — motion layer: page transitions + scroll reveals
   Loaded on index, portfolio, and project pages. */

/* ── Cross-page crossfade ─────────────────────────────────────
   View Transitions API: same-origin navigations crossfade instead
   of hard-flashing. Ignored entirely by unsupported browsers. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

/* ── Scroll reveals ───────────────────────────────────────────
   Added by effects.js only when JS + IntersectionObserver exist,
   so no-JS visitors always see content. Classes are removed after
   the animation finishes so card hover styles behave normally. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal--in {
  opacity: 1;
  transform: none;
}

/* ── Mobile / touch polish ────────────────────────────────────── */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* Cards can't hover on touch — give a quick press response instead */
@media (hover: none) {
  .card:active {
    transform: scale(0.985);
    transition: transform 90ms ease;
  }
}

/* Respect notches / home indicator on phones (with viewport-fit=cover) */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}