/* Small hover motion shared by every page (loaded last). script.js marks each text arrow inside
   a link with data-arrow so it can move the way it points; everything here is cosmetic. */

/* Arrows: a short nudge in their own direction. */
a [data-arrow] {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}

a:hover [data-arrow="right"],
a:focus-visible [data-arrow="right"] { transform: translateX(4px); }
a:hover [data-arrow="left"],
a:focus-visible [data-arrow="left"] { transform: translateX(-4px); }
a:hover [data-arrow="up"],
a:focus-visible [data-arrow="up"] { transform: translateY(-3px); }
a:hover [data-arrow="out"],
a:focus-visible [data-arrow="out"] { transform: translate(3px, -3px); }

/* Header links: the current page's underline fades in under the others on hover. */
:root[data-theme] .site-header .nav a:not([aria-current="page"]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  text-decoration-color: transparent;
  transition: color 180ms ease, text-decoration-color 220ms ease;
}

:root[data-theme] .site-header .nav a:not([aria-current="page"]):hover {
  text-decoration-color: currentColor;
}

/* Homepage project cards: the still eases in a touch, as on the Art cards. */
.home-project-media img {
  transition: opacity 180ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1);
}

.home-project-card:hover .home-project-media img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  a [data-arrow],
  .home-project-media img {
    transition: none;
    transform: none !important;
  }
}

/* Theme button: the button and its iris (script.js) stay live, outside the page's crossfade,
   so the icon never fades from one drawing into the other. */
.theme-toggle {
  view-transition-name: theme-aperture;
}

::view-transition-old(theme-aperture) {
  display: none;
}

::view-transition-new(theme-aperture) {
  animation: none;
}

/* Theme button: no ring of its own (the aperture has its rim); a soft glow on hover instead. */
.theme-toggle,
.theme-toggle:hover {
  border-color: transparent;
}

.theme-toggle {
  transition: background-color 200ms ease;
}

.theme-toggle:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/* Page load on the homepage: the hero still fades in when it arrives (script.js), and the
   hero text settles in line by line. */
.home-hero-bg { transition: opacity 700ms ease; }
.home-hero-bg.is-still-loading { opacity: 0; transition: none; }
@keyframes hero-copy-arrive { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  .home-hero-copy > *, .home-hero .home-actions, .home-hero .home-showreel-note {
    animation: hero-copy-arrive 700ms cubic-bezier(.2,.7,.2,1) both;
  }
  .home-hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .home-hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .home-hero .home-actions { animation-delay: 270ms; }
  .home-hero .home-showreel-note { animation-delay: 340ms; }
}
@media (prefers-reduced-motion: reduce) { .home-hero-bg { transition: none; } }

/* The client strip follows the hero text in, one mark after another; marks lift a little on hover. */
@media (prefers-reduced-motion: no-preference) {
  .home-proof-label, .home-experience-list li {
    animation: hero-copy-arrive 700ms cubic-bezier(.2,.7,.2,1) 380ms both;
  }
  .home-experience-list li:nth-child(1) { animation-delay: 440ms; }
  .home-experience-list li:nth-child(2) { animation-delay: 500ms; }
  .home-experience-list li:nth-child(3) { animation-delay: 560ms; }
  .home-experience-list li:nth-child(4) { animation-delay: 620ms; }
  .home-experience-list li:nth-child(5) { animation-delay: 680ms; }
  .home-experience-logo { transition: opacity 160ms ease, transform 260ms cubic-bezier(.2,.7,.2,1); }
  .home-experience-logo:hover, .home-experience-logo:focus-visible { transform: translateY(-2px); }
}

/* Homepage and Work sections below the first screen rise in as they are reached (script.js).
   Art pages are left still on purpose. */
.will-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 750ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.will-reveal.is-revealed { opacity: 1; transform: none; }

/* Page entrances across the site. The header drifts down into place on every page; each page's
   first screen settles in the way the homepage hero does. Art pages only fade, slowly, with no
   movement: the work there should arrive quietly. */
@keyframes header-arrive { from { opacity: 0; transform: translateY(-8px); } }
@keyframes art-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  body > .site-header { animation: header-arrive 600ms cubic-bezier(.2,.7,.2,1) both; }

  /* Work category pages */
  .work-hero > * { animation: hero-copy-arrive 700ms cubic-bezier(.2,.7,.2,1) 80ms both; }
  .work-hero > :nth-child(2) { animation-delay: 170ms; }
  .work-hero > :nth-child(3) { animation-delay: 260ms; }

  /* Single project pages */
  .work-project-back { animation: hero-copy-arrive 700ms cubic-bezier(.2,.7,.2,1) 60ms both; }
  .work-project-hero-grid > :first-child > * { animation: hero-copy-arrive 700ms cubic-bezier(.2,.7,.2,1) 120ms both; }
  .work-project-hero-grid > :first-child > :nth-child(2) { animation-delay: 210ms; }
  .work-project-hero-grid > :first-child > :nth-child(3) { animation-delay: 300ms; }
  .work-project-hero-grid > :nth-child(2) { animation: hero-copy-arrive 900ms cubic-bezier(.2,.7,.2,1) 260ms both; }

  /* Art */
  :is(.art-page-body, .films-page-body, .books-page-body, .installations-page-body,
      .stories-page-body, .story-reading-page, .after-name-body) > main {
    animation: art-arrive 1100ms ease-out 120ms both;
  }
}