/* navigating within the site: the landing loader never shows again */
html.no-loader .loader { display: none !important; }
html.no-loader body.is-loading { overflow: visible !important; }
html.no-loader body { opacity: 1 !important; }

/* =========================================================
   Page-to-page transition: a paper wash with a small waiting mark, then
   the incoming first screen arrives one element at a time.
   ========================================================= */
.pt-ov {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: var(--paper, #fff8df);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.pt-ov.is-on { opacity: 1; }
.pt-ov.no-enter-anim { transition: none; opacity: 1; }
.pt-ov.is-out { transition: opacity 620ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; }

/* three dots, breathing rather than spinning */
.pt-ov-mark {
  display: flex;
  gap: 9px;
  opacity: 0;
  animation: pt-mark-in 300ms ease 160ms both;
}
.pt-ov.is-out .pt-ov-mark {
  animation: pt-mark-out 240ms ease both;
}
.pt-ov-mark i {
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink, #101417);
  border-radius: 50%;
  animation: pt-dot 900ms ease-in-out infinite;
}
.pt-ov-mark i:nth-child(1) { background: var(--pink, #ff9ecd); }
.pt-ov-mark i:nth-child(2) { background: var(--blue, #83d7ff); animation-delay: 140ms; }
.pt-ov-mark i:nth-child(3) { background: var(--yellow, #ffe45c); animation-delay: 280ms; }

@keyframes pt-mark-in { to { opacity: 1; } }
@keyframes pt-mark-out { from { opacity: 1; } to { opacity: 0; transform: scale(0.8); } }
@keyframes pt-dot {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-9px); opacity: 1; }
}

/* ---------- the arrival: the first screen builds up in sequence ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.pt-in .cs-cover > *,
  html.pt-in .hero-stage > *,
  html.pt-in .headline > *,
  html.pt-in .scroll-cue {
    animation: pt-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  html.pt-in .scroll-cue { animation-delay: 900ms; }

  html.pt-in .cs-cover > *:nth-child(1),
  html.pt-in .hero-stage > *:nth-child(1),
  html.pt-in .headline > *:nth-child(1) { animation-delay: 420ms; }
  html.pt-in .cs-cover > *:nth-child(2),
  html.pt-in .hero-stage > *:nth-child(2),
  html.pt-in .headline > *:nth-child(2) { animation-delay: 560ms; }
  html.pt-in .cs-cover > *:nth-child(3),
  html.pt-in .hero-stage > *:nth-child(3),
  html.pt-in .headline > *:nth-child(3) { animation-delay: 700ms; }
  html.pt-in .cs-cover > *:nth-child(4),
  html.pt-in .hero-stage > *:nth-child(4) { animation-delay: 840ms; }
  html.pt-in .cs-cover > *:nth-child(n + 5) { animation-delay: 980ms; }
}

@keyframes pt-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-ov { display: none; }
}

/* =========================================================
   Shared site chrome: persistent menu + page transitions
   ========================================================= */

/* ---------- native cross-document view transitions (Chrome/Edge) ----------
   Removes the blank white flash between pages: the browser crossfades a
   snapshot of the old page into the new one instead of a hard cut. Browsers
   without support just ignore this and fall back to the JS pt-enter/leaving
   below. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: pt-vt-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: pt-vt-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes pt-vt-out {
    to { opacity: 0; transform: scale(0.985); }
  }
  @keyframes pt-vt-in {
    from { opacity: 0; transform: scale(1.01); }
  }
}

/* ---------- page transition: quick playful pop (used alongside the pt-ov interstitial on browsers that also support it, and alone as the fallback where it does not) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.pt-enter .cs-main,
  body.pt-enter .case-doc,
  body.pt-enter main,
  body.pt-enter > header {
    animation: pt-in 320ms cubic-bezier(0.22, 1.2, 0.32, 1) both;
  }

  body.pt-leaving { pointer-events: none; }
  body.pt-leaving .cs-main,
  body.pt-leaving .case-doc,
  body.pt-leaving main,
  body.pt-leaving > header {
    transition: transform 110ms cubic-bezier(0.5, 0, 0.75, 0), opacity 100ms ease;
    transform: scale(0.965) translateY(14px) rotate(-0.5deg);
    opacity: 0;
  }
}

@keyframes pt-in {
  0% { opacity: 0; transform: scale(0.97) translateY(18px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ---------- shared top-right bar (reuses .cs-close + .menu-toggle) ---------- */
.sn-bar {
  position: fixed;
  top: clamp(18px, 2.4vw, 30px);
  right: clamp(18px, 2.4vw, 30px);
  z-index: 19;
  transition: opacity 200ms ease, visibility 200ms ease;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
body.menu-open .sn-bar { opacity: 0; visibility: hidden; }
.sn-bar .cs-close {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}
.sn-bar .cs-close,
.sn-bar .menu-toggle {
  min-height: 46px;
  height: 46px;
}
.sn-bar .menu-toggle {
  border: 2px solid var(--ink);
  padding: 0 18px;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sn-bar .menu-toggle:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
@media (max-width: 760px) {
  .sn-bar { top: 12px; right: 12px; gap: 8px; }
  .sn-bar .cs-close,
  .sn-bar .menu-toggle { min-height: 40px; height: 40px; }
}

/* ---------- next-case nudge (only when arriving from another case) ---------- */
.sn-nextcase {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  margin: clamp(28px, 5svh, 56px) 0 0;
  padding: clamp(18px, 2.4vw, 26px);
  border: 2.5px solid var(--ink, #101417);
  border-radius: 18px;
  background: var(--yellow, #ffe680);
  box-shadow: 7px 7px 0 var(--ink, #101417);
}
body.from-case .sn-nextcase { display: grid; }
.sn-nextcase-k {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 6px;
}
.sn-nextcase-t {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.sn-nextcase-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2.5px solid var(--ink, #101417);
  border-radius: 999px;
  background: var(--paper, #fdf6e3);
  box-shadow: 4px 4px 0 var(--ink, #101417);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink, #101417);
  white-space: nowrap;
}
.sn-nextcase-go:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink, #101417); }
@media (max-width: 620px) {
  .sn-nextcase { grid-template-columns: 1fr; }
}

/* case nudges: side by side, the hovered one takes more room */
.menu-panel {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* the nudges sit on the same left edge as the menu links, stacked */
.sn-cases {
  display: grid;
  gap: 10px;
  margin-top: clamp(18px, 3vh, 30px);
  padding-top: clamp(16px, 2.6vh, 26px);
  border-top: 2px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.sn-case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.32;
  text-decoration: none;
  color: var(--ink);
  text-wrap: pretty;
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.sn-case-ic {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow, #ffe680);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 400;
  transition: transform 260ms cubic-bezier(0.3, 1.3, 0.4, 1);
}
/* hover inverts the card instead of resizing it: nothing in the layout moves */
.sn-case:hover,
.sn-case:focus-visible {
  background: var(--yellow, #ffe680);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.sn-case:hover .sn-case-ic,
.sn-case:focus-visible .sn-case-ic {
  transform: rotate(45deg);
  background: var(--paper);
}