/* ============================================================
   [215/216/217] Moderne Design-Features für blunaa.com
   Dezent & professionell, abgestimmt auf die bestehende
   blau-graue Palette (--accent: #5b7fa6).
   ============================================================ */

/* ── [215] Scroll-Reveal ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── [216] Glassmorphism ──────────────────────────────────── */
/* Matte Glasflächen für Cards & Player. Nur im Dunkelmodus mit
   dem typischen Frosted-Look; im hellen Modus dezenter. */
.glass {
  background: rgba(36, 44, 61, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(28, 35, 51, 0.08);
  box-shadow: 0 8px 32px rgba(28, 35, 51, 0.12);
}

/* Sanfte Glasoptik dezent auf bestehende Karten legen */
.event-card, .tech-card, .blog-item, .fun-card, .feature-card, .link-card {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Player-Leiste bekommt den Frosted-Look */
#bl-audio-player .blp-bar,
#bl-audio-player.blp-glass {
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

/* Fallback: Browser ohne backdrop-filter bekommen solide Flächen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(36, 44, 61, 0.92); }
  html[data-theme="light"] .glass { background: rgba(255, 255, 255, 0.95); }
}

/* ── [217] Animierter Aurora-/Gradient-Hintergrund im Hero ── */
/* Weiche, langsam wandernde Farbverläufe hinter dem Hero-Inhalt.
   Liegt ÜBER dem bestehenden Hintergrundbild, aber unter dem Text. */
#sec-home { position: relative; overflow: hidden; }
#sec-home .aurora {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 20% 30%, rgba(91,127,166,0.42), transparent 60%),
    radial-gradient(34% 40% at 80% 25%, rgba(138,170,200,0.34), transparent 60%),
    radial-gradient(45% 50% at 60% 80%, rgba(74,109,145,0.38), transparent 62%);
  filter: blur(28px);
  animation: auroraMove 22s ease-in-out infinite alternate;
}
#sec-home > * { position: relative; z-index: 1; }
@keyframes auroraMove {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.12) rotate(6deg); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.08) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  #sec-home .aurora { animation: none; }
}

/* ── [218] Scroll-Progress-Leiste ─────────────────────────── */
#bl-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 1200; pointer-events: none;
}
#bl-scroll-progress .bl-sp-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent, #5b7fa6), var(--accent-lt, #8aaac8));
  box-shadow: 0 0 8px rgba(91,127,166,.6);
  transition: width .08s linear;
}

/* ── [219b] Text-Gradient-Animation für große Überschriften ── */
.gradient-text, .heading.gradient-text {
  background: linear-gradient(100deg,
    var(--accent, #5b7fa6) 0%,
    var(--accent-lt, #8aaac8) 30%,
    #b8cde0 50%,
    var(--accent-lt, #8aaac8) 70%,
    var(--accent, #5b7fa6) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradientShift 8s linear infinite;
}
@keyframes gradientShift { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}

/* ── [220] Tilt-Hover ─────────────────────────────────────── */
.tilt-card {
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease;
  transform-style: preserve-3d; will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
}
html[data-theme="light"] .tilt-card:hover {
  box-shadow: 0 18px 40px rgba(28,35,51,.18);
}