:root {
    --ink: #050608;
    --surface: #0d0f13;
    --surface-raised: #12151b;
    --line: rgba(255, 255, 255, .14);
    --line-strong: rgba(255, 255, 255, .35);
    --text: #ffffff;
    --muted: #a2a8b8;
    --silver: #d7d9de;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    background: radial-gradient(circle at 50% -15%, #1c2029 0, var(--ink) 42rem) fixed;
    background-color: var(--ink);
    color: var(--text);
}

/* Textura de cuadrícula cibernética (Blanco Neón & Atmósfera Plateada) */
.bg-grid-cyber,
.pulse-grid {
    background-size: 32px 32px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                      linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 35%, transparent 100%);
}

/* ==========================================================================
   21st.dev Model 1: Cursor Spotlight Card + Liquid Glass Bevel (.cyber-card)
   ========================================================================== */
.cyber-card {
    background: linear-gradient(135deg, rgba(21, 24, 30, 0.85) 0%, rgba(10, 11, 14, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.22);
    position: relative;
    overflow: hidden;
    transition: transform 0.45s var(--ease-spring),
                border-color 0.4s var(--ease-out-expo),
                box-shadow 0.45s var(--ease-out-expo);
    will-change: transform;
}

/* Bisel luminoso reactivo al cursor */
.cyber-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        340px circle at var(--spot-x, 50%) var(--spot-y, 0%),
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.16) 38%,
        rgba(255, 255, 255, 0.04) 75%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.72;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: 2;
}

/* Halo Spotlight interno suave que sigue el puntero */
.cyber-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        440px circle at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255, 255, 255, 0.085),
        transparent 62%
    );
    opacity: 0;
    transition: opacity 0.45s var(--ease-out-expo);
    pointer-events: none;
    z-index: 1;
}

.cyber-card > * {
    position: relative;
    z-index: 3;
}

.cyber-card:hover {
    transform: translateY(-5px) scale(1.006);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.85),
                0 0 34px rgba(255, 255, 255, 0.085),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.48);
}

.cyber-card:hover::before {
    opacity: 1;
}

.cyber-card:hover::after {
    opacity: 1;
}

.cyber-card-static {
    background: linear-gradient(135deg, rgba(21, 24, 30, 0.88) 0%, rgba(10, 11, 14, 0.96) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    position: relative;
}

/* ==========================================================================
   21st.dev Model 2: Liquid Glass & Magnetic-Feel Buttons
   ========================================================================== */
.neon-white-btn {
    background: #ffffff;
    color: #050608 !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.38),
                0 0 42px rgba(255, 255, 255, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform 0.35s var(--ease-spring),
                box-shadow 0.35s var(--ease-out-expo),
                background-color 0.25s ease;
    will-change: transform, box-shadow;
}

.neon-white-btn:hover {
    background: #ffffff;
    color: #050608 !important;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.72),
                0 0 60px rgba(255, 255, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2.5px) scale(1.018);
}

.neon-white-btn:active {
    transform: translateY(0) scale(0.975);
    transition-duration: 0.1s;
}

.neon-ghost-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.35s var(--ease-spring),
                border-color 0.3s var(--ease-out-expo),
                background-color 0.3s var(--ease-out-expo),
                box-shadow 0.35s var(--ease-out-expo);
    will-change: transform;
}

.neon-ghost-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(255, 255, 255, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transform: translateY(-2.5px);
}

.neon-ghost-btn:active {
    transform: translateY(0) scale(0.975);
    transition-duration: 0.1s;
}

/* Efecto Shimmer diagonal líquido */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    transition: left 0.75s var(--ease-out-expo);
    pointer-events: none;
}

.shimmer-effect:hover::after {
    left: 135%;
}

.text-neon-glow {
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   21st.dev Model 3: Blur-Out-Up Staggered Entrance & Cascade
   ========================================================================== */
.motion-ready .pulse-reveal,
.motion-ready .reveal-init,
.reveal-init {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(22px) scale(0.985);
    transition: opacity 0.7s var(--ease-out-expo),
                transform 0.7s var(--ease-out-expo),
                filter 0.7s var(--ease-out-expo);
    transition-delay: var(--stagger-delay, 0ms);
    will-change: opacity, transform, filter;
}

.motion-ready .pulse-reveal.is-visible,
.reveal-init.reveal-visible,
.reveal-init.is-visible {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0) scale(1);
}

.motion-ready .pulse-reveal[data-delay="1"] { transition-delay: 90ms; }
.motion-ready .pulse-reveal[data-delay="2"] { transition-delay: 180ms; }
.motion-ready .pulse-reveal[data-delay="3"] { transition-delay: 270ms; }

/* Animación de entrada escalonada para tarjetas dinámicas (Dashboard / Reseñas) */
@keyframes blurFadeUpCard {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(18px) scale(0.98);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0) scale(1);
    }
}

.card-stagger-enter {
    animation: blurFadeUpCard 0.6s var(--ease-out-expo) both;
    animation-delay: var(--stagger-delay, 0ms);
}

/* Animaciones ambientales suaves */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes pulseNeonWhite {
    0%, 100% {
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.25), 0 0 60px rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.15);
    }
    50% {
        box-shadow: 0 0 42px rgba(255, 255, 255, 0.48), 0 0 95px rgba(255, 255, 255, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.28);
    }
}

@keyframes ambientDrift {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(25px, -20px) scale(1.06); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

.animate-float { animation: floatSlow 6s ease-in-out infinite; }
.avatar-pulse-glow { animation: pulseNeonWhite 4s ease-in-out infinite; }
.animate-orb-a { animation: ambientDrift 16s ease-in-out infinite; }
.animate-orb-b { animation: ambientDrift 22s ease-in-out infinite reverse; }

/* Clases heredadas compatibles con el resto de páginas */
.pulse-glass {
    background: linear-gradient(135deg, rgba(21, 24, 30, 0.85) 0%, rgba(10, 11, 14, 0.95) 100%);
    border: 1px solid var(--line);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .2);
    backdrop-filter: blur(20px);
}

.pulse-card {
    background: linear-gradient(135deg, rgba(21, 24, 30, 0.85) 0%, rgba(10, 11, 14, 0.95) 100%);
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--ease-spring), border-color .35s var(--ease-out-expo), box-shadow .4s var(--ease-out-expo);
}

.pulse-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-4px);
    box-shadow: 0 26px 58px rgba(0, 0, 0, .75), 0 0 28px rgba(255, 255, 255, .07);
}

.pulse-avatar {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 22px rgba(255, 255, 255, .2), 0 18px 50px rgba(0, 0, 0, .55);
}

.pulse-button {
    background: #ffffff;
    color: #050608;
    box-shadow: 0 0 20px rgba(255, 255, 255, .38), 0 0 40px rgba(255, 255, 255, .14);
    transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out-expo), background .2s ease;
}

.pulse-button:hover {
    background: #ffffff;
    transform: translateY(-2.5px) scale(1.015);
    box-shadow: 0 0 28px rgba(255, 255, 255, .65), 0 0 55px rgba(255, 255, 255, .28);
}

.pulse-button:active { transform: translateY(0) scale(.975); }

.pulse-button-secondary {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--text);
    transition: transform .35s var(--ease-spring), border-color .3s var(--ease-out-expo), background .3s ease, box-shadow .35s var(--ease-out-expo);
}

.pulse-button-secondary:hover {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 18px rgba(255, 255, 255, .14);
    transform: translateY(-2.5px);
}

/* Botón del servidor de soporte */
.pulse-discord {
    background: #5865F2;
    color: #fff;
    box-shadow: 0 10px 30px rgba(88, 101, 242, .28);
    transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out-expo), background .2s ease;
}

.pulse-discord:hover {
    background: #4752C4;
    transform: translateY(-2.5px);
    box-shadow: 0 16px 36px rgba(88, 101, 242, .36);
}

.pulse-discord:active { transform: translateY(0) scale(.975); }

/* Los enlaces de soporte se ocultan hasta saber que SUPPORT_SERVER_URL está configurado */
html:not(.support-on) [data-support-link] { display: none !important; }

@keyframes pulse-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes pulse-breathe {
    0%, 100% { opacity: .42; transform: scale(.96); }
    50% { opacity: .82; transform: scale(1.04); }
}

@keyframes pulse-shine {
    from { transform: translateX(-130%) skewX(-18deg); }
    to { transform: translateX(260%) skewX(-18deg); }
}

.pulse-float { animation: pulse-float 5s ease-in-out infinite; }
.pulse-breathe { animation: pulse-breathe 4s ease-in-out infinite; }
.pulse-shine { overflow: hidden; position: relative; }
.pulse-shine::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    content: '';
    height: 150%;
    left: 0;
    position: absolute;
    top: -25%;
    width: 28%;
    animation: pulse-shine 5.5s ease-in-out infinite 1.3s;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        filter: none !important;
    }
}

@media (max-width: 640px) {
    .pulse-touch { min-height: 44px; }
}