/* ---------- Case study page (Mave) ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body.case-study { background: rgb(246, 243, 237); }
.stage--case { background: rgb(246, 243, 237); }

/* Live text placed with the exact Figma transform */
.stage--case .t {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  transform-origin: 0 0;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  -webkit-font-smoothing: antialiased;
}
.stage--case .t:not([style*="white-space:pre"]) { white-space: pre-wrap; }
.stage--case .t .p { display: block; }
.stage--case .t ul { margin: 0; padding-left: 1.45em; list-style: disc; }
.stage--case .t li { padding-left: 0.1em; }
.stage--case #screens { scroll-margin-top: 40px; }

/* links that live in the text layer */
.stage--case a.t { cursor: pointer; transition: color 200ms ease, text-underline-offset 250ms var(--ease-out), transform 250ms var(--ease-out); }
.stage--case a.t[data-kind="back"]:hover,
.stage--case a.t[data-kind="back"]:focus-visible { text-underline-offset: 5px; color: var(--green) !important; }
.stage--case a.t[data-kind="skip"]:hover,
.stage--case a.t[data-kind="skip"]:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.stage--case a.t[data-kind="more"]:hover,
.stage--case a.t[data-kind="more"]:focus-visible { color: var(--cream) !important; text-underline-offset: 5px; }

.skiplink { position: absolute; display: block; }
.skiplink:hover ~ * {}

/* Top-nav buttons (exported art, lifted on hover) */
.navbtn { position: absolute; display: block; transition: transform 300ms var(--ease-out), filter 300ms ease; }
.navbtn img { display: block; width: 100%; height: 100%; }
.navbtn:hover, .navbtn:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 4px 6px rgba(33, 25, 13, 0.15)); }

/* ---------- Annotations: grow softly on hover, like Figma's notes ---------- */
.anno {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  z-index: 5;
}
.anno:hover { z-index: 40; }
.anno__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgb(240, 240, 239);
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  font-family: "Inter", system-ui, sans-serif;
  will-change: transform;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.anno:hover .anno__card {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.08);
  transition-duration: 480ms;
}
.anno__tag {
  display: block;
  border-radius: 6px;
  color: rgb(255, 254, 249);
  font: 500 12px/9px "Inter", system-ui, sans-serif;
  letter-spacing: 0.25px;
  white-space: nowrap;
}
.anno__body {
  align-self: stretch;
  color: rgb(33, 25, 13);
  font: 400 12px/18px "Inter", system-ui, sans-serif;
}
.anno__body p { margin: 0; white-space: pre-wrap; }
.anno__body ul { margin: 0; padding-left: 18px; list-style: disc; }

@media (prefers-reduced-motion: reduce) {
  .anno:hover .anno__card { transform: none; }
}

.stage--case a.t { text-decoration: none; }
html:has(body.case-study) { scroll-behavior: smooth; }

/* ---------- Subtle hover motion on artwork ---------- */
.stage--case .layer.hov {
  pointer-events: auto;
  transition: transform 600ms var(--ease-out);
  will-change: transform;
}
.stage--case .hov--lift:hover { transform: translateY(-6px); }
.stage--case .hov--swing { transform-origin: 62% 0%; }
.stage--case .hov--swing:hover { transform: rotate(-1.5deg); transition-duration: 900ms; }
.stage--case .hov--sway { transform-origin: 50% 20%; }
.stage--case .hov--sway:hover { transform: rotate(1deg) translateY(-3px); transition-duration: 900ms; }

/* top-nav back link nudges home-ward */
.stage--case a.t[data-kind="back"] { transition: transform 300ms var(--ease-out), color 200ms ease, text-underline-offset 250ms var(--ease-out); }
.stage--case a.t[data-kind="back"]:hover { transform: matrix(1,0,0,1,31,34.7) !important; }

/* ---------- Entrance: first fold pops in on arrival ---------- */
html.intro .stage--case [data-intro] { opacity: 0; translate: 0 22px; scale: 0.97; }
html.intro .stage--case [data-intro="soft"] { translate: 0 0; scale: 1; }
html.intro.intro-go .stage--case [data-intro] {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity 650ms ease, translate 900ms cubic-bezier(0.22, 1.25, 0.36, 1), scale 900ms cubic-bezier(0.22, 1.25, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html.intro .stage--case [data-intro] { opacity: 1; translate: none; scale: none; }
}

/* leaving a page: quick fade so the next one can make its entrance */
.page { transition: opacity 260ms ease; }
body.is-leaving .page { opacity: 0; }