@view-transition {
  navigation: none;
}

/* Content is hidden only when JS has confirmed motion is on. */

@media (prefers-reduced-motion: no-preference) {

  /* ---- 1. Curtain ---- */
  /* Arriving from another page: a plain pink cover until motion.js takes over */
  html.curtain-on::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9849;
    background: var(--pink);
  }

  .curtain {
    position: fixed;
    inset: 0;
    z-index: 9850;
    background: var(--pink);
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 560ms var(--ease-expo);
    will-change: transform;
  }

  .curtain.is-covering {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .curtain.is-revealing {
    transform: translateY(-100%);
    visibility: visible;
    transition: transform 700ms var(--ease-expo);
  }

  .curtain.no-trans {
    transition: none;
  }

  .curtain__mark {
    width: 72px;
    height: auto;
    color: var(--ink, #0b0b0c);
    fill: currentColor;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 300ms var(--ease), transform 500ms var(--ease-expo);
  }

  .curtain.is-covering .curtain__mark {
    opacity: 1;
    transform: scale(1);
    transition-delay: 180ms;
  }

  .curtain.is-revealing .curtain__mark {
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 200ms var(--ease), transform 400ms var(--ease-expo);
  }

  /* ---- 2. Section heading word reveal ---- */
  html.motion-js .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .12em;
    margin-bottom: -.12em;
  }

  html.motion-js .w__i {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 900ms var(--ease-expo);
    will-change: transform;
  }

  html.motion-js .is-in .w__i {
    transform: translateY(0);
  }

  /* ---- 3. Button fill sweep ---- */
  .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--pink);
    transition: color 300ms var(--ease), transform 420ms var(--ease);
  }

  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    border-radius: inherit;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 450ms var(--ease-expo);
  }

  .btn:hover {
    background: var(--pink);
  }

  .btn:hover::before {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  .btn--dark {
    background: var(--ink);
  }

  .btn--dark::before {
    background: var(--pink);
  }

  .btn--dark:hover {
    background: var(--ink);
  }

  .btn--dark:hover::before {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  /* ---- 4. Work cards flash on like airport signage ---- */
  /* Only the image stutters on; the text below just fades in. No pink. */
  html.flash-ready .rail__card { opacity: 0; transition: opacity 120ms var(--ease); }
  html.flash-ready.flash-on .rail__card.is-lit { opacity: 1; }
  html.flash-ready .rail__img { position: relative; }
  html.flash-ready .rail__img::after {
    content: ""; position: absolute; inset: 0; background: var(--pink);
    opacity: 0; pointer-events: none; mix-blend-mode: multiply;
  }
  html.flash-ready.flash-on .rail__card.is-lit .rail__img { animation: board-on 620ms steps(1, end) both; }
  @keyframes board-on {
    0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .15; } 26% { opacity: 1; }
    34% { opacity: .35; } 44% { opacity: 1; } 100% { opacity: 1; }
  }
  @keyframes board-pink {
    0% { opacity: .9; } 16% { opacity: 0; } 26% { opacity: .7; } 34% { opacity: 0; }
    44% { opacity: .35; } 56% { opacity: 0; } 100% { opacity: 0; }
  }

  /* ---- 5. Image hover zoom ---- */
  .rail__img,
  .project__media {
    overflow: hidden;
  }

  .rail__img img,
  .project__media img {
    transition: transform 1100ms var(--ease-expo);
  }

  /* No hover zoom on project images: it cropped the screens' keylines. */

  /* ---- 6. Letter roll ---- */
  .roll {
    display: inline-flex;
    overflow: hidden;
    line-height: 1.15;
    vertical-align: top;
  }

  .roll__c {
    display: inline-block;
    position: relative;
    transition: transform 520ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 22ms);
  }

  .roll__c::after {
    content: attr(data-c);
    position: absolute;
    left: 0;
    top: 100%;
  }

  .site-nav__link:hover .roll__c,
  .site-nav__link:focus-visible .roll__c,
  .site-footer__talk:hover .roll__c,
  .site-footer__talk:focus-visible .roll__c {
    transform: translateY(-100%);
  }

  /* ---- 8. Hero photo entrance ---- */
  html.motion-js .hero__cut {
    opacity: 0;
    transform: translateY(6%);
    transition: opacity 1200ms var(--ease-expo) 150ms, transform 1200ms var(--ease-expo) 150ms;
    will-change: transform, opacity;
  }

  html.motion-js .hero__cut.is-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---- 8. Hero parallax ---- */
  html.motion-js .hero .hero__cut img {
    will-change: transform;
  }

  html.motion-js .hero .h-hero,
  html.motion-js .hero .hero__sub {
    will-change: transform;
  }

  /* ---- 9. Scroll-linked image drift ---- */
  html.js.motion-js .photo-reveal img {
    transform: translate3d(0, var(--drift, 0px), 0) scale(1.08);
  }

  html.js.motion-js .photo-reveal.is-in img {
    transform: translate3d(0, var(--drift, 0px), 0) scale(1);
    transition: transform 1200ms var(--ease-expo);
  }

  html.js.motion-js .photo-reveal img.drift-live {
    transition: none;
  }

  /* ---- 10. Inline copy links ---- */
  main p a:not(.btn):not(.btn-arrow) {
    color: var(--pink);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size 400ms var(--ease-expo), color 300ms var(--ease);
  }

  main p a:not(.btn):not(.btn-arrow):hover,
  main p a:not(.btn):not(.btn-arrow):focus-visible {
    background-size: 100% 2px;
  }
}

/* ---- Reduced motion: neutralise all motion, keep content visible ---- */
@media (prefers-reduced-motion: reduce) {
  .curtain,
  .curtain__mark {
    display: none !important;
  }

  .w,
  .w__i,
  .roll,
  .roll__c {
    display: inline !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
  }

  .roll__c::after {
    content: none;
  }

  .hero__cut {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }


  .btn::before,
  .curtain::before {
    display: none !important;
  }

  html.js .photo-reveal img,
  html.js .photo-reveal.is-in img {
    transform: none !important;
    transition: none !important;
  }
}