/* ════════════════════════════════════════════════════════════════
   gklickt — Spielerei-Block-Style-Aliase  (v2 — Bugfix Mai 2026)
   ────────────────────────────────────────────────────────────────
   Keyframes INLINE (nicht abhängig von style.css).
   z-index:2 + mix-blend-mode:screen → Sparkle liegt sichtbar
   über Bildern, statt darunter verloren zu gehen.
   ════════════════════════════════════════════════════════════════ */

@keyframes spielerei-sparkle-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 280px 280px, -280px 280px, 280px -280px, -280px -280px, 140px 140px; }
}
@keyframes spielerei-focus-pull {
  0%   { filter: blur(8px) brightness(1.15) saturate(0.9); transform: scale(1.02); }
  100% { filter: blur(0) brightness(1) saturate(1);        transform: scale(1); }
}
@keyframes spielerei-shimmer-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}
@keyframes spielerei-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.45); }
  50%      { box-shadow: 0 0 32px 6px rgba(201, 168, 76, 0.45); }
}
@keyframes spielerei-fade-up {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── SPARKLE ─────────────────────────────────────────────── */
.is-style-spielerei-sparkle {
  position: relative;
  overflow: hidden;
}
.is-style-spielerei-sparkle::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 3px at 8% 12%,  rgba(201, 168, 76, 0.65), transparent 70%),
    radial-gradient(circle 2px at 82% 18%, rgba(194, 91, 65, 0.70), transparent 70%),
    radial-gradient(circle 4px at 28% 72%, rgba(201, 168, 76, 0.55), transparent 70%),
    radial-gradient(circle 3px at 92% 82%, rgba(194, 91, 65, 0.60), transparent 70%),
    radial-gradient(circle 3px at 48% 32%, rgba(201, 168, 76, 0.50), transparent 70%);
  background-size: 280px 280px;
  animation: spielerei-sparkle-drift 14s linear infinite;
  mix-blend-mode: screen;
  z-index: 2;
}
/* Image-Block speziell — figure umschließt, img bleibt darunter */
figure.wp-block-image.is-style-spielerei-sparkle { position: relative; display: block; overflow: hidden; }
figure.wp-block-image.is-style-spielerei-sparkle img { display: block; width: 100%; height: auto; }

/* ─── FOCUS-PULL ─────────────────────────────────────────── */
.is-style-spielerei-focus img,
.is-style-spielerei-focus .wp-block-cover__image-background,
figure.wp-block-image.is-style-spielerei-focus img,
.wp-block-cover.is-style-spielerei-focus .wp-block-cover__image-background {
  animation: spielerei-focus-pull 2.5s ease-out forwards;
  transform-origin: center;
}

/* ─── SHIMMER ─────────────────────────────────────────────── */
.is-style-spielerei-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.is-style-spielerei-shimmer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%);
  transform: translateX(-110%);
  animation: spielerei-shimmer-sweep 2.4s ease-out 0.6s forwards;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* ─── GLOW ────────────────────────────────────────────────── */
.is-style-spielerei-glow {
  animation: spielerei-pulse 4s ease-in-out infinite;
  border-radius: 4px;
}

/* ─── FADE-UP ─────────────────────────────────────────────── */
.is-style-spielerei-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: spielerei-fade-up 1.2s ease-out 0.2s forwards;
}

/* ─── prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .is-style-spielerei-sparkle::after,
  .is-style-spielerei-focus img,
  .is-style-spielerei-focus .wp-block-cover__image-background,
  figure.wp-block-image.is-style-spielerei-focus img,
  .wp-block-cover.is-style-spielerei-focus .wp-block-cover__image-background,
  .is-style-spielerei-shimmer::before,
  .is-style-spielerei-glow,
  .is-style-spielerei-fade-up {
    animation: none !important;
  }
  .is-style-spielerei-fade-up { opacity: 1; transform: none; }
}
/* ─── SCROLL-REVEAL (6. Spielerei) ────────────────────────────
   Bild scrollt von unten herein, anfangs halb transparent.
   Aktiviert durch Block-Style „Scroll-Reveal" — Intersection
   Observer in /assets/js/scroll-reveal.js fügt .is-revealed
   hinzu, sobald der Block ins Viewport kommt.
   Customizing per Inline-Style:
     --reveal-start (Start-Opazität, default 0.4)
     --reveal-shift (Start-Y-Verschiebung in px, default 60)
   ──────────────────────────────────────────────────────────── */
.is-style-spielerei-scroll-reveal {
  --reveal-start: 0.4;
  --reveal-shift: 60px;
  opacity: var(--reveal-start);
  transform: translateY(var(--reveal-shift));
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.is-style-spielerei-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .is-style-spielerei-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}