/*
 * Case study pages (/projects/<slug>): tighter text spacing and a "Next case study"
 * card on the right (built by custom/case-study.js).
 * .framer-iu6x9u is the case-study body text component, shared by every case study.
 */

/* Blank lines left in the CMS text add ~90px of dead space each; hide them. */
.framer-iu6x9u > :is(h1, h2, h3, h4, p):empty,
.framer-iu6x9u > :is(h1, h2, h3, h4, p):has(> br:only-child) {
  display: none !important;
}
.framer-iu6x9u > h2 {
  line-height: 1.15 !important;
}
.framer-iu6x9u > * + h2 {
  margin-top: 36px !important; /* space before a new section */
}
.framer-iu6x9u > h2 + p {
  margin-top: 10px !important; /* heading to its first paragraph */
}
.framer-iu6x9u > p + p {
  margin-top: 14px !important; /* between paragraphs */
}

/* ---- Next case study ---- */
.av-next {
  --av-blue: #008ff0;
  --av-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  right: 24px;
  top: 50%;
  z-index: 9;
  width: 220px;
  padding: 14px 16px 16px;
  display: grid;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.08);
  color: #000;
  font-family: Inter, "Inter Placeholder", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  translate: 12px -50%;
  transition: opacity 0.4s var(--av-ease), translate 0.5s var(--av-ease), border-color 0.2s;
}
.av-next.in { opacity: 1; translate: 0 -50%; }
.av-next .label { font: 400 11px/1 "Fragment Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.04em; color: #06060699; }
.av-next .title { font-family: "PP Neue Montreal Medium", "PP Neue Montreal", "Helvetica Neue", sans-serif; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.av-next .sub { font-size: 13px; color: #06060699; }
.av-next .go { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: #8427de; }
.av-next .go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--av-ease); }
.av-next .h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.3px solid var(--av-blue); opacity: 0; transition: opacity 0.2s; }
.av-next .tl { top: -5px; left: -5px; } .av-next .tr { top: -5px; right: -5px; }
.av-next .bl { bottom: -5px; left: -5px; } .av-next .br { bottom: -5px; right: -5px; }
.av-next:hover { border-color: var(--av-blue); }
.av-next:hover .h { opacity: 1; }
.av-next:hover .go svg { translate: 4px 0; }
.av-next:focus-visible { outline: 2px solid var(--av-blue); outline-offset: 3px; }

/* Below 1260px the side card would overlap the centred text, so use a compact card
   above the dock, bottom right. */
@media (max-width: 1260px) {
  .av-next { top: auto; bottom: 96px; right: 16px; width: 190px; translate: 0 12px; }
  .av-next.in { translate: 0 0; }
  .av-next .sub { display: none; }
}
/* Phones: text runs full width, so shrink to a small "Next" pill. */
@media (max-width: 810px) {
  .av-next { width: auto; padding: 8px 14px; border-radius: 999px; bottom: 88px; }
  .av-next .label, .av-next .title, .av-next .sub, .av-next .h { display: none; }
  .av-next .go { margin: 0; color: #000; }
  .av-next .go::before { content: "Next"; }
  .av-next .go { font-size: 0; } .av-next .go::before { font-size: 13px; } .av-next .go svg { color: #8427de; }
}
/* ---- Transition between case studies ----
   A canvas panel glides in from the right, the page switches underneath, and the panel
   glides off to the left. Transforms only (no clip-path), so it stays on the GPU. */
.av-wipe {
  --av-glide: cubic-bezier(0.65, 0, 0.35, 1);
  --av-dur: 0.85s;
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* above everything, Framer's badge included */
  display: grid;
  place-items: center;
  background-color: #fff9f2;
  background-image: linear-gradient(#0000000d 1px, transparent 1px), linear-gradient(90deg, #0000000d 1px, transparent 1px);
  background-size: 40px 40px;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.12); /* soft depth on the moving edge */
  transform: translate3d(100%, 0, 0);
  transition: transform var(--av-dur) var(--av-glide);
  will-change: transform;
  pointer-events: none;
}
.av-wipe.cover { transform: translate3d(0, 0, 0); pointer-events: auto; }
.av-wipe.reveal { transform: translate3d(-100%, 0, 0); }
/* The framed title lags behind the panel (parallax), so the motion reads as depth. */
.av-wipe-frame {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 28px 36px 32px;
  background: #fff;
  border: 1.3px solid #008ff0;
  opacity: 0;
  transform: translate3d(28vw, 0, 0);
  transition: transform var(--av-dur) cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease 0.1s;
}
.av-wipe.cover .av-wipe-frame { opacity: 1; transform: translate3d(0, 0, 0); }
.av-wipe.reveal .av-wipe-frame { opacity: 0; transform: translate3d(-12vw, 0, 0); transition: transform var(--av-dur) var(--av-glide), opacity 0.45s ease; }
/* The new page glides in behind the departing panel. */
main.av-arrive { transform: translate3d(6vw, 0, 0); opacity: 0.4; }
main.av-arriving { transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease; }
.av-wipe .flabel { position: absolute; top: -24px; left: -1px; font: 500 13px Inter, system-ui, sans-serif; color: #008ff0; }
.av-wipe .h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.3px solid #008ff0; }
.av-wipe .tl { top: -5px; left: -5px; } .av-wipe .tr { top: -5px; right: -5px; }
.av-wipe .bl { bottom: -5px; left: -5px; } .av-wipe .br { bottom: -5px; right: -5px; }
.av-wipe .t { font: 500 clamp(36px, 6vw, 64px)/1 "PP Neue Montreal Medium", "PP Neue Montreal", "Helvetica Neue", sans-serif; letter-spacing: -0.03em; color: #000; }
.av-wipe .s { font: 500 15px Inter, system-ui, sans-serif; color: #06060699; }

@media (prefers-reduced-motion: reduce) {
  .av-next, .av-next .go svg, .av-wipe, .av-wipe-frame, main.av-arriving { transition: none; }
}

/* Keep the existing card, but let reading content flow above it on narrow or
   short screens instead of fixing it over a paragraph. */
@media (max-width: 1260px), (max-height: 600px) {
  .av-next, .av-next.in { position: relative; inset: auto; translate: none; box-sizing: border-box; flex: none; width: min(calc(100% - 32px), 740px); margin: 36px auto 0; border-radius: 12px; padding: 16px; }
  .av-next .label, .av-next .title, .av-next .sub { display: block; }
  .av-next .h { display: none; }
  .av-next .go { font-size: 13px; color: #6940a8; }
  .av-next .go::before { content: none; }
}