/**
 * /assets/css/hero-logo-animated.css
 *
 * Purpose:  Epische Logo-Animation auf der Startseite (Welcome Hero)
 * Deps:     app.css (CSS variables), home-welcome.css (MUSS DAVOR laden)
 * Load:     index.php
 * Version:  1.2.0 – Shimmer/Scheibenwischer entfernt (ging ueber transparente PNG-Bereiche)
 */

/* ===== Content Layer MUSS ueber den Effekten liegen ===== */
.welcome-hero__content {
    position: relative;
    z-index: 10;
}

/* ===== Logo-Wrap ===== */
.welcome-hero__logo-wrap {
    position: relative;
    display: inline-block;
}

/* ===== Logo: Animation (ueberschreibt home-welcome.css) ===== */
.welcome-hero__logo {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
    transition: none !important; /* home-welcome.css transition kollidiert mit animation */
    animation:
        heroLogoEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        heroLogoFloat 5s ease-in-out 2s infinite,
        heroLogoGlow 4s ease-in-out 1.5s infinite;
}

/* Hover-Effekt von home-welcome.css deaktivieren (animation uebernimmt) */
.welcome-hero:hover .welcome-hero__logo {
    transform: none;
    filter: none;
}

/* ===== Shimmer ENTFERNT (v1.2.0) ===== */
/* Ging ueber transparente PNG-Bereiche → sah aus wie Scheibenwischer auf Nichts */
/* Falls noch im DOM: unsichtbar machen */
.welcome-hero__shimmer {
    display: none !important;
}

/* ===== Radial Light Rays ===== */
.welcome-hero__light-rays {
    position: absolute;
    z-index: 1;
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    pointer-events: none;
    opacity: 0;
    animation: heroRaysAppear 2s ease 1s forwards;
}

.welcome-hero__light-rays::before,
.welcome-hero__light-rays::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.welcome-hero__light-rays::before {
    background: radial-gradient(
        ellipse at center,
        rgba(80, 180, 255, 0.12) 0%,
        rgba(80, 180, 255, 0.04) 35%,
        transparent 65%
    );
    animation: heroRaysPulse 4s ease-in-out infinite;
}

.welcome-hero__light-rays::after {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 200, 80, 0.08) 0%,
        rgba(255, 180, 60, 0.02) 30%,
        transparent 55%
    );
    animation: heroRaysPulse 4s ease-in-out 2s infinite;
}

/* ===== Conic Ray Burst (slow rotating) ===== */
.welcome-hero__ray-burst {
    position: absolute;
    z-index: 1;
    width: 700px;
    height: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    pointer-events: none;
    opacity: 0;
    animation: heroBurstAppear 3s ease 1.2s forwards;
    mix-blend-mode: screen;
}

.welcome-hero__ray-burst::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(80, 180, 255, 0.04) 8deg,
        transparent 16deg,
        transparent 30deg,
        rgba(255, 200, 80, 0.03) 38deg,
        transparent 46deg,
        transparent 60deg,
        rgba(80, 180, 255, 0.04) 68deg,
        transparent 76deg,
        transparent 90deg,
        rgba(255, 200, 80, 0.03) 98deg,
        transparent 106deg,
        transparent 120deg,
        rgba(80, 180, 255, 0.04) 128deg,
        transparent 136deg,
        transparent 150deg,
        rgba(255, 200, 80, 0.03) 158deg,
        transparent 166deg,
        transparent 180deg,
        rgba(80, 180, 255, 0.04) 188deg,
        transparent 196deg,
        transparent 210deg,
        rgba(255, 200, 80, 0.03) 218deg,
        transparent 226deg,
        transparent 240deg,
        rgba(80, 180, 255, 0.04) 248deg,
        transparent 256deg,
        transparent 270deg,
        rgba(255, 200, 80, 0.03) 278deg,
        transparent 286deg,
        transparent 300deg,
        rgba(80, 180, 255, 0.04) 308deg,
        transparent 316deg,
        transparent 330deg,
        rgba(255, 200, 80, 0.03) 338deg,
        transparent 346deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: heroBurstSpin 120s linear infinite;
}

/* ===== Magic Circle ===== */
.welcome-hero__magic-circle {
    position: absolute;
    z-index: 1;
    width: 480px;
    height: 480px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    border: 1px solid rgba(80, 180, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation:
        heroCircleAppear 2s ease 1.8s forwards,
        heroCircleSpin 90s linear infinite;
}

.welcome-hero__magic-circle::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 1px dashed rgba(255, 200, 80, 0.05);
    border-radius: 50%;
    animation: heroCircleSpin 60s linear reverse infinite;
}

/* ===== Particle Canvas ===== */
.welcome-hero__particles {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    z-index: 2;
}

/* ===== Floating Runes ===== */
.welcome-hero__rune {
    position: absolute;
    z-index: 2;
    font-size: 1.2rem;
    color: rgba(80, 180, 255, 0.15);
    pointer-events: none;
    animation: heroRuneFloat 8s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(80, 180, 255, 0.3);
}

.welcome-hero__rune:nth-child(1) { left: 5%; top: 20%; animation-delay: 0s; animation-duration: 9s; }
.welcome-hero__rune:nth-child(2) { right: 8%; top: 30%; animation-delay: 2s; animation-duration: 7s; }
.welcome-hero__rune:nth-child(3) { left: 12%; bottom: 25%; animation-delay: 4s; animation-duration: 10s; }
.welcome-hero__rune:nth-child(4) { right: 15%; bottom: 20%; animation-delay: 1s; animation-duration: 8s; }

/* ===== Keyframes ===== */

@keyframes heroLogoEntrance {
    0%   { opacity: 0; transform: scale(0.7) translateY(30px); }
    50%  { opacity: 0.8; }
    80%  { transform: scale(1.02) translateY(-3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes heroLogoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes heroLogoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(80, 180, 255, 0.15))
                drop-shadow(0 0 40px rgba(80, 180, 255, 0.05));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(80, 180, 255, 0.3))
                drop-shadow(0 0 60px rgba(255, 200, 80, 0.1));
    }
}

/* Shimmer keyframes entfernt (v1.2.0) */

@keyframes heroRaysAppear {
    to { opacity: 1; }
}

@keyframes heroRaysPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.7; }
}

@keyframes heroBurstAppear {
    to { opacity: 0.7; }
}

@keyframes heroBurstSpin {
    to { transform: translate(-50%, -55%) rotate(360deg); }
}

@keyframes heroRuneFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.15; }
    25%      { opacity: 0.25; }
    50%      { transform: translateY(-15px) rotate(5deg); opacity: 0.2; }
    75%      { opacity: 0.1; }
}

@keyframes heroCircleAppear {
    to { opacity: 1; }
}

@keyframes heroCircleSpin {
    to { transform: translate(-50%, -55%) rotate(360deg); }
}

/* ===== Responsive ===== */
@media (max-width: 575.98px) {
    .welcome-hero__light-rays,
    .welcome-hero__ray-burst {
        width: 350px;
        height: 350px;
    }
    .welcome-hero__magic-circle {
        width: 300px;
        height: 300px;
    }
}