/* ==========================================================================
   Akrasia — opening hero
   Timing, perspective, geometry and choreography traced frame-by-frame from
   Recording.mov (2940×1594 @59fps). This file builds the intro and nothing
   else — the page ends after the hero.
   ========================================================================== */

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --pill:999px;
  --ease-out:cubic-bezier(.16,.84,.36,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --hero:clamp(2.15rem,4.4vw,5.2rem);  /* line 1 ≈30% of viewport width */
  --mark:clamp(58px,5.6vw,84px);
  --cream:#fdf1e7;
  --hlBlue:#6f95e2;
  /* finished state is the default: a failed or stale script can
     never leave this section invisible */
  --q:0; --copyOut:1; --light:0; --wIn:1; --hl:1; --ipa:1; --def:1;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#020202;color:#fff;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* height:auto is load-bearing — the width/height attributes are presentational
   hints, and without it any mark sized by width alone gets squashed */
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#05070d;color:#fff;padding:12px 18px;font-size:14px;border-radius:8px}
.skip:focus{left:12px;top:12px}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.nav{
  position:fixed;top:clamp(9px,.95vw,16px);left:0;right:0;z-index:90;
  padding-inline:clamp(10px,2.6vw,44px);
  transform:none;
}
.js-intro .nav{transform:translateY(-300%)}

.nav__inner{
  display:flex;align-items:center;gap:clamp(12px,2vw,32px);
  height:clamp(56px,4.35vw,66px);
  padding:0 6px 0 clamp(14px,1.4vw,22px);
  border-radius:var(--pill);
  /* dark → white, driven by --light (0…1) as the hero hands off to cream */
  background:color-mix(in srgb, rgba(255,255,255,.92) calc(var(--light,0) * 100%), rgba(6,8,14,.84));
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  backdrop-filter:saturate(160%) blur(20px);
  box-shadow:0 10px 34px -20px rgba(0,0,0,calc(.8 - var(--light,0) * .68));
}
.nav__brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* two stacked copies of the same mark, crossfaded on --light: filter and
   mix-blend-mode can't tween, so a swap would pop mid-transition */
.nav__mark{position:relative;display:block;width:clamp(19px,1.5vw,23px);aspect-ratio:1;flex:0 0 auto}
.nav__mark img{position:absolute;inset:0;width:100%}
.nav__mark img:first-child{filter:invert(1);mix-blend-mode:lighten;opacity:calc(1 - var(--light,0))}
.nav__mark img:last-child{mix-blend-mode:multiply;opacity:var(--light,0)}
.nav__word{font-size:clamp(12px,.9vw,14px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,#0a0a0a calc(var(--light,0) * 100%),#fff)}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.1vw,34px);margin-inline:auto;font-size:clamp(12px,.92vw,14px)}
.nav__links a{color:color-mix(in srgb,rgba(20,22,30,.78) calc(var(--light,0) * 100%),rgba(255,255,255,.72));padding:8px 2px;position:relative;white-space:nowrap;transition:color .3s var(--ease)}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover{color:color-mix(in srgb,#0a0a0a calc(var(--light,0) * 100%),#fff)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:clamp(42px,3.3vw,50px);padding-inline:clamp(16px,1.5vw,26px);
  border-radius:var(--pill);
  background:color-mix(in srgb,#0a0a0a calc(var(--light,0) * 100%),#fff);
  color:color-mix(in srgb,#fff calc(var(--light,0) * 100%),#05070d);
  font-size:clamp(12px,.9vw,14px);font-weight:600;white-space:nowrap;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.nav__cta:hover{background:#e6ebf6;transform:translateY(-1px)}
.nav__burger{display:none;width:42px;height:42px;margin-left:auto;background:none;border:0;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{display:block;width:18px;height:1.5px;background:color-mix(in srgb,#0a0a0a calc(var(--light,0) * 100%),#fff)}

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* One plain viewport. Nothing is pinned — the hero scrolls away with the page
   and its exit is layered onto that natural movement, so the cream section is
   physically entering from below while the blue is still leaving through the
   top. Both are on screen together throughout. */
.hero{position:relative;z-index:0;height:100svh;background:#020202}
.hero__pin{position:relative;height:100%;overflow:hidden;background:#020202;isolation:isolate}

/* luminous blue environment — sampled from the settled reference frame */
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:
    /* luminous bloom in the bottom-right corner */
    radial-gradient(78% 66% at 96% 112%,
      rgba(214,231,253,.98) 0%, rgba(160,193,242,.72) 24%,
      rgba(92,140,222,.34) 46%, rgba(48,95,190,.10) 66%, transparent 80%),
    /* the through-line: deep navy top-left, bright blue bottom-right */
    linear-gradient(127deg,
      #02081a 0%, #04102c 14%, #081c44 28%, #0e2b63 42%,
      #17408b 56%, #2258b0 69%, #3573cf 82%, #578fdd 92%, #7aa8e8 100%);
}
.hero__bg::after{      /* depth only — never enough to read as black */
  content:'';position:absolute;inset:0;
  background:linear-gradient(127deg,rgba(0,4,14,.5) 0%,rgba(0,6,20,.18) 22%,transparent 44%);
}
.js-intro .hero__bg{opacity:0}

/* ── Geometry ─────────────────────────────────────────────────────────────
   Two faceted clusters, exactly as the reference: flat translucent quads
   overlapping at varied angles. The facets come from layered transparency,
   not extrusion. Every resting position sits outside the protected centre
   (28–72% × 34–66%), so nothing can ever cross the headline.
   `translate` is independent of `transform`, so ambient drift composes with
   the burst instead of overwriting it.                                      */

.plane{
  position:absolute;z-index:1;
  translate:calc(var(--px,0px) + var(--ex,0px)) calc(var(--py,0px) + var(--ey,0px));
  rotate:var(--rot,0deg);
  will-change:transform,translate,rotate;
}
/* Each drifts toward the corner it already sits in — A down-left, B up-right.
   Because both travel FURTHER off their anchored edge, neither can pull away
   and open a gap. The two move at different rates, which is what reads as
   parallax against the page's own scroll. */
.form--a{
  transform-origin:0% 100%;
  --ex:calc(var(--q,0) * -3.5vw); --ey:calc(var(--q,0) * 4vh); --rot:calc(var(--q,0) * -1.6deg);
}
.form--b{
  transform-origin:100% 0%;
  --ex:calc(var(--q,0) * 3.5vw); --ey:calc(var(--q,0) * -4vh); --rot:calc(var(--q,0) * 1.6deg);
}
.js-intro .plane{opacity:0}

/* ── Solid faceted forms ─────────────────────────────────────────────────
   Two prisms rather than loose overlapping panels. Each is ONE object: its
   faces share vertices and are lit from a single direction (upper right), so
   the top face reads lightest, the right face mid and the left face darkest.
   Shared edges plus consistent light is what makes them read as solids.
   Width is set in vw and height comes from the SVG's own ratio, so the
   projection never skews with viewport height.                              */

.plane svg{width:100%;height:100%;display:block;opacity:.95}
.form--a{ left:0; bottom:0; width:30vw; aspect-ratio:600/705; }
.form--b{ right:-10vw; top:0; width:50vw; aspect-ratio:1000/410; }

/* ── Headline ────────────────────────────────────────────────────────────── */

.hero__inner{position:relative;z-index:3;height:100%;display:grid;place-items:center;padding:0 clamp(22px,5vw,96px)}
.hero__copy{text-align:center;max-width:min(92vw,900px);opacity:var(--copyOut,1)}
.hero__copy h1{margin:0;color:#fff;font-size:var(--hero);line-height:1.15;letter-spacing:-.032em;font-weight:400;text-shadow:0 2px 30px rgba(8,22,54,.32)}
.hero__copy h1 .l{display:block}
.js-intro .hero__copy h1 .l{opacity:0;transform:translateY(20px)}
.hero__copy h1 .l2{font-weight:640;letter-spacing:-.038em}

/* ── Intro overlay ───────────────────────────────────────────────────────── */

/* #020202 is exactly invert(#FDFDFD) — the mark's own field — so the inverted
   artwork sits on it with no visible edge. Reads as pure black. */
.intro{position:absolute;inset:0;z-index:6;background:#020202;display:grid;place-items:center;pointer-events:none;perspective:1200px;perspective-origin:50% 50%}
html:not(.js-intro) .intro{display:none}
.intro__logo{width:var(--mark);filter:invert(1);mix-blend-mode:lighten;transform-style:preserve-3d;will-change:transform,filter}
.ring{position:absolute;top:50%;left:50%;width:var(--mark);aspect-ratio:1;border:1px solid rgba(255,255,255,.5);border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0}

/* ── Timeline ≈1.60s ──────────────────────────────────────────────────────
   Proportions taken from the reference: the mark flies, then RESTS on black
   before anything ignites, then the geometry separates explosively.
     0–340   flight            340–520  hold on black
     520     rings             540      blue ignites
     640     burst (280ms)     900      headline
     1180    navigation                                                     */

.run .intro__logo{animation:fly .50s linear forwards, markOut .2s var(--ease) .70s forwards}
.run .ring--1{animation:ripple .68s cubic-bezier(.16,.84,.36,1) .66s forwards}
.run .ring--2{animation:ripple .68s cubic-bezier(.16,.84,.36,1) .74s forwards}
/* the environment must be established BEFORE the geometry appears, as in the
   reference — not still forming underneath it */
.run .hero__bg{animation:ignite .24s linear .67s forwards}
.run .intro{animation:introOut .2s linear .70s forwards}

/* the burst is short and sharp — the reference travels its full distance in
   roughly 100–150ms, then holds */

.run .form--a{animation:burst .28s cubic-bezier(.08,.86,.2,1) .84s forwards}
.run .form--b{animation:burst .28s cubic-bezier(.08,.86,.2,1) .865s forwards}
.run .hero__copy h1 .l1{animation:up .42s cubic-bezier(.16,.84,.36,1) 1.06s forwards}
.run .hero__copy h1 .l2{animation:up .42s cubic-bezier(.16,.84,.36,1) 1.12s forwards}
.run .nav{animation:navDrop .40s cubic-bezier(.16,.84,.36,1) 1.24s forwards}

/* Z values traced from the reference flight: apparent width 45% → 5.6% of the
   viewport. Apparent scale is 1200/(1200−z), so the curve lives in the
   keyframes and the timing function stays linear. Blur is pre-divided to stay
   roughly constant on screen despite the perspective scale. */
@keyframes fly{
  0%  {transform:translateZ(1051px) translateY(-3%);filter:invert(1) blur(5px);opacity:0}
  6%  {opacity:1}
  20% {transform:translateZ(952px)  translateY(-2.4%);filter:invert(1) blur(3.6px);opacity:1}
  40% {transform:translateZ(735px)  translateY(-1.6%);filter:invert(1) blur(2.4px)}
  60% {transform:translateZ(416px)  translateY(-.9%);filter:invert(1) blur(1.4px)}
  80% {transform:translateZ(208px)  translateY(-.4%);filter:invert(1) blur(.6px)}
  100%{transform:translateZ(0)      translateY(0);filter:invert(1) blur(0);opacity:1}
}
@keyframes markOut{to{opacity:0}}
/* ref: two thin rings reaching ≈50% of viewport width */
/* the reference keeps both rings legible right through the burst, so the
   opacity holds rather than decaying straight off the peak */
@keyframes ripple{
  0%  {transform:translate(-50%,-50%) scale(.3);opacity:0}
  10% {opacity:.55}
  55% {opacity:.3}
  100%{transform:translate(-50%,-50%) scale(7.4);opacity:0}
}
@keyframes ignite{to{opacity:1}}
@keyframes introOut{to{opacity:0}}
@keyframes up{to{opacity:1;transform:none}}
/* --sx/--sy are measured per plane at boot: the delta from its resting centre
   back to the centre of the viewport, so every plane starts compressed on the
   point the mark landed and separates outward from there */
@keyframes burst{
  0%  {opacity:0;transform:translate(var(--sx,0),var(--sy,0)) scale(.04)}
  14% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes navDrop{from{transform:translateY(-300%)}to{transform:none}}

/* settled / no-JS: the finished composition is the default state, so nothing
   can be left stranded on black */
.settled .intro{display:none}
.settled .hero__bg{opacity:1}
.settled .plane{opacity:1}
.settled .hero__copy h1 .l{opacity:1;transform:none}
.settled .nav{transform:none}

/* ══ 02 · DEFINITION ══════════════════════════════════════════════════════
   Scroll-scrubbed. Every stage reads its progress from a CSS variable that
   JS writes on each frame, so nothing "triggers" — it tracks the scrollbar.
   ────────────────────────────────────────────────────────────────────────── */

.defn{
  position:relative;z-index:2;
  height:calc(100svh + 300svh);       /* 300svh of scrub — room to breathe */
  background:var(--cream);
  color:#0a0a0a;
}
.defn__pin{
  position:sticky;top:0;height:100svh;
  display:grid;place-items:center;
  padding:0 clamp(22px,5vw,80px);
  text-align:center;
}
.defn__in{width:100%;max-width:1600px;transform:translateY(-2.5vh)}

/* the word */
.defn__w{
  position:relative;display:inline-block;margin:0;
  font-size:clamp(3rem,9.45vw,12.4rem);
  line-height:1;letter-spacing:-.045em;font-weight:400;
  opacity:var(--wIn,0);
  transform:translateY(calc((1 - var(--wIn,0)) * 26px));
}
.defn__hl{
  position:absolute;left:-.032em;right:-.032em;
  bottom:.085em;height:.82em;
  background:var(--hlBlue);
  transform:scaleX(var(--hl,0));transform-origin:left center;
  z-index:0;
}
.defn__t{position:relative;z-index:1}

/* pronunciation */
.defn__ipa{
  margin:clamp(14px,1.7vw,30px) 0 0;
  font-size:clamp(1.05rem,1.95vw,2.5rem);
  letter-spacing:.01em;font-weight:400;
  opacity:var(--ipa,0);
  transform:translateY(calc((1 - var(--ipa,0)) * 18px));
}

/* definition */
.defn__d{
  margin:clamp(38px,5.2vw,96px) auto 0;
  max-width:min(84vw,1580px);
  font-size:clamp(.98rem,1.52vw,1.95rem);
  line-height:1.45;letter-spacing:-.006em;font-weight:400;
  opacity:var(--def,0);
  transform:translateY(calc((1 - var(--def,0)) * 22px));
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width:1000px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__inner{padding-right:12px}
}

@media (max-width:680px){
  :root{--hero:clamp(1.9rem,8.4vw,2.9rem)}
  .defn{height:calc(100svh + 220svh)}
  .defn__w{font-size:clamp(2.6rem,15vw,4.6rem);letter-spacing:-.04em}
  .defn__ipa{font-size:clamp(1rem,4.4vw,1.35rem)}
  .defn__d{font-size:clamp(.95rem,4vw,1.15rem);max-width:88vw;margin-top:clamp(30px,7vw,48px)}
  .defn__in{transform:none}
  .form--a{width:62vw;left:-8vw}
  .form--b{width:96vw;right:-16vw}                     /* fewer facets, same grammar */
  .run .intro__logo{animation:fly .42s linear forwards, markOut .18s var(--ease) .60s forwards}
  .run .ring--1{animation:ripple .60s cubic-bezier(.16,.84,.36,1) .56s forwards}
  .run .ring--2{display:none}
  .run .hero__bg{animation:ignite .22s linear .57s forwards}
  .run .intro{animation:introOut .18s linear .60s forwards}
  .run .form--a{animation:burst .26s cubic-bezier(.08,.86,.2,1) .72s forwards}
  .run .form--b{animation:burst .26s cubic-bezier(.08,.86,.2,1) .74s forwards}
  .run .hero__copy h1 .l1{animation:up .38s cubic-bezier(.16,.84,.36,1) .92s forwards}
  .run .hero__copy h1 .l2{animation:up .38s cubic-bezier(.16,.84,.36,1) .97s forwards}
  .run .nav{animation:navDrop .38s cubic-bezier(.16,.84,.36,1) 1.08s forwards}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .intro{display:none !important}
  .defn{height:100svh}
  .defn__w,.defn__ipa,.defn__d{opacity:1 !important;transform:none !important}
  .defn__hl{transform:scaleX(1) !important}
  .hero{height:100svh}
  .plane{rotate:0deg !important}
  .hero__bg{opacity:1 !important;animation:none !important}
  .plane{opacity:1 !important;transform:none !important;animation:none !important}
  .hero__copy h1 .l{opacity:1 !important;transform:none !important;animation:none !important}
  .nav{transform:none !important;animation:none !important}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ══ 03 · THE REEL ═══════════════════════════════════════════════════════
   Six phrases on a vertical odometer. Colours interpolate during each word
   transition, so the page itself changes state rather than cutting.
   --rbg / --rfg are written by the driver; the values below are the first
   frame, so a stale script leaves a readable section rather than a blank. */

.reel{
  position:relative;z-index:3;
  height:calc(100svh + 400svh);        /* 400svh of scrub */
  background:var(--rbg,#fdf1e7);
}
.reel__pin{
  position:sticky;top:0;height:100svh;
  background:var(--rbg,#fdf1e7);
  color:var(--rfg,#0a0a0a);
  display:flex;align-items:center;
  overflow:hidden;
}

/* The line is placed from a fixed left anchor — never centred per phrase.
   --anchor is clamped by the driver so the longest phrase can't overflow. */
.reel__line{
  opacity:calc(1 - var(--reelOut,0));
  position:absolute;
  left:var(--anchor,42.75%);
  top:50%;transform:translateY(-50%);
  display:flex;align-items:flex-start;
  font-size:clamp(2rem,4.6vw,5.4rem);
  font-weight:300;
  letter-spacing:-.018em;
  line-height:1.3;
  white-space:nowrap;
}
.reel__i{flex:0 0 auto}
.reel__slot{
  position:relative;
  overflow:hidden;                     /* nothing is ever seen mid-flight */
  margin-left:.30em;                   /* the space after "I" */
  flex:0 0 auto;
}
/* every word shares one origin, offset vertically by its distance from the
   current reel position — that is the whole odometer */
.reel__w{
  display:block;
  position:absolute;left:0;top:0;
  line-height:1.3;
  white-space:nowrap;
  transform:translateY(calc((var(--i) - var(--t,0)) * 1.3em));
  /* fades only at the very edges of the slot, so mid-transition both words
     are solid rather than ghosting through each other */
  opacity:clamp(0,calc(1.35 - 2.2 * max(var(--i) - var(--t,0), var(--t,0) - var(--i))),1);
}
/* --i now lives inline on each word, so it can't drift if the child order
   changes (the sizer is a child too) */
.reel__sizer{display:block;visibility:hidden;line-height:1.3;white-space:nowrap;pointer-events:none}
.reel:not(.is-live) .reel__sizer{display:none}

@media (max-width:680px){
  .reel{height:calc(100svh + 330svh)}
  .reel__line{font-size:clamp(1.6rem,8.4vw,2.6rem)}
}

@media (prefers-reduced-motion:reduce){
  .reel{height:100svh}
  .reel__pin{position:relative}
  .reel__w{transition:none}
}

/* Graceful degradation. The odometer only makes sense once the driver is
   running; without it --t sits at 0 and a single phrase would silently stand
   in for all six. So the reel is only pinned once JS marks it live — until
   then the six phrases simply stack and every word is present. */
.reel:not(.is-live){height:auto}
.reel:not(.is-live) .reel__pin{position:relative;height:auto;overflow:visible;padding:14svh 0;display:block}
.reel:not(.is-live) .reel__line{position:relative;left:auto;top:auto;transform:none;display:block;padding-inline:clamp(22px,8vw,120px)}
.reel:not(.is-live) .reel__i{display:none}
.reel:not(.is-live) .reel__slot{height:auto;overflow:visible;display:block;margin-left:0}
.reel:not(.is-live) .reel__w{position:relative;transform:none;opacity:1;padding:.18em 0}
.reel:not(.is-live) .reel__w::before{content:"I "}

/* ══ 04 · BACKPACK ═══════════════════════════════════════════════════════
   The video supplies its own background — navy through to cream — so the
   frames run full bleed behind the copy and nothing here paints a colour
   transition of its own. The only colours below are pre-load fallbacks. */

.bp{
  position:relative;z-index:4;
  height:calc(100svh + 380svh);
  background:#f8ead5;              /* the sequence's last frame */
}
.bp__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:#111d3d;              /* the sequence's first frame */
}
/* full bleed: the frame is the background, not an object sitting on one */
.bp__stage{position:absolute;inset:0}
.bp__stage canvas{width:100%;height:100%;display:block}

.bp__copy{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:min(48%,760px);
  padding-left:clamp(22px,5vw,96px);
}
/* both states occupy the same box so neither shifts as they cross over */
.bp__a,.bp__b{grid-area:1/1}
.bp__copy{display:grid}
.bp__a{opacity:var(--bpA,0)}
/* the closing group sits nearer the middle so it reads with the pack rather
   than stranded against the far edge — still left of it, just brought in */
.bp__b{
  opacity:var(--bpB,1);
  translate:clamp(50px,12vw,190px) calc((1 - var(--bpB,1)) * 14px);
}

.bp__h{
  margin:0;font-size:clamp(1.7rem,3.7vw,4.1rem);line-height:1.1;
  letter-spacing:-.035em;font-weight:400;
}
.bp__s{margin:clamp(16px,1.8vw,28px) 0 0;font-size:clamp(.95rem,1.2vw,1.25rem)}
/* the opening copy runs over the video's navy, the closing copy over its
   cream — each takes its colour from the frame it actually lands on */
.bp__a .bp__h{color:#fff}
.bp__a .bp__s{color:#fff;opacity:.68}
.bp__b .bp__h{color:#12244d}
.bp__btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(26px,3vw,46px);
  height:clamp(46px,3.3vw,56px);padding-inline:clamp(22px,2vw,34px);
  border-radius:var(--pill);background:#12244d;color:#fff;
  font-size:clamp(.85rem,.98vw,1rem);font-weight:500;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.bp__btn:hover{transform:translateY(-2px);background:#1b3266}

@media (max-width:860px){
  .bp{height:calc(100svh + 300svh)}
  /* the frame takes the lower band (see draw()), so the copy sits above it */
  .bp__copy{top:auto;bottom:64%;transform:none;width:auto;right:0;padding-inline:clamp(22px,6vw,60px)}
  .bp__b{translate:0 calc((1 - var(--bpB,1)) * 14px)}
}

@media (prefers-reduced-motion:reduce){
  .bp{height:100svh}
  .bp__pin{position:relative}
}