/* scrollytelling.css */

/* Scroll progress bar at the very top */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #2a9d8f; /* Teal */
    width: 0%;
    z-index: 9999;
    transition: width 0.1s ease-out;
}

/* Base Hidden states */
.animate-hidden {
    opacity: 0;
    will-change: transform, opacity;
}

/* Headings: fade in + translateY(40px -> 0), 0.7s ease-out */
h1.animate-hidden, 
h2.animate-hidden, 
h3.animate-hidden {
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Paragraphs: fade in only, no movement */
p.animate-hidden {
    transition: opacity 0.7s ease-out;
}

/* Cards: fade in + translateY(30px -> 0) with stagger */
.animate-hidden.stagger-1,
.animate-hidden.stagger-2,
.animate-hidden.stagger-3,
.animate-hidden.stagger-4,
.animate-hidden.stagger-5 {
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered delays */
.animate-hidden.stagger-1 { transition-delay: 0.1s; }
.animate-hidden.stagger-2 { transition-delay: 0.2s; }
.animate-hidden.stagger-3 { transition-delay: 0.3s; }
.animate-hidden.stagger-4 { transition-delay: 0.4s; }
.animate-hidden.stagger-5 { transition-delay: 0.5s; }

/* Images: fade in + translateX from side */
.animate-hidden.from-left {
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-hidden.from-right {
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Buttons: scale in */
.animate-hidden.scale-in {
    transform: scale(0.9);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cinematic section entrance: scale(0.97 -> 1) + fade in */
section.animate-hidden {
    transform: scale(0.97);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed active states */
.reveal-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Sticky image sections */
@media (min-width: 1024px) {
    .sticky-container {
        display: grid;
        align-items: start !important;
    }
    .sticky-image-element {
        position: sticky !important;
        top: 120px !important; /* Spacing for fixed header */
        align-self: start;
        z-index: 10;
    }
}

/* Hero Background SVG positioning */
.hero-bg-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Floating keyframe animations for shapes (translateY + rotate) */
@keyframes float-shape-1 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(8deg); }
}
@keyframes float-shape-2 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(15px) rotate(-10deg); }
}
@keyframes float-shape-3 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-12px) rotate(6deg); }
}
@keyframes float-shape-4 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-15px) rotate(8deg); }
}
@keyframes float-shape-5 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(18px) rotate(-6deg); }
}
@keyframes float-shape-6 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(10px) rotate(5deg); }
}
@keyframes float-shape-7 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-15px) rotate(-8deg); }
}
@keyframes float-shape-8 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-18px) rotate(6deg); }
}

/* Attach shape float animations (duration 6s-12s, alternate) */
.float-s-1 { animation: float-shape-1 7s ease-in-out infinite alternate; transform-origin: center; }
.float-s-2 { animation: float-shape-2 9s ease-in-out infinite alternate; transform-origin: center; }
.float-s-3 { animation: float-shape-3 8s ease-in-out infinite alternate; transform-origin: center; }
.float-s-4 { animation: float-shape-4 10s ease-in-out infinite alternate; transform-origin: center; }
.float-s-5 { animation: float-shape-5 6s ease-in-out infinite alternate; transform-origin: center; }
.float-s-6 { animation: float-shape-6 11s ease-in-out infinite alternate; transform-origin: center; }
.float-s-7 { animation: float-shape-7 7.5s ease-in-out infinite alternate; transform-origin: center; }
.float-s-8 { animation: float-shape-8 12s ease-in-out infinite alternate; transform-origin: center; }

/* Floating keyframe animations for biological icons */
@keyframes float-icon-1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(5deg); }
}
@keyframes float-icon-2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(10px) rotate(-8deg); }
}
@keyframes float-icon-3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(12deg); }
}
@keyframes float-icon-4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-6deg); }
}
@keyframes float-icon-5 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(8deg); }
}
@keyframes float-icon-6 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(-5deg); }
}
@keyframes float-icon-7 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(12px) rotate(6deg); }
}
@keyframes float-icon-8 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(15px) rotate(-10deg); }
}

.float-i-1 { animation: float-icon-1 6s ease-in-out infinite; transform-origin: center; }
.float-i-2 { animation: float-icon-2 8s ease-in-out infinite; transform-origin: center; }
.float-i-3 { animation: float-icon-3 7s ease-in-out infinite; transform-origin: center; }
.float-i-4 { animation: float-icon-4 9s ease-in-out infinite; transform-origin: center; }
.float-i-5 { animation: float-icon-5 5.5s ease-in-out infinite; transform-origin: center; }
.float-i-6 { animation: float-icon-6 10s ease-in-out infinite; transform-origin: center; }
.float-i-7 { animation: float-icon-7 6.5s ease-in-out infinite; transform-origin: center; }
.float-i-8 { animation: float-icon-8 7.5s ease-in-out infinite; transform-origin: center; }

/* Large faded background icons behind sections */
.faded-bg-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    color: #4b5563; /* Gray */
}

/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #scroll-progress {
        display: none !important;
    }
    .animate-hidden {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .float-s-1, .float-s-2, .float-s-3, .float-s-4, .float-s-5, .float-s-6, .float-s-7, .float-s-8,
    .float-i-1, .float-i-2, .float-i-3, .float-i-4, .float-i-5, .float-i-6, .float-i-7, .float-i-8 {
        animation: none !important;
    }
}