/* ==============================================================
   📸 FOTOS FLOTANTES EN EL HERO — Mystikos de la Noche
   ============================================================== */

/* Contenedor de las 2 fotos flotantes */
.hero-float-photos {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* Tarjeta flotante base */
.hero-float-card {
    position: absolute;
    width: clamp(180px, 22vw, 290px);
    border-radius: 16px;
    overflow: hidden;
    pointer-events: all;
    cursor: pointer;
    /* Borde dorado/verde estilo logo */
    border: 2px solid rgba(255, 215, 0, 0.5);
    /* Sombra profunda */
    box-shadow:
        0 8px 32px rgba(0,0,0,0.7),
        0 0 0 1px rgba(0,255,136,0.15),
        0 0 20px rgba(255,215,0,0.18);
    /* Fondo difuminado detrás de la foto */
    background: #0a0a1a;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.35s,
                border-color 0.35s;
}

/* Foto dentro de la tarjeta */
.hero-float-card img {
    width: 100%;
    height: clamp(130px, 16vw, 200px);
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s ease, filter 0.3s;
}

/* Hover: levanta la tarjeta */
.hero-float-card:hover {
    transform: translateY(-10px) scale(1.04) rotate(0deg) !important;
    border-color: #ffd700;
    box-shadow:
        0 18px 50px rgba(0,0,0,0.8),
        0 0 0 2px rgba(255,215,0,0.5),
        0 0 35px rgba(255,215,0,0.35),
        0 0 60px rgba(0,255,136,0.15);
}
.hero-float-card:hover img {
    transform: scale(1.06);
    filter: brightness(1.1) contrast(1.05);
}

/* Etiqueta inferior de la foto */
.hero-float-label {
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd700;
    background: linear-gradient(135deg, rgba(6,6,16,0.95), rgba(0,20,10,0.95));
    text-align: center;
    text-shadow: 0 0 8px rgba(255,215,0,0.5);
    border-top: 1px solid rgba(255,215,0,0.2);
}

/* ── Posición de la foto IZQUIERDA ── */
.hero-float-left {
    left: clamp(8px, 3vw, 40px);
    top: 50%;
    transform: translateY(-45%) rotate(-4deg);
    animation: floatLeft 6s ease-in-out infinite;
}

/* ── Posición de la foto DERECHA ── */
.hero-float-right {
    right: clamp(8px, 3vw, 40px);
    top: 50%;
    transform: translateY(-45%) rotate(4deg);
    animation: floatRight 7s ease-in-out infinite;
}

/* Animaciones de flotación independientes */
@keyframes floatLeft {
    0%   { transform: translateY(-45%) rotate(-4deg) translateX(0); }
    30%  { transform: translateY(-50%) rotate(-5.5deg) translateX(-6px); }
    60%  { transform: translateY(-40%) rotate(-2.5deg) translateX(4px); }
    100% { transform: translateY(-45%) rotate(-4deg) translateX(0); }
}

@keyframes floatRight {
    0%   { transform: translateY(-45%) rotate(4deg) translateX(0); }
    35%  { transform: translateY(-40%) rotate(5.5deg) translateX(6px); }
    65%  { transform: translateY(-52%) rotate(2.5deg) translateX(-4px); }
    100% { transform: translateY(-45%) rotate(4deg) translateX(0); }
}

/* Glassmorphism en el borde */
.hero-float-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.08) 0%,
        transparent 50%,
        rgba(255,215,0,0.04) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ── Galería: fotos destacadas (show1 y show2) ── */
.gallery-item-featured {
    grid-column: span 2;
    border: 2px solid rgba(255,215,0,0.35) !important;
    box-shadow: 0 6px 24px rgba(255,215,0,0.18) !important;
}
.gallery-item-featured img {
    height: 260px !important;
    object-fit: cover;
    object-position: center top;
}
.gallery-item-featured:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 10px 36px rgba(255,215,0,0.4) !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .hero-float-card {
        width: clamp(150px, 18vw, 220px);
    }
    .hero-float-card img {
        height: clamp(110px, 13vw, 160px);
    }
}

@media (max-width: 768px) {
    /* En móvil las tarjetas van abajo y son más pequeñas */
    .hero-float-photos {
        display: flex;
        justify-content: center;
        gap: 12px;
        align-items: flex-end;
        bottom: 8rem;
        top: auto;
        left: 0; right: 0;
    }
    .hero-float-card {
        position: relative;
        top: auto; left: auto; right: auto;
        transform: none !important;
        animation: none !important;
        width: 42vw;
    }
    .hero-float-left, .hero-float-right {
        transform: none !important;
    }
    .hero-float-card img {
        height: 110px;
    }
    .gallery-item-featured { grid-column: span 1; }
    .gallery-item-featured img { height: 200px !important; }
}

@media (max-width: 480px) {
    .hero-float-photos { display: none; }
}