/* ══════════════════════════════════════════════════════════════════════
   /willy — polish cinemático sobre Sofi.razor.css.
   Aurora, tilt 3D, gradient text, text-reveal, halo pulsante.
   No rompe el layout (aside + chat area + altura fija).
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --wm-brand: #5eead4;
    --wm-brand-strong: #14b8a6;
    --wm-brand-deep: #0d9488;
    /* Antes era #a78bfa (violet) — rompía la coherencia con el brand
       teal del resto de la app. Ahora es un teal pale para mantener el
       efecto multicolor del avatar/divider sin salirse del brand. */
    --wm-violet: #2dd4bf;
    --wm-ink-900: #0b1120;
}

/* ── Shell: fondo con aurora sutil (mantiene light mode) ─────────── */
.sofi-page {
    background:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(94, 234, 212, 0.12), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(45, 212, 191, 0.08), transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #eef5f4 100%) !important;
    isolation: isolate;
    position: relative;
}

/* Aurora blureada viviendo detrás del aside */
.sofi-page::before {
    content: "";
    position: absolute;
    top: -200px;
    left: -100px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.18), transparent 60%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    animation: wmAurora1 28s ease-in-out infinite;
}

.sofi-page::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: 20%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.14), transparent 60%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    animation: wmAurora2 34s ease-in-out infinite;
}

@keyframes wmAurora1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.1); }
}
@keyframes wmAurora2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, -30px) scale(1.15); }
}

/* ── Aside hero: glassmorphism sobre la aurora ───────────────────── */
.sofi-hero {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-right: 1px solid rgba(20, 184, 166, 0.15) !important;
    position: relative;
    z-index: 1;
}

/* Un halo extra gigante detrás del avatar */
.sofi-hero::before {
    content: "";
    position: absolute !important;
    top: -60px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 520px !important;
    height: 520px !important;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.14) 0%, transparent 55%) !important;
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
    animation: wmHaloPulse 4s ease-in-out infinite;
}

@keyframes wmHaloPulse {
    0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* ── Avatar con glow adicional + rotación más lenta ──────────────── */
.sofi-avatar-ring {
    position: relative;
    animation: ringRotate 12s linear infinite !important;
    background: conic-gradient(
        from 0deg,
        var(--wm-brand) 0%,
        var(--wm-violet) 33%,
        var(--wm-brand-strong) 66%,
        var(--wm-brand) 100%
    ) !important;
    box-shadow: 0 0 40px rgba(94, 234, 212, 0.4);
}

.sofi-avatar-ring::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.3) 0%, transparent 60%);
    filter: blur(16px);
    z-index: -1;
    animation: wmAvatarPulse 3s ease-in-out infinite;
}

@keyframes wmAvatarPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

.sofi-avatar-large {
    background: linear-gradient(135deg, var(--wm-brand-strong), var(--wm-brand-deep)) !important;
    box-shadow:
        0 12px 36px rgba(13, 148, 136, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
    font-family: 'Sora', 'Inter', sans-serif !important;
    letter-spacing: -0.02em;
}

/* ── Eyebrow como pill moderna ───────────────────────────────────── */
.sofi-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 10px;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.25);
    color: var(--wm-brand-deep) !important;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
}

.sofi-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--wm-brand-deep);
    box-shadow: 0 0 8px var(--wm-brand-deep);
    animation: wmDotPulse 2s ease-in-out infinite;
}

@keyframes wmDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* ── Título — versión simple y legible ─────────────────────────────
   Probé con background-clip:text + transparent para gradient en
   "WillyAI", pero el render variaba entre browsers y dejaba el texto
   invisible. Vuelvo a color teal sólido: se lee 100% y sigue viéndose
   vibrante contra el título en ink-900. *********************** */
.sofi-title {
    font-family: 'Sora', 'Inter', sans-serif !important;
    font-size: 2.4rem !important;
    letter-spacing: -0.03em !important;
    opacity: 0;
    animation: wmFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}

.sofi-title span {
    color: var(--wm-brand-deep) !important;
    display: inline-block;
    /* No uso background-clip/transparent para evitar el bug del rectángulo
       vacío. El color deep es suficiente para el contraste. */
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ── Subtítulo con fade escalonado ───────────────────────────────── */
.sofi-subtitle {
    color: #475569 !important;
    font-size: 0.92rem !important;
    line-height: 1.6;
    opacity: 0;
    animation: wmFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards;
}

@keyframes wmFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Divider con gradient animado ─────────────────────────────────── */
.sofi-divider {
    width: 80px !important;
    height: 2px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wm-brand-strong) 50%,
        var(--wm-violet) 100%
    ) !important;
    border-radius: 1px !important;
    opacity: 0;
    animation: wmFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards;
    position: relative;
    overflow: hidden;
}

.sofi-divider::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    animation: wmDividerShine 4s ease-in-out infinite;
}

@keyframes wmDividerShine {
    0%, 70%, 100% { left: -100%; }
    85% { left: 100%; }
}

/* ── Features con stagger + tilt 3D + halo siguiendo el mouse ────── */
.sofi-feature {
    position: relative !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(20, 184, 166, 0.12) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform-style: preserve-3d;
    overflow: hidden;
    opacity: 0;
    animation: wmFeatureIn 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition:
        border-color 300ms ease,
        box-shadow 400ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.sofi-feature:nth-child(1) { animation-delay: 1100ms; }
.sofi-feature:nth-child(2) { animation-delay: 1200ms; }
.sofi-feature:nth-child(3) { animation-delay: 1300ms; }
.sofi-feature:nth-child(4) { animation-delay: 1400ms; }

@keyframes wmFeatureIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Halo radial que sigue el mouse dentro de la card (--mx/--my vía JS) */
.sofi-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(94, 234, 212, 0.25) 0%,
        transparent 45%
    );
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: 1;
}

.sofi-feature:hover {
    border-color: rgba(20, 184, 166, 0.4) !important;
    box-shadow:
        0 12px 28px -12px rgba(13, 148, 136, 0.25),
        0 4px 8px -4px rgba(13, 148, 136, 0.1) !important;
}

.sofi-feature:hover::before { opacity: 1; }

/* El contenido de la feature encima del halo */
.sofi-feature > * { position: relative; z-index: 2; }

/* ── Ícono de la feature con gradient brillante ──────────────────── */
.sofi-feature-icon {
    background: linear-gradient(135deg, var(--wm-brand), var(--wm-brand-strong)) !important;
    color: white !important;
    box-shadow:
        0 4px 12px -4px rgba(13, 148, 136, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sofi-feature:hover .sofi-feature-icon {
    transform: translateY(-2px) rotate(-6deg) scale(1.05);
}

.feature-label {
    font-family: 'Sora', 'Inter', sans-serif !important;
    letter-spacing: -0.01em !important;
    font-size: 0.85rem !important;
}

/* ── Respeto motion-reducido ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sofi-page::before, .sofi-page::after,
    .sofi-hero::before,
    .sofi-avatar-ring, .sofi-avatar-ring::before,
    .sofi-avatar-large,
    .sofi-eyebrow::before,
    .sofi-divider::after,
    .sofi-title .wm-word,
    .sofi-title span,
    .sofi-title span::after,
    .sofi-subtitle, .sofi-divider,
    .sofi-feature { animation: none !important; }

    .sofi-title .wm-word,
    .sofi-title span,
    .sofi-subtitle, .sofi-divider,
    .sofi-feature { opacity: 1 !important; transform: none !important; }

    .sofi-feature-icon, .sofi-feature:hover { transform: none !important; }
}