/* Hero-Szene der Startseite (Foto, Strahler, Glow, Grid, Partikel) - Kopie aus index.html fuer die Hoerer-Seiten */
/* Scene wrapper — confines the scene to the hero; parallax origin (--mx/--my via JS) */
.hero-scene {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    --mx: 0;
    --my: 0;
}

/* Photo backdrop — palms left/right; sits below beams + particles so they sweep over it */
.bg-photo {
    position: absolute;
    inset: 0;
    background: url("/hero-bg.webp?v=2") center / cover no-repeat;
    transform: scale(1.06)
               translate(calc(var(--mx) * -16px), calc(var(--my) * -12px));
    will-change: transform;
}
/* Darken the photo a touch so the logo/headline stay readable */
.bg-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%,
        rgba(5, 3, 12, 0.55) 0%,
        rgba(5, 3, 12, 0.30) 45%,
        transparent 80%);
}

/* Focal glow behind the logo — the main accent light */
.bg-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    width: min(72vw, 640px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%)
               translate(calc(var(--mx) * 28px), calc(var(--my) * 22px));
    background: radial-gradient(circle at 50% 50%,
        rgba(25, 232, 232, 0.40) 0%,
        rgba(255, 46, 136, 0.28) 32%,
        rgba(166, 45, 207, 0.16) 55%,
        transparent 72%);
    filter: blur(36px);
    animation: glowPulse 7s ease-in-out infinite;
    will-change: transform;
}

/* Sweeping event searchlights — additive light shafts */
.beams {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mix-blend-mode: screen;
    pointer-events: none;
}

.beam {
    position: absolute;
    bottom: -18%;
    width: clamp(80px, 11vw, 150px);
    height: 135%;
    transform-origin: 50% 100%;
    clip-path: polygon(43% 100%, 57% 100%, 100% 0, 0 0);
    filter: blur(16px);
    opacity: 0.7;
    will-change: transform;
}

.beam--c { background: linear-gradient(to top, rgba(25, 232, 232,0) 0%,  rgba(25, 232, 232,0.55) 8%,  rgba(25, 232, 232,0.16) 56%, transparent 88%); }
.beam--p { background: linear-gradient(to top, rgba(255,46,136,0) 0%,  rgba(255,46,136,0.55) 8%,  rgba(255,46,136,0.16) 56%, transparent 88%); }
.beam--v { background: linear-gradient(to top, rgba(166, 45, 207,0) 0%,  rgba(166, 45, 207,0.52) 8%,  rgba(166, 45, 207,0.16) 56%, transparent 88%); }

.beam1 { left: 14%; animation: sweepA 9s  ease-in-out infinite; }
.beam2 { left: 42%; animation: sweepB 11s ease-in-out infinite; }
.beam3 { left: 70%; animation: sweepC 10s ease-in-out infinite; }
.beam4 { left: 90%; animation: sweepD 13s ease-in-out infinite; }

@keyframes sweepA { 0%, 100% { transform: rotate(-34deg); } 50% { transform: rotate(10deg); } }
@keyframes sweepB { 0%, 100% { transform: rotate(24deg);  } 50% { transform: rotate(-20deg); } }
@keyframes sweepC { 0%, 100% { transform: rotate(32deg);  } 50% { transform: rotate(-6deg); } }
@keyframes sweepD { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(28deg); } }

/* Synthwave perspective grid floor — dark, subtle, in motion */
.bg-grid {
    position: absolute;
    left: 50%;
    bottom: -4%;
    width: 360vw;
    height: 52%;
    transform: translateX(-50%) translateY(calc(var(--my) * 8px))
               perspective(320px) rotateX(76deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(to right, rgba(25, 232, 232, 0.32) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 46, 136, 0.24) 1px, transparent 1px);
    background-size: 72px 72px;
    animation: gridMove 3s linear infinite;
    -webkit-mask: linear-gradient(to top, #000 0%, transparent 72%);
            mask: linear-gradient(to top, #000 0%, transparent 72%);
    opacity: 0.7;
    will-change: transform;
}

/* Large palm shadow — almost invisible on the dark bg, revealed where beams sweep over it */
.palm-shadow {
    position: absolute;
    bottom: -4%;
    left: 57%;
    height: min(108vh, 1040px);
    width: auto;
    pointer-events: none;
    fill: rgba(0, 0, 0, 0.78);
    transform: translateX(-50%) rotate(-5deg);
    transform-origin: 50% 100%;
    animation: swayShadow 14s ease-in-out infinite;
}

/* A few drifting neon particles */
.particle {
    position: absolute;
    bottom: 6%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 9px 2px var(--cyan);
    opacity: 0;
    animation: drift linear infinite;
}
.particle.p1 { left: 17%; animation-duration: 14s; animation-delay: 0s; }
.particle.p2 { left: 39%; animation-duration: 18s; animation-delay: 5s;
               background: var(--pink); box-shadow: 0 0 9px 2px var(--pink); }
.particle.p3 { left: 63%; animation-duration: 16s; animation-delay: 2.5s; }
.particle.p4 { left: 83%; animation-duration: 20s; animation-delay: 8s;
               background: var(--pink); box-shadow: 0 0 9px 2px var(--pink); }

/* Film grain */
.bg-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* CRT scanlines on top of everything */
.scanlines {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.5;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0 2px,
        rgba(0, 0, 0, 0.06) 2px 3px);
    mix-blend-mode: multiply;
}

@keyframes gridMove {
    from { background-position: 0 0; }
    to   { background-position: 0 72px; }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.85; filter: blur(36px); }
    50%      { opacity: 1;    filter: blur(44px); }
}

@keyframes swayShadow {
    0%, 100% { transform: translateX(-50%) rotate(-5deg); }
    50%      { transform: translateX(-50%) rotate(-1.5deg); }
}

@keyframes drift {
    0%   { transform: translateY(10px) translateX(0); opacity: 0; }
    12%  { opacity: 0.85; }
    88%  { opacity: 0.85; }
    100% { transform: translateY(-72vh) translateX(14px); opacity: 0; }
}

@media (max-width: 768px) {
    .bg-photo { background-position: left center; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bg-grid, .bg-glow, .palm-shadow, .particle, .beam { animation: none !important; }
}
/* Als fester Seitenhintergrund hinter dem ganzen Ranking */
.hero-scene--page { position: fixed; inset: 0; z-index: 0; transform: translateZ(0); }
/* Inhalt auf eigene Ebene ueber der Szene - sonst zeichnen mobile Browser nach dem Scrollen
   eingeblendete Texte im Kopf teils nicht neu (08.10.2026, Felix auf dem Handy) */
.hero-scene--page ~ header, .hero-scene--page ~ section, .hero-scene--page ~ main, .hero-scene--page ~ footer { position: relative; z-index: 1; }
.hero-scene--page::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4,7,14,.10) 0%, rgba(4,7,14,.40) 50%, rgba(4,7,14,.60) 100%); }
.hero-scene--page ~ .page-header, .hero-scene--page ~ * .page-header { background: transparent; border-bottom-color: rgba(25,232,232,.12); }
.hero-scene--page ~ * .hr-row, .hero-scene--page ~ * .hr-pod { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Kopf ohne Einblend-Animation: opacity/transform-Animation + fixe Szene lassen mobile Browser
   Eyebrow, Buttons und "Live-Stand" nach dem Hoch-Scrollen verlieren (08.10.2026) */
.hero-scene--page ~ .page-header .fade-in { animation: none; opacity: 1; transform: none; }