/* Scroll Reveal Animations - Tailwind CSS + Custom CSS */

/* Base animation classes */
.scroll-reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

.scroll-reveal.revealed {
    opacity: 1;
}

/* Fade animations */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.fade-in.revealed {
    opacity: 1;
}

.fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.fade-down {
    opacity: 0;
    transform: translateY(-60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-down.revealed {
    opacity: 1;
    transform: translateY(0);
}

.fade-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.fade-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Scale animations */
.scale-up {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scale-up.revealed {
    opacity: 1;
    transform: scale(1);
}

.scale-down {
    opacity: 0;
    transform: scale(1.2);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scale-down.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Rotate animations */
.rotate-in {
    opacity: 0;
    transform: rotate(-45deg) scale(0.8);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rotate-in.revealed {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Flip animations */
.flip-up {
    opacity: 0;
    transform: rotateX(90deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center bottom;
}

.flip-up.revealed {
    opacity: 1;
    transform: rotateX(0deg);
}

.flip-left {
    opacity: 0;
    transform: rotateY(90deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center left;
}

.flip-left.revealed {
    opacity: 1;
    transform: rotateY(0deg);
}

/* Slide animations */
.slide-up {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.slide-down {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-down.revealed {
    opacity: 1;
    transform: translateY(0);
}

.slide-left {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.slide-right {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Bounce animations */
.bounce-in {
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Stagger animations for multiple elements */
.stagger-delay-1 { transition-delay: 0.1s; }
.stagger-delay-2 { transition-delay: 0.2s; }
.stagger-delay-3 { transition-delay: 0.3s; }
.stagger-delay-4 { transition-delay: 0.4s; }
.stagger-delay-5 { transition-delay: 0.5s; }
.stagger-delay-6 { transition-delay: 0.6s; }

/* Text reveal animations */
.text-reveal-line {
    overflow: hidden;
}

.text-reveal-line .text-content {
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.text-reveal-line.revealed .text-content {
    transform: translateY(0);
}

/* Card reveal animations */
.card-reveal {
    opacity: 0;
    transform: translateY(50px) rotateX(15deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-reveal.revealed {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* Progress bar reveal */
.progress-reveal {
    overflow: hidden;
    position: relative;
}

.progress-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 1s ease-out;
}

.progress-reveal.revealed::before {
    left: 100%;
}

/* Blur reveal */
.blur-reveal {
    opacity: 0;
    filter: blur(10px);
    transition: all 0.8s ease-out;
}

.blur-reveal.revealed {
    opacity: 1;
    filter: blur(0);
}

/* Container reveal with children stagger */
.container-reveal .reveal-child {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.container-reveal.revealed .reveal-child:nth-child(1) { transition-delay: 0.1s; }
.container-reveal.revealed .reveal-child:nth-child(2) { transition-delay: 0.2s; }
.container-reveal.revealed .reveal-child:nth-child(3) { transition-delay: 0.3s; }
.container-reveal.revealed .reveal-child:nth-child(4) { transition-delay: 0.4s; }
.container-reveal.revealed .reveal-child:nth-child(5) { transition-delay: 0.5s; }

.container-reveal.revealed .reveal-child {
    opacity: 1;
    transform: translateY(0);
}

/* Special maritime-themed animations */
.wave-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    animation: none;
}

.wave-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    animation: gentle-wave 3s ease-in-out infinite;
}

@keyframes gentle-wave {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}

/* Performance optimizations */
.scroll-reveal,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.scale-up,
.scale-down,
.rotate-in,
.flip-up,
.flip-left,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.bounce-in,
.card-reveal,
.blur-reveal,
.wave-reveal {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .fade-up,
    .fade-down,
    .fade-left,
    .fade-right,
    .scale-up,
    .scale-down,
    .rotate-in,
    .flip-up,
    .flip-left,
    .slide-up,
    .slide-down,
    .slide-left,
    .slide-right,
    .bounce-in,
    .card-reveal,
    .blur-reveal,
    .wave-reveal {
        transition-duration: 0.1s !important;
        animation: none !important;
    }
}