/* PePa Shop Effekt-Ebene "Haltung" (04.10.2026). Greift nur, wenn fx.js html.fx gesetzt hat
   (also nur ohne prefers-reduced-motion und mit JS). Nur transform/opacity/clip-path/filter. */
@media (prefers-reduced-motion: no-preference) {
  /* Lese-Fortschritt, pink mit Neon-Schein */
  .fx .fx-progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 1100; pointer-events: none;
    background: linear-gradient(90deg, #b30f61, #f91a82 60%, #ff77aa); transform: scaleX(0); transform-origin: 0 50%;
    filter: drop-shadow(0 0 5px rgba(249, 26, 130, 0.9)); will-change: transform; }

  /* Hero-Headline: Slice-Reveal mit pinkem Versatz, danach gelegentlich kurzer Glitch */
  .fx .hero h1 { animation: fxSlice 0.95s steps(1, end) 0.08s both; }
  @keyframes fxSlice {
    0% { transform: none; }   /* Endzustand = Basis: bei stehender Animationsuhr (Safari, Hintergrund-Tab) bleibt die Headline sichtbar */
    12% { opacity: 1; clip-path: inset(0 0 72% 0); transform: translateX(-10px); filter: drop-shadow(5px 0 0 rgba(249, 26, 130, 0.85)); }
    26% { clip-path: inset(38% 0 30% 0); transform: translateX(9px); filter: drop-shadow(-5px 0 0 rgba(249, 26, 130, 0.85)); }
    40% { clip-path: inset(0 0 8% 0); transform: translateX(-4px); filter: drop-shadow(3px 0 0 rgba(255, 119, 170, 0.8)); }
    56% { clip-path: inset(62% 0 0 0); transform: translateX(6px); }
    72% { clip-path: inset(0); transform: translateX(-2px); filter: drop-shadow(2px 0 0 rgba(249, 26, 130, 0.7)); }
    100% { clip-path: inset(0); transform: none; filter: none; opacity: 1; }
  }
  .fx .hero h1.fx-glitch { animation: fxGlitch 0.38s steps(1, end); }
  @keyframes fxGlitch {
    0%, 100% { transform: none; filter: none; clip-path: inset(0); }
    20% { transform: translateX(-5px); filter: drop-shadow(4px 0 0 rgba(249, 26, 130, 0.85)); clip-path: inset(0 0 55% 0); }
    40% { transform: translateX(6px); filter: drop-shadow(-4px 0 0 rgba(249, 26, 130, 0.85)); clip-path: inset(45% 0 0 0); }
    60% { transform: translateX(-2px); filter: drop-shadow(2px 0 0 rgba(255, 119, 170, 0.8)); clip-path: inset(0); }
    80% { transform: translateX(3px); filter: none; }
  }
  .fx .hero h1 em { filter: drop-shadow(0 0 14px rgba(249, 26, 130, 0.55)); }

  /* Hero: Parallax am Bild, Lichtkegel folgt der Maus */
  .fx .hero-visual img { will-change: transform; }
  .fx .fx-spot { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: 0;
    pointer-events: none; opacity: 0; transition: opacity 0.4s ease; will-change: transform;
    background: radial-gradient(circle, rgba(249, 26, 130, 0.38), rgba(249, 26, 130, 0.1) 40%, transparent 68%); }
  .fx .hero.fx-hot .fx-spot { opacity: 1; }

  /* Laufband */
  .fx .fx-marquee { background: #14080d; color: #fff; overflow: hidden; border-block: 1px solid rgba(249, 26, 130, 0.5);
    padding: 14px 0; position: relative; }
  .fx .fx-marquee-track { display: flex; width: max-content; animation: fxLauf 38s linear infinite; will-change: transform; }
  .fx .fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
  .fx .fx-marquee span { flex: none; padding-right: 1.1em; font-weight: 800; font-size: clamp(18px, 2.6vw, 28px);
    letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
  .fx .fx-marquee b { color: #f91a82; font-weight: 800; filter: drop-shadow(0 0 7px rgba(249, 26, 130, 0.9)); }
  @keyframes fxLauf { to { transform: translate3d(-50%, 0, 0); } }

  /* Kennzahl */
  .fx .hero-stats strong { display: inline-block; filter: drop-shadow(0 0 8px rgba(249, 26, 130, 0.5)); }

  /* Produktkarten (Maus): 3D-Neigung auf dem Link, Lichtreflex und pinkes Randleuchten als Pseudo-Elemente */
  .fx .card { position: relative; }
  .fx .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    border: 1.5px solid #f91a82; box-shadow: 0 0 22px rgba(249, 26, 130, 0.55), inset 0 0 16px rgba(249, 26, 130, 0.22);
    transition: opacity 0.25s ease; }
  .fx .card.fx-on::after { opacity: 1; }
  .fx .card .card-link { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.25s ease-out; will-change: transform; }
  .fx .card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.22), transparent 55%);
    transition: opacity 0.25s ease; }
  .fx .card.fx-on::before { opacity: 1; }

  /* Add-to-Cart: Bild fliegt zum Warenkorb */
  .fx-fly { position: fixed; z-index: 9999; margin: 0; pointer-events: none; object-fit: contain; border-radius: 12px;
    filter: drop-shadow(0 0 14px rgba(249, 26, 130, 0.8)); will-change: transform, opacity; }
}