/* YhoMail — short, subtle motion. Respects reduced-motion preferences. */

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

@keyframes yho-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes yho-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes yho-soft-pop {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* —— Site —— */
.container {
    animation: yho-fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero h1 {
    animation: yho-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.hero .lead {
    animation: yho-fade-in 0.45s ease 0.12s both;
}

.hero .hero-actions {
    animation: yho-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.hero-card .stat {
    animation: yho-soft-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-card .stat:nth-child(1) { animation-delay: 0.1s; }
.hero-card .stat:nth-child(2) { animation-delay: 0.14s; }
.hero-card .stat:nth-child(3) { animation-delay: 0.18s; }
.hero-card .stat:nth-child(4) { animation-delay: 0.22s; }

.features .feature {
    animation: yho-fade-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.features .feature:nth-child(1) { animation-delay: 0.05s; }
.features .feature:nth-child(2) { animation-delay: 0.1s; }
.features .feature:nth-child(3) { animation-delay: 0.15s; }

.btn {
    transition:
        filter 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

.brand-mark {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.brand:hover .brand-mark {
    transform: scale(1.05) rotate(-2deg);
}

.alert {
    animation: yho-fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Lang menu — animated open/close */
.lang-switcher-menu {
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transition:
        opacity 0.2s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.2s ease;
    pointer-events: none;
}

.lang-switcher.is-open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wm-lang-switcher .lang-switcher-menu {
    transform-origin: top center;
}

.lang-switcher-option {
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.lang-switcher-option:active {
    transform: scale(0.98);
}

/* —— Webmail —— */
.wm-main {
    animation: yho-fade-in 0.35s ease both;
}

.wm-sidebar {
    animation: yho-fade-in 0.4s ease both;
}

.wm-compose-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(91, 140, 255, 0.28);
}

.wm-list .wm-item {
    animation: yho-fade-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s ease;
}

.wm-list .wm-item:nth-child(1) { animation-delay: 0.02s; }
.wm-list .wm-item:nth-child(2) { animation-delay: 0.04s; }
.wm-list .wm-item:nth-child(3) { animation-delay: 0.06s; }
.wm-list .wm-item:nth-child(4) { animation-delay: 0.08s; }
.wm-list .wm-item:nth-child(5) { animation-delay: 0.1s; }
.wm-list .wm-item:nth-child(6) { animation-delay: 0.12s; }
.wm-list .wm-item:nth-child(n + 7) { animation-delay: 0.14s; }

.wm-item:hover {
    transform: translateY(-1px);
}

.wm-item:active {
    transform: translateY(0);
}

.wm-read {
    animation: yho-fade-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-read-meta-card {
    animation: yho-soft-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.wm-body-content {
    animation: yho-fade-in 0.4s ease 0.1s both;
}

.wm-code-banner {
    animation: yho-fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-code-strip {
    animation: yho-fade-in 0.3s ease both;
}

.wm-toast {
    transition:
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.wm-compose-form {
    animation: yho-fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-compose-quote {
    animation: yho-fade-in 0.35s ease 0.08s both;
}

.wm-compose-quote-panel {
    transition:
        max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        margin 0.28s ease;
}

.wm-flash {
    animation: yho-fade-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-avatar,
.wm-read-avatar,
.wm-compose-quote-avatar {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.wm-item:hover .wm-avatar,
.wm-read-meta-card:hover .wm-read-avatar {
    transform: scale(1.04);
}

.wm-icon-btn {
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.wm-icon-btn:active {
    transform: scale(0.92);
}

.wm-nav-item {
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.wm-nav-item:hover {
    transform: translateX(2px);
}

.wm-search-row input {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wm-search-row input:focus {
    box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.12);
}