/* ============================================
   TUSA ANIMATIONS
   Scroll-reveal, entrance, hover enhancements
   ============================================ */

/* Base state: hidden before reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Direction variants */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale reveal */
.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children (cards, grid items) — uses animation, not transition,
   to avoid specificity conflicts with element-level transitions */
.stagger > * {
    opacity: 0;
    transform: translateY(30px);
}

.stagger.visible > * {
    animation: staggerIn 0.4s ease forwards;
}

.stagger.visible > *:nth-child(1) { animation-delay: 0s; }
.stagger.visible > *:nth-child(2) { animation-delay: 0.08s; }
.stagger.visible > *:nth-child(3) { animation-delay: 0.16s; }
.stagger.visible > *:nth-child(4) { animation-delay: 0.24s; }
.stagger.visible > *:nth-child(5) { animation-delay: 0.32s; }
.stagger.visible > *:nth-child(6) { animation-delay: 0.40s; }
.stagger.visible > *:nth-child(7) { animation-delay: 0.48s; }
.stagger.visible > *:nth-child(8) { animation-delay: 0.56s; }
.stagger.visible > *:nth-child(9) { animation-delay: 0.64s; }
.stagger.visible > *:nth-child(10) { animation-delay: 0.72s; }

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

/* ============================================
   HEADER
   ============================================ */

header {
    animation: headerSlideDown 0.5s ease both;
}

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

/* Nav buttons stagger — target wrapper divs, not .poga itself */
.rightside > div {
    animation: navFadeIn 0.4s ease both;
}

.rightside > div:nth-child(1) { animation-delay: 0.15s; }
.rightside > div:nth-child(2) { animation-delay: 0.25s; }
.rightside > div:nth-child(3) { animation-delay: 0.35s; }
.rightside > div:nth-child(4) { animation-delay: 0.45s; }
.rightside > div:nth-child(5) { animation-delay: 0.55s; }

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

/* ============================================
   FOOTER
   ============================================ */

footer .footer-top,
footer .footer-middle,
footer .footer-bottom {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

footer.visible .footer-top {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

footer.visible .footer-middle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

footer.visible .footer-bottom {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

/* ============================================
   SECTION TITLES
   ============================================ */

.h1, .f_T {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.visible .h1,
.visible .f_T,
.h1.visible,
.f_T.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   BUTTONS
   ============================================ */

.poga {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.poga.poga-pressed {
    background-color: var(--b);
    color: var(--w);
}

.b_w {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.b_w:active {
    transform: scale(0.95);
}

.b {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   GAME CARDS (animated by stagger parent, not individually)
   ============================================ */

#game_box {
    transition: outline 0.3s ease, transform 0.2s ease;
}

#game_box:active {
    transform: scale(0.97);
}

/* Status badge pulse on hover */
#game_box:hover #frame67 {
    animation: badgePulse 0.4s ease;
}

@keyframes badgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ============================================
   NEWS CARDS (animated by stagger parent, not individually)
   ============================================ */

#main_game_box,
#main_new_box {
    transition: transform 0.3s ease;
}

#main_game_box:active,
#main_new_box:active {
    transform: scale(0.97);
}

/* ============================================
   SLIDER
   ============================================ */

#slider {
    animation: sliderFadeIn 0.8s ease 0.3s both;
}

@keyframes sliderFadeIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   INFO BLOCKS (#frame93)
   ============================================ */

#frame93 .title {
    transition: background-color 0.2s ease;
}

#frame93 .desc {
    transition: background-color 0.2s ease;
}

/* ============================================
   SOCIAL ICONS
   ============================================ */

.social-icon {
    transition: color 0.2s ease, transform 0.2s ease;
}

.social-icon:active {
    transform: scale(0.9);
}

/* ============================================
   FAQ / ABOUT ITEMS
   ============================================ */

.boxn,
#faq_box,
#family_box {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.boxn.visible,
#faq_box.visible,
#family_box.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   GAME PAGE
   ============================================ */

#hat {
    animation: hatZoomIn 0.7s ease both;
}

@keyframes hatZoomIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#hat .logo {
    animation: logoFloat 3s ease-in-out infinite 1s;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Sub-game boxes */
#game_game_box {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#game_game_box.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   CONTRIBUTORS ACCORDION
   ============================================ */

.contributors .accordion .header .icon {
    transition: background-color 0.2s ease;
}

.contributors .accordion .header .icon .x {
    transition: transform 0.3s ease, color 0.2s ease;
}

.contributors .accordion .header:hover {
    opacity: 0.8;
}

/* ============================================
   SLIDER ARROWS
   ============================================ */

.slider-arrow {
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.slider-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

/* ============================================
   GLOBAL LINK HOVER
   ============================================ */

.footer-credit-link {
    transition: opacity 0.2s ease;
}

/* ============================================
   NUMBERS (FAQ)
   ============================================ */

.number {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.visible .number,
.number.visible {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

/* ============================================
   SPA PAGE TRANSITIONS
   ============================================ */

#spa-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#spa-content.spa-leaving {
    opacity: 0;
    transform: translateY(-15px);
    pointer-events: none;
}

#spa-content.spa-entering {
    opacity: 0;
    transform: translateY(15px);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

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

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .stagger > *,
    .stagger.visible > *,
    .h1, .f_T,
    .boxn, #faq_box, #family_box,
    #game_game_box,
    .number,
    footer .footer-top,
    footer .footer-middle,
    footer .footer-bottom {
        opacity: 1;
        transform: none;
    }

    #spa-content.spa-leaving,
    #spa-content.spa-entering {
        opacity: 1;
        transform: none;
    }
}