/* Custom animations and styling for Ten Point Hare */

* {
    box-sizing: border-box;
}


/* Enhanced snow falling animation with doubled particles */
/*.dot-background {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-image: */
/*        !* Original 12 particles *!*/
/*        radial-gradient(circle at 10% 0%, #e5e5e5 2px, transparent 2px),*/
/*        radial-gradient(circle at 20% -20%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 30% -40%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 40% -60%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 50% -80%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 60% -100%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 70% -120%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 80% -140%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 90% -160%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 15% -180%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 25% -200%, #d1d5db 2px, transparent 1px),*/
/*        radial-gradient(circle at 35% -220%, #e5e5e5 1px, transparent 1px),*/
/*        !* Additional 12 particles for doubled density *!*/
/*        radial-gradient(circle at 5% -50%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 45% -30%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 55% -70%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 75% -90%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 85% -25%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 95% -45%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 12% -110%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 22% -130%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 32% -150%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 42% -170%, #d1d5db 2px, transparent 2px),*/
/*        radial-gradient(circle at 52% -190%, #e5e5e5 1px, transparent 1px),*/
/*        radial-gradient(circle at 62% -210%, #d1d5db 2px, transparent 2px);*/
/*    background-size: */
/*        !* Original 12 layers *!*/
/*        300px 300px, 250px 250px, 200px 200px, 350px 350px, 180px 180px, 320px 320px, */
/*        220px 220px, 280px 280px, 160px 160px, 240px 240px, 190px 190px, 260px 260px,*/
/*        !* Additional 12 layers with varied spacing *!*/
/*        270px 270px, 230px 230px, 310px 310px, 210px 210px, 290px 290px, 340px 340px,*/
/*        240px 240px, 330px 330px, 170px 170px, 275px 275px, 255px 255px, 285px 285px;*/
/*    animation: snowFall 25s linear infinite;*/
/*    z-index: 1;*/
/*    opacity: 0.85;*/
/*}*/

/*@keyframes snowFall {*/
/*    0% {*/
/*        transform: translateY(-100vh) translateX(0px) rotate(0deg);*/
/*        opacity: 0;*/
/*    }*/
/*    10% {*/
/*        opacity: 0.9;*/
/*    }*/
/*    90% {*/
/*        opacity: 0.9;*/
/*    }*/
/*    100% {*/
/*        transform: translateY(100vh) translateX(20px) rotate(360deg);*/
/*        opacity: 0;*/
/*    }*/
/*}*/

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    letter-spacing: 0.025em;
}

/* Fade-in animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*@keyframes fall {*/
/*    0% {*/
/*        transform: translateY(-10vh) translateX(0);*/
/*        opacity: 0;*/
/*    }*/
/*    10% {*/
/*        opacity: 1;*/
/*    }*/
/*    100% {*/
/*        transform: translateY(110vh) translateX(var(--drift, 0px));*/
/*        opacity: 0.8;*/
/*    }*/
/*}*/
/**/
/*.flake {*/
/*    position: absolute;*/
/*    top: -10px;*/
/*    background: lightgray;  */
/*    border-radius: 50%;*/
/*    opacity: 0.9;*/
/*    animation: fall linear infinite;*/
/*}*/

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-delay-1 {
    animation: fadeIn 1s ease-out 0.2s forwards;
}

.animate-fade-in-delay-2 {
    animation: fadeIn 1s ease-out 0.4s forwards;
}

.animate-fade-in-delay-3 {
    animation: fadeIn 1s ease-out 0.6s forwards;
}

.animate-fade-in-delay-4 {
    animation: fadeIn 1s ease-out 0.8s forwards;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

/* Custom button hover effects */
.contact-btn {
    position: relative;
    overflow: hidden;
    letter-spacing: 0.1em;
}

.contact-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.contact-btn:hover::before {
    left: 100%;
}

/* Logo subtle animation */
.logo-section img {
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.5s ease;
}

/*.logo-section:hover img {*/
/*    filter: grayscale(0%);*/
/*    transform: scale(1.05);*/
/*}*/

/* Modal backdrop animation */
#contact-modal.visible {
    background-color: rgba(0, 0, 0, 0.7);
    visibility: visible;
}

#contact-modal.visible > div {
    transform: scale(1);
}

/* Responsive typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
        letter-spacing: 0.05em;
    }
    
    .tagline p {
        font-size: 1.125rem;
        letter-spacing: 0.025em;
    }
    
    .contact-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 1rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .logo-section img {
        width: 6rem;
        height: 6rem;
    }
}

/* Subtle text animation on hover */
.company-name h1 {
    transition: all 0.3s ease;
}

.company-name:hover h1 {
    letter-spacing: 0.15em;
}

/* Tagline hover effect */
.tagline p {
    transition: all 0.3s ease;
}

.tagline:hover p {
    color: #374151;
}

/* Footer subtle fade */
footer p {
    transition: opacity 0.3s ease;
}

footer:hover p {
    opacity: 1;
}

/* Snowfall animation styles */
.snowflake {
    position: fixed;
    top: -10px;
    color: gray;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    user-select: none;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

@keyframes snowfall {
    0% {
        transform: translateY(-10vh) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: var(--target-opacity, 0.8);
    }
    90% {
        opacity: var(--target-opacity, 0.8);
    }
    100% {
        transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(360deg);
        opacity: 0;
    }
}


.jackalope-container {
    position: relative;
    display: block;
    width: 256px;
    height: 256px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .jackalope-container {
        width: 390px;
        height: 320px;
    }
}

.jackalope-png,
.jackalope-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out; /* slower fade-in */
}

.jackalope-video {
    opacity: 0;
    pointer-events: none; /* so hover triggers PNG container */
}

.jackalope-container:hover .jackalope-video {
    opacity: 1;
    transition: opacity 0.1s ease-in-out; /* slower fade-in */
}

.jackalope-container:hover .jackalope-png {
    opacity: 0;
    transition: opacity 0.1s ease-in-out; /* slower fade-in */
}

.jackalope-video {
    opacity: 0;
    pointer-events: none; /* so hover triggers PNG container */
    transition: opacity 0.5s ease-out; /* faster fade-out */
}

.jackalope-png {
    opacity: 1;
    transition: opacity 0.5s ease-out; /* faster fade-out */
}