/* Extreme Animations on Scroll and Load */

/* Base class for scroll animation target */
.anim-target {
    opacity: 0;
    will-change: transform, opacity, filter;
}

/* Animation 1: Extreme Slide Up and Blur */
.anim-slide-blur.in-view {
    animation: extremeSlideBlur 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes extremeSlideBlur {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.8) rotateX(-20deg);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
        filter: blur(0);
    }
}

/* Animation 2: Extreme Zoom and Rotate */
.anim-zoom-rotate.in-view {
    animation: extremeZoomRotate 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes extremeZoomRotate {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(45deg);
        filter: saturate(0) blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: saturate(1) blur(0);
    }
}

/* Animation 3: Extreme Flip */
.anim-flip.in-view {
    animation: extremeFlip 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
    transform-style: preserve-3d;
}

@keyframes extremeFlip {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateY(-90deg) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg) scale(1);
    }
}

/* Animation 4: Extreme Bounce Right */
.anim-bounce-right.in-view {
    animation: extremeBounceRight 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes extremeBounceRight {
    0% {
        opacity: 0;
        transform: translateX(-150px) scaleX(1.5);
    }
    60% {
        opacity: 1;
        transform: translateX(25px) scaleX(0.9);
    }
    80% {
        transform: translateX(-10px) scaleX(1.05);
    }
    100% {
        transform: translateX(0) scaleX(1);
    }
}

/* Specific Delay Modifiers */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }

/* Hero Specific Animations */
.hero-title {
    display: inline-block;
    perspective: 1000px;
    font-family: 'EyesomeScript', cursive; /* Restored custom typography */
    text-transform: none;
}

.hero-letter {
    display: inline-block;
    opacity: 0;
    transform: translateX(100px) rotateY(90deg);
    filter: blur(10px);
    transition: all 0.5s ease;
    font-family: inherit; /* Ensure it uses EyesomeScript */
}

.hero-letter.animate {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
    filter: blur(0);
}

.hero-subtitle {
    display: table; /* Fit text width */
    margin: 10px auto 0; /* Center the table block */
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--primary-brown);
    opacity: 0;
    font-family: 'CMU', serif;
    text-transform: uppercase;
    letter-spacing: 20px;
    text-align: center;
    transform: translateX(210px);
    clip-path: inset(0 100% 0 0);
}

.hero-subtitle.animate {
    opacity: 0.8; /* Restored original opacity */
    animation: typing 2s steps(20, end) forwards, blink 0.75s step-end infinite;
}

.falling-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(-50px);
}

.falling-letter.animate {
    animation: fallIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Transition Overlay */
#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 20000;
    display: none;
    opacity: 0;
    pointer-events: none;
}

.fade-to-white {
    animation: fadeToWhite 1.5s ease-in-out forwards;
}

.fade-out-content {
    animation: fadeOutContent 0.8s ease-in-out forwards;
}

@keyframes fadeOutContent {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fallIn {
    to {
        opacity: 0.8; /* Slightly more visible but still subtle */
        transform: translateY(0);
    }
}

@keyframes fadeToWhite {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


@keyframes typing {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-brown) }
}