/* ============================================================
   beecoffee — enhancement layer (loaded AFTER style.css)
   Editorial Roastery: the heavy decorative FX of the old build
   (film grain, aurora blobs, cursor spotlight, 3D motes, sheen)
   are intentionally suppressed — structure carries the design now.
   What stays: hero video, the animated machine, the catalog rail.
   ============================================================ */

/* ---- suppressed legacy FX (JS still injects the nodes) ---- */
.fx-grain,.fx-aurora,.fx-spot,.fx-canvas{display:none!important}
.fx-sheen::after{display:none}

/* ---- hero background video (poster = hero image) ---- */
.fx-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:0;transition:opacity 900ms var(--ease)}
.fx-hero-video.fx-on{opacity:.26}
.fx-parallax{will-change:transform}

/* ============================================================
   hero machine — the single decorative focal point
   ============================================================ */
.hero-machine{position:absolute;z-index:1;display:flex;justify-content:center;pointer-events:none;
  right:-24px;top:50%;width:150px;opacity:.35;transform:translateY(-46%)}
.hero-machine img{width:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.hm-glow{position:absolute;left:50%;top:47%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);
  z-index:0;filter:blur(26px);opacity:.35;
  background:radial-gradient(closest-side,rgba(246,166,9,.4),rgba(234,91,30,.12) 48%,transparent 72%)}
.hm-steam{display:none}

@media (min-width:768px){
  .hero-machine{right:clamp(8px,4vw,64px);top:auto;bottom:0;transform:none;
    width:clamp(210px,24vw,340px);opacity:.9}
  .hm-steam{display:block;position:absolute;left:50%;top:44%;transform:translateX(-50%);
    z-index:3;width:72px;height:96px}
  .hm-steam i{position:absolute;bottom:0;left:50%;width:10px;height:10px;border-radius:50%;
    background:rgba(255,255,255,.42);filter:blur(5px);opacity:0;animation:hmSteam 4s ease-in infinite}
  .hm-steam i:nth-child(1){margin-left:-13px}
  .hm-steam i:nth-child(2){margin-left:0;animation-delay:1.3s}
  .hm-steam i:nth-child(3){margin-left:12px;animation-delay:2.5s}
  .hm-glow{opacity:.55;filter:blur(18px)}
}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .hero-machine img{animation:hmFloat 7s cubic-bezier(.45,0,.55,1) infinite alternate}
  .hero-machine{opacity:0;animation:hmIn 700ms var(--ease) 380ms forwards}
}
@keyframes hmFloat{from{transform:translateY(4px)}to{transform:translateY(-12px)}}
@keyframes hmIn{to{opacity:.9;transform:none}}
@keyframes hmSteam{0%{opacity:0;transform:translateY(0) scale(.5)}22%{opacity:.5}100%{opacity:0;transform:translateY(-62px) scale(1.7)}}

/* ============================================================
   catalog rail — horizontal, snap, hairline framed
   ============================================================ */
.cat-slider{position:relative}
.cat-slider .cat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-5);padding-top:var(--sp-4);border-top:2px solid var(--ink)}
.cat-slider .cat-head h2{font-size:var(--t-2xl)}

.cat-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,80%);gap:var(--sp-4);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding-bottom:var(--sp-4);
  scrollbar-width:thin;scrollbar-color:var(--n-300) transparent}
.cat-track::-webkit-scrollbar{height:6px}
.cat-track::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:var(--r-pill)}

.cat-slide{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--n-0);
  border:var(--bw) solid var(--line);border-radius:var(--r-2);overflow:hidden;
  transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.cat-slide:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.cat-slide .pic{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;padding:var(--sp-5);background:var(--paper-2);border-bottom:var(--bw) solid var(--line)}
.cat-slide .pic img{width:100%;height:100%;object-fit:contain;
  transition:transform var(--d-3) var(--ease)}
.cat-slide:hover .pic img{transform:scale(1.04)}
.cat-slide .tag{position:absolute;top:var(--sp-3);left:var(--sp-3);background:var(--ink);color:var(--honey);
  font-family:var(--mono);font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-1)}
.cat-slide .body{display:flex;flex-direction:column;flex:1;padding:var(--sp-5)}
.cat-slide h3{font-size:var(--t-md);margin-bottom:var(--sp-1)}
.cat-slide .perf{font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:var(--sp-4)}
.cat-slide .perf b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.cat-slide .foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-4);border-top:var(--bw) solid var(--line)}
.cat-slide .foot .btn{min-height:44px;padding:var(--sp-3) var(--sp-4);font-size:.92rem}

.cat-arrows{display:flex;gap:var(--sp-2)}
.cat-arrow{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:var(--bw) solid var(--line);border-radius:var(--r-2);background:var(--n-0);color:var(--ink);
  cursor:pointer;transition:background var(--d-2) var(--ease),color var(--d-2) var(--ease),border-color var(--d-2) var(--ease)}
.cat-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--honey)}
.cat-arrow:disabled{opacity:.35;cursor:not-allowed;background:var(--n-0);color:var(--ink)}
.cat-arrow svg{width:19px;height:19px}

@media (min-width:768px){
  .cat-track{grid-auto-columns:minmax(280px,42%)}
  .cat-slide .pic{aspect-ratio:4/5}
}
@media (min-width:1024px){
  .cat-track{grid-auto-columns:minmax(300px,28%)}
}

/* ---- photo grade: keep the imagery consistent ---- */
.prod .ph img,.case .ph img,.split .media img,.member .ph img,
.cta-banner .bg img,.page-hero .bg img,.hero-media img{filter:saturate(1.03) contrast(1.03)}
.member .ph img{filter:grayscale(.35) contrast(1.04)}

@media (prefers-reduced-motion:reduce){
  .fx-hero-video{display:none}
  .hero-machine img{animation:none}
  .hero-machine{opacity:.9}
  .hm-steam{display:none}
  .cat-track{scroll-behavior:auto}
}