/* ============================================================ WEBROCKER · heavy.css — additive „Heavy-GSAP"-Effektschicht Läuft ÜBER enhance.css / scrolltrigger-fix. Fasst bestehende Elemente nicht an: alles hier sind NEUE Overlays/Deko oder Inner-Spans → kein Transform-Krieg mit den getunten Reveals. Akzent = --neon (#ecff00, wide-gamut display-p3 s. enhance.css). prefers-reduced-motion: alles Bewegte wird still (unten). Kill-Switch: schaltet heavy.js komplett aus. ============================================================ */ :root{ --hv-neon:#ecff00; --hv-ink:#0b0b0b; } @supports (color: color(display-p3 1 1 1)){ :root{ --hv-neon: color(display-p3 0.925 1 0); } } /* ---------- 1) Neon-Scroll-Progressbar (oben) ---------- */ .wr-hv-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:9985; transform:scaleX(0); transform-origin:0 50%; pointer-events:none; background:linear-gradient(90deg, rgba(236,255,0,.35), var(--hv-neon)); box-shadow:0 0 calc(6px + 14px * var(--hv-vel,0)) rgba(236,255,0,.75); will-change:transform; } /* ---------- 2) Section-Navigator-Dots (rechts) ---------- */ .wr-hv-nav{ position:fixed; top:50%; right:clamp(10px,1.6vw,22px); transform:translateY(-50%); z-index:9970; display:flex; flex-direction:column; gap:14px; pointer-events:auto; } .wr-hv-dot{ position:relative; width:11px; height:11px; padding:0; border:0; cursor:pointer; background:transparent; -webkit-appearance:none; appearance:none; } .wr-hv-dot::before{ content:""; position:absolute; inset:3px; border-radius:50%; background:rgba(255,255,255,.32); transition:background .3s ease, transform .3s ease, box-shadow .3s ease; } .wr-hv-dot:hover::before{ background:rgba(255,255,255,.7); transform:scale(1.25); } .wr-hv-dot.is-active::before{ background:var(--hv-neon); transform:scale(1.55); box-shadow:0 0 10px rgba(236,255,0,.9), 0 0 22px rgba(236,255,0,.45); } .wr-hv-dot__label{ position:absolute; right:22px; top:50%; transform:translate(6px,-50%); white-space:nowrap; font-size:.72rem; letter-spacing:.04em; font-weight:600; color:#0b0b0b; background:var(--hv-neon); padding:3px 9px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .wr-hv-dot:hover .wr-hv-dot__label{ opacity:1; transform:translate(0,-50%); } /* ---------- 3) Custom Magnet-Cursor (Desktop) – schlicht & einheitlich GELB ---------- Uli-Wunsch 2026-07-22: „einheitlich gelb, sonst wird's zu viel." Spektrum-Ring + Dauer-Rotation raus (die conic-gradient+mask+filter-Animation lief permanent → Repaint-Last / wirkte träge). Jetzt nur ein gelber Ring + gelber Punkt, keine Endlos-Animation. */ .wr-hv-cur, .wr-hv-cur-dot{ position:fixed; top:0; left:0; z-index:100002; pointer-events:none; border-radius:50%; will-change:transform; } .wr-hv-cur{ width:30px; height:30px; margin:-15px 0 0 -15px; border:2px solid #ecff00; border-color:color(display-p3 .925 1 0); box-shadow:0 0 10px rgba(236,255,0,.5); transition:width .2s ease, height .2s ease, margin .2s ease, background .2s ease, opacity .2s ease; } .wr-hv-cur-dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background:#ecff00; background:color(display-p3 .925 1 0); box-shadow:0 0 8px rgba(236,255,0,.8); } .wr-hv-cur.is-hot{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(236,255,0,.10); background:color(display-p3 .925 1 0 / .10); } .wr-hv-cur.is-down{ transform-origin:center; } /* nativen Cursor verstecken, sobald Custom-Cursor aktiv (nur Desktop/Fine-Pointer) */ html.wr-hv-cursor-on, html.wr-hv-cursor-on a, html.wr-hv-cursor-on button, html.wr-hv-cursor-on .button-yellow, html.wr-hv-cursor-on [role="button"]{ cursor:none; } html.wr-hv-cursor-on input, html.wr-hv-cursor-on textarea, html.wr-hv-cursor-on select{ cursor:auto; } /* ---------- 4) Magnetische CTAs (Inner-Span) ---------- */ .wr-hv-mag{ display:inline-flex; align-items:center; gap:.5em; will-change:transform; } /* ---------- 5) Velocity-Marquee-Band ---------- */ .wr-hv-marquee{ position:relative; overflow:hidden; z-index:2; padding:clamp(14px,2vw,26px) 0; background:var(--hv-neon); color:var(--hv-ink); border-top:1px solid rgba(0,0,0,.15); border-bottom:1px solid rgba(0,0,0,.15); } .wr-hv-marquee__track{ display:flex; width:max-content; will-change:transform; font-weight:800; letter-spacing:.02em; text-transform:uppercase; font-size:clamp(1.15rem,3.4vw,2.4rem); line-height:1; } .wr-hv-marquee__track span{ padding:0 .55em; display:inline-block; } .wr-hv-marquee__track .wr-hv-star{ opacity:.55; } /* ---------- 7) Underline-Draw unter Section-Headings ---------- */ .wr-hv-underline{ display:block; height:3px; margin-top:.5rem; border-radius:2px; transform:scaleX(0); transform-origin:0 50%; will-change:transform; background:linear-gradient(90deg, var(--hv-neon), rgba(236,255,0,.15)); max-width:min(280px,70%); } /* ---------- 8) Feuer-frei-Bild: Hover-Video (Gitarre lebt, Rauch steigt – Higgsfield i2v) ---------- .wr-fv = die (bereits position:relative) Sektion .hero-component.feuer-frei. Das