/* =============================================================================
   EPIC preview (index-epic.html). Loaded after ficavo.css; uses its tokens.
   1. Hero handoff   2. BUILD SCENE (pinned scroll)   3. DROP (physics footer)   4. magnetic buttons
   ========================================================================== */

/* ---------- 1. hero handoff: the hero gently recedes as the build scene rises ---------- */
.hero--epic > .wrap { transform: translateY(calc(var(--sy, 0) * .22px)) scale(calc(1 - var(--sy, 0) * .00011)); opacity: calc(1 - var(--sy, 0) / 750); will-change: transform, opacity; }

/* =============================================================================
   2. BUILD SCENE
   JS sets on .bs-stage: --in (entrance 0→1), --p (whole progress) and one 0→1 value per step:
   --w plan (wireframe), --d design, --c build (code), --a Ai, --l launch. Defaults = finished state,
   so no-JS / ?static / reduced motion show the completed site.
   ========================================================================== */
.bs { position: relative; height: 640vh; background: var(--bg); }
.bs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  --in: 1; --p: .5; --w: 1; --d: 1; --c: 1; --a: 1; --l: 1; --hc: #9fd0b0; }
.bs[data-step="0"] .bs-stage { --hc: #b9c3d6; } .bs[data-step="1"] .bs-stage { --hc: var(--amber); }
.bs[data-step="2"] .bs-stage { --hc: var(--sky); } .bs[data-step="3"] .bs-stage { --hc: var(--violet); }

/* background: soft aura in the step colour + a blueprint dot grid that fades as the design arrives */
.bs-aura { position: absolute; inset: 0; pointer-events: none; }
.bs-aura i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32; background: var(--hc); transition: background-color 1.2s var(--ease); }
.bs-aura__a { width: 46vw; height: 46vw; right: -8vw; top: -10vw; animation: bsDrift 18s ease-in-out infinite alternate; }
.bs-aura__b { width: 34vw; height: 34vw; left: -10vw; bottom: -14vw; opacity: .22 !important; animation: bsDrift 22s ease-in-out -6s infinite alternate-reverse; }
@keyframes bsDrift { to { transform: translate(-6vw, 5vw) scale(1.12); } }
.bs-grid { position: absolute; inset: 0; pointer-events: none; opacity: calc(.9 - var(--d) * .55);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 18%, transparent) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 60% 50%, #000, transparent); }

.bs-wrap { position: relative; height: 100%; display: grid; grid-template-columns: minmax(300px, 4fr) 8fr; align-items: center; gap: clamp(32px, 4vw, 72px); }

/* text column: step progress + one message per step */
.bs-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 40px; max-width: 420px; }
.bs-rail li { font-size: 13px; font-weight: 500; color: var(--ink-3); transition: color .4s; }
.bs-rail li i { display: block; height: 4px; border-radius: 4px; margin-bottom: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; position: relative; }
.bs-rail li i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 1)); }
.bs-rail li.is-on { color: var(--ink); }
.bs-says { position: relative; min-height: 290px; }
.bs-say { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(26px); filter: blur(6px); pointer-events: none;
  transition: opacity .55s var(--ease), transform .7s var(--ease), filter .55s var(--ease); }
.bs-say.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: .12s; }
html:not(.js) .bs-say[data-k="4"] { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.bs-say .t-lead { margin-top: 20px; max-width: 420px; }
.bs-go { margin-top: 30px; }

/* the stage: a browser window that rises in 3D, then builds itself */
.bs-scene { position: relative; aspect-ratio: 16 / 11.4; width: 100%; max-height: 78vh; perspective: 1800px; justify-self: end; }
.bs-win { position: absolute; left: 0; top: 7%; width: 84%; aspect-ratio: 16 / 10.8; container-type: inline-size; z-index: 2;
  border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid color-mix(in srgb, var(--hc) 30%, #dfe1e7);
  transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--in)) * 18%)) rotateX(calc((1 - var(--in)) * 34deg)) scale(calc(.84 + var(--in) * .16))
             translateX(calc(var(--l) * -3% * var(--sx, 1))) scale(calc(1 - var(--l) * .08));
  opacity: calc(var(--in) * 2.5); transition: border-color 1s; }
.bs-bar { position: relative; display: flex; align-items: center; gap: 1cqi; height: 5.4cqi; padding: 0 1.8cqi; background: #f4f4f6; border-bottom: 1px solid #e7e7ec; }
.bs-bar > i { width: 1.25cqi; height: 1.25cqi; border-radius: 50%; background: #d9d9de; }
.bs-bar > i:nth-child(1) { background: color-mix(in srgb, #ff5f57 calc(var(--d) * 100%), #d9d9de); }
.bs-bar > i:nth-child(2) { background: color-mix(in srgb, #febc2e calc(var(--d) * 100%), #d9d9de); }
.bs-bar > i:nth-child(3) { background: color-mix(in srgb, #28c840 calc(var(--d) * 100%), #d9d9de); }
.bs-url { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; justify-content: center; gap: .7cqi;
  width: 40%; height: 3.3cqi; border-radius: 1cqi; background: #fff; border: 1px solid #e7e7ec; font-size: 1.55cqi; color: var(--ink-2); }
.bs-url svg { width: 1.5cqi; height: 1.5cqi; color: color-mix(in srgb, var(--green) calc(clamp(0, (var(--l) - .05) * 10, 1) * 100%), #b5b5bd); }
.bs-url__t { display: grid; } .bs-url__t > span { grid-area: 1 / 1; }
.bs-url__a { opacity: calc(1 - clamp(0, (var(--l) - .06) * 12, 1)); }
.bs-url__b { opacity: clamp(0, (var(--l) - .1) * 12, 1); font-weight: 500; color: var(--ink); }

/* the little bakery site */
.bs-site { position: relative; height: calc(100% - 5.4cqi); padding: 2.6cqi 3.6cqi; overflow: hidden; font-family: var(--font-body);
  background: color-mix(in srgb, #fbf3e8 calc(var(--d) * 100%), #fff); color: #2b1d14; }
.bs-nav { display: flex; align-items: center; justify-content: space-between; height: 4.6cqi; margin-bottom: 3.4cqi; }
.bs-logo { width: 13cqi; height: 3.6cqi; } .bs-logo b { font: 500 3.1cqi/1 var(--font-main); letter-spacing: -.04em; } .bs-logo em { font-style: normal; color: #c8662b; }
.bs-links { width: 24cqi; height: 2.4cqi; } .bs-links > span { display: flex; justify-content: space-between; font-size: 1.7cqi; }
.bs-links i { font-style: normal; }
.bs-order { width: 12cqi; height: 4.4cqi; border-radius: 4cqi; }
.bs-order > span { display: flex; align-items: center; justify-content: center; gap: .8cqi; height: 100%; border-radius: inherit; background: #2b1d14; color: #fbf3e8; font-size: 1.65cqi; font-weight: 500; }
.bs-cart { display: inline-grid; place-items: center; width: 2.3cqi; height: 2.3cqi; border-radius: 50%; background: #c8662b; color: #fff; font-style: normal; font-size: 1.3cqi; overflow: hidden; line-height: 2.3cqi; }
.bs-cart u { grid-area: 1 / 1; text-decoration: none; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.bs-cart u + u { transform: translateY(120%); }
.f-cart .bs-cart u:first-child { transform: translateY(-120%); } .f-cart .bs-cart u + u { transform: none; }
.f-cart .bs-cart { animation: bsPop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bsPop { 50% { transform: scale(1.45); } }

.bs-hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.4cqi; height: 33cqi; margin-bottom: 3.4cqi; }
.bs-copy { display: flex; flex-direction: column; justify-content: center; gap: 2.2cqi; }
.bs-h { min-height: 13cqi; } .bs-h b { display: block; font: 500 5.6cqi/1.02 var(--font-main); letter-spacing: -.045em; }
.bs-h em { font-family: "Instrument Serif", serif; font-weight: 400; font-style: italic; color: #c8662b; letter-spacing: -.02em; }
.bs-p { min-height: 4.8cqi; font-size: 1.85cqi; line-height: 1.45; color: #6b5547; max-width: 34cqi; }
.bs-btn { width: 21cqi; height: 5.2cqi; border-radius: 5cqi; }
.bs-btn > span { display: grid; place-items: center; height: 100%; border-radius: inherit; background: #c8662b; color: #fff; font-size: 1.75cqi; font-weight: 500; }
.f-wired .bs-btn > span { animation: bsPulse 1.8s ease-in-out infinite; }
@keyframes bsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 102, 43, .45); } 60% { box-shadow: 0 0 0 1.4cqi rgba(200, 102, 43, 0); } }
.bs-img { border-radius: 2cqi; } .bs-img > div, .bs-art { width: 100%; height: 100%; border-radius: inherit; display: block; overflow: hidden; }
.bs-img .bs-art { transform: scale(calc(1.15 - var(--d) * .15)); }

.bs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqi; }
.bs-card { height: 14cqi; border-radius: 1.8cqi; }
.bs-card > div { position: relative; display: flex; align-items: center; gap: 1.6cqi; height: 100%; padding: 1.6cqi; border-radius: inherit; background: #fff; border: 1px solid #f0e3d3; }
.bs-card__img { flex: none; display: grid; place-items: center; width: 10.6cqi; height: 10.6cqi; border-radius: 1.3cqi; background: #f6e2c6; }
.bs-card__img i { display: block; }
.bs-card__img--loaf i { width: 7cqi; height: 4.6cqi; border-radius: 50% 50% 22% 22%; background: linear-gradient(#c9772f, #8a4a1c); box-shadow: inset 1.4cqi -.8cqi 0 -1cqi #f3cf9a; }
.bs-card__img--crois i { width: 7.4cqi; height: 3.4cqi; border-radius: 50% 50% 40% 40% / 90% 90% 30% 30%; background: repeating-linear-gradient(90deg, #e3a25a 0 1.1cqi, #c97c32 1.1cqi 1.5cqi); }
.bs-card__img--cup i { width: 5cqi; height: 5cqi; border-radius: 50%; background: radial-gradient(circle, #f3e1c9 0 32%, #a86b3c 34% 58%, #fff 60%); box-shadow: 0 0 0 .5cqi #fff; }
.bs-card__row { display: flex; flex-direction: column; gap: .5cqi; font-size: 1.6cqi; } .bs-card__row b { font-weight: 500; line-height: 1.2; } .bs-card__row span { color: #8a6e5c; }
.bs-add { position: absolute; right: 1.4cqi; bottom: 1.4cqi; display: grid; place-items: center; width: 3cqi; height: 3cqi; border-radius: 50%; background: #2b1d14; color: #fff; font-size: 1.9cqi; line-height: 1; }

/* wireframe → design: every .el appears as a grey skeleton (--wi), then its real content fades in over it (--di) */
.bs-site .el { position: relative; --wi: clamp(0, var(--w) * 13 - var(--i), 1); --di: clamp(0, var(--d) * 15 - var(--i) * 1.25, 1);
  opacity: var(--wi); transform: translateY(calc((1 - var(--wi)) * 2.4cqi)) scale(calc(.94 + var(--wi) * .06)); }
.bs-site .el > * { opacity: var(--di); transform: scale(calc(.97 + var(--di) * .03)); }
.bs-site .el::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: calc(1 - var(--di));
  background: #eef0f4; outline: 1.5px dashed #c3c8d3; outline-offset: -1px; }
.bs-h::after { background: linear-gradient(#e3e6ec 0 0) 0 8% / 92% 38% no-repeat, linear-gradient(#e3e6ec 0 0) 0 92% / 64% 38% no-repeat !important; outline: 0 !important; }
.bs-p::after { background: linear-gradient(#eceef2 0 0) 0 0 / 100% 36% no-repeat, linear-gradient(#eceef2 0 0) 0 100% / 70% 36% no-repeat !important; outline: 0 !important; }
.bs-links::after { background: repeating-linear-gradient(90deg, #e3e6ec 0 26%, transparent 26% 37%) !important; outline: 0 !important; border-radius: 1cqi; }
.bs-img::after { background: linear-gradient(to top right, transparent calc(50% - 1px), #c3c8d3 50%, transparent calc(50% + 1px)),
  linear-gradient(to top left, transparent calc(50% - 1px), #c3c8d3 50%, transparent calc(50% + 1px)), #eef0f4 !important; }
/* wireframe annotations */
.bs-site .el[data-wl]::before { content: attr(data-wl); position: absolute; z-index: 2; left: 0; top: -1.2cqi; translate: 0 -100%; white-space: nowrap;
  padding: .35cqi .9cqi; border-radius: .6cqi; background: #5b6a8a; color: #fff; font: 500 1.3cqi/1.3 var(--font-body);
  opacity: calc(var(--wi) * (1 - var(--di) * 1.6)); }
.bs-img[data-wl]::before { top: 1.4cqi !important; left: 1.4cqi !important; translate: none !important; }
.bs-card[data-wl]::before { top: -1cqi; }

/* design: a selection box and a collaborator pointer move over the headline */
.bs-sel { position: absolute; left: -1cqi; top: 4.4cqi; width: 41cqi; height: 14cqi; pointer-events: none; border: 1.5px solid var(--amber-ink);
  opacity: clamp(0, min((var(--d) - .25) * 8, (.97 - var(--d)) * 9), 1); }
.bs-sel i { position: absolute; width: 1.1cqi; height: 1.1cqi; background: #fff; border: 1.5px solid var(--amber-ink); }
.bs-sel i:nth-child(1) { left: -.6cqi; top: -.6cqi; } .bs-sel i:nth-child(2) { right: -.6cqi; top: -.6cqi; }
.bs-sel i:nth-child(3) { left: -.6cqi; bottom: -.6cqi; } .bs-sel i:nth-child(4) { right: -.6cqi; bottom: -.6cqi; }
.bs-sel small { position: absolute; left: 50%; bottom: -1cqi; translate: -50% 100%; padding: .3cqi .9cqi; border-radius: .6cqi; background: var(--amber-ink); color: #fff; font: 500 1.25cqi/1.3 var(--font-body); white-space: nowrap; }
.bs-ptr { position: absolute; left: calc(18cqi + var(--d) * 26cqi); top: calc(26cqi - var(--d) * 9cqi); color: var(--violet-ink); pointer-events: none;
  opacity: clamp(0, min((var(--d) - .12) * 7, (.97 - var(--d)) * 9), 1); }
.bs-ptr svg { width: 2.4cqi; height: 2.4cqi; display: block; }
.bs-ptr small { display: block; margin: -.2cqi 0 0 1.8cqi; padding: .3cqi .9cqi; border-radius: .6cqi; background: var(--violet-ink); color: #fff; font: 500 1.25cqi/1.3 var(--font-body); }

/* Ai: a launcher bubble opens into a chat that answers by itself */
.bs-launcher { position: absolute; right: 2.6cqi; bottom: 2.6cqi; display: grid; place-items: center; width: 6cqi; height: 6cqi; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--gi-violet2), var(--gi-magenta2));
  transform: scale(clamp(0, var(--a) * 9, 1)); opacity: calc((1 - clamp(0, (var(--a) - .14) * 12, 1)) * (1 - clamp(0, var(--l) * 8, 1))); }
.bs-launcher svg, .bs-chat__hd svg { width: 46%; height: 46%; }
.bs-chat { position: absolute; right: 2.6cqi; bottom: 2.6cqi; width: 39cqi; border-radius: 2cqi; overflow: hidden; background: #fff; border: 1px solid #ebe4f7; transform-origin: 100% 100%;
  --ao: calc(clamp(0, (var(--a) - .1) * 9, 1) * clamp(0, (.3 - var(--l)) * 6, 1)); opacity: var(--ao); transform: scale(calc(.55 + var(--ao) * .45)) translateY(calc((1 - var(--ao)) * 3cqi)); }
.bs-chat__hd { display: grid; grid-template-columns: 4.2cqi 1fr; grid-template-rows: auto auto; column-gap: 1.2cqi; align-items: center; padding: 1.6cqi 1.8cqi; color: #fff;
  background: linear-gradient(135deg, var(--gi-violet2), var(--gi-magenta2)); }
.bs-chat__hd svg { grid-row: span 2; width: 4.2cqi; height: 4.2cqi; padding: 1cqi; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.bs-chat__hd b { font-size: 1.7cqi; font-weight: 500; } .bs-chat__hd span { font-size: 1.3cqi; opacity: .8; }
.bs-chat__body { display: flex; flex-direction: column; gap: 1cqi; padding: 1.8cqi; min-height: 27cqi; background: #faf8ff; }
.bs-m { max-width: 84%; padding: 1cqi 1.4cqi; border-radius: 1.6cqi 1.6cqi 1.6cqi .4cqi; background: #fff; border: 1px solid #ece8f6; font-size: 1.45cqi; line-height: 1.4; color: #2a2540;
  --t: 0; opacity: clamp(0, (var(--a) - var(--t)) * 14, 1); transform: translateY(calc((1 - clamp(0, (var(--a) - var(--t)) * 14, 1)) * 1.6cqi)); }
.bs-m--me { align-self: flex-end; border-radius: 1.6cqi 1.6cqi .4cqi 1.6cqi; background: var(--gi-violet2); border-color: transparent; color: #fff; }
.bs-m b { color: var(--green); }
.bs-m1 { --t: .22; } .bs-m3 { --t: .46; } .bs-m4 { --t: .62; } .bs-m5 { --t: .8; }
.bs-m2 { position: absolute; display: flex; gap: .5cqi; opacity: clamp(0, min((var(--a) - .32) * 14, (.46 - var(--a)) * 14), 1); margin-top: 5.6cqi; }
.bs-m2 i { width: .9cqi; height: .9cqi; border-radius: 50%; background: #b9b1d6; animation: bsDot 1s ease-in-out infinite; }
.bs-m2 i:nth-child(2) { animation-delay: .15s; } .bs-m2 i:nth-child(3) { animation-delay: .3s; }
@keyframes bsDot { 50% { transform: translateY(-.5cqi); opacity: .5; } }
.bs-chat__body { position: relative; }

/* build: a code editor slides in, types itself and compiles */
.bs-code { position: absolute; z-index: 3; right: 0; bottom: 4%; width: 46%; border-radius: 14px; overflow: hidden; background: #16171d; color: #d7dae4; container-type: inline-size;
  border: 1px solid #2a2c35; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; line-height: 1.75;
  --ci: clamp(0, var(--c) * 6, 1); --co: clamp(0, (.28 - var(--l)) * 6, 1);
  opacity: calc(var(--ci) * var(--co)); transform: translateX(calc(((1 - var(--ci)) * 26% + (1 - var(--co)) * 12%) * var(--sx, 1))) rotate(calc((1 - var(--ci)) * 3deg * var(--sx, 1))); }
.bs-code__hd { display: flex; align-items: center; gap: 1.6cqi; padding: 2.6cqi 3.4cqi; border-bottom: 1px solid #262832; }
.bs-code__hd i { width: 2.2cqi; height: 2.2cqi; border-radius: 50%; background: #3a3c47; }
.bs-code__hd span { margin-left: 2cqi; font-size: 2.6cqi; color: #8b8fa0; }
.bs-code__body { padding: 3cqi 3.4cqi 2cqi; min-height: 52cqi; font-size: 3.1cqi; }
.bs-ln { display: flex; gap: 3.4cqi; white-space: nowrap; --x: clamp(0, var(--c) * 13 - var(--k) - 1.2, 1); opacity: clamp(0, var(--x) * 3, 1); }
.bs-ln b { width: 2.4cqi; text-align: right; font-weight: 400; color: #4c4f5d; }
.bs-ln > span { padding-left: calc(var(--ind) * 3.6cqi); clip-path: inset(0 calc((1 - var(--x)) * 100%) 0 0); }
.bs-ln i { font-style: normal; } .bs-ln .k { color: #c792ea; } .bs-ln .f { color: #82aaff; } .bs-ln .n { color: #ffcb6b; } .bs-ln .s { color: #c3e88d; } .bs-ln .t { color: #f07178; } .bs-ln .a { color: #ffcb6b; }
.bs-build { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.4cqi; padding: 2.6cqi 3.4cqi; border-top: 1px solid #262832; font-size: 2.7cqi; }
.bs-build__bar { grid-column: 1; height: 1.2cqi; border-radius: 1cqi; background: #262832; overflow: hidden; }
.bs-build__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--green)); transform-origin: left; transform: scaleX(clamp(0, (var(--c) - .72) * 4, 1)); }
.bs-build__a, .bs-build__b { grid-area: 1 / 2; justify-self: end; white-space: nowrap; }
.bs-build__a { color: #8b8fa0; opacity: calc(1 - clamp(0, (var(--c) - .97) * 40, 1)); }
.bs-build__b { color: #9be3b0; opacity: clamp(0, (var(--c) - .97) * 40, 1); } .bs-build__b b { color: var(--green); }

/* launch: the phone version slides in beside the browser */
.bs-phone { position: absolute; z-index: 3; right: 2%; bottom: 0; width: 23%; aspect-ratio: 9 / 18.6; container-type: inline-size;
  padding: 2.6%; border-radius: 16% / 8%; background: #111214;
  --li: clamp(0, (var(--l) - .14) * 4, 1); opacity: var(--li); transform: translateY(calc((1 - var(--li)) * 70%)) rotate(calc((1 - var(--li)) * 9deg)); }
.bs-phone__in { position: relative; display: flex; flex-direction: column; gap: 5cqi; height: 100%; padding: 15cqi 7cqi 7cqi; border-radius: 13% / 6.4%; overflow: hidden; background: #fbf3e8; color: #2b1d14; }
.bs-phone__notch { position: absolute; left: 50%; top: 4cqi; width: 30cqi; height: 7cqi; translate: -50% 0; border-radius: 7cqi; background: #111214; }
.bs-phone__nav { display: flex; justify-content: space-between; align-items: center; } .bs-phone__nav b { font: 500 9cqi/1 var(--font-main); letter-spacing: -.04em; } .bs-phone__nav em { font-style: normal; color: #c8662b; }
.bs-phone__nav i { width: 9cqi; height: 4.5cqi; border-block: 1.2cqi solid #2b1d14; }
.bs-phone__img { height: 58cqi; border-radius: 6cqi; overflow: hidden; } .bs-phone__img svg { width: 100%; height: 100%; display: block; }
.bs-phone__h { font: 500 11.5cqi/1.02 var(--font-main); letter-spacing: -.045em; } .bs-phone__h em { font-family: "Instrument Serif", serif; font-weight: 400; color: #c8662b; }
.bs-phone__card { display: flex; align-items: center; gap: 4cqi; padding: 3cqi; border-radius: 5cqi; background: #fff; font-size: 5.4cqi; line-height: 1.2; }
.bs-phone__card i { flex: none; width: 15cqi; height: 15cqi; border-radius: 3.4cqi; background: #f6e2c6 radial-gradient(60% 40% at 50% 60%, #b5652a 60%, transparent 62%); }
.bs-phone__card--c i { background: #f6e2c6 radial-gradient(closest-side, #f3e1c9 30%, #a86b3c 32% 60%, transparent 62%); }
.bs-phone__card span { display: flex; flex-direction: column; } .bs-phone__card small { color: #8a6e5c; font-size: 4.8cqi; }
.bs-phone__btn { display: grid; place-items: center; height: 15cqi; margin-top: auto; border-radius: 10cqi; background: #c8662b; color: #fff; font-size: 6cqi; font-weight: 500; }

/* floating glass cards in two depth layers: far = slower + softly out of focus, near = faster + sharp */
.bs-depth { position: absolute; inset: 0; pointer-events: none; }
.bs-depth--far { z-index: 1; transform: translateY(calc((var(--p) - .5) * 70px)); filter: blur(.6px); }
.bs-depth--near { z-index: 4; transform: translateY(calc((.5 - var(--p)) * 220px)); }
.bs-float, .bs-toast { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; font-size: 13px; line-height: 1.3;
  background: color-mix(in srgb, #fff 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--hc) 30%, #e2e3e9); color: var(--ink); }
.bs-float b { font-weight: 500; }
.bs-float--sw { right: 0; top: -1%; flex-direction: column; align-items: flex-start; gap: 8px; --o: clamp(0, min((var(--d) - .3) * 6, (.45 - var(--c)) * 5), 1); }
.bs-sw { display: flex; gap: 6px; } .bs-sw i { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.bs-float--type { right: -1%; top: 32%; --o: clamp(0, min((var(--d) - .45) * 6, (.45 - var(--c)) * 5), 1); }
.bs-float--type em { font: italic 400 38px/1 "Instrument Serif", serif; color: var(--amber-ink); }
.bs-float--type span { display: flex; flex-direction: column; } .bs-float--type small { color: var(--ink-3); font-size: 12px; }
.bs-float--score { left: -4%; bottom: 6%; --o: clamp(0, (var(--l) - .5) * 5, 1); }
.bs-float--score b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 500 16px/1 var(--font-main); color: var(--green-ink);
  background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(var(--green) calc(var(--o) * 100%), #e4e6ea 0); }
.bs-float--live { left: -3%; top: 16%; gap: 8px; font-weight: 500; --o: clamp(0, (var(--l) - .3) * 6, 1); }
.bs-float--live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent); animation: bsLive 1.6s ease-in-out infinite; }
@keyframes bsLive { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 0%, transparent); } }
.bs-toast { right: 5%; top: 3%; --o: clamp(0, (var(--l) - .58) * 6, 1); }
.bs-toast > span:last-child { display: flex; flex-direction: column; } .bs-toast small { color: var(--ink-3); font-size: 12px; }
.bs-float, .bs-toast { opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 22px)) scale(calc(.92 + var(--o) * .08)); }
.bs-spark { position: absolute; color: var(--gi-violet2); --o: clamp(0, min((var(--a) - .1) * 6, (.3 - var(--l)) * 6), 1); opacity: var(--o); transform: scale(var(--o)) rotate(calc(var(--a) * 90deg)); }
.bs-spark svg { width: 100%; height: 100%; display: block; }
.bs-spark--1 { width: 46px; height: 46px; right: 9%; top: 18%; } .bs-spark--2 { width: 24px; height: 24px; right: 4%; top: 30%; color: var(--gi-magenta2); }

/* launch burst: a ring of colour dots flies out from the window */
.bs-burst { position: absolute; z-index: 4; left: 42%; top: 48%; pointer-events: none; --b: clamp(0, (var(--l) - .1) * 2.6, 1); }
.bs-burst i { position: absolute; width: 12px; height: 12px; border-radius: 4px; background: var(--c);
  transform: rotate(var(--a)) translateX(calc(var(--b) * var(--d) * 34vw)) rotate(calc(var(--b) * 540deg)) scale(calc(1.2 - var(--b) * .8));
  opacity: clamp(0, min(var(--b) * 10, (1 - var(--b)) * 3), 1); }
.bs-burst i:nth-child(3n) { border-radius: 50%; width: 9px; height: 9px; }

/* phones / tablets: text on top, the stage below */
@media (max-width: 900px) {
  .bs { height: 560vh; }
  .bs-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: center; align-content: stretch; gap: 8px;
    padding-top: calc(var(--hd-h) + 18px); padding-bottom: 28px; }
  .bs-text { align-self: start; }
  .bs-rail { margin-bottom: 18px; max-width: none; } .bs-rail li { font-size: 12px; }
  .bs-says { min-height: 168px; }
  .bs-say .t-h2 { font-size: 30px; } .bs-say .t-lead { margin-top: 12px; font-size: 16px; }
  .bs-go { margin-top: 16px; }
  .bs-scene { max-height: none; justify-self: stretch; aspect-ratio: 1 / 1.02; }
  .bs-win { width: 100%; top: 0; border-radius: 10px; transform-origin: 50% 100%; }
  .bs-code { width: 88%; right: 0; bottom: 0; border-radius: 10px; --co: clamp(0, (.1 - var(--a)) * 10, 1); }
  .bs-phone { width: 40%; right: 2%; bottom: 0; }
  .bs-depth--far, .bs-float--score, .bs-float--live, .bs-spark { display: none; }
  .bs-toast { right: auto; left: 0; top: auto; bottom: 8%; padding: 8px 12px; } .bs-toast .gi__b { --s: 28px !important; }
  .bs-burst { left: 50%; top: 40%; }
}
@media (max-width: 900px) and (max-height: 700px) { .bs-says { min-height: 150px; } .bs-say .t-lead { font-size: 15px; } .bs-say .t-h2 { font-size: 26px; } }

/* no JS / reduced motion: the finished site, no pinning */
html:not(.js) .bs, .bs--static { height: auto; }
html:not(.js) .bs-stage, .bs--static .bs-stage { position: relative; height: auto; padding: clamp(80px, 10vw, 140px) 0; }
html:not(.js) .bs-says, .bs--static .bs-says { min-height: 220px; }

/* Arabic (RTL): mirror the stage so the browser sits beside the text and the floating cards stay clear of it */
[dir="rtl"] .bs-stage { --sx: -1; }
[dir="rtl"] .bs-rail li i::after { transform-origin: right; }
[dir="rtl"] .bs-scene { justify-self: start; }
[dir="rtl"] .bs-win { left: auto; right: 0; }
[dir="rtl"] .bs-code { right: auto; left: 0; }
[dir="rtl"] .bs-phone { right: auto; left: 2%; }
[dir="rtl"] .bs-float--sw { right: auto; left: 0; align-items: flex-end; }
[dir="rtl"] .bs-float--type { right: auto; left: -1%; }
[dir="rtl"] .bs-float--score { left: auto; right: -4%; }
[dir="rtl"] .bs-float--live { left: auto; right: -3%; }
[dir="rtl"] .bs-toast { right: auto; left: 5%; }
[dir="rtl"] .bs-spark--1 { right: auto; left: 9%; } [dir="rtl"] .bs-spark--2 { right: auto; left: 4%; }
[dir="rtl"] .bs-burst { left: 58%; }
[dir="rtl"] .bs-sel { left: auto; right: -1cqi; }
[dir="rtl"] .bs-ptr { left: auto; right: calc(18cqi + var(--d) * 26cqi); }
[dir="rtl"] .bs-ptr svg { transform: scaleX(-1); } [dir="rtl"] .bs-ptr small { margin: -.2cqi 1.8cqi 0 0; }
[dir="rtl"] .bs-launcher, [dir="rtl"] .bs-chat { right: auto; left: 2.6cqi; } [dir="rtl"] .bs-chat { transform-origin: 0 100%; }
[dir="rtl"] .bs-add { right: auto; left: 1.4cqi; }
[dir="rtl"] .bs-site .el[data-wl]::before { left: auto; right: 0; }
[dir="rtl"] .bs-img[data-wl]::before { left: auto !important; right: 1.4cqi; }
[dir="rtl"] .bs-order[data-wl]::before { right: auto; left: 0 !important; }
@media (max-width: 900px) { [dir="rtl"] .bs-scene { justify-self: stretch; } [dir="rtl"] .bs-toast { left: auto; right: 0; } [dir="rtl"] .bs-phone { left: 2%; } }

/* =============================================================================
   3. DROP: physics footer. JS (epic.js "drop") positions every .drop__b with transforms.
   ========================================================================== */
.drop { position: relative; min-height: max(100vh, 720px); overflow: hidden; background: var(--bg); padding: clamp(100px, 12vw, 170px) 0 0; text-align: center; }
.drop::before { content: ""; position: absolute; inset: auto 0 0; height: 60%; pointer-events: none;
  background: radial-gradient(50% 80% at 20% 100%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 70%),
              radial-gradient(50% 80% at 80% 100%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%),
              radial-gradient(40% 60% at 50% 100%, color-mix(in srgb, var(--sky) 18%, transparent), transparent 70%); }
.drop__in { position: relative; z-index: 2; pointer-events: none; }
.drop__h { font-size: clamp(60px, 12.5vw, 210px); line-height: .92; letter-spacing: -.055em; }
.drop__h em { font-family: "Instrument Serif", serif; font-weight: 400; font-style: italic; letter-spacing: -.03em; padding-right: .06em;
  background: linear-gradient(100deg, var(--gi-amber2), var(--gi-pink2) 45%, var(--gi-violet2) 75%, var(--gi-sky2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.drop .t-lead { margin: 26px auto 0; max-width: 560px; }
.drop__cta { justify-content: center; margin-top: 34px; pointer-events: auto; position: relative; z-index: 3; }
.drop__pit { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.drop__b { position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; cursor: grab; will-change: transform; visibility: hidden; }
.drop__b.is-on { visibility: visible; }
.drop__b.is-grab { cursor: grabbing; z-index: 2; }
.drop__b .gi__b { box-shadow: inset 0 2px 1px rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .4), inset 0 -10px 18px rgba(0, 0, 0, .14), inset 0 14px 22px rgba(255, 255, 255, .24), 0 0 0 1px rgba(17, 17, 40, .06);
  transition: scale .25s cubic-bezier(.3, 1.6, .5, 1); }
.drop__b.is-grab .gi__b { scale: 1.08; }
.drop__hint { position: relative; z-index: 2; margin: 22px 0 0; font-size: 13px; color: var(--ink-3); pointer-events: none; transition: opacity .6s; }
.drop.is-played .drop__hint { opacity: 0; }
@media (hover: none) { .drop__hint { display: none; } }

/* ---------- 4. magnetic buttons (fine pointers only; JS sets --mx/--my) ---------- */
.mag { transform: translate(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), background-color .2s, box-shadow .2s; }
.mag.is-mag { transition: transform .12s linear, background-color .2s, box-shadow .2s; }
.bs-logo[data-wl]::before, .bs-order[data-wl]::before { top: auto !important; bottom: -1cqi; translate: 0 100% !important; }
.bs-order[data-wl]::before { left: auto !important; right: 0; }