/* FluentPod – custom styles & animations */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Animations (Skill Hub style) ---- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-float {
    animation: float 5s ease-in-out infinite;
}
.animate-float-delay-1 { animation-delay: 0.5s; }
.animate-float-delay-2 { animation-delay: 1s; }
.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    max-width: 100%;
}

/* Hero entrance: content từ trái sang, ảnh từ phải sang */
.hero-section .hero-reveal {
    opacity: 0;
    transform: translateX(-64px);
    transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-section.hero-visible .hero-reveal {
    opacity: 1;
    transform: translateX(0);
}
.hero-section .hero-reveal.delay-1 { transition-delay: 120ms; }
.hero-section .hero-reveal.delay-2 { transition-delay: 240ms; }
.hero-section .hero-reveal.delay-3 { transition-delay: 360ms; }
.hero-section .hero-reveal.delay-4 { transition-delay: 480ms; }
.hero-section .hero-reveal.delay-5 { transition-delay: 600ms; }
.hero-section .hero-reveal.delay-6 { transition-delay: 720ms; }
.hero-section .hero-reveal.delay-7 { transition-delay: 840ms; }
.hero-section .hero-reveal.delay-8 { transition-delay: 960ms; }
.hero-section .hero-visual {
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 400ms, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}
.hero-section:not(.hero-visible) .hero-visual {
    opacity: 0;
    transform: translateX(64px);
}
.hero-section.hero-visible .hero-visual {
    opacity: 1;
    transform: translateX(0);
}

/* Scroll reveal for sections */
.reveal-section {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-section .reveal-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-section.is-visible .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

/* CEFR Roadmap: từng mục chạy lần lượt (stagger dài hơn) */
.reveal-section.reveal-one-by-one .reveal-item {
    transition-delay: calc(var(--i, 0) * 220ms);
    transition-duration: 0.65s;
}

/* How it works: cột trái từ trái sang, cột phải từ phải sang */
.reveal-section.reveal-from-sides .reveal-from-left {
    opacity: 0;
    transform: translateX(-56px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-section.reveal-from-sides .reveal-from-right {
    opacity: 0;
    transform: translateX(56px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 150ms, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}
.reveal-section.reveal-from-sides.is-visible .reveal-from-left,
.reveal-section.reveal-from-sides.is-visible .reveal-from-right {
    opacity: 1;
    transform: translateX(0);
}
.reveal-section.reveal-from-sides .reveal-item {
    transition-delay: calc(var(--i, 0) * 120ms);
}

/* ---- Mobile nav (header) ---- */
.nav-mobile.nav-mobile-open {
    max-height: 320px;
}
#nav-toggle[aria-expanded="true"] .nav-icon-open {
    display: none;
}
#nav-toggle[aria-expanded="true"] .nav-icon-close {
    display: inline-flex;
}
#nav-toggle[aria-expanded="false"] .nav-icon-close {
    display: none;
}
#nav-toggle .nav-icon-open {
    display: inline-flex;
}
@media (min-width: 768px) {
    .nav-mobile.nav-mobile-open {
        max-height: 0;
    }
}