/* ==========================================================
   ALLCOLOURS — Wort-Rotator (Hero + Effekt-Übersicht)
   Effekte per data-effect: slide | fade | type | blur
   ========================================================== */
.rotator{
  position:relative;display:inline-block;white-space:nowrap;vertical-align:bottom;
  color:var(--green,#a5cf88);font-weight:500;text-align:left;
}
/* unsichtbare Kopie aller Begriffe: gibt dem Rotator die Breite des längsten */
.rotator__sizer{display:inline-grid;visibility:hidden}
.rotator__sizer>span{grid-area:1/1}
.rotator__stage{position:absolute;inset:0}
.rotator__w{position:absolute;left:0;top:0;white-space:nowrap}
.rotator__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Rotator auf eigener, zentrierter Zeile */
.rotator--block{display:block;text-align:center}
.rotator--block .rotator__sizer{display:grid}
.rotator--block .rotator__w{left:0;right:0;text-align:center}

/* 1 · slide — Slot-Rad: alt schiebt nach oben raus, neu kommt von unten */
.rotator[data-effect="slide"] .rotator__stage{overflow:hidden}
.rotator[data-effect="slide"] .rotator__w{transition:transform .65s cubic-bezier(.65,0,.35,1)}
.rotator[data-effect="slide"] .is-pre{transform:translateY(105%)}
.rotator[data-effect="slide"] .is-out{transform:translateY(-105%)}

/* 2 · fade — weiches Überblenden */
.rotator[data-effect="fade"] .rotator__w{transition:opacity .7s ease}
.rotator[data-effect="fade"] .is-pre,
.rotator[data-effect="fade"] .is-out{opacity:0}

/* 3 · type — Tippen mit Cursor */
.rotator[data-effect="type"] .rotator__w::after{
  content:"";display:inline-block;width:.08em;height:.95em;margin-left:.06em;
  background:var(--magenta,#e8127d);vertical-align:-.1em;animation:rotCaret 1s steps(1) infinite;
}
@keyframes rotCaret{50%{opacity:0}}

/* 4 · blur — Buchstabe für Buchstabe: Unschärfe, Skalierung, Leuchten */
.rotator[data-effect="blur"] .ch{display:inline-block;will-change:transform,filter,opacity}
.rotator[data-effect="blur"] .is-in .ch{
  animation:rotBlurIn .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 32ms);
}
.rotator[data-effect="blur"] .is-out .ch{
  animation:rotBlurOut .55s cubic-bezier(.5,0,.8,.4) both;animation-delay:calc(var(--i) * 16ms);
}
@keyframes rotBlurIn{
  0%{opacity:0;filter:blur(14px);transform:translateY(.45em) scale(1.35)}
  55%{opacity:1;filter:blur(3px);text-shadow:0 0 .55em rgba(165,207,136,.9)}
  100%{opacity:1;filter:blur(0);transform:none;text-shadow:0 0 0 rgba(165,207,136,0)}
}
@keyframes rotBlurOut{
  0%{opacity:1;filter:blur(0);transform:none}
  100%{opacity:0;filter:blur(12px);transform:translateY(-.4em) scale(.8)}
}

@media (prefers-reduced-motion:reduce){
  .rotator__w,.rotator .ch{transition:none!important;animation:none!important}
}