/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-bg: #0a0a0a;
    --secondary-bg: #1a1a1a;
    --accent-color: #d4a574;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --overlay-bg: rgba(0, 0, 0, 0.95);
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Optimize video elements for mobile */
video {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Cinematic Intro Overlay */
.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cinematicExit 2s cubic-bezier(0.4, 0, 0.2, 1) 6s forwards;
    overflow: hidden;
}

.intro-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(212, 165, 116, 0.3) 0%, transparent 70%);
    opacity: 0;
    animation: lightFlash 2s cubic-bezier(0.4, 0, 0.2, 1) 6s forwards;
    pointer-events: none;
}

.transition-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(212, 165, 116, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(212, 165, 116, 0.1) 0%, transparent 50%);
    opacity: 0;
    animation: transitionLayer 2s cubic-bezier(0.4, 0, 0.2, 1) 6s forwards;
    pointer-events: none;
    z-index: 10002;
}

.intro-overlay.hidden {
    display: none;
}

.intro-content {
    text-align: center;
    position: relative;
    z-index: 10001;
    animation: contentExit 2s cubic-bezier(0.4, 0, 0.2, 1) 6s forwards;
}

.intro-title {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    color: var(--accent-color);
    text-shadow: 0 0 20px rgba(212, 165, 116, 0.5);
    animation: titleEntrance 2s ease-out, titlePulse 2s ease-in-out 2s infinite;
    opacity: 0;
    animation-fill-mode: forwards;
    line-height: 1.2;
    padding: 0 2rem;
}

.intro-enjoy {
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(212, 165, 116, 0.6);
    animation: enjoyEntrance 1.5s ease-out 1s;
    opacity: 0;
    animation-fill-mode: forwards;
    letter-spacing: 0.1em;
}

.intro-subtitle {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    animation: subtitleEntrance 1.5s ease-out 1.5s;
    opacity: 0;
    animation-fill-mode: forwards;
}


/* Main Content */
.main-content {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.95) translateY(30px);
    filter: blur(10px);
    animation: cinematicEnter 2s cubic-bezier(0.4, 0, 0.2, 1) 6.5s forwards;
}

.site-header {
    text-align: center;
    padding: 4rem 2rem 3rem;
    position: relative;
    z-index: 10;
}

.site-title {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-color);
    text-shadow: 0 0 30px rgba(212, 165, 116, 0.4);
    margin-bottom: 1rem;
}

.site-tagline {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}

/* Navigation Tabs */
.gallery-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem auto 0;
    max-width: 1400px;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
}

.nav-tab {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid transparent;
    color: var(--text-secondary);
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-tab:hover,
.nav-tab:active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-2px);
}

.nav-tab.active {
    background: rgba(212, 165, 116, 0.2);
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.3);
}

@media (hover: none) {
    .nav-tab:active {
        transform: translateY(0);
    }
}

/* Squirrel Animation Layer (Background) */
.squirrel-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bg-squirrel {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 0.5;
    filter: drop-shadow(0 0 10px rgba(212, 165, 116, 0.4));
}

.bg-squirrel::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15 Q45 10 40 15 Q35 20 40 25 Q45 30 50 35 Q55 30 60 25 Q65 20 60 15 Q55 10 50 15 Z' fill='%23d4a574'/%3E%3Cpath d='M35 30 Q30 35 35 40 Q40 45 45 50 Q50 55 50 60 Q50 65 50 70 Q50 75 50 80 Q50 85 45 85 Q40 85 35 85 Q30 85 30 80 Q30 75 30 70 Q30 65 30 60 Q30 55 30 50 Q30 45 30 40 Q30 35 35 30 Z' fill='%23d4a574'/%3E%3Cpath d='M65 30 Q70 35 65 40 Q60 45 55 50 Q50 55 50 60 Q50 65 50 70 Q50 75 50 80 Q50 85 55 85 Q60 85 65 85 Q70 85 70 80 Q70 75 70 70 Q70 65 70 60 Q70 55 70 50 Q70 45 70 40 Q70 35 65 30 Z' fill='%23d4a574'/%3E%3Cpath d='M50 35 Q45 40 50 50 Q50 60 50 70 Q50 80 50 90 Q50 95 55 95 Q60 95 60 90 Q60 85 60 80 Q60 75 60 70 Q60 65 60 60 Q60 55 60 50 Q60 45 55 40 Q55 35 50 35 Z' fill='%23b8935f'/%3E%3Cpath d='M45 25 Q40 30 45 35 Q50 40 50 45 Q50 50 50 55 Q50 60 45 55 Q40 50 35 45 Q30 40 30 35 Q30 30 35 25 Q40 25 45 25 Z' fill='%23b8935f'/%3E%3Cpath d='M55 25 Q60 30 55 35 Q50 40 50 45 Q50 50 50 55 Q50 60 55 55 Q60 50 65 45 Q70 40 70 35 Q70 30 65 25 Q60 25 55 25 Z' fill='%23b8935f'/%3E%3Cpath d='M50 15 Q48 12 50 10 Q52 12 50 15 Z' fill='%23808080'/%3E%3Cpath d='M45 15 Q43 12 45 10 Q47 12 45 15 Z' fill='%23808080'/%3E%3Cpath d='M55 15 Q53 12 55 10 Q57 12 55 15 Z' fill='%23808080'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.bg-squirrel-1 {
    animation: bgFly1 15s linear infinite;
    top: 10%;
    left: -5%;
}

.bg-squirrel-2 {
    animation: bgFly2 18s linear infinite;
    animation-delay: 2s;
    top: 30%;
    left: -5%;
}

.bg-squirrel-3 {
    animation: bgFly3 20s linear infinite;
    animation-delay: 4s;
    top: 50%;
    left: -5%;
}

.bg-squirrel-4 {
    animation: bgFly4 16s linear infinite;
    animation-delay: 1s;
    top: 70%;
    left: -5%;
}

.bg-squirrel-5 {
    animation: bgFly5 22s linear infinite;
    animation-delay: 3s;
    top: 20%;
    right: -5%;
}

.bg-squirrel-6 {
    animation: bgFly6 19s linear infinite;
    animation-delay: 5s;
    top: 60%;
    right: -5%;
}

/* Video Gallery */
.video-gallery,
.photo-gallery {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 0;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.gallery-credit {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0.5rem 2rem 0;
}

.gallery-credit a {
    color: var(--accent-color);
    text-decoration: none;
}

.gallery-credit a:hover,
.gallery-credit a:active {
    text-decoration: underline;
}

/* Photo Gallery Placeholder */
.photo-placeholder {
    background: rgba(26, 26, 26, 0.8);
    border-radius: 12px;
    padding: 4rem 2rem;
    text-align: center;
    border: 2px solid rgba(212, 165, 116, 0.3);
    backdrop-filter: blur(10px);
    margin: 2rem;
}

.placeholder-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    color: var(--accent-color);
    opacity: 0.6;
    animation: iconFloat 3s ease-in-out infinite;
}

.placeholder-icon svg {
    width: 100%;
    height: 100%;
}

.placeholder-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px rgba(212, 165, 116, 0.5);
}

.placeholder-message {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.8;
    font-style: italic;
    max-width: 600px;
    margin: 0 auto;
}

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

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    padding: 2rem;
    align-items: start;
}
 
.photo-card {
    background: rgba(26, 26, 26, 0.8);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
    align-self: start;
}

.photo-card:hover,
.photo-card:active {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(212, 165, 116, 0.3);
}

.photo-image {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.95;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.photo-card:hover .photo-image,
.photo-card:active .photo-image {
    opacity: 1;
    transform: scale(1.02);
}

.video-card {
    background: rgba(26, 26, 26, 0.8);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
    position: relative;
}

.video-card:hover,
.video-card:active {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent-color);
    box-shadow: 0 20px 40px rgba(212, 165, 116, 0.3);
}

@media (hover: none) {
    .video-card:active {
        transform: translateY(-5px) scale(1.01);
    }
}

.video-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    overflow: hidden;
}

.video-thumbnail video,
.youtube-thumbnail,
.drive-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.youtube-thumbnail,
.drive-thumbnail {
    display: block;
}

.video-card:hover .video-thumbnail video,
.video-card:active .video-thumbnail video,
.video-card:hover .youtube-thumbnail,
.video-card:active .youtube-thumbnail,
.video-card:hover .drive-thumbnail,
.video-card:active .drive-thumbnail {
    opacity: 1;
}

@media (hover: none) {
    .video-card:active .video-thumbnail video,
    .video-card:active .youtube-thumbnail,
    .video-card:active .drive-thumbnail {
        opacity: 0.9;
    }
}

.video-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-thumbnail::before,
.video-card:active .video-thumbnail::before {
    opacity: 1;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(212, 165, 116, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
}

.play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid var(--primary-bg);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 5px;
}

.video-card:hover .play-button,
.video-card:active .play-button {
    transform: translate(-50%, -50%) scale(1.2);
    background: var(--accent-color);
}

@media (hover: none) {
    .video-card:active .play-button {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.video-info {
    padding: 1.5rem;
}

.video-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.video-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
}

/* Video Modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.video-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    z-index: 1001;
    max-width: 90%;
    max-height: 90%;
    width: 1200px;
    background: var(--secondary-bg);
    border-radius: 12px;
    padding: 2rem;
    animation: modalEntrance 0.4s ease-out;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 2.5rem;
    cursor: pointer;
    width: 50px;
    height: 50px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.modal-close:hover,
.modal-close:active {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 8px;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}

/* Animations */
@keyframes cinematicExit {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
        filter: blur(15px);
        visibility: hidden;
    }
}

@keyframes contentExit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9) translateY(-20px);
        filter: blur(5px);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-40px);
        filter: blur(10px);
    }
}

@keyframes lightFlash {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    60% {
        opacity: 0.8;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes transitionLayer {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    40% {
        opacity: 0.6;
        transform: scale(1.1);
    }
    60% {
        opacity: 0.4;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes cinematicEnter {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(50px);
        filter: blur(15px) brightness(0.7);
    }
    30% {
        opacity: 0.3;
        transform: scale(0.95) translateY(30px);
        filter: blur(10px) brightness(0.8);
    }
    60% {
        opacity: 0.7;
        transform: scale(0.98) translateY(10px);
        filter: blur(3px) brightness(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px) brightness(1);
    }
}

@keyframes titleEntrance {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes titlePulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(212, 165, 116, 0.5);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 30px rgba(212, 165, 116, 0.8);
        transform: scale(1.02);
    }
}

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

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



@keyframes modalEntrance {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flying Squirrel Path Animations - Enhanced with rotation */
@keyframes flyPath1 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translate(150px, -100px) rotate(15deg) scale(1);
    }
    50% {
        transform: translate(300px, -200px) rotate(30deg) scale(1.1);
    }
    75% {
        transform: translate(450px, -250px) rotate(45deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(600px, -300px) rotate(60deg) scale(0.6);
        opacity: 0;
    }
}

@keyframes flyPath2 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translate(-120px, -150px) rotate(-20deg) scale(1);
    }
    50% {
        transform: translate(-250px, -280px) rotate(-40deg) scale(1.2);
    }
    75% {
        transform: translate(-380px, -350px) rotate(-60deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-500px, -400px) rotate(-80deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes flyPath3 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translate(100px, 80px) rotate(10deg) scale(1);
    }
    50% {
        transform: translate(200px, 150px) rotate(20deg) scale(1.1);
    }
    75% {
        transform: translate(300px, 200px) rotate(25deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(400px, 250px) rotate(30deg) scale(0.7);
        opacity: 0;
    }
}

@keyframes flyPath4 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translate(-150px, 120px) rotate(-15deg) scale(1);
    }
    50% {
        transform: translate(-300px, 220px) rotate(-30deg) scale(1.15);
    }
    75% {
        transform: translate(-450px, 300px) rotate(-45deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-600px, 380px) rotate(-60deg) scale(0.6);
        opacity: 0;
    }
}

@keyframes flyPath5 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translate(200px, -80px) rotate(25deg) scale(1);
    }
    50% {
        transform: translate(400px, -150px) rotate(50deg) scale(1.2);
    }
    75% {
        transform: translate(600px, -200px) rotate(70deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(800px, -250px) rotate(90deg) scale(0.5);
        opacity: 0;
    }
}

/* Background Squirrel Animations */
@keyframes bgFly1 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(25vw) translateY(-10vh) rotate(90deg);
    }
    50% {
        transform: translateX(50vw) translateY(5vh) rotate(180deg);
    }
    75% {
        transform: translateX(75vw) translateY(-5vh) rotate(270deg);
    }
    100% {
        transform: translateX(100vw) translateY(0) rotate(360deg);
    }
}

@keyframes bgFly2 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(20vw) translateY(15vh) rotate(-90deg);
    }
    50% {
        transform: translateX(40vw) translateY(-10vh) rotate(-180deg);
    }
    75% {
        transform: translateX(60vw) translateY(10vh) rotate(-270deg);
    }
    100% {
        transform: translateX(100vw) translateY(0) rotate(-360deg);
    }
}

@keyframes bgFly3 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(30vw) translateY(5vh) rotate(45deg);
    }
    50% {
        transform: translateX(60vw) translateY(-15vh) rotate(90deg);
    }
    75% {
        transform: translateX(80vw) translateY(10vh) rotate(135deg);
    }
    100% {
        transform: translateX(100vw) translateY(0) rotate(180deg);
    }
}

@keyframes bgFly4 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(15vw) translateY(-20vh) rotate(-45deg);
    }
    50% {
        transform: translateX(35vw) translateY(15vh) rotate(-90deg);
    }
    75% {
        transform: translateX(55vw) translateY(-10vh) rotate(-135deg);
    }
    100% {
        transform: translateX(100vw) translateY(0) rotate(-180deg);
    }
}

@keyframes bgFly5 {
    0% {
        transform: translateX(100vw) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(75vw) translateY(-15vh) rotate(-90deg);
    }
    50% {
        transform: translateX(50vw) translateY(10vh) rotate(-180deg);
    }
    75% {
        transform: translateX(25vw) translateY(-5vh) rotate(-270deg);
    }
    100% {
        transform: translateX(-5vw) translateY(0) rotate(-360deg);
    }
}

@keyframes bgFly6 {
    0% {
        transform: translateX(100vw) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(80vw) translateY(20vh) rotate(90deg);
    }
    50% {
        transform: translateX(60vw) translateY(-10vh) rotate(180deg);
    }
    75% {
        transform: translateX(40vw) translateY(15vh) rotate(270deg);
    }
    100% {
        transform: translateX(-5vw) translateY(0) rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .intro-title {
        font-size: 2.2rem;
        padding: 0 1rem;
        line-height: 1.3;
    }

    .intro-enjoy {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .intro-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    .site-title {
        font-size: 2.5rem;
        padding: 0 1rem;
    }

    .site-header {
        padding: 3rem 1rem 2rem;
    }

    .gallery-nav {
        padding: 0 1rem;
        gap: 0.5rem;
    }

    .nav-tab {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
    }

    .placeholder-title {
        font-size: 2rem;
    }

    .placeholder-message {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .photo-placeholder {
        padding: 3rem 1.5rem;
        margin: 1rem;
    }

    .placeholder-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
    }

    .gallery-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem 0.5rem;
        align-items: start;
    }

    .video-card {
        border-width: 1px;
    }

    .video-info {
        padding: 1rem;
    }

    .video-title {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .video-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .play-button {
        width: 60px;
        height: 60px;
        min-width: 44px;
        min-height: 44px;
    }

    .play-button::after {
        border-left-width: 16px;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        padding: 0.5rem;
        border-radius: 0;
    }

    .modal-close {
        top: 0.5rem;
        right: 0.5rem;
        width: 44px;
        height: 44px;
        font-size: 2rem;
        z-index: 1002;
    }

    .video-container {
        border-radius: 0;
    }

    .bg-squirrel {
        width: 25px;
        height: 25px;
        opacity: 0.3;
    }

    /* Reduce animation complexity on mobile */
    .intro-overlay {
        animation-duration: 1.5s;
    }

    .intro-content {
        animation-duration: 1.5s;
    }

    .main-content {
        animation-duration: 1.5s;
    }
}

@media (max-width: 480px) {
    .intro-title {
        font-size: 1.6rem;
        padding: 0 1rem;
        letter-spacing: 0.1em;
        line-height: 1.3;
    }

    .intro-enjoy {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .intro-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .site-title {
        font-size: 1.8rem;
        padding: 0 0.5rem;
    }

    .site-tagline {
        font-size: 1rem;
        padding: 0 0.5rem;
    }

    .site-header {
        padding: 2rem 0.5rem 1.5rem;
    }

    .gallery-nav {
        padding: 0 0.5rem;
        gap: 0.5rem;
    }

    .nav-tab {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .placeholder-title {
        font-size: 1.5rem;
    }

    .placeholder-message {
        font-size: 0.9rem;
    }

    .photo-placeholder {
        padding: 2rem 1rem;
        margin: 0.5rem;
    }

    .placeholder-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

    .main-content {
        padding: 0.5rem;
    }

    .gallery-container {
        gap: 1rem;
        padding: 0.5rem;
        align-items: start;
    }

    .video-info {
        padding: 0.75rem;
    }

    .video-title {
        font-size: 1.1rem;
    }

    .video-description {
        font-size: 0.85rem;
    }

    .play-button {
        width: 50px;
        height: 50px;
    }

    .play-button::after {
        border-left-width: 14px;
        border-top-width: 8px;
        border-bottom-width: 8px;
    }

    /* Hide background squirrels on very small screens for performance */
    .bg-squirrel {
        display: none;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce blur effects on mobile */
    .intro-overlay {
        filter: blur(0) !important;
    }

    .main-content {
        filter: blur(0) !important;
    }

    /* Simplify transitions */
    .video-card {
        transition: transform 0.2s ease, border-color 0.2s ease;
    }

    /* Override complex animations with simpler ones */
    .intro-overlay {
        animation-name: cinematicExitMobile;
    }

    .main-content {
        animation-name: cinematicEnterMobile;
    }
}

@keyframes cinematicExitMobile {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.1);
        visibility: hidden;
    }
}

@keyframes cinematicEnterMobile {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .intro-title {
        font-size: 1.8rem;
    }

    .intro-enjoy {
        font-size: 1.3rem;
    }

    .site-header {
        padding: 2rem 1rem 1.5rem;
    }

    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}