/**
 * Viewport Animations CSS
 * Handles scroll-based animations when fullPage.js is disabled
 * Works in conjunction with viewport-animations.js
 * 
 * IMPORTANT: This class is only active when:
 * - Animations toggle is ON
 * - fullPage.js toggle is OFF
 * 
 * This ensures complete separation from fullPage.js animations
 */

/* Hide elements initially when viewport animations are active */
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.section p:not(a > p),
.section a:not(p > a),
.section img,
.section form,
.section label,
.section input,
.section textarea,
.section button,
.section .animate-element {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
}

/* When element enters viewport (non-fullPage.js mode), show elements with animation */
.section.in-viewport h1,
.section.in-viewport h2,
.section.in-viewport h3,
.section.in-viewport h4,
.section.in-viewport h5,
.section.in-viewport h6,
.section.in-viewport p:not(a > p),
.section.in-viewport a:not(p > a),
.section.in-viewport img,
.section.in-viewport form,
.section.in-viewport label,
.section.in-viewport input,
.section.in-viewport textarea,
.section.in-viewport button,
.section.in-viewport .animate-element {
    animation: fromBottom 0.7s ease-out forwards;
}

/* Also apply to elements that have the in-viewport class directly */
.section h1.in-viewport,
.section h2.in-viewport,
.section h3.in-viewport,
.section h4.in-viewport,
.section h5.in-viewport,
.section h6.in-viewport,
.section p.in-viewport:not(a > p),
.section a.in-viewport:not(p > a),
.section img.in-viewport,
.section form.in-viewport,
.section label.in-viewport,
.section input.in-viewport,
.section textarea.in-viewport,
.section button.in-viewport,
.section .animate-element.in-viewport {
    animation: fromBottom 0.7s ease-out forwards;
}

/* Stagger delays for different elements in viewport mode */
.section.in-viewport h1,
.section h1.in-viewport {
    animation-delay: 0s;
}

.section.in-viewport h2,
.section h2.in-viewport {
    animation-delay: 0.1s;
}

.section.in-viewport h3,
.section h3.in-viewport {
    animation-delay: 0.2s;
}

.section.in-viewport h4,
.section h4.in-viewport {
    animation-delay: 0.25s;
}

.section.in-viewport h5,
.section h5.in-viewport {
    animation-delay: 0.3s;
}

.section.in-viewport h6,
.section h6.in-viewport {
    animation-delay: 0.35s;
}

.section.in-viewport p:not(a > p),
.section p.in-viewport:not(a > p) {
    animation-delay: 0.4s;
}

.section.in-viewport a:not(p > a),
.section a.in-viewport:not(p > a) {
    animation-delay: 0.45s;
}

.section.in-viewport img,
.section img.in-viewport {
    animation-delay: 0.5s;
}

.section.in-viewport form,
.section form.in-viewport {
    animation-delay: 0.55s;
}

.section.in-viewport label,
.section label.in-viewport {
    animation-delay: 0.1s;
}

.section.in-viewport input,
.section input.in-viewport {
    animation-delay: 0.15s;
}

.section.in-viewport textarea,
.section textarea.in-viewport {
    animation-delay: 0.2s;
}

.section.in-viewport button,
.section button.in-viewport {
    animation-delay: 0.6s;
}

.section.in-viewport .animate-element,
.section .animate-element.in-viewport {
    animation-delay: 0.3s;
}

/* Override for immediate children to have faster stagger within a section */
.section.in-viewport > * {
    animation-delay: 0s;
}

.section.in-viewport > *:nth-child(1) {
    animation-delay: 0s;
}

.section.in-viewport > *:nth-child(2) {
    animation-delay: 0.1s;
}

.section.in-viewport > *:nth-child(3) {
    animation-delay: 0.2s;
}

.section.in-viewport > *:nth-child(4) {
    animation-delay: 0.3s;
}

.section.in-viewport > *:nth-child(5) {
    animation-delay: 0.4s;
}