/* Blaauw Empire · fx-ui: Oberflächen-Effekte (Vorbild react-bits: ShinyText, SpotlightCard, GlareHover, StarBorder).
   Aktiv nur mit html.fx-ui (setzt js/fx-ui.js). Maus-Variablen --mx/--my (px) liefert das JS.
   Kein transform auf .btn/.tile/.fz selbst: Magnet und Kachel-Neigung liegen in site.js.
   Farben: Gold #c8a95a / hell #e9d59a. Opt-out je Element: [data-fx-off]. */

@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- 1 · ShinyText: Glanzstreifen über Gold-Knöpfen (nur Pseudo-Element) ---------- */
html.fx-ui .btn-gold:not([data-fx-off])::after,
html.fx-ui .cta-band .btn-ghost:not([data-fx-off])::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%);
  mix-blend-mode:overlay;
  transform:translateX(-130%);
  animation:fx-shine 3.5s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay:var(--fx-shine-delay,0s);
}
html.fx-ui .cta-band .btn-ghost:not([data-fx-off])::after{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%);
  mix-blend-mode:normal;
}
@keyframes fx-shine{0%{transform:translateX(-130%)}34%{transform:translateX(130%)}100%{transform:translateX(130%)}}
html.fx-ui .btn-gold:hover{box-shadow:0 18px 54px -12px rgba(200,169,90,.95)}

/* Goldene Schrift mit laufendem Lichtpunkt (Text-Variante von ShinyText), nur in der CTA-Überschrift */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.fx-ui .cta-band h2:not(.split) em{
    background:linear-gradient(110deg,var(--gold) 0%,var(--gold) 45%,#fff6d8 50%,var(--gold) 55%,var(--gold) 100%);
    background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:var(--gold);-webkit-text-fill-color:transparent;
    animation:fx-text 7s linear infinite;
  }
}
@keyframes fx-text{0%{background-position:100% 0}42%{background-position:0% 0}100%{background-position:0% 0}}

/* ---------- 2 · SpotlightCard: Gold-Lichtschein folgt der Maus (nur feine Maus) ---------- */
@media (hover:hover) and (pointer:fine){
  /* Flächen-Spotlight + feiner Goldrand auf Fahrzeugkarten, Bereichen, Deck-Karten, Team-Karten */
  html.fx-ui .fz:not([data-fx-off])::before,
  html.fx-ui .area:not([data-fx-off])::before,
  html.fx-ui .dk:not([data-fx-off])::before,
  html.fx-ui .crew .card:not([data-fx-off])::before{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
    background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(200,169,90,.18),transparent 40%);
    box-shadow:inset 0 0 0 1px rgba(200,169,90,.45);
    opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1);
  }
  html.fx-ui .fz:hover::before,
  html.fx-ui .area:hover::before,
  html.fx-ui .dk:hover::before,
  html.fx-ui .crew .card:hover::before{opacity:1}

  /* Kacheln haben schon einen Glanzpunkt (.glare): hier läuft das Licht nur im Rand mit */
  html.fx-ui .tile:not([data-fx-off])::before{
    content:"";position:absolute;inset:-1px;border-radius:5px;padding:1px;pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(233,213,154,.95),rgba(200,169,90,.3) 45%,transparent 72%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1);
  }
  html.fx-ui .tile:hover::before{opacity:1}

  /* ---------- 3 · GlareHover: diagonaler Lichtstreifen über Bildern ---------- */
  html.fx-ui .gallery a:not([data-fx-off])::after,
  html.fx-ui .fz:not([data-fx-off]) .pic::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.14) 46%,rgba(233,213,154,.32) 50%,rgba(255,255,255,.14) 54%,transparent 64%);
    transform:translateX(-120%) skewX(-8deg);
    transition:none;
  }
  html.fx-ui .gallery a:hover::after,
  html.fx-ui .fz:hover .pic::before{
    transform:translateX(120%) skewX(-8deg);
    transition:transform 1.3s cubic-bezier(.16,1,.3,1);
  }
}

/* ---------- 4 · StarBorder: laufender Gold-Rahmen (CTA-Band, Kontaktformular) ---------- */
html.fx-ui .contact form,
html.fx-ui form#formular{position:relative}
html.fx-ui .cta-band:not([data-fx-off])::before,
html.fx-ui .contact form:not([data-fx-off])::before,
html.fx-ui form#formular:not([data-fx-off])::before{
  content:"";position:absolute;inset:-1px;z-index:1;padding:1px;pointer-events:none;border-radius:inherit;
  background:
    conic-gradient(from var(--fx-a),transparent 0deg,transparent 240deg,rgba(200,169,90,.35) 300deg,#e9d59a 332deg,rgba(200,169,90,.35) 352deg,transparent 360deg),
    linear-gradient(rgba(200,169,90,.12),rgba(200,169,90,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:fx-ring 10s linear infinite;
  animation-play-state:paused; /* läuft nur im Bild, siehe .fx-run (ScrollTrigger in fx-ui.js) */
}
/* Das Band schneidet am Innenrand ab, darum dort inset:0 und kein Grundrahmen (hat schon border-top) */
html.fx-ui .cta-band:not([data-fx-off])::before{
  inset:0;border-radius:0;
  background:conic-gradient(from var(--fx-a),transparent 0deg,transparent 240deg,rgba(200,169,90,.35) 300deg,#e9d59a 332deg,rgba(200,169,90,.35) 352deg,transparent 360deg);
}
html.fx-ui .cta-band.fx-run::before,
html.fx-ui .contact form.fx-run::before,
html.fx-ui form#formular.fx-run::before{animation-play-state:running} /* .fx-run setzt fx-ui.js per ScrollTrigger */
@keyframes fx-ring{to{--fx-a:360deg}}

/* ---------- 5 · Formular: goldene Linie zieht unter dem Feldnamen auf ---------- */
html.fx-ui .field{position:relative}
html.fx-ui .field>label:not(.check){position:relative;transition:color .5s}
html.fx-ui .field>label:not(.check)::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
html.fx-ui .field:focus-within>label:not(.check){color:var(--gold-2)}
html.fx-ui .field:focus-within>label:not(.check)::after{transform:scaleX(1)}

/* ---------- 6 · Navigation: Unterstreichung zieht von links auf, läuft nach rechts aus ---------- */
@media (min-width:981px){
  html.fx-ui .nav ul a,
  html.fx-ui footer nav a{position:relative;display:inline-block}
  html.fx-ui .nav ul a::after,
  html.fx-ui footer nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:100% 50%;
    transition:transform .7s cubic-bezier(.16,1,.3,1);
  }
  html.fx-ui .nav ul a:hover::after,
  html.fx-ui .nav ul a:focus-visible::after,
  html.fx-ui footer nav a:hover::after,
  html.fx-ui footer nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
}

/* ---------- Weniger Bewegung: alles still, Elemente bleiben sichtbar ---------- */
@media (prefers-reduced-motion:reduce){
  html.fx-ui .btn-gold::after,
  html.fx-ui .cta-band .btn-ghost::after,
  html.fx-ui .cta-band::before,
  html.fx-ui .contact form::before,
  html.fx-ui form#formular::before,
  html.fx-ui .gallery a::after,
  html.fx-ui .fz .pic::before{animation:none;transition:none;display:none}
  html.fx-ui .cta-band h2:not(.split) em{animation:none;background:none;color:var(--gold);-webkit-text-fill-color:var(--gold)}
  html.fx-ui .fz::before,html.fx-ui .area::before,html.fx-ui .dk::before,html.fx-ui .crew .card::before,html.fx-ui .tile::before{transition:none}
  html.fx-ui .field>label::after,html.fx-ui .nav ul a::after,html.fx-ui footer nav a::after{transition:none}
}