/* Motion (SPEC.md section 3). Calm, and off with prefers-reduced-motion:
   html.motion is set in <head> only when reduced motion is NOT requested. */

/* ---------- Page transitions: 400ms fade between pages (card click, back links) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 400ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Curve for every entrance: soft start, long settle. Only opacity and transform are animated. */
:root { --ease-in-view: cubic-bezier(0.33, 1, 0.68, 1); }

/* ---------- Section reveal: 12px rise (1200ms) + fade (1400ms), once (js/main.js adds .is-in) ---------- */
.motion :is(
  .projects .section-label, .projects__grid > *,
  .about .section-label, .about__intro, .about__divider, .fact,
  .contact .section-label, .contact__intro, .contact .form,
  .case-hero .container > *, .case-section > .container > *, .case-about .container > *,
  .notfound .container > *
) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1400ms var(--ease-in-view), transform 1200ms var(--ease-in-view);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion .is-in { opacity: 1 !important; transform: none !important; }

/* ---------- Home first screen (js/main.js adds .hero-in once Inter and the photo are ready, +200ms) ----------
   Photo: fade 1800ms, scale 1.03 → 1 over 2400ms. Text 300ms after the photo starts:
   tag line → heading → buttons, 200ms apart, 12px rise over 1400ms, fade 1600ms. The header is not animated.
   Hidden start states live here, so nothing flashes before the start. */
.motion .hero__photo { opacity: 0; transform: scale(1.03); }
.motion :is(.hero__tags, .hero__title, .hero__text > .btn-row) { opacity: 0; transform: translateY(12px); }
.motion .hero-in .hero__photo {
  opacity: 1;
  transform: none;
  transition: opacity 1800ms var(--ease-in-view), transform 2400ms var(--ease-in-view);
}
.motion .hero-in :is(.hero__tags, .hero__title, .hero__text > .btn-row) {
  opacity: 1;
  transform: none;
  transition: opacity 1600ms var(--ease-in-view), transform 1400ms var(--ease-in-view);
  transition-delay: 300ms;
}
.motion .hero-in .hero__text > .hero__title { transition-delay: 500ms; } /* same weight as the :is() rule above, so the delay wins */
.motion .hero-in .hero__text > .btn-row { transition-delay: 700ms; }
.motion .hero__photo.is-animating { will-change: transform, opacity; } /* only while it runs (smooth on iOS Safari) */

/* ---------- Arrow loop (Figma "Arrow / Loop" 55:347): 10px right and back, 900ms each way ---------- */
@keyframes arrow-nudge { to { translate: 10px 0; } }
.motion .arrow-loop { animation: arrow-nudge 900ms ease-in-out infinite alternate; }

/* ---------- Project card hover (Figma 64:560), mouse only ---------- */
.card__cover { position: relative; }
.card__hover { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card__cover img { transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
  .card__hover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(0 0 0 / 0.45);
    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .card__hover-circle {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e9e9e9; /* Figma 64:605 */
    color: var(--button-primary);
    transform: translateY(16px);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .card__hover-circle .icon { width: 32px; height: 32px; }
  .card:hover .card__hover { opacity: 1; }
  .card:hover .card__hover-circle { transform: none; }
  .card:hover .card__cover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  /* keep the hover states, without movement or fades */
  .card__cover img, .card__hover, .card__hover-circle { transition: none !important; }
  .card:hover .card__cover img { transform: none; }
  .card__hover-circle { transform: none !important; }
}