/**
 * File: carnival-homepage.css
 *
 * CARNIVAL UNIVERSE - HERO SECTION
 * Premium "Floating World" Design.
 *
 * @package     KuK Bendorf Theme
 * @author      Oliver Ferber <admin@kuk-bendorf.de>
 * @copyright   2024-2026 KuK Bendorf e.V.
 * @license     Proprietary
 * @version     1.0.0
 */

/* ═══════════════════════════════════════════════════════
   GARDE-MÄDCHEN – symmetrische Hero-Komposition
   Beide Tänzerinnen leben INNERHALB .hero-v2 (position:absolute).

   Symmetrie-Schema:
     [WAPPEN oben-links]      [NARRENKAPPE oben-rechts]
     [BLONDE unten-links]     [BRUNETTE  unten-rechts]
   ═══════════════════════════════════════════════════════ */

/* ── Gemeinsame Basis ─────────────────────────────────── */
.fp-dancer-float,
.fp-dancer-float-right {
    position: absolute;
    bottom: 0;               /* steht auf dem Hero-Boden */
    z-index: 6;              /* vor Wappen/Narrenkappe (z:5) */
    pointer-events: none;
    transform-origin: bottom center;
    will-change: transform;
}

/* ── Linke Tänzerin (Blond) ───────────────────────────── */
.fp-dancer-float      { left: 2%;  animation: fpDancerSwayL 5.0s ease-in-out infinite; }

/* ── Rechte Tänzerin (Braun) ──────────────────────────── */
.fp-dancer-float-right { right: 2%; animation: fpDancerSwayR 5.4s ease-in-out infinite; }

/* ── Bild-Styling (beide teilen .fp-dancer-img) ─────────── */
.fp-dancer-img {
    display: block;
    width: clamp(130px, 16vw, 240px);
    height: auto;
    filter: drop-shadow(6px 14px 28px rgba(0, 0, 0, 0.55));
    mix-blend-mode: normal;
}

/* ── Animationen (gespiegelt) ─────────────────────────── */
@keyframes fpDancerSwayL {
    0%   { transform: rotate(-2.5deg) scale(1);    }
    25%  { transform: rotate(2deg)    scale(1.03); }
    55%  { transform: rotate(-1.5deg) scale(1.01); }
    80%  { transform: rotate(2.5deg)  scale(1.02); }
    100% { transform: rotate(-2.5deg) scale(1);    }
}

@keyframes fpDancerSwayR {         /* gespiegeltes Timing */
    0%   { transform: rotate(2.5deg)  scale(1);    }
    25%  { transform: rotate(-2deg)   scale(1.03); }
    55%  { transform: rotate(1.5deg)  scale(1.01); }
    80%  { transform: rotate(-2.5deg) scale(1.02); }
    100% { transform: rotate(2.5deg)  scale(1);    }
}

/* ── Responsive: Tablet (≤1100px) – schmaler, aber sichtbar ── */
@media (max-width: 1100px) {
    .fp-dancer-img {
        width: clamp(100px, 12vw, 140px);
    }
    .fp-dancer-float       { left: 0; }
    .fp-dancer-float-right { right: 0; }
}

/* ── Responsive: kleines Tablet / großes Phone (≤750px) ───── */
@media (max-width: 750px) {
    .fp-dancer-float,
    .fp-dancer-float-right {
        bottom: 0;
        z-index: 15;   /* klar VOR dem Hero-Content (z:10) */
    }
    .fp-dancer-img {
        width: clamp(115px, 19vw, 160px);
    }
    .fp-dancer-float       { left: 0; }
    .fp-dancer-float-right { right: 0; }
}

/* ── Responsive: Mobil (≤480px) – gut sichtbar, im Vordergrund ─── */
@media (max-width: 480px) {
    .fp-dancer-float,
    .fp-dancer-float-right {
        bottom: 0;
        z-index: 15;  /* vor dem Content */
    }
    .fp-dancer-img {
        width: clamp(100px, 22vw, 130px);
    }
    .fp-dancer-float       { left: 0; }
    .fp-dancer-float-right { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-dancer-float,
    .fp-dancer-float-right { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   1. ANIMATED MESH GRADIENT BACKGROUND (original start)
   ═══════════════════════════════════════════════════════ */
/* 1. ANIMATED MESH GRADIENT BACKGROUND */
.bubble-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* Full viewport height */
    overflow: hidden;
    font-family: 'Oswald', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Transparent to show body gradient */
    background: transparent;
    /* Removed dynamic mesh to enforce global gradient consistency */
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* 2. CENTRAL STAGE (The "Planet") */
.hero-stage-wrapper {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 900px;
    padding: 20px;

    /* 3D Perspective for Tilt Effect */
    perspective: 1000px;
}

.hero-central-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    /* Inner highlight */
    position: relative;
    transition: transform 0.1s ease-out;
    /* Smooth follow for mouse */
    border: 1px solid rgba(220, 20, 60, 0.1);
    /* Subtle red border */
}

/* Narrenkappe floating ON TOP of the card */
.central-cap-floating {
    position: absolute;
    top: -60px;
    /* Reduced overlapping */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    /* Consistent size */
    z-index: 20;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-central-card:hover .central-cap-floating {
    transform: translateX(-50%) scale(1.1) rotate(-5deg);
}

.hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary);
    /* Club Red */
    margin: 40px 0 10px 0;
    /* Space for cap */
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
}

.hero-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
    font-weight: 600;
}

/* Group Photo Styling */
.hero-photo-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    transform: translateZ(0);
    /* Hardware accel */
    border: 4px solid white;
}

.hero-photo-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.hero-photo-wrapper:hover img {
    transform: scale(1.02);
}


/* 3. ORBITING BUBBLES (Satellites) */
.orbit-bubbles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Let clicks pass through to container */
    z-index: 15;
}

.bubble {
    position: absolute;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.1),
        inset 0 -5px 10px rgba(0, 0, 0, 0.05);
    border: 2px solid white;

    font-size: 0.85rem;
    font-weight: 700;
    color: #333 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
    /* Re-enable clicks */

    /* Initial centered position for explosion effect */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;

    will-change: transform, opacity, top, left;
}

.bubble span {
    position: relative;
    z-index: 2;
}

.bubble:hover {
    transform: translate(-50%, -50%) scale(1.15) !important;
    /* Override parallax for hover scale */
    box-shadow:
        0 15px 30px rgba(220, 20, 60, 0.2),
        /* Red glow */
        inset 0 0 20px rgba(255, 255, 255, 0.8);
    color: var(--primary) !important;
    border-color: var(--primary);
    z-index: 100;
}

/* Mobile Optimizations */
@media (max-width: 900px) {
    .bubble-container {
        flex-direction: column;
        height: auto;
        min-height: auto;
        padding: 100px 0 60px 0;
        /* Space for top bubbles */
    }

    .hero-stage-wrapper {
        width: 95%;
        padding: 0;
        margin-top: 40px;
        /* Push down */
    }

    .hero-central-card {
        padding: 30px 20px;
    }

    .hero-title {
        font-size: 2.2rem;
        margin-top: 30px;
    }

    .central-cap-floating {
        width: 140px;
        top: -50px;
    }

    /* Mobile Bubble Grid (No Orbit) */
    .orbit-bubbles {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 30px 10px;
        margin-bottom: 20px;
    }

    .bubble {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        /* Reset transforms */
        opacity: 1;
        /* Always visible */
        width: 80px;
        height: 80px;
        font-size: 0.7rem;
    }

    /* Disable Parallax on Mobile */
    .hero-central-card {
        transform: none !important;
    }
}