/* Logeco website-v2 — custom styles & scroll animations */

/* ---- Circular Std (brand font, copied from the app) ---- */
@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Bold.ttf') format('truetype');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Black.ttf') format('truetype');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* ---- Hero: aurora background, grid, gradient text, floats ---- */
.hero {
    background-color: #fff;
}

/* faint dotted grid that fades toward the edges */
.hero-grid {
    background-image:
        linear-gradient(to right, rgba(0, 103, 103, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 103, 103, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 40%, transparent 100%);
}

/* soft colour tint that travels with the wave (teal -> emerald hue shift) */
.hero-wave-glow {
    background-image: linear-gradient(135deg,
        transparent 44%,
        rgba(0, 103, 103, 0.08) 49%,
        rgba(16, 160, 120, 0.10) 52%,
        transparent 58%);
    background-size: 260% 260%;
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 40%, transparent 100%);
    animation: waveGlow 10s linear infinite;
}
@keyframes waveGlow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* a brighter green copy of the grid, revealed only inside a thin diagonal band
   that sweeps toward the bottom-right — a spottable "wave" */
.hero-grid-wave {
    background-image:
        linear-gradient(to right, rgba(10, 140, 110, 0.34) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 140, 110, 0.34) 1px, transparent 1px);
    background-size: 44px 44px;
    /* two masks composited: the moving diagonal band ∩ the same radial fade */
    -webkit-mask-image:
        linear-gradient(135deg, transparent 46%, #000 50%, transparent 54%),
        radial-gradient(ellipse 70% 60% at 50% 35%, #000 40%, transparent 100%);
    mask-image:
        linear-gradient(135deg, transparent 46%, #000 50%, transparent 54%),
        radial-gradient(ellipse 70% 60% at 50% 35%, #000 40%, transparent 100%);
    -webkit-mask-size: 260% 260%, 100% 100%;
    mask-size: 260% 260%, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    animation: gridWave 10s linear infinite;
}
@keyframes gridWave {
    0%   { -webkit-mask-position: 0% 0%, 50% 35%;     mask-position: 0% 0%, 50% 35%; }
    100% { -webkit-mask-position: 100% 100%, 50% 35%; mask-position: 100% 100%, 50% 35%; }
}

/* gradient headline word */
.hero-gradient-text {
    background-image: linear-gradient(100deg, #006767 0%, #00a3a3 45%, #14b8a6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Scroll-reveal: elements start hidden, fade/slide in when visible */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0ms);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Coming-soon modal entrance */
@keyframes cs-pop {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#comingSoonModal:not(.hidden) .cs-panel {
    animation: cs-pop .28s cubic-bezier(.16, 1, .3, 1) both;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .animate-float,
    .animate-pulse,
    .hero-grid-wave,
    .hero-wave-glow {
        animation: none !important;
    }
    .hero-grid-wave,
    .hero-wave-glow { display: none; }
    #comingSoonModal:not(.hidden) .cs-panel { animation: none; }
    html {
        scroll-behavior: auto;
    }
}

/* Smooth offset so anchored sections don't hide behind the fixed navbar */
section[id] {
    scroll-margin-top: 80px;
}

/* Navbar scrolled state (toggled in JS) */
#navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 rgba(0, 103, 103, 0.08), 0 8px 24px -12px rgba(0, 103, 103, 0.18);
}