/* Content remains fully visible when JavaScript, observers or motion are off. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

.project-card { --motion-rest-transform: none; }
.project-card.turntable { --motion-rest-transform: rotate(-8deg); }
.project-card.joliemap { --motion-rest-transform: rotate(-9deg); }
.project-card.classic { --motion-rest-transform: rotate(-5deg); }

html[data-motion="ready"] .project-card .project-visual {
  translate: var(--motion-x, 0px) calc(var(--motion-y, 0px) + var(--scroll-y, 0px));
  transition: transform .72s var(--motion-ease), translate .5s var(--motion-ease);
}

.project-card .card-arrow {
  transition: transform .4s var(--motion-ease), background .25s, color .25s;
}

.project-card:focus-visible .card-arrow {
  background: var(--ink);
  color: var(--cream);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-card:hover .card-arrow,
  .project-card:focus-visible .card-arrow { transform: none; }
  .archive-row[open] .archive-detail { animation: detail-enter .4s var(--motion-ease) both; }
}

/* A tap opens a project directly. No label or action requires a hover state. */
@media (hover: none), (pointer: coarse) {
  .project-card:hover .project-visual { transform: var(--motion-rest-transform); }
  .project-card:hover .card-bottom { padding-bottom: 30px; }
  .project-card:hover .card-arrow { transform: none; background: transparent; color: inherit; }
  .joliemap:hover .project-visual img:first-child { transform: translate(-25px, -5px) rotate(-8deg); }
  .joliemap:hover .project-visual img:last-child { transform: translate(45px, -5px) rotate(14deg); }
  .popbrique:hover .project-visual img:last-child { clip-path: inset(0 50% 0 0); }
}

@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
  .project-card:hover .card-bottom { padding-bottom: 24px; }
}

@media (max-width: 760px) {
  .project-card.turntable { --motion-rest-transform: rotate(-8deg); }
  #mobile-nav:not([hidden]) { animation: menu-enter .28s var(--motion-ease) both; }
}

/* The loader is opt-in: a blocked or failed script can never obscure the site. */
.loader { display: none; }
.loader.is-active:not([hidden]) {
  display: flex;
  overflow: hidden;
  min-height: 100svh;
  transition: transform .35s cubic-bezier(.76, 0, .24, 1), visibility .35s;
}
.loader.leaving { transform: translateY(-102%); pointer-events: none; }
.loader-caption { display: none; }
#loader-animation {
  width: min(650px, 82vw);
  aspect-ratio: 708 / 336;
  min-height: 0;
}
#loader-animation svg { display: block; width: 100%; height: 100%; }
/* The supplied logo uses only solid fills; avoid filtering every SVG frame. */
#loader-animation svg path { fill: white; }
#skip-loader {
  bottom: max(28px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 12px 4px;
  color: var(--ink);
}
#skip-loader:focus-visible { outline-color: white; }

@keyframes detail-enter {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes menu-enter {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader { display: none !important; }
  .project-card .project-visual{ translate: none !important; rotate: none !important; }
  .project-card:hover .project-visual { transform: var(--motion-rest-transform); }
  .project-card:hover .card-arrow { transform: none; }
  #mobile-nav:not([hidden]), .archive-detail { animation: none; }
}