/* ==========================================================================
   TAQOD — motion layer.
   Smooth scroll, an intro curtain, scroll-linked reveals, kinetic type,
   pinned sections, a magnetic cursor. All degrade to plain content.
   ========================================================================== */

/* smooth scroll wrapper — the body keeps its native scrollbar, the wrapper
   is translated to match. Never set overflow:hidden here: it kills scrolling. */
html.bm-smooth{height:auto}
.bm-scroll{will-change:transform;backface-visibility:hidden}

/* ---------- intro curtain ---------- */
.bm-intro{
  position:fixed;inset:0;z-index:9999;background:var(--green-dark);
  display:grid;place-items:center;
}
.bm-intro__logo{width:min(300px,52vw);opacity:0;transform:translateY(16px)}
.bm-intro__bar{
  position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--beige);
}
.bm-intro.is-done{transform:translateY(-100%);transition:transform 1s var(--ease-io)}
html.bm-intro-lock,html.bm-intro-lock body{overflow:hidden}

/* ---------- reveals ---------- */
html.bm-js [data-bm="fade"]{opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.bm-js [data-bm="fade"].is-in{opacity:1;transform:none}

/* headline: words rise from a clipped line */
.bm-line{display:inline;overflow:visible}
html.bm-js .bm-word{display:inline;transform:none}
.is-in .bm-word{transform:none}

/* letters for the hero only */
html.bm-js .bm-char{display:inline;transform:none;opacity:1;
  transition:transform 1s var(--ease),opacity .7s var(--ease)}
.is-in .bm-char{transform:none;opacity:1}

/* image / block mask wipe */
.bm-wipe{position:relative;overflow:hidden}
html.bm-js .bm-wipe::after{
  content:"";position:absolute;inset:0;background:var(--ivory);z-index:3;
  transform:scaleX(1);transform-origin:right;transition:transform 1.1s var(--ease);
}
.bm-wipe.is-in::after{transform:scaleX(0);transform-origin:left}

/* scroll-linked: set by JS as --p (0..1) */
.bm-parallax{will-change:transform}

/* pinned section */
.bm-pin{position:relative}
.bm-pin__sticky{position:sticky;top:0;min-height:100vh;display:grid;align-content:center;overflow:hidden}

/* horizontal rail */
.bm-rail{position:relative}
.bm-rail__track{display:flex;gap:clamp(16px,2vw,28px);will-change:transform}
.bm-rail__item{flex:0 0 clamp(280px,32vw,460px)}

/* counters */
.bm-count{font-variant-numeric:tabular-nums}

/* progress hairline */
.bm-prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--green);z-index:9998}

/* cursor */
@media (hover:hover) and (pointer:fine){
  .bm-cur,.bm-cur__r{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;border-radius:50%;
    transform:translate(-50%,-50%);opacity:0;transition:opacity .35s}
  .bm-cur{width:6px;height:6px;background:var(--green)}
  .bm-cur__r{width:36px;height:36px;border:1px solid var(--rule-green);
    transition:opacity .35s,width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s}
  .bm-cur.on,.bm-cur__r.on{opacity:1}
  .bm-cur__r.hot{width:64px;height:64px;background:var(--beige-wash);border-color:var(--beige)}
}

/* marquee */
.bm-marq{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.bm-marq__t{display:flex;gap:clamp(30px,4vw,64px);width:max-content;animation:bm-slide 42s linear infinite;align-items:center}
.bm-marq:hover .bm-marq__t{animation-play-state:paused}
@keyframes bm-slide{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .bm-scroll{transform:none!important;position:static!important}
  html.bm-smooth body{height:auto!important}
  [data-bm],.bm-word,.bm-char{opacity:1!important;transform:none!important}
  html.bm-js .bm-wipe::after{display:none}
  .bm-intro{display:none}
  .bm-marq__t{animation:none}
  .bm-cur,.bm-cur__r,.bm-prog{display:none}
}