/* Varoa Public Landing Page - Global Styles */

/* Prevent layout shift when scrollbars toggle and fix vertical jumping */
html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Ensure the main page content expands to push the footer down */
main, 
header {
    flex-grow: 1;
}

footer {
    margin-top: auto;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Galvanic Outlines */
.galvanic-border {
    border: 1px solid theme('colors.outline-variant');
}

/* No shadows, tonal depth */
.tonal-depth-1 {
    background-color: theme('colors.surface-container');
}

.tonal-depth-2 {
    background-color: theme('colors.surface-container-high');
}

/* Glassmorphism panel */
.isolation-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Background grid pattern */
.bg-grid-pattern {
    background-size: 24px 24px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

/* Shimmer Button Effect */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

/* Scroll Reveal Utility */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delay modifiers */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

@keyframes pan-grid {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 24px 24px;
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Animation utilities for modern features */
@media (prefers-reduced-motion: no-preference) {
    .btn-shimmer::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 100%;
        background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
        animation: shimmer 3s infinite linear;
        transform: skewX(-20deg);
    }

    .hero-scanlines::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%), 
                    linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
        z-index: 15;
        background-size: 100% 4px, 6px 100%;
        pointer-events: none;
    }

    .animate-grid {
        animation: pan-grid 2s linear infinite;
    }

    .data-flow {
        background: linear-gradient(90deg, transparent, rgba(0, 103, 126, 0.2), transparent);
        background-size: 200% 100%;
        animation: shimmer 3s infinite linear;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.active,
    .motion-safe\:animate-fade-up,
    .group-hover\:scale-105 {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-scanlines::before,
    .btn-shimmer::after {
        display: none !important;
    }
}