/* =====================================================================
   /bikes/strata — MODEL DETAIL, concept preview
   In production: bikes.css / bikes.js in the Worker + a window.BIKE config.
   Layer order:  0 backdrop · 1 wordmark · 2 fog · 3 content
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
@font-face{font-family:'Yapari Ultra';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0f23c865764839cf2f/1784183311987/Yapari-Ultra.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Yapari';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0faee87773cba8c418/1784183312114/Yapari-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Yapari';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0f746cb4216c09f11c/1784183312111/Yapari-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Yapari';src:url('https://static1.squarespace.com/static/5ea9a82580530c7a6069f5c3/t/6a587a0fe3c0af1c1d1e0622/1784183312110/Yapari-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --black:#0B0B0A; --offwhite:#F2F0E8; --gray-1:#8C8C86; --gray-2:#5B5B56; --gray-3:#3A3A37; --moss:#4A4F45;
  --font-display:'Yapari','Helvetica Neue',Arial,sans-serif;
  --font-ultra:'Yapari Ultra','Yapari','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
  /* backdrop treatment — matched to /bikes */
  --bk-bright:.90; --bk-sat:1.08; --bk-veil:.43; --bk-fog:.52;
}
#bike *{box-sizing:border-box;margin:0;padding:0}
body{background:var(--black);color:var(--offwhite);font-family:var(--font-display);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
#bike img{display:block;max-width:100%}

/* ---- 0 · backdrop (fixed, carried through the whole page) ---- */
.bd-backdrop{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center 38%;
  filter:brightness(var(--bk-bright)) saturate(var(--bk-sat)) contrast(1.02);transform:scale(1.04)}
.bd-backdrop::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,11,10,calc(var(--bk-veil)*1.25)) 0%,
    rgba(11,11,10,calc(var(--bk-veil)*0.55)) 42%,
    rgba(11,11,10,calc(var(--bk-veil)*2.6)) 100%)}

/* ---- 1 · the model wordmark, sitting UNDER the fog so it reads variably ---- */
.bd-wordmark{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden}
.bd-wordmark span{font-family:var(--font-ultra);font-weight:900;letter-spacing:.02em;
  font-size:clamp(5rem,21vw,20rem);line-height:.85;white-space:nowrap;
  color:rgba(242,240,232,.19);text-transform:uppercase}

/* ---- 2 · drifting black fog ---- */
.bd-fog{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.bd-fog span{position:absolute;border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(6,6,6,var(--bk-fog)),rgba(6,6,6,0))}
.bd-fog .f1{width:95vw;height:95vw;left:-25vw;top:-30vw;animation:bdd1 54s ease-in-out infinite}
.bd-fog .f2{width:80vw;height:80vw;right:-20vw;top:-15vw;animation:bdd2 67s ease-in-out infinite}
.bd-fog .f3{width:110vw;height:110vw;left:5vw;bottom:-45vw;animation:bdd3 61s ease-in-out infinite}
.bd-fog .f4{width:70vw;height:70vw;right:5vw;bottom:-20vw;animation:bdd1 48s ease-in-out infinite reverse}
.bd-fog .f5{width:85vw;height:85vw;left:20vw;top:10vh;animation:bdd2 73s ease-in-out infinite reverse}
@keyframes bdd1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,5vw) scale(1.22)}}
@keyframes bdd2{0%,100%{transform:translate(0,0) scale(1.14)}50%{transform:translate(-11vw,4vw) scale(.92)}}
@keyframes bdd3{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(6vw,-7vw) scale(1.25)}}
@media (prefers-reduced-motion: reduce){.bd-fog span{animation:none!important}}

/* the arrival veil — opens FULLY opaque, holds briefly while the video starts
   scaling (hiding the crop shift), then clears slowly as the hero settles */
.bd-veil{position:fixed;inset:0;z-index:6;pointer-events:none;background:#070707;opacity:0;
  transition:opacity 1.15s ease .18s}
body.arriving .bd-veil{opacity:1;transition:none}

/* ---- 3 · content ---- */
#bike main{position:relative;z-index:3}
.bd-wrap{width:min(94vw,1400px);margin:0 auto}
.bd-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-1)}
.bd-h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.06;
  color:var(--offwhite);overflow-wrap:normal;word-break:normal}

/* HERO — media left (33%), configurator right */
.bd-hero{min-height:100svh;display:flex;align-items:center;padding:130px 0 70px}
.bd-hero-grid{display:grid;grid-template-columns:minmax(0,33%) minmax(0,1fr);gap:clamp(28px,5vw,72px);
  align-items:center;width:100%}
.bd-media{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  border:1px solid rgba(242,240,232,.14);background:#0f0f0e;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);will-change:transform}
.bd-media video{width:100%;height:100%;object-fit:cover}
/* FLIP: JS sets the "full frame" transform on load, then releases it to rest.
   Slower than the departure so the settle reads as deliberate, not a snap. */
.bd-media.flip{transition:transform 1.45s cubic-bezier(.6,0,.2,1)}

.bd-model{font-family:var(--font-ultra);font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:.9;margin:14px 0 18px}
.bd-lede{font-size:16px;line-height:1.7;color:var(--gray-1);max-width:46ch;margin-bottom:34px}

.bd-optlabel{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-2);margin-bottom:12px}
.bd-opts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.bd-opt{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;background:transparent;
  color:var(--offwhite);border:1px solid rgba(242,240,232,.32);border-radius:2px;
  padding:13px 22px;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.bd-opt:hover{border-color:var(--moss);background:rgba(74,79,69,.25)}
.bd-opt.is-active{border-color:var(--offwhite);background:rgba(242,240,232,.1)}
.bd-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--black);
  background:var(--offwhite);border:1px solid var(--offwhite);padding:14px 26px;border-radius:2px;
  transition:background .25s,border-color .25s,color .25s}
.bd-cta:hover{background:var(--moss);border-color:var(--moss);color:var(--offwhite)}
.bd-note{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--gray-2);margin-top:14px}

/* WHY */
.bd-why{padding:clamp(80px,12vh,150px) 0;border-top:1px solid rgba(242,240,232,.09)}
.bd-why-head{max-width:760px;margin-bottom:clamp(34px,5vh,60px)}
.bd-why-head .bd-h2{margin-top:14px}
.bd-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bd-card{background:rgba(11,11,10,.55);border:1px solid rgba(242,240,232,.11);border-radius:4px;overflow:hidden;
  backdrop-filter:blur(2px)}
.bd-card-img{aspect-ratio:4/3;background-size:cover;background-position:center;filter:saturate(.8) brightness(.85)}
.bd-card-body{padding:22px 22px 26px}
.bd-card-title{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--offwhite);margin-bottom:9px}
.bd-card-text{font-size:14px;line-height:1.65;color:var(--gray-1)}

/* TECHNICAL SPECS */
.bd-specs{padding:clamp(80px,12vh,150px) 0 clamp(90px,14vh,170px);border-top:1px solid rgba(242,240,232,.09);
  text-align:center}
.bd-specs .bd-h2{margin:14px auto 0}
.bd-drawing{width:min(88%,900px);margin:clamp(40px,6vh,70px) auto;aspect-ratio:16/9;
  border:1px solid rgba(242,240,232,.16);border-radius:4px;background:rgba(11,11,10,.5);
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(242,240,232,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,240,232,.045) 1px,transparent 1px);
  background-size:38px 38px}
.bd-drawing span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray-2);border:1px solid rgba(140,140,134,.32);padding:8px 14px;text-align:center;max-width:280px}
.bd-table{width:min(88%,900px);margin:0 auto;text-align:left;border-top:1px solid rgba(242,240,232,.12)}
.bd-row{display:flex;justify-content:space-between;gap:24px;padding:15px 4px;
  border-bottom:1px solid rgba(242,240,232,.09)}
.bd-row dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-2)}
.bd-row dd{font-family:var(--font-display);font-weight:400;font-size:16px;color:var(--offwhite);text-align:right}

@media(max-width:900px){
  .bd-hero-grid{grid-template-columns:1fr;gap:34px}
  .bd-media{aspect-ratio:16/10}
  .bd-why-grid{grid-template-columns:1fr}
}

/* hide Squarespace's default chrome — these pages are fully custom */
#header,.header,header#header,#footer,.footer,footer#footer,
.Announcement-bar,#footer-sections{display:none!important}
/* These pages have no Code Block, so everything Squarespace renders sits in an
   EMPTY #siteWrapper — which the theme gives min-height:100vh for its sticky
   footer. Hiding only its children still leaves that full viewport reserved,
   pushing our injected content exactly one screen down (looks like the page
   loaded already scrolled). Collapse the wrapper itself.
   ONLY safe because no content of ours lives inside it on these pages — a page
   WITH a Code Block must not use this rule. */
#siteWrapper{display:none!important}
main#page,#page.container,article#sections{display:none!important}