/* =====================================================================
 * link-futuristic.css — capa de estilo moderno para biolinks weblink.lat
 * Se carga DESPUÉS de bootstrap/custom/link-custom, así que sobreescribe.
 * No toca el HTML: aplica sobre las clases Bootstrap existentes (.card, .btn).
 * Estética: glassmorphism, gradientes animados, micro-interacciones.
 * ===================================================================== */

:root {
    --fx-radius: 18px;
    --fx-blur: 14px;
    --fx-border: 1px solid rgba(255, 255, 255, 0.18);
    --fx-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --fx-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.20);
    --fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --fx-speed: 0.45s;
}

/* ---- Fondo: gradiente animado sutil bajo el fondo existente ---- */
.link-html body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg,
        rgba(255, 153, 0, 0.06),
        rgba(20, 110, 180, 0.06),
        rgba(168, 85, 247, 0.06));
    background-size: 400% 400%;
    animation: fx-gradient 18s ease infinite;
    pointer-events: none;
}
@keyframes fx-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- Tarjetas (todos los bloques usan .card) → glassmorphism ---- */
.link-html .card {
    border-radius: var(--fx-radius) !important;
    border: var(--fx-border) !important;
    box-shadow: var(--fx-shadow) !important;
    backdrop-filter: blur(var(--fx-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--fx-blur)) saturate(140%);
    transition: transform var(--fx-speed) var(--fx-ease),
                box-shadow var(--fx-speed) var(--fx-ease);
    overflow: hidden;
    position: relative;
}
.link-html .card:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: var(--fx-shadow-hover) !important;
}
/* brillo que recorre la tarjeta al pasar el mouse */
.link-html .card::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg,
        transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s var(--fx-ease);
    pointer-events: none;
}
.link-html .card:hover::after { left: 130%; }

/* ---- Botones (.btn) → pill, gradiente, micro-interacción ---- */
.link-html .btn {
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: none;
    transition: transform 0.25s var(--fx-ease),
                box-shadow 0.25s var(--fx-ease),
                filter 0.25s var(--fx-ease);
    will-change: transform;
}
.link-html .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.link-html .btn:active { transform: translateY(0) scale(0.98); }

/* botón Amazon: gradiente naranja→azul Amazon en vez de plano */
.link-html .btn-warning,
.link-html .btn[style*="FF9900"] {
    background: linear-gradient(135deg, #FF9900, #FF7700) !important;
    color: #fff !important;
}

/* ---- Avatar: anillo con gradiente animado ---- */
.link-html .biolink-avatar,
.link-html img[class*="avatar"],
.link-html .rounded-circle {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6),
                0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform var(--fx-speed) var(--fx-ease);
}
.link-html .biolink-avatar:hover { transform: scale(1.05) rotate(1deg); }

/* ---- Estrellas de rating: glow sutil ---- */
.link-html .fa-star,
.link-html .fa-star-half-alt {
    filter: drop-shadow(0 0 4px rgba(255, 164, 28, 0.4));
}

/* ---- Animación de entrada escalonada de los bloques ---- */
.link-html [id^="biolink_block_id_"] {
    animation: fx-rise 0.6s var(--fx-ease) both;
}
@keyframes fx-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* escalonado: cada bloque entra un poco después (hasta 8) */
.link-html [id^="biolink_block_id_"]:nth-child(1) { animation-delay: 0.05s; }
.link-html [id^="biolink_block_id_"]:nth-child(2) { animation-delay: 0.10s; }
.link-html [id^="biolink_block_id_"]:nth-child(3) { animation-delay: 0.15s; }
.link-html [id^="biolink_block_id_"]:nth-child(4) { animation-delay: 0.20s; }
.link-html [id^="biolink_block_id_"]:nth-child(5) { animation-delay: 0.25s; }
.link-html [id^="biolink_block_id_"]:nth-child(6) { animation-delay: 0.30s; }
.link-html [id^="biolink_block_id_"]:nth-child(7) { animation-delay: 0.35s; }
.link-html [id^="biolink_block_id_"]:nth-child(n+8) { animation-delay: 0.40s; }

/* ---- Iconos sociales: hover con lift y color ---- */
.link-html .biolink-socials a,
.link-html [class*="social"] a {
    transition: transform 0.3s var(--fx-ease), opacity 0.3s ease;
}
.link-html .biolink-socials a:hover { transform: translateY(-3px) scale(1.15); }

/* ---- Respeta usuarios que prefieren menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
    .link-html *,
    .link-html *::before,
    .link-html *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
}