/* ==========================================================================
   Effekte aus der Designvorlage A5: Hintergrund, Headlines, Buttons, Bilder.
   Farben kommen aus den Presets der theme.json. Alles abschaltbar über
   prefers-reduced-motion (Ende der Datei).
   ========================================================================== */

/* ---------- Hintergrund: Rauschen + Scanlines (fixiert), Störbalken + Riss ---------- */
body::before,body::after,html::before,html::after{content:"";position:fixed;pointer-events:none;z-index:60}
body::before,body::after{inset:0}
body::before{opacity:.09;mix-blend-mode:multiply;animation:fx-grain 1.4s steps(5,end) infinite;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
body::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0,rgba(0,0,0,.035) 1px,transparent 1px,transparent 3px)}
html::before{left:0;right:0;top:-170px;height:150px;opacity:.05;animation:fx-roll 12s linear infinite;
	background:linear-gradient(to bottom,transparent,var(--wp--preset--color--ink) 50%,transparent)}
html::after{left:3%;top:34%;width:26%;height:3px;opacity:0;animation:fx-tear 9s steps(1,end) 2s infinite;
	background:linear-gradient(90deg,transparent,var(--wp--preset--color--cyan) 20%,var(--wp--preset--color--hot) 60%,transparent)}

/* ---------- Headlines: H1 und .is-style-glitch glitchen in Intervallen ---------- */
h1,.is-style-glitch{text-shadow:1.5px 0 rgba(31,214,255,.55),-1.5px 0 rgba(255,90,31,.5);animation:fx-glitch-text 7s steps(1,end) infinite}
.is-style-flicker{animation:fx-flicker 5s steps(1,end) infinite}

/* ---------- Buttons: kurzes Verzerren beim Hover ---------- */
.wp-block-button__link:hover,.wp-block-navigation__responsive-container-open:hover,.wp-block-navigation__responsive-container-close:hover{animation:fx-btn .4s steps(1,end) 1}
/* Outline-Button auf dunklem Grund */
:is(.is-style-dark,.has-ink-background-color,.has-graph-background-color) .is-style-line .wp-block-button__link:hover{background:var(--wp--preset--color--paper);color:var(--wp--preset--color--ink);border-color:var(--wp--preset--color--paper)}

/* ---------- Hover-Glitch: Menüpunkte (Text) und Social-Icons ---------- */
.wk-nav .is-menu-open .wp-block-navigation-item__content:is(:hover,:focus-visible){text-shadow:1.5px 0 rgba(31,214,255,.55),-1.5px 0 rgba(255,90,31,.5);animation:fx-glitch-hover .45s steps(1,end) 1}
.wp-block-social-links .wp-social-link:hover{transform:none}  /* WordPress vergrößert die Icons sonst beim Hover */
.wp-block-social-links .wp-social-link a:is(:hover,:focus-visible) svg{animation:fx-glitch-icon .45s steps(1,end) 1}

/* ---------- Bilder: Scanlines, Glitch-Schnitt, Verzerren beim Hover ----------
   Beitragsbilder und Bild-Blöcke (auch mit Bildunterschrift). effects.js legt dafür einen Rahmen
   (.fx-wrap) um das Bild und eine Kopie (.fx-slice) für den Glitch-Schnitt hinein.
   Ausnahme (Logos, Signet): Block-Stil "Ohne Effekt" (.is-style-plain). */
.fx-wrap{position:relative;display:block;overflow:hidden;line-height:0}
.fx-wrap::before,.fx-wrap::after{content:"";position:absolute;inset:0;pointer-events:none}
/* Ruhezustand: feine dunkle Scanlines */
.fx-wrap::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 1px,transparent 1px,transparent 3px)}
/* Hover: orange Scanlines blenden ein */
.fx-wrap::before{z-index:1;opacity:0;transition:opacity .15s;background:repeating-linear-gradient(0deg,rgba(255,90,31,.2) 0,rgba(255,90,31,.2) 2px,transparent 2px,transparent 6px)}
/* Glitch-Schnitt: Kopie des Bildes, blitzt zufällig versetzt auf */
.fx-wrap img.fx-slice{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;clip-path:inset(30% 0 50% 0);animation:fx-slice 6s steps(1,end) infinite}
/* Hover-Kontexte: verlinktes Bild, Beitrags-Kachel, Karte */
:is(.wp-block-post-featured-image,.wp-block-image):has(a:hover) .fx-wrap::before,
:is(.wp-block-post:hover,.is-style-card:hover,.wk-tile:hover) .fx-wrap::before{opacity:1}
:is(.wp-block-post-featured-image,.wp-block-image):has(a:hover) .fx-wrap img:not(.fx-slice),
:is(.wp-block-post:hover,.is-style-card:hover,.wk-tile:hover) .fx-wrap img:not(.fx-slice){animation:fx-img-hover .5s steps(1,end) 1}
:is(.wp-block-post-featured-image,.wp-block-image):has(a:hover) .fx-wrap img.fx-slice,
:is(.wp-block-post:hover,.is-style-card:hover,.wk-tile:hover) .fx-wrap img.fx-slice{animation:fx-slice-hover .6s steps(1,end) 2}

/* ---------- Bildwechsel (Hero): .wk-slides mit 1 bis 4 Bild-Blöcken ----------
   Jedes Bild steht 6 s, dann wechselt es mit Glitch; die Gesamtdauer richtet sich nach der Anzahl der Bilder.
   Bilder tauscht, ergänzt oder entfernt man im Editor wie normale Blöcke. */
.wk-slides{position:relative;aspect-ratio:10/11;background:var(--wp--preset--color--graph);animation:fx-jit 9s steps(1,end) infinite}
.wk-slides>.wp-block-image{position:absolute;inset:0;margin:0!important;opacity:0;animation:fx-slide-3 18s steps(1,end) infinite}
.wk-slides>.wp-block-image:nth-child(1){opacity:1}
.wk-slides>.wp-block-image:nth-child(2){animation-delay:6s}
.wk-slides>.wp-block-image:nth-child(3){animation-delay:12s}
.wk-slides>.wp-block-image:nth-child(4){animation-delay:18s}
.wk-slides:has(>:nth-child(2):last-child)>.wp-block-image{animation-name:fx-slide-2;animation-duration:12s}
.wk-slides:has(>:nth-child(4))>.wp-block-image{animation-name:fx-slide-4;animation-duration:24s}
.wk-slides>.wp-block-image:only-child{opacity:1;animation:none}
.wk-slides .fx-wrap,.wk-slides .fx-wrap img:not(.fx-slice){width:100%;height:100%}
.wk-slides .fx-wrap img:not(.fx-slice){object-fit:cover;object-position:var(--wk-pos,50% 30%)}
.wk-slides img.fx-slice{display:none}

/* ---------- Keyframes ---------- */
@keyframes fx-grain{0%{background-position:0 0}20%{background-position:-40px 20px}40%{background-position:30px -50px}60%{background-position:-70px -10px}80%{background-position:20px 60px}100%{background-position:0 0}}
@keyframes fx-roll{from{top:-170px}to{top:100%}}
@keyframes fx-tear{0%,62%,100%{opacity:0}63%{opacity:.34;transform:translateX(0)}64%{opacity:.12;transform:translateX(30px)}65%{opacity:.36;transform:translateX(-24px)}66%{opacity:0}}
@keyframes fx-glitch-text{0%,90%,100%{transform:none}91%{text-shadow:-5px 0 var(--wp--preset--color--cyan),5px 0 var(--wp--preset--color--hot);transform:translateX(3px)}92%{text-shadow:6px 0 var(--wp--preset--color--cyan),-6px 0 var(--wp--preset--color--hot);transform:translateX(-4px) skewX(-2deg)}93%{text-shadow:-2px 0 var(--wp--preset--color--cyan),3px 0 var(--wp--preset--color--hot);transform:none}95%{text-shadow:4px 0 var(--wp--preset--color--cyan),-4px 0 var(--wp--preset--color--hot);transform:translateX(2px)}96%{transform:none}}
@keyframes fx-glitch-hover{0%{transform:translateX(-4px);text-shadow:-5px 0 var(--wp--preset--color--cyan),5px 0 var(--wp--preset--color--hot)}25%{transform:translateX(5px) skewX(-2deg);text-shadow:6px 0 var(--wp--preset--color--cyan),-6px 0 var(--wp--preset--color--hot)}50%{transform:translateX(-2px);text-shadow:-3px 0 var(--wp--preset--color--cyan),3px 0 var(--wp--preset--color--hot)}75%{transform:translateX(2px)}100%{transform:translateX(8px)}}
@keyframes fx-glitch-icon{0%{transform:translateX(-3px);filter:drop-shadow(3px 0 var(--wp--preset--color--cyan)) drop-shadow(-3px 0 var(--wp--preset--color--hot))}25%{transform:translateX(3px);filter:drop-shadow(-3px 0 var(--wp--preset--color--cyan)) drop-shadow(3px 0 var(--wp--preset--color--hot))}50%{transform:translateX(-1px);filter:drop-shadow(2px 0 var(--wp--preset--color--cyan))}75%{transform:translateX(1px);filter:none}100%{transform:none;filter:none}}
@keyframes fx-jit{0%,93%,100%{transform:none;filter:none}94%{transform:translateX(6px);filter:hue-rotate(40deg) saturate(1.4)}95%{transform:translateX(-5px)}96%{transform:none;filter:none}}
@keyframes fx-slide-2{0%{opacity:0}0.45%{opacity:1;transform:translateX(14px);filter:hue-rotate(80deg) saturate(1.8)}1.35%{opacity:0}2.25%{opacity:1;transform:translateX(-12px);filter:none}3.15%{opacity:.35;transform:translateX(5px)}4.05%{opacity:1;transform:none}49.5%{opacity:1}49.95%{opacity:1;transform:translateX(8px);filter:hue-rotate(-60deg)}50.4%{opacity:0;transform:none;filter:none}100%{opacity:0}}
@keyframes fx-slide-3{0%{opacity:0}0.3%{opacity:1;transform:translateX(14px);filter:hue-rotate(80deg) saturate(1.8)}0.9%{opacity:0}1.5%{opacity:1;transform:translateX(-12px);filter:none}2.1%{opacity:.35;transform:translateX(5px)}2.7%{opacity:1;transform:none}33%{opacity:1}33.3%{opacity:1;transform:translateX(8px);filter:hue-rotate(-60deg)}33.6%{opacity:0;transform:none;filter:none}100%{opacity:0}}
@keyframes fx-slide-4{0%{opacity:0}0.225%{opacity:1;transform:translateX(14px);filter:hue-rotate(80deg) saturate(1.8)}0.675%{opacity:0}1.125%{opacity:1;transform:translateX(-12px);filter:none}1.575%{opacity:.35;transform:translateX(5px)}2.025%{opacity:1;transform:none}24.75%{opacity:1}24.975%{opacity:1;transform:translateX(8px);filter:hue-rotate(-60deg)}25.2%{opacity:0;transform:none;filter:none}100%{opacity:0}}
@keyframes fx-flicker{0%,94%,100%{opacity:1}95%{opacity:.3}96%{opacity:1}97%{opacity:.5}98%{opacity:1}}
@keyframes fx-btn{0%{transform:translate(-3px,0);box-shadow:4px 0 0 var(--wp--preset--color--cyan),-4px 0 0 rgba(31,29,27,.55)}25%{transform:translate(3px,1px);box-shadow:-4px 0 0 var(--wp--preset--color--cyan),4px 0 0 rgba(31,29,27,.55)}50%{transform:translate(-1px,0);box-shadow:2px 0 0 var(--wp--preset--color--cyan),-2px 0 0 rgba(255,90,31,.8)}75%{transform:translate(1px,0);box-shadow:-2px 0 0 var(--wp--preset--color--cyan)}100%{transform:none;box-shadow:none}}
@keyframes fx-slice{0%,88%,100%{opacity:0}89%{opacity:1;transform:translateX(18px)}91%{opacity:1;transform:translateX(-12px)}92%{opacity:0}95%{opacity:1;transform:translateX(8px)}96%{opacity:0}}
@keyframes fx-slice-hover{0%{opacity:1;transform:translateX(18px)}25%{opacity:1;transform:translateX(-14px)}50%{opacity:1;transform:translateX(9px)}75%{opacity:1;transform:translateX(-6px)}100%{opacity:0;transform:none}}
@keyframes fx-img-hover{0%{transform:translateX(0)}10%{transform:translateX(9px);filter:hue-rotate(70deg) saturate(1.6)}25%{transform:translateX(-11px) skewX(2deg);filter:none}40%{transform:translateX(6px);filter:hue-rotate(-50deg) contrast(1.2)}60%{transform:translateX(-3px);filter:none}80%{transform:none}100%{transform:none;filter:none}}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
	body::before,html::before,html::after,h1,.is-style-glitch,.is-style-flicker,.wp-block-button__link:hover,img.fx-slice,.wp-block-social-links svg,.wk-nav .is-menu-open .wp-block-navigation-item__content,.wk-slides,.wk-slides>.wp-block-image{animation:none!important}
	.wk-slides>.wp-block-image:nth-child(n+2){display:none}
	html::before,html::after{display:none}
}