/* Custom Styling to override or add to Tailwind */

/* Smooth fade-in animation rules */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Stagger delays for multiple items */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Custom Forms CSS (to make unstyled inputs base look nicer) */
input[type="text"],
input[type="email"],
textarea {
    outline: none;
    transition: border-color 0.2s;
}

input:focus,
textarea:focus {
    border-color: #5a865b; /* brand-500 */
}

/* Enhancing scrollbar for high-end feel */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f4f7f4; 
}
::-webkit-scrollbar-thumb {
    background-color: #cbdccb; 
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a5c4a5; 
}/* Custom UI/UX Enhancements */
.bg-texture {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236bb16a' fill-opacity='0.02' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-color: #fcfdfc;
}

.bg-organic-glow {
    background: radial-gradient(circle at 10% 50%, rgba(132, 204, 22, 0.08), transparent 40%),
                radial-gradient(circle at 90% 20%, rgba(22, 163, 74, 0.05), transparent 40%);
}

/* Tech-Eco Style additions */
@keyframes float-tech {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
    100% { transform: translateY(0px) scale(1); }
}
.animate-float-tech {
    animation: float-tech 10s ease-in-out infinite;
}

@keyframes pulse-tech {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.06); }
}
.animate-pulse-tech {
    animation: pulse-tech 8s ease-in-out infinite;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.dark-glass-panel {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}
.text-glow-light {
    text-shadow: 0 0 12px rgba(255,255,255,0.8);
}

/* Full Page Immersive Scroll Animations */

/* The body is the one true scroll container */
html {
    height: 100%;
    overflow: hidden;
}
body {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for immersive UX */
body::-webkit-scrollbar {
    display: none;
}
body {
    scrollbar-width: none;
}

.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
    height: 100vh; /* Must be hard 100vh, not min-height, for snap to work */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Background Scale Down Effect */
.bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.15); /* zoomed in */
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.snap-section.is-active .bg-layer {
    transform: scale(1); /* normal */
}

/* Content Fade Up */
.ui-layer {
    position: relative;
    z-index: 10;
    width: 100%;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.3s;
}
.snap-section.is-active .ui-layer {
    opacity: 1;
    transform: translateY(0);
}

/* Scenarios: slide-from-sides card entrance */
.slide-from-left {
    transform: translateX(-60px) scale(0.96);
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
    opacity: 0;
}
.slide-from-right {
    transform: translateX(60px) scale(0.96);
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
    opacity: 0;
}
.snap-section.is-active .slide-from-left,
.snap-section.is-active .slide-from-right {
    transform: translateX(0) scale(1);
    opacity: 1;
}
/* Extra delay for stagger */
.delay-500 { transition-delay: 500ms; }

/* ===== Features Section: Background Carousel ===== */
.features-bg-carousel {
    position: absolute;
    inset: 0;
}
.features-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.8s ease-in-out, transform 8s ease-in-out;
}
.features-bg-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Features entrance: scale-up + fade */
.features-entrance {
    opacity: 0;
    transform: scale(0.92) translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}
.snap-section.is-active .features-entrance {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.feat-delay-1 { transition-delay: 150ms; }
.feat-delay-2 { transition-delay: 300ms; }
.feat-delay-3 { transition-delay: 450ms; }
.feat-delay-4 { transition-delay: 600ms; }
.feat-delay-5 { transition-delay: 750ms; }