/* IdeaQuest – eigene Styles (ergänzt Tailwind via CDN) */

:root {
    --iq-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Sanftes Scrollen */
html { scroll-behavior: smooth; }

/* ---------- Eingangs-Animationen ---------- */
@keyframes iq-slide-up   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes iq-slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes iq-pop        { 0% { opacity: 0; transform: scale(.8); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }

.animate-slide-up   { animation: iq-slide-up   .6s var(--iq-ease) both; }
.animate-slide-down { animation: iq-slide-down .4s var(--iq-ease) both; }
.animate-pop        { animation: iq-pop        .45s var(--iq-ease) both; }

/* Staggered Listen (per JS gesetzt: --i) */
[data-stagger] > * { animation: iq-slide-up .5s var(--iq-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* Fortschrittsbalken füllt sich animiert */
.progress-fill { width: 0; transition: width 1s var(--iq-ease); }
.progress-fill.is-filled { width: var(--target); }

/* line-clamp Fallback */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Game-Board ---------- */
.game-board { position: relative; }
.board-node {
    position: relative; z-index: 2;
    display: grid; place-items: center;
    height: 2.75rem; width: 2.75rem; border-radius: 9999px;
    transition: transform .3s var(--iq-ease), background .3s, box-shadow .3s;
}
.board-node.is-done    { background: #10b981; color: #fff; }
.board-node.is-current { background: #f59e0b; color: #fff; box-shadow: 0 0 0 0 rgba(245,158,11,.6); animation: iq-pulse 2s infinite; transform: scale(1.12); }
.board-node.is-todo    { background: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }

@keyframes iq-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
    70%  { box-shadow: 0 0 0 14px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* Verbindungslinie zwischen den Stationen */
.board-connector {
    position: absolute; z-index: 1;
    top: 1.375rem; left: 50%; width: 100%; height: 3px;
    background: rgba(255,255,255,.12); border-radius: 9999px;
}
.board-connector.is-done { background: #10b981; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
}