/* 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; }

/* ===================================================
   MOBILE RESPONSIVE — max-width: 767px
   =================================================== */
@media (max-width: 767px) {
    /* 1. Disable scroll-snap entirely on mobile */
    html {
        height: auto;
        overflow: auto;
    }
    body {
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: none;
    }
    body::-webkit-scrollbar {
        display: block;
        width: 0px;
    }

    /* 2. Sections: auto height instead of 100vh */
    .snap-section {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    /* 3. Force all content visible on mobile (bypass is-active gating) */
    .ui-layer,
    .snap-section .ui-layer {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
    .slide-from-left,
    .slide-from-right,
    .snap-section .slide-from-left,
    .snap-section .slide-from-right {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
        transition: none !important;
    }
    .features-entrance,
    .snap-section .features-entrance,
    .snap-section.is-active .features-entrance {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
        transition: none !important;
    }
    .fade-in-up {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .bg-layer,
    .snap-section .bg-layer,
    .snap-section.is-active .bg-layer {
        transform: scale(1) !important;
    }

    /* 4. Hero section */
    #home.snap-section {
        min-height: 100vh;
        height: auto;
        padding-bottom: 2rem;
    }
    #home .ui-layer {
        padding-top: 5rem;
        padding-bottom: 1.5rem;
    }
    #home .ui-layer .text-center.mb-16 {
        margin-bottom: 1.5rem;
    }
    /* Hero title sizing */
    #home h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    #home .ui-layer .text-lg.md\:text-xl {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
    #home .ui-layer .text-sm.md\:text-base {
        font-size: 0.75rem !important;
    }
    /* Hero cards: stack vertically, shorter */
    #home .flex.flex-col.lg\:flex-row {
        height: auto !important;
        gap: 1rem;
    }
    #home .flex.flex-col.lg\:flex-row > div {
        min-height: 280px;
        border-radius: 1.5rem;
    }
    #home .flex.flex-col.lg\:flex-row > div h2 {
        font-size: 1.5rem !important;
    }
    #home .flex.flex-col.lg\:flex-row > div p {
        font-size: 0.8rem !important;
    }
    #home .flex.flex-col.lg\:flex-row > div .w-16.h-16 {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.75rem;
    }
    #home .flex.flex-col.lg\:flex-row > div .w-16.h-16 span {
        font-size: 1.5rem;
    }
    #home .flex.flex-col.lg\:flex-row > div .p-8 {
        padding: 1.25rem;
    }

    /* 5. Products section */
    #products.snap-section {
        height: auto;
        min-height: auto;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    #products .ui-layer {
        padding-top: 5rem;
    }
    #products h2 {
        font-size: 1.75rem !important;
    }
    #products .text-lg {
        font-size: 0.875rem !important;
    }
    /* Product cards: 2 columns on mobile */
    #products .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    #products .grid .relative.overflow-hidden {
        height: 140px !important;
    }
    #products .grid .p-6 {
        padding: 0.75rem;
    }
    #products .grid h3 {
        font-size: 0.85rem !important;
    }
    #products .grid .text-base {
        font-size: 0.7rem !important;
    }

    /* 6. Scenarios section */
    #scenarios.snap-section {
        height: auto;
        min-height: auto;
        padding-bottom: 2rem;
    }
    #scenarios .ui-layer {
        padding-top: 5rem;
    }
    #scenarios h2 {
        font-size: 1.5rem !important;
    }
    /* Scenario cards: single column */
    #scenarios .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    #scenarios .carousel-container {
        height: 160px !important;
    }
    #scenarios .p-5 {
        padding: 0.75rem;
    }
    #scenarios .w-12.h-12 {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.25rem;
    }
    #scenarios .text-base.font-bold {
        font-size: 0.85rem !important;
    }
    #scenarios .text-sm.text-gray-400 {
        font-size: 0.75rem !important;
    }
    /* Make carousel arrows always visible on mobile (no hover) */
    #scenarios .carousel-prev,
    #scenarios .carousel-next {
        opacity: 0.7 !important;
    }

    /* 7. Features section */
    #features.snap-section {
        height: auto;
        min-height: auto;
        padding-bottom: 2rem;
    }
    #features .ui-layer {
        padding-top: 5rem;
    }
    #features h2 {
        font-size: 1.5rem !important;
    }
    #features .text-lg {
        font-size: 0.8rem !important;
    }
    #features .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    #features .grid > div {
        padding: 1.25rem;
    }
    #features .grid h3 {
        font-size: 1rem !important;
    }
    #features .grid .text-base {
        font-size: 0.8rem !important;
    }
    #features .grid .w-14.h-14 {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 0.75rem;
    }
    #features .grid .w-14.h-14 svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    /* Remove lg:col-span-2 on mobile (card 5) */
    #features .lg\:col-span-2 {
        grid-column: span 1 !important;
    }

    /* 8. Certificates section */
    #certificates.snap-section {
        height: auto;
        min-height: auto;
        padding-bottom: 2rem;
    }
    #certificates .ui-layer {
        padding-top: 5rem;
    }
    #certificates h2 {
        font-size: 1.5rem !important;
    }
    #certificates .text-lg {
        font-size: 0.8rem !important;
        margin-bottom: 1.5rem !important;
    }
    #certificates .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    #certificates .grid > div {
        padding: 1rem;
    }
    #certificates .grid h4 {
        font-size: 0.8rem !important;
    }
    #certificates .grid .h-12.w-12 {
        height: 2rem;
        width: 2rem;
    }

    /* 9. Contact / FAQ section */
    #contact.snap-section {
        height: auto;
        min-height: auto;
    }
    #contact .ui-layer {
        min-height: auto !important;
    }
    #contact .grid.grid-cols-1.lg\:grid-cols-5 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    #contact .lg\:col-span-2 {
        padding-right: 0 !important;
    }
    #contact h2 {
        font-size: 1.25rem !important;
    }
    /* Contact card: stack vertically */
    #contact .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }
    #contact .md\:w-2\/5,
    #contact .md\:w-3\/5 {
        width: 100% !important;
    }
    #contact .md\:w-2\/5 {
        padding: 1.25rem !important;
    }
    #contact iframe {
        min-height: 480px !important;
    }

    /* Footer grid on mobile */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    footer .col-span-2 {
        grid-column: span 1 !important;
    }

    /* 10. Floating action buttons: smaller on mobile */
    .fixed.bottom-6 {
        bottom: 1rem !important;
        right: 1rem !important;
        gap: 0.5rem;
    }
    .fixed.bottom-6 a:first-child {
        padding: 0.625rem;
    }
    .fixed.bottom-6 a:first-child svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    .fixed.bottom-6 a:last-child {
        padding: 0.75rem;
    }
    .fixed.bottom-6 a:last-child svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* 11. Navbar: compact on mobile */
    header .h-20 {
        height: 3.5rem !important;
    }
    header .text-2xl {
        font-size: 1.125rem !important;
    }

    /* 12. Promo modal: fit mobile screen */
    #promo-modal-content {
        padding: 1.5rem !important;
        border-radius: 1.25rem !important;
        margin: 0.75rem !important;
    }
    #promo-modal-content h3 {
        font-size: 1.25rem !important;
    }
    #promo-modal-content p {
        font-size: 0.875rem !important;
    }

    /* 13. Mobile menu improvements */
    #mobile-menu {
        max-height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Tablet adjustments — 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .snap-section {
        height: auto;
        min-height: 100vh;
        scroll-snap-align: none;
    }
    html {
        overflow: auto;
    }
    body {
        scroll-snap-type: none;
    }
    .ui-layer,
    .snap-section .ui-layer {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .slide-from-left,
    .slide-from-right {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
    }
    .features-entrance {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
    }
    .fade-in-up {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .bg-layer {
        transform: scale(1) !important;
    }

    #home h1 {
        font-size: 2.5rem !important;
    }
    #home .flex.flex-col.lg\:flex-row {
        height: auto !important;
    }
}