/* Motion layer: page wipe, hero glow, reveals, wave edges, before strip, cursor.
   Inspired by Hello Monday's case study pages. Everything degrades to a static page. */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- page wipe ---------- */
.wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; width: 100%; height: 100%; }
.wipe path.w1 { fill: var(--red); }
.wipe path.w2 { fill: #16181d; }
/* the next page starts under the same ink, so its first paint is never seen */
html.wipe-in::after { content: ""; position: fixed; inset: 0; z-index: 201; background: #16181d; animation: wipe-safety .3s 3s forwards; }
@keyframes wipe-safety { to { opacity: 0; visibility: hidden; } }
@keyframes main-safety { to { opacity: 1; transform: none; } }
/* content settles in as the curtain lifts */
html.wipe-in body > main { opacity: 0; transform: translateY(24px); animation: main-safety .3s 3s forwards; }
html.settle body > main { transition: opacity .55s cubic-bezier(.2, .7, .2, 1) .04s, transform .7s cubic-bezier(.2, .7, .2, 1) .04s; }

/* ---------- hero glow ---------- */
.glow { position: absolute; left: 0; right: 0; top: 0; height: 120vh; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.glow canvas { width: 100%; height: 100%; display: block; filter: blur(40px) saturate(1.05); transform: scale(1.15); opacity: 0; transition: opacity 1.4s ease; }
.glow.on canvas { opacity: .85; }
main, .site-foot { position: relative; z-index: 1; }

/* ---------- text reveal ---------- */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .24em; margin-bottom: -.24em; }
.rw > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.rv-in .rw > span { transform: none; }

/* ---------- block reveal ---------- */
.rv { opacity: 0; transform: translateY(46px); transition: opacity 1s cubic-bezier(.19, 1, .22, 1), transform 1.2s cubic-bezier(.19, 1, .22, 1); }
.rv.rv-in { opacity: 1; transform: none; }
.rv-img { clip-path: inset(12% 6% 0 6% round 18px); transition: clip-path 1.4s cubic-bezier(.19, 1, .22, 1); }
.rv-img.rv-in { clip-path: inset(0 0 0 0 round 0); }

/* ---------- wave edges ---------- */
.wave-host { position: relative; }
.wave-top { position: absolute; left: 0; width: 100%; height: 80px; top: -78px; pointer-events: none; overflow: visible; display: block; transform: translateZ(0); }
.wave-top path { fill: currentColor; }

/* dark "next case" band */
.next.band { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  background: #16181d; color: #fbfaf7; margin: clamp(120px, 14vw, 200px) calc(50% - 50vw) 0; padding: clamp(48px, 7vw, 96px) max(var(--gutter, 24px), calc(50vw - 590px)); border-top: 0; text-decoration: none; }
.next.band .wave-top { color: #16181d; }
.next.band h3 { color: #fbfaf7; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: normal; line-height: 1.05; }
.next.band .kicker, .next.band .kicker b { color: #b9b7b0; }
.next.band .kicker b { color: var(--red); }
.next.band .go { color: #fbfaf7; }
.next.band .img { border-radius: 14px; overflow: hidden; }
.next.band:hover h3 { color: #fff; }
@media (max-width: 760px) { .next.band { grid-template-columns: 1fr; } }
.next.band + .site-foot { margin-top: 0 !important; background: #16181d; color: #8b8981; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(var(--gutter, 24px), calc(50vw - 590px)); padding-right: max(var(--gutter, 24px), calc(50vw - 590px)); border-top-color: #2b2e35; }
.next.band + .site-foot a { color: #fbfaf7; }

/* ---------- before strip ---------- */
.oldflow { position: relative; margin: clamp(64px, 8vw, 110px) calc(50% - 50vw) 0; }
.before-pin { position: sticky; top: 68px; height: calc(100vh - 68px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #16181d; color: #fbfaf7; }
.before-head { padding: 0 max(var(--gutter, 24px), calc(50vw - 590px)); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vh, 36px); }
.before-head .kicker { color: #b9b7b0; display: block; margin-bottom: 10px; }
.before-head .kicker b { color: var(--red); }
.before-head h2 { color: #fbfaf7; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: normal; }
.before-head p { margin: 0; color: #b9b7b0; max-width: 44ch; font-size: 16px; }
.before-track { display: flex; gap: clamp(16px, 2vw, 28px); padding: 0 max(var(--gutter, 24px), calc(50vw - 590px)); will-change: transform; align-items: stretch; }
.bf-item { flex: none; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bf-item .bf-img { height: clamp(220px, calc(100vh - 440px), 520px); display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #22252b; border-radius: 14px; padding: clamp(14px, 2vw, 24px); }
.bf-item .bf-img img { height: 100%; width: auto; max-width: none; min-height: 0; flex: none; border-radius: 10px; display: block; cursor: zoom-in; }
.bf-item.wide .bf-img img { height: auto; width: min(64vw, 900px); max-height: 100%; object-fit: contain; }
.bf-item figcaption { color: #b9b7b0; font-size: 14px; max-width: 34ch; display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.bf-item figcaption b { color: #fbfaf7; font-family: var(--display); font-weight: 500; }
.bf-item figcaption .n { width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.bf-end { flex: none; width: min(420px, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 10px; padding-right: 24px; }
.bf-end b { font-family: var(--display); font-weight: 500; font-size: clamp(56px, 7vw, 104px); line-height: .95; letter-spacing: normal; color: #fbfaf7; }
.bf-end b em { font-style: normal; color: var(--red); }
.bf-end span { color: #b9b7b0; font-size: 16px; max-width: 30ch; }
.bf-progress { position: absolute; left: max(var(--gutter, 24px), calc(50vw - 590px)); right: max(var(--gutter, 24px), calc(50vw - 590px)); bottom: clamp(18px, 4vh, 36px); height: 2px; background: #2b2e35; }
.bf-progress i { display: block; height: 100%; width: 0; background: var(--red); }
.oldflow .wave-top { color: #16181d; }
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .before-pin { position: relative; top: 0; height: auto; padding: 56px 0 40px; }
  .before-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 24px); padding-bottom: 12px; transform: none !important; }
  .bf-item, .bf-end { scroll-snap-align: start; }
  .bf-item .bf-img { height: 60vh; max-height: 480px; }
  .bf-progress { display: none; }
}


/* ---------- reading progress ---------- */
.readbar { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--red); z-index: 60; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rw > span, .rv-img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .glow canvas { transition: none; }
}

/* covers the page until the incoming wave reveal starts (no flash between pages) */

/* home contact as a full-bleed dark band */
.contact2[data-wave] { border-radius: 0; margin: clamp(120px, 14vw, 200px) calc(50% - 50vw) 0; padding: clamp(56px, 8vw, 110px) max(var(--gutter, 24px), calc(50vw - 590px)); background: #16181d; }
.contact2[data-wave] .wave-top { color: #16181d; }
.contact2[data-wave] + .site-foot { margin: 0 calc(50% - 50vw); background: #16181d; color: #8b8981; padding-left: max(var(--gutter, 24px), calc(50vw - 590px)); padding-right: max(var(--gutter, 24px), calc(50vw - 590px)); border-top-color: #2b2e35; }
.at-end .toc, .in-dark .toc { opacity: 0 !important; pointer-events: none !important; }

/* step list under each old screen */
.bf-item figcaption:has(.bf-steps) { display: block; }
.bf-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: s calc(var(--start, 1) - 1); }
.bf-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 14.5px; color: #e9e7e1; line-height: 1.35; }
.bf-steps li::before { content: attr(data-n); width: 20px; height: 20px; border-radius: 50%; background: #3a3d45; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 0; }
.bf-steps li.back { color: #ff8a73; }
.bf-steps li.back::before { background: var(--red); }
.bf-item:has(.bf-steps) { max-width: 300px; }

/* zoom is a quiet extra, not an invitation */
.bf-item .bf-img img, .shot-card img, figure img, .stage > img { cursor: default; }

/* problem strip with the challenge up front: both readable before any sideways scroll */
.before-head.ch { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 18px clamp(24px, 5vw, 72px); }
.before-head.ch p { margin-top: 12px; max-width: 52ch; }
.ch-box .kicker { margin-bottom: 12px; }
.ch-list { list-style: none; margin: 0; padding: 0 !important; counter-reset: c; display: grid; gap: 10px; }
.ch-list li { counter-increment: c; margin: 0; display: grid; grid-template-columns: 30px 1fr; gap: 6px; color: #e9e7e1; font-size: 16px; line-height: 1.4; }
.ch-list li::before { content: counter(c); width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.oldflow:has(.before-head.ch) .bf-item .bf-img { height: clamp(200px, calc(100vh - 520px), 480px); }
@media (max-width: 860px) { .before-head.ch { grid-template-columns: 1fr; } }