/* Datei: /public/css/ea-bar.css */
/* Grüne Early-Access-Leiste ganz oben (app/Core/ui/ea-bar.php) - Startseite und alle Seiten mit Navigation.
   Gibt es nur bis zum Start; Countdown und Ausblenden bei null in /js/ct-ea-bar.js. */

.ct-ea-bar {
    position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px; color: var(--ct-black); text-decoration: none; font-size: 14px; overflow: hidden;
    background: linear-gradient(90deg, #A8D80B, #7FE0B0 45%, #38BDF8);
}
.ct-ea-bar::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: ctEaBarSweep 4s ease-in-out infinite;
}
.ct-ea-bar:hover { color: var(--ct-black); }
.ct-ea-bar__live {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--ct-black); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ct-ea-bar__live .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: ctEaBarBlink 1.2s ease-in-out infinite; }
.ct-ea-bar__cd { display: inline-block; padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; color: var(--ct-primary); background: rgba(0, 0, 0, .85); }
.ct-ea-bar__go { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .85); color: var(--ct-primary); font-weight: 700; }
.ct-ea-bar__go i { animation: ctEaBarBounce 1.6s ease-in-out infinite; }
.ct-ea-bar__go .fa-arrow-right { animation-name: ctEaBarNudge; }

/* Startseite: zählt der Countdown dort auf null (body.is-ea-live), ist die Leiste sofort weg */
.is-ea-live .ct-ea-bar { display: none; }

@keyframes ctEaBarSweep { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes ctEaBarBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ctEaBarBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes ctEaBarNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

@media (max-width: 640px) {
    .ct-ea-bar { font-size: 13px; gap: 8px; }
    .ct-ea-bar__more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-ea-bar::after, .ct-ea-bar__live .dot, .ct-ea-bar__go i { animation: none !important; }
}