/* bee-com — Aufwertungs-Schicht (Lenis + GSAP + React-Bits-Effekte).
   Ändert keine Farben, Schriften oder Layouts, sondern ergänzt nur Bewegung.
   Ohne enhance.js wirkt diese Datei nicht (alle Regeln hängen an .bx-on). */

/* Lenis */
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}

/* Wasserzeichen aus echten Orten: Deckkraft steckt pro Linie/Punkt im SVG (weite Orte deutlicher) */
.map-watermark.bx-live{opacity:1;}

/* Scroll-Fortschritt oben */
.bx-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:1001; background:var(--orange-600); transform:scaleX(0); transform-origin:left; pointer-events:none;}

/* Header bekommt beim Scrollen etwas Tiefe */
.bx-on .site-header{transition:box-shadow .3s var(--ease);}
.bx-on .site-header.bx-scrolled{box-shadow:0 6px 24px rgba(17,17,17,.07);}

/* Masthead-Parallax */
.bx-on .masthead{overflow:hidden;}
.bx-on .masthead img{will-change:transform; transform-origin:50% 0;}

/* SplitText: Wörter/Zeichen hinter einer Maske */
.bx-w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em;}
.bx-c{display:inline-block; will-change:transform;}

/* ShinyText auf den Eyebrows */
.bx-on .eyebrow .bx-shine{
  background:linear-gradient(110deg, currentColor 40%, #ffb27f 50%, currentColor 60%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:bx-shine 5s linear infinite;
}
@keyframes bx-shine{from{background-position:130% 0} to{background-position:-130% 0}}

/* SpotlightCard: orangefarbener Lichtkegel folgt der Maus */
.bx-spot{position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(242,101,34,.11), transparent 45%);}
.bx-spot-host{overflow:hidden;}
.bx-spot-host:hover > .bx-spot{opacity:1;}

/* Produkte: aktiver Bereich in der Sprung-Navigation (gleicher Stil wie Hover) */
.jump-nav a.bx-active{background:var(--black); color:#fff; border-color:var(--black);}

/* Magnet */
.bx-magnet{display:inline-block;}

/* ScrollVelocity: Laufband mit dem Einsatzgebiet */
.bx-marquee{overflow:hidden; margin:0 0 32px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.bx-track{display:flex; width:max-content; will-change:transform;}
.bx-item{display:flex; align-items:center; gap:28px; padding-right:28px; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.01em; color:var(--black);}
.bx-item::after{content:''; width:8px; height:8px; border-radius:50%; background:var(--orange-600);}
.bx-item:nth-child(2n){color:var(--slate-300);}

/* Prozess: Linie wächst beim Scrollen */
.bx-on .process{position:relative;}
.bx-line{position:absolute; left:57px; right:0; top:17px; height:2px; background:var(--orange-600); transform:scaleX(0); transform-origin:left; pointer-events:none;}
@media (max-width:980px){ .bx-line{display:none;} }

@media (prefers-reduced-motion: reduce){
  .bx-progress,.bx-line{display:none;}
  .bx-on .eyebrow .bx-shine{animation:none; -webkit-text-fill-color:currentColor;}
}