/* ════════════════════════════════════════════
   EASTER THEME — VC Roleplay
   Activated via html.easter-mode class (JS)
   ════════════════════════════════════════════ */

html.easter-mode {
  --accent:        #e8477a;
  --accent-light:  #ff6eb4;
  --accent-dark:   #c22060;
  --accent-glow:   rgba(232,71,122,0.40);
  --accent-soft:   rgba(232,71,122,0.12);
  --accent-border: rgba(232,71,122,0.22);
  --ep:  #ff6eb4;
  --ey:  #ffd93d;
  --eg:  #6bcb77;
  --epu: #c77dff;
  --eb:  #4cc9f0;
}

/* ── Animated Easter Banner ──────────────── */
#easterBanner {
  position: relative;
  z-index: 1100;
  padding: 10px 24px;
  text-align: center;
  background: linear-gradient(90deg, #e8477a, #ffd93d, #6bcb77, #c77dff, #4cc9f0, #e8477a);
  background-size: 400% 100%;
  animation: easterBannerAnim 6s linear infinite;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: default;
}
@keyframes easterBannerAnim {
  0%   { background-position: 0% }
  100% { background-position: 400% }
}

/* ── Canvas (falling particles) ─────────── */
#easterCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}

/* ── Cursor trail ────────────────────────── */
.easter-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 15px;
  transform: translate(-50%, -50%);
  animation: easterTrailAnim 1.1s ease-out forwards;
  user-select: none;
  line-height: 1;
}
@keyframes easterTrailAnim {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
  50%  { opacity: 0.7; transform: translate(-50%, -130%) scale(0.9) rotate(15deg); }
  100% { opacity: 0;   transform: translate(-50%, -220%) scale(0.3) rotate(30deg); }
}

/* ── Warm background radial glow ─────────── */
html.easter-mode body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%,  rgba(232,71,122,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 95%, rgba(107,203,119,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,217,61,0.03)  0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Nav active state ────────────────────── */
html.easter-mode .nav-link.active {
  color: var(--ep) !important;
}
html.easter-mode .nav-link.active::after {
  background: linear-gradient(90deg, var(--ep), var(--ey)) !important;
}

/* ── Section titles gradient ─────────────── */
html.easter-mode .section-title .accent,
html.easter-mode .section-label {
  background: linear-gradient(135deg, var(--ep) 0%, var(--ey) 50%, var(--eg) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero section ────────────────────────── */
html.easter-mode .home-hero {
  background: radial-gradient(ellipse 80% 70% at 50% 30%,
    rgba(232,71,122,0.10) 0%,
    rgba(255,217,61,0.05) 40%,
    transparent 70%) !important;
}

/* ── Feature/Step cards hover glow ──────── */
html.easter-mode .feat-card:hover,
html.easter-mode .step-card:hover {
  border-color: rgba(232,71,122,0.35) !important;
  box-shadow: 0 8px 40px rgba(232,71,122,0.14),
              0 0 0 1px rgba(255,217,61,0.08) !important;
}

/* ── Regelwerk sidebar active ────────────── */
html.easter-mode .rw-cat-link.active {
  background: linear-gradient(135deg,
    rgba(232,71,122,0.15) 0%,
    rgba(255,217,61,0.08) 100%) !important;
  border-left-color: var(--ep) !important;
  color: var(--ep) !important;
}

/* ── FAQ active item ─────────────────────── */
html.easter-mode .faq-item.open .faq-q {
  color: var(--ep) !important;
}

/* ── Scrollbar ───────────────────────────── */
html.easter-mode ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--ep), var(--ey));
}

/* ── Easter egg floating decorations ────── */
html.easter-mode .easter-deco {
  position: fixed;
  font-size: 2.5rem;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  animation: easterFloat 6s ease-in-out infinite;
  user-select: none;
}
html.easter-mode .easter-deco:nth-child(2) { animation-delay: -2s; }
html.easter-mode .easter-deco:nth-child(3) { animation-delay: -4s; }
@keyframes easterFloat {
  0%, 100% { transform: translateY(0)   rotate(-5deg); }
  50%       { transform: translateY(-18px) rotate(5deg); }
}