/* The whole desktop uses one elastic rhythm; mobile keeps its existing styles. */
@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:portfolio-depart 520ms cubic-bezier(.65,0,.35,1) both; }
  ::view-transition-new(root) { animation:portfolio-arrive 850ms cubic-bezier(.16,1,.3,1) both; }
  ::view-transition-group(root) { animation-duration:850ms; }
  @keyframes portfolio-depart {
    to { opacity:0; transform:translate3d(-12vw,-2vh,0) scale(.92) rotate(-1.2deg); }
  }
  @keyframes portfolio-arrive {
    from { opacity:0; clip-path:inset(12% 0 0 0 round 5vw); transform:translate3d(15vw,7vh,0) scale(1.06) rotate(1.5deg); }
    to { opacity:1; clip-path:inset(0 round 0); transform:none; }
  }
  .desktop-choreography .horizontal .motion-word {
    transform-origin:50% 100%;
    transition:transform .85s cubic-bezier(.18,1.35,.35,1),opacity .5s ease;
  }
  .desktop-choreography .horizontal .motion-word:nth-child(4n+2) { transition-delay:25ms!important; }
  .desktop-choreography .horizontal .motion-word:nth-child(4n+3) { transition-delay:50ms!important; }
  .desktop-choreography .horizontal .motion-word:nth-child(4n) { transition-delay:75ms!important; }
  .desktop-choreography .horizontal .section-heading,
  .desktop-choreography .horizontal .intro h2,
  .desktop-choreography .horizontal .experience>h2,
  .desktop-choreography .project-horizontal .detail-heading h1,
  .desktop-choreography .project-horizontal .project-brief h2 {
    transition:transform .8s cubic-bezier(.16,1.2,.3,1),opacity .35s ease,filter .4s ease;
  }
  .desktop-choreography .shot-frame {
    transition:transform .7s cubic-bezier(.18,1.45,.35,1),box-shadow .5s ease;
  }
  .desktop-choreography .project-open,
  .desktop-choreography .text-link span,
  .desktop-choreography .contact-title span,
  .desktop-choreography summary b {
    transition:transform .65s cubic-bezier(.18,1.55,.35,1),background .35s ease;
  }
  .desktop-choreography .text-link:hover span { transform:translateY(5px); }
  .desktop-choreography .project-card:hover .project-open { transform:rotate(45deg) scale(1.16); }
  .desktop-choreography header .brand,
  .desktop-choreography header .header-note,
  .desktop-choreography header .menu-toggle,
  .desktop-choreography .hero-intro>*,
  .desktop-choreography .hero-bottom,
  .desktop-choreography body>nav {
    animation:portfolio-intro-in 1s cubic-bezier(.16,1.25,.3,1) backwards;
  }
  .desktop-choreography header .header-note { animation-delay:80ms; }
  .desktop-choreography header .menu-toggle { animation-delay:160ms; }
  .desktop-choreography .hero-intro>p { animation-delay:130ms; }
  .desktop-choreography .hero-intro>.text-link { animation-delay:240ms; }
  .desktop-choreography .hero-bottom { animation-delay:300ms; }
  @keyframes portfolio-intro-in {
    from { opacity:0; transform:translateY(38px) rotate(1deg); filter:blur(6px); }
    to { opacity:1; transform:translateY(0); filter:blur(0); }
  }
  .desktop-choreography #menu[open] {
    clip-path:inset(0 0 100% 0 round 0 0 12vw 12vw);
    transition:clip-path .42s cubic-bezier(.65,0,.35,1);
  }
  .desktop-choreography #menu[open].menu-visible {
    clip-path:inset(0 round 0);
    transition-duration:.7s;
    transition-timing-function:cubic-bezier(.16,1,.3,1);
  }
  .desktop-choreography #menu nav a { transform:translateY(75px) rotate(3deg); transform-origin:0 50%; }
  .desktop-choreography #menu.menu-visible nav a:nth-child(n) {
    transform:translateY(0) rotate(0);
    transition:transform .85s cubic-bezier(.18,1.3,.35,1),opacity .35s ease,filter .28s ease,color .28s ease;
    animation:portfolio-menu-line .9s cubic-bezier(.18,1.3,.35,1) both;
  }
  .desktop-choreography #menu.menu-visible nav a:nth-child(2) { animation-delay:65ms; }
  .desktop-choreography #menu.menu-visible nav a:nth-child(3) { animation-delay:130ms; }
  .desktop-choreography #menu.menu-visible nav a:nth-child(4) { animation-delay:195ms; }
  @keyframes portfolio-menu-line { from { transform:translateY(90px) rotate(4deg); } to { transform:none; } }
  .desktop-choreography details[open]>p { animation:portfolio-detail-in .6s cubic-bezier(.16,1,.3,1) both; }
  @keyframes portfolio-detail-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
  .desktop-choreography #screenshot:not([hidden]) { animation:portfolio-art-in .85s cubic-bezier(.16,1.2,.3,1) both; }
  @keyframes portfolio-art-in { from { opacity:0; transform:translateY(45px) scale(.94); } to { opacity:1; transform:none; } }
}

/* Different projection planes make text and artwork arrive at distinct depths. */
@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-choreography .horizontal .intro,
  .desktop-choreography .horizontal .intro>div,
  .desktop-choreography .horizontal .section-heading,
  .desktop-choreography .horizontal .project-card,
  .desktop-choreography .horizontal .experience,
  .desktop-choreography .horizontal .experience-list,
  .desktop-choreography .project-horizontal .detail-heading,
  .desktop-choreography .project-horizontal .detail-intro,
  .desktop-choreography .project-horizontal .detail-gallery,
  .desktop-choreography .project-horizontal .project-brief,
  .desktop-choreography .horizontal .next-project,
  .desktop-choreography .horizontal footer {
    perspective:1400px;
    perspective-origin:50% 45%;
  }
  .desktop-choreography .horizontal .motion-word {
    transition-duration:1s,.55s;
    transition-timing-function:cubic-bezier(.16,1.22,.3,1),ease;
  }
}

@media (min-width:900px) and (min-height:650px) {
  /* Clearance already supplies a scroll-driven fade; avoid a trailing fade over artwork. */
  .horizontal .experience-thought { transition:filter .3s ease; }
}

@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  /* Scroll owns the arrival: no delayed CSS tween after the scroll stops. */
  .desktop-choreography .horizontal .motion-word,
  .desktop-choreography .horizontal .scroll-soft,
  .desktop-choreography .horizontal .section-heading,
  .desktop-choreography .horizontal .intro h2,
  .desktop-choreography .horizontal .experience>h2,
  .desktop-choreography .project-horizontal .detail-heading h1,
  .desktop-choreography .project-horizontal .project-brief h2 { transition:none!important; }
}

@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-choreography [data-impact] {
    filter:blur(var(--impact-blur,0px))!important;
    opacity:var(--impact-opacity,1)!important;
    transition:filter 0s!important;
  }
  .desktop-choreography [data-impact="settled"] { filter:none!important; }
  .desktop-choreography [data-impact] .motion-word {
    opacity:1!important;
    transform:none!important;
  }
}

/* The first screen plays on load; portrait/video layers are deliberately excluded. */
@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-choreography .hero-name-word {
    clip-path:none;
    transform-origin:left center;
    animation:hero-content-focus 1.35s cubic-bezier(.16,1,.3,1) both;
  }
  .desktop-choreography .hero-name-first { animation-delay:0s; }
  .desktop-choreography .hero-name-last { animation-delay:.14s; }
  .desktop-choreography .hero-intro>*,
  .desktop-choreography .hero-bottom {
    transform-origin:left center;
    animation:hero-copy-focus 1.2s cubic-bezier(.16,1,.3,1) both;
  }
  .desktop-choreography .hero-intro>.eyebrow { animation-delay:0s; }
  .desktop-choreography .hero-intro>p { animation-delay:.10s; }
  .desktop-choreography .hero-intro>.text-link { animation-delay:.20s; }
  .desktop-choreography .hero-bottom { animation-delay:.28s; }
  @keyframes hero-content-focus {
    from { opacity:0; filter:blur(16px); transform:translate3d(0,-36px,0) scale(1.7); }
    to { opacity:1; filter:blur(0); transform:translate3d(0,0,0) scale(1); }
  }
  @keyframes hero-copy-focus {
    from { opacity:0; filter:blur(10px); transform:translate3d(0,26px,0) scale(1.25); }
    to { opacity:1; filter:blur(0); transform:translate3d(0,0,0) scale(1); }
  }
}

/* Keep enlarged entrances from being sliced at a moving chapter boundary. */
@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-choreography .horizontal main>.work,
  .desktop-choreography .project-horizontal main>.detail-gallery,
  .desktop-choreography .project-horizontal main>.project-brief,
  .desktop-choreography .horizontal .next-project { overflow:visible; }
  .desktop-choreography .horizontal .work,
  .desktop-choreography .project-horizontal main>.detail-gallery {
    background:linear-gradient(90deg,transparent,rgba(243,247,250,.4) 100px,rgba(243,247,250,.4) calc(100% - 100px),transparent);
  }
  .desktop-choreography .horizontal .soft-moving-edge {
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 96px,#000 calc(100% - 64px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 96px,#000 calc(100% - 64px),transparent);
  }
  /* Extra image coverage stays inside the image-sized frame, never the caption. */
  .desktop-choreography .horizontal .project-image,
  .desktop-choreography .project-horizontal .detail-gallery .shot-frame {
    overflow:hidden;
    isolation:isolate;
  }
  .desktop-choreography .horizontal .project-card .project-image>img {
    width:100%;height:100%;margin-left:0;
    transform:translate3d(var(--frame-image-x,0px),0,0) scale(1.86)!important;
    transform-origin:center;
    transition:filter .3s;
    will-change:transform;
  }
  .desktop-choreography .project-horizontal .detail-gallery .shot-frame>img {
    transform:translate3d(var(--frame-image-x,0px),0,0) scale(1.70)!important;
    transform-origin:center;
    border-color:transparent;
    transition:none;
    will-change:transform;
  }
  .desktop-choreography .project-horizontal .detail-gallery .shot-frame::after {
    content:'';position:absolute;inset:0;border:.5px solid #75838c;
    pointer-events:none;z-index:2;
  }
}

/* Scroll depth stays on the horizontal rail after each entrance resolves. */
@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-choreography .project-horizontal .detail-gallery figure { transform:none!important; }
}

/* Screenshot hover is a centered scale only; scroll still moves the image inside. */
@media (min-width:900px) and (min-height:650px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-choreography .horizontal .project-image.shot-frame,
  .desktop-choreography .project-horizontal .detail-gallery .shot-frame {
    transition:transform .5s cubic-bezier(.45,0,.55,1),box-shadow .5s ease-in-out!important;
    transform-origin:center;
  }
}