/* zeitweisezeitreisende — Spielerei-Aliase v2 — Logo-Rot + Gold */

@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(200,37,44,0.45);} 50%{box-shadow:0 0 32px 6px rgba(200,37,44,0.45);} }
@keyframes spielerei-fade-up { 0%{opacity:0;transform:translateY(30px);} 100%{opacity:1;transform:translateY(0);} }

.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(200, 37, 44, 0.65), transparent 70%),
    radial-gradient(circle 2px at 82% 18%, rgba(201, 168, 76, 0.70), transparent 70%),
    radial-gradient(circle 4px at 28% 72%, rgba(200, 37, 44, 0.55), transparent 70%),
    radial-gradient(circle 3px at 92% 82%, rgba(201, 168, 76, 0.60), transparent 70%),
    radial-gradient(circle 3px at 48% 32%, rgba(200, 37, 44, 0.50), transparent 70%);
  background-size: 280px 280px;
  animation: spielerei-sparkle-drift 14s linear infinite;
  mix-blend-mode: screen; z-index: 2;
}
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; }

.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;
}

.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;
}

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

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

/* Block-Style „Handschrift" — Caveat für Julia */
.is-style-handschrift,
.is-style-handschrift p,
.is-style-handschrift h1, .is-style-handschrift h2,
.is-style-handschrift h3, .is-style-handschrift h4 {
  font-family: 'Caveat', 'Brush Script MT', cursive !important;
  font-weight: 500; letter-spacing: 0.3px; font-style: normal !important;
}

@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;
  }
}