/* ═══════════════════════════════════════════════════════════
ANKAA animations.css · alle Bewegung, zentral und gegated
Einbinden NACH tokens.css. Reveals brauchen design/reveal.js.
Lebendiger Hintergrund (einmal pro Seite, direkt nach ):
Inhalt danach in legen (z-index über den Layern).
═══════════════════════════════════════════════════════════ */
@keyframes ankaaTwinkle { 0%,100% { opacity: 0.5; } 50% { opacity: 0.85; } }
@keyframes auroraDrift { 0% { transform: translate3d(-4%,-2%,0) scale(1.05); } 50% { transform: translate3d(4%,2%,0) scale(1.12); } 100% { transform: translate3d(-4%,-2%,0) scale(1.05); } }
@keyframes auroraDrift2 { 0% { transform: translate3d(3%,4%,0) scale(1.1) rotate(0deg); } 50% { transform: translate3d(-3%,-3%,0) scale(1.18) rotate(8deg); } 100% { transform: translate3d(3%,4%,0) scale(1.1) rotate(0deg); } }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(240%); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes chipFloat{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulseGlow{ 0%,100% { opacity: 0.5; } 50% { opacity: 0.85; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── Hintergrund-Layer ── */
.ank-bg-aurora { position: fixed; inset: -12%; z-index: 0; pointer-events: none;
background:
radial-gradient(46% 40% at 24% 10%, color-mix(in oklab, var(--acc) 40%, transparent), transparent 70%),
radial-gradient(42% 38% at 82% 26%, rgba(120,90,220,0.30), transparent 72%),
radial-gradient(58% 48% at 60% 96%, rgba(60,80,190,0.26), transparent 70%);
filter: blur(26px); animation: auroraDrift 36s ease-in-out infinite; }
.ank-bg-aurora::after { content: ''; position: absolute; inset: -10%;
background:
radial-gradient(36% 28% at 78% 72%, color-mix(in oklab, var(--acc) 26%, transparent), transparent 70%),
radial-gradient(28% 24% at 14% 58%, rgba(150,110,255,0.20), transparent 72%);
filter: blur(44px); animation: auroraDrift2 50s ease-in-out infinite; }
.ank-bg-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
background-image:
radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.7) 50%, transparent 51%),
radial-gradient(1px 1px at 34% 44%, rgba(255,255,255,0.5) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 58% 12%, color-mix(in oklab, var(--acc) 80%, white) 50%, transparent 51%),
radial-gradient(1px 1px at 72% 62%, rgba(255,255,255,0.45) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 88% 26%, rgba(255,255,255,0.6) 50%, transparent 51%),
radial-gradient(1px 1px at 46% 82%, rgba(255,255,255,0.4) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 20% 72%, color-mix(in oklab, var(--acc) 70%, white) 50%, transparent 51%);
background-size: 340px 340px; animation: ankaaTwinkle 12s ease-in-out infinite; }
.ank-fg { position: relative; z-index: 1; }
/* ── Utility-Animationen ── */
.ank-anim-viewin { animation: viewIn var(--dur-view) var(--ease-out) both; }
.ank-anim-hero { animation: heroRise 0.9s var(--ease-out) both; }
.ank-anim-floaty { animation: floaty 9s ease-in-out infinite; }
.ank-anim-chip { animation: chipFloat 7s ease-in-out infinite; }
.ank-anim-glow { animation: pulseGlow 8s ease-in-out infinite; }
/* Shimmer NUR auf .ank-btn-primary (RULES §9) */
.ank-btn-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
animation: shimmer 5s 1s ease-in-out infinite; }
/* Marquee (nur Landing-Index) */
.ank-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ank-marquee > * { display: flex; gap: 52px; width: max-content; animation: marquee 34s linear infinite; }
/* ── Scroll-Reveals (reveal.js togglet .is-in) ── */
.ank-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.ank-reveal.is-in { opacity: 1; transform: translateY(0); }
/* ── Ring-Fill (SVG): dasharray per Transition, kein Keyframe nötig ──
→ JS setzt Zielwert nach Mount;
transition hier zentral: */
.ank-ring-fill { transition: stroke-dasharray 1.1s var(--ease-out); }
/* ═══ GATES · niemals entfernen (RULES No-Go 9) ═══ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
.ank-reveal { opacity: 1; transform: none; }
}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; }
[data-motion="off"] .ank-reveal { opacity: 1; transform: none; transition: none; }