/* ==========================================================================
   ANIMATIONS — Scroll reveals, hero text, transitions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll Reveal — IntersectionObserver adds .is-visible
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 600ms ease,
        transform 600ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 500ms ease,
        transform 500ms ease;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

/* Fade from left */
.reveal--left {
    transform: translateX(-24px);
}
.reveal--left.is-visible {
    transform: translateX(0);
}

/* Fade scale */
.reveal--scale {
    transform: scale(0.96);
}
.reveal--scale.is-visible {
    transform: scale(1);
}

/* --------------------------------------------------------------------------
   Hero Text Reveal — clip-path slide in
   -------------------------------------------------------------------------- */
.hero-reveal {
    overflow: hidden;
    display: block;
}

.hero-reveal__inner {
    display: block;
    animation: heroTextIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-reveal__inner--delay-1 { animation-delay: 100ms; }
.hero-reveal__inner--delay-2 { animation-delay: 250ms; }
.hero-reveal__inner--delay-3 { animation-delay: 400ms; }
.hero-reveal__inner--delay-4 { animation-delay: 550ms; }
.hero-reveal__inner--delay-5 { animation-delay: 700ms; }

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

/* Line reveal variant (clips horizontally) */
.line-reveal {
    clip-path: inset(0 100% 0 0);
    animation: lineReveal 800ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes lineReveal {
    to { clip-path: inset(0 0% 0 0); }
}

/* --------------------------------------------------------------------------
   Reading Progress Bar
   -------------------------------------------------------------------------- */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-accent), rgba(var(--color-accent-rgb), 0.5));
    z-index: 9999;
    transition: width 100ms linear;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Fade In on Load
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Section Header Animated Underline
   -------------------------------------------------------------------------- */
.section-heading-animated {
    position: relative;
    display: inline-block;
}

.section-heading-animated::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section-heading-animated.is-visible::after {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Dark Mode Toggle Spin
   -------------------------------------------------------------------------- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.theme-toggle.is-transitioning .theme-toggle__icon {
    animation: spin 300ms ease;
}

/* --------------------------------------------------------------------------
   Dropdown Menu Slide — only animate when dropdown becomes visible
   -------------------------------------------------------------------------- */
.nav__item--has-children:hover > .nav__dropdown,
.nav__item--has-children:focus-within > .nav__dropdown {
    animation: dropdownIn 180ms ease both;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scaleY(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* --------------------------------------------------------------------------
   Search Overlay
   -------------------------------------------------------------------------- */
@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes overlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Skeleton Loading Pulse
   -------------------------------------------------------------------------- */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.skeleton {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Floating scroll indicator (hero)
   -------------------------------------------------------------------------- */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%       { transform: translateY(6px); opacity: 1; }
}

.scroll-indicator {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger > *,
    .hero-reveal__inner,
    .line-reveal,
    .section-heading-animated::after,
    .reading-progress { transition: none; animation: none; }

    .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
    .line-reveal { clip-path: none; }
    .section-heading-animated::after { width: 100%; }
}