/* ============================================================
   src/styles/playful.css
   Playful Elements — Emojis, Micro-animations, Celebration Effects
   ============================================================ */

/* ─── Header Entry Animation ───────────────────────────────────────────── */
.header {
    animation: headerFadeDown 0.5s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes headerFadeDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Toast Notifications (Mejorado) ────────────────────────────────────── */
.toast {
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
    padding-left: 44px;
}

.toast::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast.toast--success::before {
    content: '✅';
    animation: toastBounce 0.5s ease-out;
}

.toast.toast--error::before {
    content: '❌';
    animation: toastShake 0.4s ease;
}

.toast.toast--warning::before {
    content: '⚠️';
    animation: toastJiggle 0.4s ease;
}

.toast.toast--info::before {
    content: 'ℹ️';
    animation: toastPulse 0.6s ease;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastBounce {
    0% { transform: translateY(-50%) scale(0.3); }
    70% { transform: translateY(-50%) scale(1.1); }
    100% { transform: translateY(-50%) scale(1); }
}

@keyframes toastShake {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    25% { transform: translateY(-50%) translateX(-4px); }
    75% { transform: translateY(-50%) translateX(4px); }
}

@keyframes toastJiggle {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    25% { transform: translateY(-50%) rotate(-5deg); }
    75% { transform: translateY(-50%) rotate(5deg); }
}

@keyframes toastPulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.15); }
}

/* ─── Emoji Badges (Drug Cards) ─────────────────────────────────────── */
.card-drug__emoji {
    font-size: 1.4rem;
    margin-right: 6px;
    display: inline-block;
    animation: emojiFloat 2s ease-in-out infinite;
}

@keyframes emojiFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(2deg); }
}

/* ─── Button Click Ripple (M3 style) ────────────────────────────────────── */
.btn,
.chip,
.dock-nav-item {
    position: relative;
    overflow: hidden;
}

.btn::after,
.chip::after,
.dock-nav-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn:active::after,
.chip:active::after,
.dock-nav-item:active::after {
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    to {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* ─── Card Hover Glow (Más Playful) ────────────────────────────────────── */
.card--hoverable::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        hsla(var(--color-secondary-h), 100%, 60%, 0.15),
        transparent 80%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--radius-lg);
}

.card--hoverable:hover::before {
    opacity: 1;
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1.2; }
}

/* ─── Badge Animations ──────────────────────────────────────────────────── */
.badge {
    animation: badgePopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePopIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ─── Chip Active State (Más Visible) ───────────────────────────────────── */
.chip--active {
    animation: chipActivate 0.3s ease-out;
}

@keyframes chipActivate {
    0% {
        transform: scale(0.95);
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ─── Risk Bar Fill Animation ──────────────────────────────────────────── */
.risk-bar-fill {
    animation: riskFillIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes riskFillIn {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: var(--risk-width, 100%);
        opacity: 1;
    }
}

/* ─── Skeleton Loader Enhancement ──────────────────────────────────────── */
.skeleton {
    position: relative;
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        var(--color-surface-container) 50%,
        var(--color-surface-raised) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer-enhanced 2s infinite ease-in-out;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer-enhanced {
    0% { background-position: -400px 0; }
    50% { opacity: 0.8; }
    100% { background-position: 400px 0; }
}

/* ─── Comparison Selection Celebration ──────────────────────────────────── */
.card-drug__compare-btn.active {
    animation: compareActivate 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes compareActivate {
    0% {
        transform: scale(0.8) rotate(-15deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ─── Floating Deck Enhancement ────────────────────────────────────────── */
.dock-nav-item:hover .dock-nav-item__icon {
    animation: iconBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes iconBounce {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.2) translateY(-4px); }
}

/* ─── Search Input Focus Celebration ────────────────────────────────────── */
.search-hero__input:focus {
    animation: searchFocusPulse 0.4s ease-out;
}

@keyframes searchFocusPulse {
    from {
        box-shadow: var(--shadow-sm), 0 0 0 0px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.4);
    }
    to {
        box-shadow: var(--shadow-md), 0 0 0 8px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0);
    }
}

/* ─── Modal Entry Animation (Improved) ──────────────────────────────────── */
.modal,
.bottom-sheet {
    animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─── Tab Switch Celebration ───────────────────────────────────────────── */
.tab-btn--active {
    animation: tabActivate 0.3s ease-out;
}

@keyframes tabActivate {
    0% { transform: translateY(-4px); opacity: 0.7; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ─── Field Box Interaction (Enhanced) ──────────────────────────────────── */
.field-box:hover {
    animation: fieldBoxGlow 0.3s ease-out forwards;
}

@keyframes fieldBoxGlow {
    from {
        box-shadow: none;
    }
    to {
        box-shadow: 0 0 12px hsla(var(--color-secondary-h), 100%, 60%, 0.2);
    }
}

/* ─── Clinical Chips Entrance ──────────────────────────────────────────── */
.clinical-chip {
    animation: chipFadeInScale 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.clinical-chip:nth-child(1) { animation-delay: 0ms; }
.clinical-chip:nth-child(2) { animation-delay: 50ms; }
.clinical-chip:nth-child(3) { animation-delay: 100ms; }
.clinical-chip:nth-child(4) { animation-delay: 150ms; }
.clinical-chip:nth-child(5) { animation-delay: 200ms; }

@keyframes chipFadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ─── Recent Items Scroll Hint ─────────────────────────────────────────── */
.recents-list {
    scroll-behavior: smooth;
}

.recent-item {
    animation: recentItemAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.recent-item:nth-child(1) { animation-delay: 0ms; }
.recent-item:nth-child(2) { animation-delay: 50ms; }
.recent-item:nth-child(3) { animation-delay: 100ms; }
.recent-item:nth-child(4) { animation-delay: 150ms; }

@keyframes recentItemAppear {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ─── Dark Mode Playful Adjustments ────────────────────────────────────── */
[data-theme="dark"] .card--hoverable::before {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        hsla(var(--color-secondary-h), 100%, 50%, 0.25),
        transparent 80%
    );
}

[data-theme="dark"] .search-hero__input:focus {
    animation: searchFocusPulseDark 0.4s ease-out;
}

@keyframes searchFocusPulseDark {
    from {
        box-shadow: var(--shadow-sm), 0 0 0 0px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5);
    }
    to {
        box-shadow: var(--shadow-md), 0 0 0 8px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0);
    }
}

/* ─── Accessibility: Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Mascot Animations ────────────────────────────────────────────────── */
.mascot-container {
    position: fixed;
    bottom: -100px;
    right: 20px;
    width: 120px;
    height: 120px;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.6s var(--transition-spring);
}

.mascot-container.visible {
    transform: translateY(-120px);
}

.mascot-img {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
    color: currentColor;
}

.mascot-wave {
    animation: mascotWave 2s infinite ease-in-out;
}

@keyframes mascotWave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* ─── Motivational Toast ───────────────────────────────────────────────── */
.toast--motivational {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent-pink));
    color: white;
    border: none;
    box-shadow: var(--shadow-premium), 0 0 20px rgba(124, 58, 237, 0.3);
    animation: toastMotivate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes toastMotivate {
    0% { transform: scale(0.8) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ─── Premium Gradient Utility ─────────────────────────────────────────── */
.gradient-premium {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
}