/* ===============================================================
   grünhage.ai · Animation Library v1 · Kesey Signal v3
   Stand: 28. Mai 2026

   Erwartet die Tokens aus colors_and_type.css (--ks-blue, --ks-violet, ...).
   NACH colors_and_type.css laden.

   Hinweis: Der generische .marquee-Block der Library ist hier bewusst
   ausgelassen, weil die Logo-Wall in v2.html ihre eigene .marquee nutzt.
   =============================================================== */

:root {
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 01 · CURSOR SPOTLIGHT */
body.has-cursor-fx { cursor: none; }
body.has-cursor-fx a,
body.has-cursor-fx button { cursor: none; }

.cursor-glow {
  position: fixed;
  width: 380px; height: 380px;
  left: -190px; top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(92,125,255,0.30) 0%,
              rgba(92,125,255,0.14) 30%,
              rgba(148,102,255,0.08) 55%,
              rgba(92,125,255,0) 72%);
  filter: blur(16px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 100;
  will-change: transform;
  transition: opacity 240ms ease;
  opacity: 0;
}

.cursor-ring {
  position: fixed;
  width: 48px; height: 48px;
  left: -24px; top: -24px;
  border-radius: 50%;
  border: 1.5px solid var(--ks-blue, #5C7DFF);
  background: rgba(92,125,255,0.06);
  pointer-events: none;
  z-index: 101;
  will-change: transform;
  transition: width 220ms var(--anim-ease),
              height 220ms var(--anim-ease),
              left 220ms var(--anim-ease),
              top 220ms var(--anim-ease),
              background-color 220ms var(--anim-ease),
              border-color 220ms var(--anim-ease),
              opacity 200ms ease;
  opacity: 0;
}

body.is-hovering .cursor-ring {
  width: 68px; height: 68px;
  left: -34px; top: -34px;
  background: rgba(148,102,255,0.12);
  border-color: var(--ks-violet, #9466FF);
}

@media (hover: none),
       (prefers-reduced-motion: reduce) {
  .cursor-glow, .cursor-ring { display: none; }
  body.has-cursor-fx { cursor: auto; }
  body.has-cursor-fx a, body.has-cursor-fx button { cursor: pointer; }
}

/* 02 · SCROLL-PROGRESS-BAR */
.progress-bar {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--ks-blue, #5C7DFF);
  z-index: 90;
  transition: width 80ms linear;
}

/* 03 · PULSE DOT */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ks-blue, #5C7DFF);
  animation: pulseDot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(92,125,255,0.5); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(92,125,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

/* 04 · NAV-DOT LINK */
.nav-dot {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ks-w70, rgba(255,255,255,0.70));
  text-decoration: none;
  position: relative;
  padding-left: 12px;
  transition: color 200ms var(--anim-ease), padding-left 200ms var(--anim-ease);
}
.nav-dot::before {
  content: ""; position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ks-blue, #5C7DFF);
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  transition: opacity 200ms var(--anim-ease), transform 200ms var(--anim-ease);
}
.nav-dot:hover {
  color: #FFFFFF;
  padding-left: 16px;
}
.nav-dot:hover::before,
.nav-dot.is-active::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.nav-dot.is-active { color: var(--ks-blue, #5C7DFF); }

/* 05 · WORD-MASK REVEAL (Hero-Headline)
   v2.html hat eine eigene Word-Mask. Diese Regeln werden vom Inline-Style
   ueberschrieben und sind nur als Fallback hier. */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 0.95em;
  padding-top: 0.04em;
  padding-bottom: 0.04em;
}
.word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1000ms var(--anim-ease);
}
[data-reveal].is-revealed .word-inner { transform: translateY(0%); }

[data-reveal] .word-mask:nth-child(1) .word-inner { transition-delay:  60ms; }
[data-reveal] .word-mask:nth-child(2) .word-inner { transition-delay: 120ms; }
[data-reveal] .word-mask:nth-child(3) .word-inner { transition-delay: 180ms; }
[data-reveal] .word-mask:nth-child(4) .word-inner { transition-delay: 240ms; }
[data-reveal] .word-mask:nth-child(5) .word-inner { transition-delay: 300ms; }
[data-reveal] .word-mask:nth-child(6) .word-inner { transition-delay: 360ms; }
[data-reveal] .word-mask:nth-child(7) .word-inner { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .word-inner { transform: none !important; transition: none !important; }
}

/* 06 · FADE-UP REVEAL */
[data-fade] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--anim-ease), transform 800ms var(--anim-ease);
  transition-delay: var(--d, 0ms);
}
[data-fade].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 07 · CARD LIGHT-POOL */
.card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 280ms var(--anim-ease),
              transform 280ms var(--anim-ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(92,125,255,0.18) 0%,
              rgba(92,125,255,0) 60%);
  opacity: 0;
  transition: opacity 280ms var(--anim-ease);
  pointer-events: none;
  z-index: -1;
}
.card:hover {
  border-color: var(--ks-blue, #5C7DFF);
  transform: translateY(-3px);
}
.card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: border-color 280ms; }
  .card:hover { transform: none; }
  .card::before { display: none; }
}

/* 08 · MAGNETIC ELEMENT */
[data-magnetic] {
  transition: transform 360ms var(--anim-ease),
              background-color 220ms var(--anim-ease),
              color 220ms var(--anim-ease),
              border-color 220ms var(--anim-ease);
}
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transition: background-color 220ms, color 220ms, border-color 220ms; }
}

/* 11 · BUTTON-ARROW NUDGE */
.btn .arrow {
  display: inline-block;
  transition: transform 260ms var(--anim-ease);
}
.btn:hover .arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn .arrow { transition: none; }
  .btn:hover .arrow { transform: none; }
}