/* ==========================================================================
   Nox Naier - Animations
   Hero text cycling and page transition animations
   ========================================================================== */

/* ==========================================================================
   Hero Section Animations
   ========================================================================== */

/* Logo frame entrance */
.hero-logo-frame {
    animation: logoFadeIn 1.5s ease forwards;
}

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

/* Hero subtitle fade */
.hero-subtitle {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-subtitle.visible {
    opacity: 1;
}

.hero-subtitle.hidden {
    opacity: 0;
}

/* Hero keywords container */
.hero-keywords {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-keywords.visible {
    opacity: 1;
}

.hero-keywords.hidden {
    opacity: 0;
}

/* Individual keyword animation */
.hero-keyword {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero-keyword.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Navigation Animations
   ========================================================================== */

.sidebar-nav-menu a {
    transition: background-color 0.35s ease, color 0.35s ease, padding-left 0.35s ease;
}

.sidebar-nav-menu a:hover {
    padding-left: 40px;
}

.sidebar-nav-menu li.current-menu-item > a,
.sidebar-nav-menu li.current_page_item > a {
    padding-left: 40px;
}

/* ==========================================================================
   Page Element Animations
   ========================================================================== */

/* Social icons entrance */
.social-icon-link {
    animation: iconFadeUp 0.6s ease forwards;
    opacity: 0;
}

.social-icon-link:nth-child(1) { animation-delay: 0.1s; }
.social-icon-link:nth-child(2) { animation-delay: 0.2s; }
.social-icon-link:nth-child(3) { animation-delay: 0.3s; }
.social-icon-link:nth-child(4) { animation-delay: 0.4s; }
.social-icon-link:nth-child(5) { animation-delay: 0.5s; }

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

/* Purchase links entrance */
.purchase-link {
    animation: linkFadeIn 0.8s ease forwards;
    opacity: 0;
}

.purchase-link:nth-child(1) { animation-delay: 0.2s; }
.purchase-link:nth-child(2) { animation-delay: 0.4s; }
.purchase-link:nth-child(3) { animation-delay: 0.6s; }

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

/* Character names entrance */
.character-name {
    animation: charFadeIn 0.7s ease forwards;
    opacity: 0;
}

.characters-row:nth-child(1) .character-name:nth-child(1) { animation-delay: 0.1s; }
.characters-row:nth-child(1) .character-name:nth-child(2) { animation-delay: 0.2s; }
.characters-row:nth-child(2) .character-name { animation-delay: 0.35s; }
.characters-row:nth-child(3) .character-name:nth-child(1) { animation-delay: 0.5s; }
.characters-row:nth-child(3) .character-name:nth-child(2) { animation-delay: 0.6s; }

@keyframes charFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Location names entrance */
.location-name {
    animation: locFadeIn 0.7s ease forwards;
    opacity: 0;
}

.location-name:nth-child(1) { animation-delay: 0.15s; }
.location-name:nth-child(2) { animation-delay: 0.3s; }
.location-name:nth-child(3) { animation-delay: 0.45s; }
.location-name:nth-child(4) { animation-delay: 0.6s; }

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

/* Under construction pulse */
.under-construction-text {
    animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Author name entrance */
.author-name {
    animation: authorFadeIn 1.2s ease forwards;
}

@keyframes authorFadeIn {
    from {
        opacity: 0;
        letter-spacing: 0.4em;
    }
    to {
        opacity: 1;
        letter-spacing: 0.2em;
    }
}

/* ==========================================================================
   Mobile menu animation
   ========================================================================== */

.site-sidebar-nav {
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media screen and (max-width: 1024px) {
    .sidebar-nav-menu li {
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .site-sidebar-nav.active .sidebar-nav-menu li {
        opacity: 1;
        transform: translateX(0);
    }

    .site-sidebar-nav.active .sidebar-nav-menu li:nth-child(1) { transition-delay: 0.1s; }
    .site-sidebar-nav.active .sidebar-nav-menu li:nth-child(2) { transition-delay: 0.15s; }
    .site-sidebar-nav.active .sidebar-nav-menu li:nth-child(3) { transition-delay: 0.2s; }
    .site-sidebar-nav.active .sidebar-nav-menu li:nth-child(4) { transition-delay: 0.25s; }
    .site-sidebar-nav.active .sidebar-nav-menu li:nth-child(5) { transition-delay: 0.3s; }
    .site-sidebar-nav.active .sidebar-nav-menu li:nth-child(6) { transition-delay: 0.35s; }
}