/* halb7.com – Hero-Interaktion (Homepage) · gehört zu halb7-fx.js
   Akzent modusabhängig: Amber im Dark-, Violet im Light-Modus (siehe Corporate Design). */

[data-theme="dark"]{--hot:var(--amber)}
[data-theme="light"]{--hot:var(--primary)}

/* ── Dot-Grid im Hero ── */
.hero{position:relative;isolation:isolate}
.hero>.wrap{position:relative;z-index:1}
.fx-grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 96%);mask-image:linear-gradient(to bottom,#000 62%,transparent 96%)}

/* ── Magnetische Buttons: individuelles translate kollidiert nicht mit transform/transition der Buttons ── */
.hero__cta .btn,.hero__cta .arrow,.nav .cta,.band .btn{transition:translate .35s var(--ease),transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}

/* ── Eigener Cursor (nur Maus, nur wenn JS ihn aktiviert hat) ── */
.fx-dot,.fx-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity .25s var(--ease)}
.fx-on .fx-dot,.fx-on .fx-ring{opacity:1}
.fx-native .fx-dot,.fx-native .fx-ring{opacity:0}
.fx-dot::before{content:'';display:block;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--hot)}
.fx-ring::before{content:'';display:block;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);
  display:flex;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.fx-ring.has-label::before{width:68px;height:68px;margin:-34px 0 0 -34px}
.fx-ring.is-link::before{width:56px;height:56px;margin:-28px 0 0 -28px;background:color-mix(in srgb,var(--hot) 16%,transparent);border-color:var(--hot)}
.fx-ring.is-down::before{width:24px;height:24px;margin:-12px 0 0 -12px;border-color:var(--hot)}
.fx-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .25s var(--ease);white-space:nowrap}
.fx-ring.has-label .fx-label{opacity:.9}

/* Native Maus ausblenden, solange der eigene Cursor aktiv ist – außer in Formularfeldern */
.fx-cursor.fx-on,.fx-cursor.fx-on *{cursor:none!important}
.fx-cursor.fx-native,.fx-cursor.fx-native *{cursor:auto!important}
.fx-cursor.fx-native input,.fx-cursor.fx-native textarea,.fx-cursor.fx-native [contenteditable]{cursor:text!important}

@media(prefers-reduced-motion:reduce){.fx-dot,.fx-ring{display:none}}