/* Page transitions */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--retro-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease;
    z-index: 9999;
}

.page-transition.active {
    opacity: 1;
    visibility: visible;
}

/* Main page fade transitions */
@keyframes fadeInPage {
    from { 
        opacity: 0;
        background-color: var(--retro-dark);
    }
    to { 
        opacity: 1;
    }
}

/* Content fade in */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) rotate(2deg);
    }
    50% {
        opacity: 0.5;
        transform: translateY(10px) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

/* Subtle wiggle animation */
@keyframes subtleWiggle {
    0% { transform: rotate(-1deg); }
    50% { transform: rotate(0.5deg); }
    100% { transform: rotate(-1deg); }
}

/* Even more subtle wiggle for content */
@keyframes gentleWiggle {
    0% { transform: rotate(-0.5deg); }
    50% { transform: rotate(0.25deg); }
    100% { transform: rotate(-0.5deg); }
}

/* Mobile navigation animations */
.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* Navigation links stagger animation */
.nav-links a {
    transition: all 0.3s ease;
}

.nav-links.active a {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger animation delays */
.nav-links a:nth-child(1) { transition-delay: 0.1s; }
.nav-links a:nth-child(2) { transition-delay: 0.2s; }
.nav-links a:nth-child(3) { transition-delay: 0.3s; }
.nav-links a:nth-child(4) { transition-delay: 0.4s; }
.nav-links a:nth-child(5) { transition-delay: 0.5s; }

/* Hover animations */
.content-box:hover, 
.about-text:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

.about-text {
    animation: subtleWiggle 6s ease-in-out infinite;
    transform-origin: center center;
}

.content-box {
    animation: gentleWiggle 6s ease-in-out infinite;
    transform-origin: center center;
}

.about-text:hover {
    animation-play-state: paused;
}


.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-overlay.active {
    display: block;
    opacity: 1;
}

/* DVD bounce animation */
@keyframes dvdBounce {
    0% {
        top: calc(var(--v-boundary) * 0.4);
        left: calc(var(--h-boundary) * 0.3);
        transform: rotate(-1deg);
    }
    20% {
        top: calc(var(--v-boundary) * 0.8);
        left: calc(var(--h-boundary) * 0.9);
        transform: rotate(1deg);
    }
    40% {
        top: calc(var(--v-boundary) * 0.2);
        left: var(--h-boundary);
        transform: rotate(-1deg);
    }
    60% {
        top: var(--v-boundary);
        left: calc(var(--h-boundary) * 0.15);
        transform: rotate(1deg);
    }
    80% {
        top: calc(var(--v-boundary) * 0.3);
        left: calc(var(--h-boundary) * 0.7);
        transform: rotate(-1deg);
    }
    100% {
        top: calc(var(--v-boundary) * 0.4);
        left: calc(var(--h-boundary) * 0.3);
        transform: rotate(1deg);
    }
}

.splash-content {
    animation: dvdBounce 30s linear infinite;
    position: absolute;
    will-change: transform;
    transition: transform 0.3s ease;
    /* Ensure content stays within viewport */
    max-width: 90vw;
    max-height: 90vh;
}

.splash-content:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .about-text, .content-box, .title-box {
        animation: none;
    }
    
    .content-box:hover, 
    .about-text:hover {
        transform: none;
    }

    .splash-content {
        animation: none;
        /* Center the splash content when not bouncing */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Keep essential transitions but make them shorter */
    .page-transition {
        transition: opacity 0.5s ease;
    }

    .nav-links a {
        transition: opacity 0.2s ease;
    }
}