/* =====================================================================
   /bikes landing — CONCEPT PREVIEW
   Engine inlined here; in production this becomes bikes.css / bikes.js in
   the Worker, driven by a window.BIKES config (same model as the rest).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans: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; --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;
  --font-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
}
#bikes *{box-sizing:border-box;margin:0;padding:0}
body{background:var(--black);color:var(--offwhite);font-family:var(--font-body);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

#bikes{position:relative;min-height:100svh;overflow:hidden;
  /* ---- backdrop treatment (tuned 2026-07-19) ---- */
  --bk-bright:.90;   /* backdrop brightness */
  --bk-sat:1.08;     /* backdrop saturation */
  --bk-veil:.43;     /* dark gradient wash over the backdrop */
  --bk-fog:.52}      /* fog blob density */

/* ---- layer 0: the Cook Inlet backdrop ---- */
/* SCROLL SEAM — orange leading dot on a progress line, matching home/build.
   Starts at the nav-dot centre (107px) so the dot rests behind the nav dot. */
.bk-seam{position:fixed;top:107px;left:24px;width:1px;height:calc(100% - 107px);
  z-index:40;background:rgba(242,240,232,.12);pointer-events:none}
.bk-seam::before{content:'';position:absolute;top:0;left:0;width:100%;
  height:var(--progress,0%);background:#8C8C86;transition:height .05s linear}
.bk-seam::after{content:'';position:absolute;left:50%;top:var(--progress,0%);
  width:8px;height:8px;border-radius:50%;background:#FF7A1A;transform:translate(-50%,-50%);
  animation:bkseampulse 1.9s ease-in-out infinite}
@keyframes bkseampulse{0%,100%{box-shadow:0 0 5px 1px rgba(255,122,26,.4)}
  50%{box-shadow:0 0 11px 4px rgba(255,122,26,.7)}}
@media(max-width:780px){.bk-seam{display:none}}
.bk-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)}
/* gradient wash — keeps it in the dark palette; scales with --bk-veil */
.bk-backdrop::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,11,10,calc(var(--bk-veil)*1.1)) 0%,
    rgba(11,11,10,calc(var(--bk-veil)*0.22)) 40%,
    rgba(11,11,10,calc(var(--bk-veil)*2.4)) 100%)}

/* ---- layer 1: black fog drifting slowly ABOVE the backdrop ---- */
.bk-fog{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bk-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))}
.bk-fog .f1{width:95vw;height:95vw;left:-25vw;top:-30vw;animation:bkd1 54s ease-in-out infinite}
.bk-fog .f2{width:80vw;height:80vw;right:-20vw;top:-15vw;animation:bkd2 67s ease-in-out infinite}
.bk-fog .f3{width:110vw;height:110vw;left:5vw;bottom:-45vw;animation:bkd3 61s ease-in-out infinite}
.bk-fog .f4{width:70vw;height:70vw;right:5vw;bottom:-20vw;animation:bkd1 48s ease-in-out infinite reverse}
.bk-fog .f5{width:85vw;height:85vw;left:20vw;top:10vh;animation:bkd2 73s ease-in-out infinite reverse}
@keyframes bkd1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,5vw) scale(1.22)}}
@keyframes bkd2{0%,100%{transform:translate(0,0) scale(1.14)}50%{transform:translate(-11vw,4vw) scale(.92)}}
@keyframes bkd3{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(6vw,-7vw) scale(1.25)}}
@media (prefers-reduced-motion: reduce){.bk-fog span{animation:none!important}}

/* ---- layer 2: content ---- */
.bk-hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:120px 4vw 60px}
.bk-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-1);margin:0 0 26px 1vw}

/* the expanding rack (same interaction language as the rider Co-Op) */
.bk-rack{display:flex;gap:10px;width:min(96vw,1560px);margin:0 auto;height:clamp(400px,62vh,640px)}
.bk-tile{position:relative;flex:1 1 0;min-width:0;border-radius:4px;overflow:hidden;cursor:pointer;
  background:#121211;border:1px solid rgba(242,240,232,.12);display:block;text-decoration:none;
  transition:flex-grow .55s cubic-bezier(.2,.7,.2,1),border-color .4s}
.bk-rack:hover .bk-tile{flex-grow:.7}
.bk-rack .bk-tile:hover,.bk-rack .bk-tile:focus-visible{flex-grow:2.8;border-color:rgba(242,240,232,.34)}
.bk-img{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.55) brightness(.72);transform:scale(1.03);
  transition:filter .6s ease,transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s}
.bk-tile:hover .bk-img{filter:saturate(1) brightness(.92);transform:scale(1)}
.bk-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.bk-tile.is-playing .bk-vid{opacity:1}
.bk-tile.is-playing .bk-img{opacity:0}
.bk-img--empty{background-image:repeating-linear-gradient(115deg,#141413 0 3px,#1a1a18 3px 6px);filter:none}
.bk-tile::after{content:'';position:absolute;inset:0;pointer-events:none;transition:opacity .5s;
  background:linear-gradient(to top,rgba(11,11,10,.94) 0%,rgba(11,11,10,.32) 46%,rgba(11,11,10,.12) 100%)}
.bk-tile:hover::after{opacity:.82}
.bk-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px;display:flex;
  flex-direction:column;gap:6px;pointer-events:none}
.bk-name{font-family:var(--font-ultra);font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.6rem);color:var(--offwhite);line-height:1;white-space:nowrap}
.bk-line{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray-1);white-space:nowrap;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease .08s,transform .45s ease .08s}
.bk-enter{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--offwhite);margin-top:8px;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease .16s,transform .45s ease .16s}
.bk-tile:hover .bk-line,.bk-tile:hover .bk-enter{opacity:1;transform:translateY(0)}
.bk-tile--soon{cursor:default}
.bk-tile--soon .bk-name{color:var(--gray-2)}
.bk-soon{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2)}
.bk-rack .bk-tile--soon:hover{flex-grow:1.15;border-color:rgba(242,240,232,.18)}

/* ---- departure morph: tile expands to frame while the fog blooms ---- */
/* ramps in faster than the expand and goes FULLY opaque, so the page swap —
   and the video's crop shift into the hero — happens behind solid black */
.bk-veil{position:fixed;inset:0;z-index:6;pointer-events:none;background:#070707;opacity:0;
  transition:opacity .6s ease}
.bk-veil.on{opacity:1}
.bk-tile.is-leaving{z-index:8;border-color:transparent!important}
.bk-tile.is-leaving::after{opacity:0;transition:opacity .5s}
.bk-tile.is-leaving .bk-body{opacity:0;transition:opacity .35s}

@media(max-width:900px){
  .bk-rack{height:clamp(340px,54vh,520px);gap:6px}
  .bk-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:1rem}
  .bk-line,.bk-enter{display:none}
  .bk-tile.is-open .bk-name{writing-mode:horizontal-tb;transform:none}
  .bk-tile.is-open .bk-line,.bk-tile.is-open .bk-enter{display:block;opacity:1;transform:none}
  .bk-rack.has-open .bk-tile{flex-grow:.6}
  .bk-rack .bk-tile.is-open{flex-grow:3.4}
}

/* 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}