:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-soft: cubic-bezier(.2, .7, .2, 1);
}

/* A restrained entrance sequence: the surname reveals the portrait as it moves. */
.motion-enabled .editorial-hero-top,
.motion-enabled .editorial-name,
.motion-enabled .editorial-hero-bottom {
  opacity: 0;
  will-change: opacity, transform;
}

.motion-enabled .editorial-hero-top { transform: translateY(12px); }
.motion-enabled .editorial-name {
  --hero-name-gap: clamp(14px, 1.6vw, 24px);
  --hero-portrait-width: clamp(150px, 1.65em, 304px);
  justify-content: flex-start;
  gap: var(--hero-name-gap);
}

.motion-enabled .editorial-name__portrait {
  clip-path: inset(0 100% 0 0 round 999px);
  opacity: 0;
  transform: rotate(-3deg) scale(.97);
  transform-origin: left center;
  will-change: clip-path, opacity, transform;
}

.motion-enabled .editorial-name em {
  position: relative;
  z-index: 1;
  transform: translateX(calc(clamp(-304px, -1.65em, -150px) - var(--hero-name-gap)));
  will-change: transform;
}

.motion-enabled .editorial-hero-bottom { transform: translateY(18px); }

.motion-enabled.motion-loaded .editorial-hero-top,
.motion-enabled.motion-loaded .editorial-name,
.motion-enabled.motion-loaded .editorial-hero-bottom {
  opacity: 1;
  transition: opacity 680ms var(--motion-ease), transform 680ms var(--motion-ease);
}

.motion-enabled.motion-loaded .editorial-hero-top { transform: none; transition-delay: 40ms; }
.motion-enabled.motion-loaded .editorial-name { transition-delay: 110ms; }

.motion-enabled.motion-loaded .editorial-name__portrait {
  clip-path: inset(0 round 999px);
  opacity: 1;
  transform: rotate(-3deg) scale(1);
  transition:
    clip-path 820ms var(--motion-ease) 470ms,
    opacity 260ms ease 500ms,
    transform 820ms var(--motion-ease) 470ms;
}

.motion-enabled.motion-loaded .editorial-name em {
  transform: none;
  transition: transform 820ms var(--motion-ease) 430ms;
}

.motion-enabled.motion-loaded .editorial-hero-bottom { transform: none; transition-delay: 920ms; }

@media (max-width: 760px) {
  .motion-enabled .editorial-name em {
    transform: none;
    will-change: auto;
  }

  .motion-enabled.motion-loaded .editorial-name em { transition: none; }
}

/* Scroll entrances stay small so the page remains calm while browsing. */
.motion-enabled .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 680ms var(--motion-ease) var(--motion-delay, 0ms),
    transform 680ms var(--motion-ease) var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-enabled .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Never expose an empty project canvas while its artwork is still decoding. */
.reveal--project:not(.is-media-ready) { visibility: hidden; }

/* A project enters only after its artwork has loaded and decoded. */
.motion-enabled .reveal--project.is-visible:not(.is-media-ready) {
  opacity: 0;
  transform: translateY(26px);
}

.motion-enabled .reveal--project.is-visible.is-media-ready {
  opacity: 1;
  transform: none;
}

/* Project hover: depth and focus without making the artwork float around. */
.work-tile__visual {
  transition:
    border-radius 460ms var(--motion-ease),
    box-shadow 460ms var(--motion-ease),
    transform 460ms var(--motion-ease);
}

.work-tile__open { transition: color 240ms ease, transform 240ms ease; }

@media (hover:hover) and (pointer:fine) {
  .work-tile__button:hover .work-tile__visual {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(8, 2, 5, .24);
  }

  .work-tile__button:hover .work-tile__open {
    color: #78172a;
  }
}

/* The detail opens as one surface; its first content blocks follow quietly. */
.project-modal[open] {
  animation: project-modal-in 480ms var(--motion-ease) both;
}

.project-modal[open]::backdrop {
  animation: project-backdrop-in 360ms ease both;
}

.project-modal[open] .project-detail-overview,
.project-modal[open] .art-case-hero {
  animation: project-content-in 620ms var(--motion-ease) both;
}

.project-modal[open] .art-case-hero { animation-delay: 80ms; }

@keyframes project-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes project-backdrop-in {
  from { background-color: transparent; backdrop-filter: blur(0); }
}

@keyframes project-content-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .editorial-hero-top,
  .motion-enabled .editorial-name,
  .motion-enabled .editorial-name__portrait,
  .motion-enabled .editorial-name em,
  .motion-enabled .editorial-hero-bottom,
  .motion-enabled .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .motion-enabled .editorial-name__portrait {
    clip-path: none;
    opacity: 1;
    transform: rotate(-3deg);
  }
  .work-tile__visual,
  .project-modal[open],
  .project-modal[open]::backdrop,
  .project-modal[open] .project-detail-overview,
  .project-modal[open] .art-case-hero {
    transition: none;
    animation: none;
  }
}