/* animations.css - Motion system */

/* Staggered entrance */
.view-enter {
    animation: slideUp 0.35s var(--ease-spring);
}

.view-exit {
    opacity: 0;
    transition: opacity 0.15s var(--ease-smooth);
}

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

/* Stagger children on page load */
.view-enter .card,
.view-enter .item,
.view-enter .briefing-section,
.view-enter .task-card,
.view-enter .todo-card,
.view-enter .brain-note-card,
.view-enter .stat-card,
.view-enter .quick-action-card,
.view-enter .settings-item,
.view-enter .help-item,
.view-enter .competitor-card {
    opacity: 0;
    animation: staggerIn 0.4s var(--ease-spring) forwards;
}

.view-enter > :nth-child(1) { animation-delay: 0ms; }
.view-enter > :nth-child(2) { animation-delay: 50ms; }
.view-enter > :nth-child(3) { animation-delay: 100ms; }
.view-enter > :nth-child(4) { animation-delay: 150ms; }
.view-enter > :nth-child(5) { animation-delay: 200ms; }
.view-enter > :nth-child(6) { animation-delay: 250ms; }
.view-enter > :nth-child(7) { animation-delay: 300ms; }
.view-enter > :nth-child(8) { animation-delay: 350ms; }

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

/* Spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pulse */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Sakura Fall */
@keyframes sakura-fall {
    0% {
        top: -20px;
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(var(--drift, 0px)) rotate(180deg);
    }
    100% {
        top: 420px;
        transform: translateX(0) rotate(360deg);
    }
}

/* Card hover bloom */
@media (hover: hover) {
    .card:hover,
    .item:hover,
    .briefing-section:hover,
    .task-card:hover,
    .todo-card:hover,
    .brain-note-card:hover,
    .settings-item:hover,
    .help-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-smooth);
    }
}

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

/* Content transition (Item 9) */
.content {
    transition: opacity 0.18s var(--ease-smooth);
}

.content.view-transitioning {
    opacity: 0;
}