/* Hero-Logo reagiert auf die Maus (Startseite + /med), zusammen mit js/logo-fx.js.
   Muss nach den Inline-Styles der Seite geladen werden (Link am Ende von <head>). */
.hero-logo-wrap {
    position: relative; isolation: isolate;
    transform: perspective(1100px) rotateX(var(--lf-rx, 0deg)) rotateY(var(--lf-ry, 0deg)) scale(var(--lf-s, 1));
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: box-shadow, filter, transform;
}
.hero-logo-wrap.lf-hover { --lf-s: 1.025; transition: transform 0.15s ease-out; }

/* Aura hinter dem Logo, folgt der Maus */
.hero-logo-wrap::before {
    content: ''; position: absolute; inset: -34px; z-index: -1; border-radius: 40px; pointer-events: none;
    background: radial-gradient(440px circle at calc(var(--lf-x, 50%) + 34px) calc(var(--lf-y, 50%) + 34px),
        rgba(108, 140, 255, 0.6), rgba(167, 139, 250, 0.34) 38%, transparent 72%);
    filter: blur(22px);
    opacity: 0; transition: opacity 0.45s ease;
}
/* Glow-Ring, atmet beim Hover schneller */
.hero-logo-wrap::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 60px rgba(108, 140, 255, 0.5), 0 0 130px rgba(167, 139, 250, 0.32);
    opacity: 0; transition: opacity 0.45s ease;
}
.hero-logo-wrap.lf-hover::before { opacity: 1; }
.hero-logo-wrap.lf-hover::after { opacity: 1; animation: lfBreath 1.6s ease-in-out infinite; }
@keyframes lfBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.018); }
}

/* Lichtkegel an der Maus + holografischer Schimmer im Logo-Verlauf */
.lf-light {
    position: absolute; inset: 0; z-index: 2; border-radius: var(--radius, 16px); pointer-events: none;
    background:
        radial-gradient(240px circle at var(--lf-x, 50%) var(--lf-y, 50%), rgba(224, 231, 255, 0.42), rgba(167, 139, 250, 0.18) 42%, transparent 72%),
        linear-gradient(105deg, transparent 35%, rgba(125, 211, 252, 0.22) 45%, rgba(216, 180, 254, 0.3) 50%, rgba(125, 211, 252, 0.22) 55%, transparent 65%);
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, var(--lf-sheen, 50%) 0;
    mix-blend-mode: screen;
    opacity: 0; transition: opacity 0.4s ease;
}
.hero-logo-wrap.lf-hover .lf-light { opacity: 1; }

/* Sternenstaub + Schallwellen; ragt über das Logo hinaus (PAD in js/logo-fx.js) */
.lf-dust {
    position: absolute; left: -60px; top: -60px; z-index: 3; pointer-events: none;
    width: calc(100% + 120px); height: calc(100% + 120px);
}

.hero-logo { transition: opacity 2.6s ease, filter 0.45s ease; }
.hero-logo-wrap.is-ready .hero-logo { transition-delay: 0.8s, 0s; }
.hero-logo-wrap.lf-hover .hero-logo { filter: brightness(1.14) saturate(1.25) contrast(1.04); }

@media (prefers-reduced-motion: reduce) {
    .hero-logo { transition: none; }
    .hero-logo-wrap.is-ready .hero-logo { transition-delay: 0s; }
    .hero-logo-wrap, .hero-logo-wrap.lf-hover { transform: none; transition: none; }
    .hero-logo-wrap.lf-hover::after { animation: none; }
}