/* assets/css/landing.css */

/* Scoped to this landing page only. Retains the existing slate/emerald identity. */
.lp-grid-bg {
    background-image:
        linear-gradient(rgba(16, 185, 129, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 40%, transparent 85%);
}
.lp-glow {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, rgba(16, 185, 129, 0) 70%);
    filter: blur(60px);
}
@keyframes lp-fade-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes lp-glow-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.9; }
}
@keyframes lp-line-expand {
    0% { width: 0; opacity: 1; }
    60% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}
@keyframes lp-logo-reveal {
    from { opacity: 0; transform: scale(0.82); }
    to { opacity: 1; transform: scale(1); }
}
.lp-enter {
    animation: lp-fade-slide-up 700ms ease-out both;
}
.lp-enter-delay-1 { animation-delay: 120ms; }
.lp-enter-delay-2 { animation-delay: 220ms; }
.lp-glow-pulse {
    animation: lp-glow-pulse 7s ease-in-out infinite;
}
.lp-logo-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.95), transparent);
    transform: translate(-50%, -50%);
    animation: lp-line-expand 650ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.lp-logo-img {
    opacity: 0;
    transform: scale(0.82);
    animation: lp-logo-reveal 450ms ease-out 520ms forwards;
}
/* Scroll-reveal for below-the-fold content — only active once .lp-js is present */
html.lp-js .lp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
html.lp-js .lp-reveal.lp-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .lp-enter,
    .lp-glow-pulse,
    .lp-logo-line,
    .lp-logo-img {
        animation: none !important;
    }
    .lp-logo-img {
        opacity: 1;
        transform: none;
    }
    .lp-logo-line {
        display: none;
    }
    html.lp-js .lp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    * {
        transition-duration: 1ms !important;
    }
}