/* Home -> case study page transition. Loaded by index.html and the case-study pages.
   Cross-document View Transitions; transition.js adds the clicked-image hand-off and the fallback. */
@view-transition {
  navigation: auto;
}
.case-hero .case-cover img {
  view-transition-name: case-cover;
}
::view-transition-group(root) {
  animation-duration: 0.35s;
}

/* Shared chrome: the case-study header matches the homepage header so it stays put through the transition. */
@font-face {
  font-family: Instrument;
  font-weight: 500;
  src: url("../main/assets/case-studies/fonts/font-1.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Bricolage;
  src: url("../main/assets/ui/fonts/bricolage-medium.woff2") format("woff2");
  font-display: swap;
}
html body[data-page="case-study"] nav.site-nav {
  view-transition-name: site-header;
  inset: 0 0 auto;
  height: 88px;
  padding: 0 4.7%;
  gap: 20px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  backdrop-filter: none;
  color: #10242b;
  font: 500 12px/1 Instrument, Arial, sans-serif;
  letter-spacing: 0.05em;
}
body[data-page="case-study"] nav.site-nav::before {
  display: block;
  inset: 0;
  background: #efede9;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  opacity: 0.94;
}
body[data-page="case-study"] .site-nav .site-brand {
  font: 600 23px Bricolage, Arial, sans-serif;
  letter-spacing: -1.2px;
  white-space: nowrap;
}
body[data-page="case-study"] .site-nav .brand-dot,
body[data-page="case-study"] .site-nav .brand-symbol {
  color: #165df1;
}
body[data-page="case-study"] .site-nav .brand-symbol {
  font-size: 24px;
  margin-left: 10px;
}
body[data-page="case-study"] .site-nav .site-links {
  gap: 28px;
}
@media (max-width: 700px) {
  html body[data-page="case-study"] nav.site-nav {
    height: 68px;
    padding: 0 6%;
  }
  body[data-page="case-study"] .site-nav .site-brand {
    font-size: 21px;
  }
  body[data-page="case-study"] .site-nav .brand-symbol {
    font-size: 19px;
    margin-left: 5px;
  }
}

/* Case hero, desktop: a tighter headline block so the headline and the cover (the transition's landing slot)
   share the first viewport; at 1440x900 the cover starts near y 380. */
@media (min-width: 768px) {
  html body[data-page="case-study"] .case-hero {
    padding-top: 104px;
  }
  html body[data-page="case-study"] .case-intro {
    padding-top: 20px;
  }
  html body[data-page="case-study"] .case-hero h1 {
    font-size: clamp(52px, 5vw, 76px);
  }
  html body[data-page="case-study"] .case-hero .case-cover {
    margin-top: 32px;
  }
}

/* origin page, from the click on: cursor and tile chrome step aside; header and grid are shared */
.vt-out .nav {
  view-transition-name: site-header;
}
.vt-out #trail,
.vt-out .nav::before,
.vt-out .work-lede,
.vt-out #work-title,
.vt-out .work .project-info,
.vt-out .work .project-open,
.vt-out .work .tag {
  opacity: 0 !important;
  transition: none !important;
}

/* every other tile fades out with the card's first move (the clicked one is .vt-picked) */
.vt-out .work .tile:not(.vt-picked) {
  opacity: 0 !important;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* the flying card leaves a hole in the old page; show the section's paper there, not the tile's sky backdrop */
.vt-out .vt-picked .project-media {
  background: transparent !important;
}

/* Keep the clicked card as the visual anchor while the rest of the page steps away. */
.vt-out .vt-picked {
  position: relative;
  z-index: 4;
  opacity: 1 !important;
}
.vt-out .vt-picked .project-media > a {
  opacity: 1 !important;
  visibility: visible !important;
}

/* destination, only when arriving from a gallery click (html.vt-case is set by transition.js).
   0-0.15s everything but the clicked card, the header and the grid fades out;
   0-0.65s the card scales up, expo-out, from its tile rect into the hero slot as one locked layer,
   while a cobalt halftone bloom (the hero's own dot language) spreads out behind it and dissolves;
   from 0.6s the headline lines rise out of their masks 50ms apart, then kicker, summary, meta and nav links;
   the homepage grid holds until the page has settled, then fades. */
.vt-case::view-transition-old(root) {
  animation: vt-fade-out 0.38s linear both;
}
.vt-case::view-transition-new(root) {
  animation: vt-fade-in 0.4s 0.04s linear both;
}
.vt-case::view-transition-group(case-cover) {
  z-index: 2;
  animation-duration: 0.65s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.vt-case::view-transition-old(case-cover),
.vt-case::view-transition-new(case-cover) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}
/* same picture on both sides: the old snapshot carries the flight (cover-cropped, so the aspect change never
   jumps) and the new one swaps in only once the rect has landed, where the two are pixel-identical */
.vt-case::view-transition-old(case-cover) {
  animation: none;
}
.vt-case::view-transition-new(case-cover) {
  animation: vt-fade-in 0.01s 0.65s linear both;
}
.vt-case::view-transition-group(site-header) {
  z-index: 3;
  animation: none;
}
.vt-case::view-transition-old(site-header),
.vt-case::view-transition-new(site-header) {
  mix-blend-mode: normal;
  height: 100%;
}
.vt-case::view-transition-old(site-header) {
  animation: vt-fade-out 0.15s 0.6s linear both;
}
.vt-case::view-transition-new(site-header) {
  animation: vt-fade-in 0.25s 0.75s linear both;
}
/* the figure's placeholder tone would otherwise show in the new page while the picture is in flight */
.vt-case .case-cover {
  background: none;
}
/* halftone bloom behind the landing card; placed on the cover's rect by transition.js, removed when done */
.vt-bloom {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, #165df1c0 2.2px, transparent 2.8px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
  animation: vt-bloom 0.9s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vt-bloom {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}
.vt-w {
  display: inline-block;
  clip-path: inset(-0.3em -0.2em -0.28em -0.2em);
}
.vt-w > span {
  display: inline-block;
}
.vt-case .vt-w > span {
  animation: vt-word 0.5s calc(0.6s + var(--l, 0) * 0.05s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vt-enter .vt-w > span {
  animation: vt-word 0.5s calc(0.15s + var(--l, 0) * 0.05s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vt-case .case-kicker,
.vt-case .case-discipline,
.vt-case .hero-summary,
.vt-case .case-cover figcaption,
.vt-case .project-meta,
.vt-case .proof-strip {
  animation: vt-rise 0.5s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vt-case .hero-summary,
.vt-case .case-cover figcaption {
  animation-delay: 0.75s;
}
.vt-case .project-meta,
.vt-case .proof-strip {
  animation-delay: 0.8s;
}
@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-word {
  from {
    transform: translateY(110%);
  }
}
@keyframes vt-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* fallback (no cross-document view transitions): a fixed cover clone expands, then the page loads */
.vt-clone {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.vt-clone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vt-enter .case-hero .case-cover {
  animation: vt-fade-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.2s !important;
    animation-delay: 0s !important;
  }
  .vt-w > span,
  .vt-bloom,
  .vt-enter .case-hero .case-cover {
    animation: none !important;
  }
}