radicall/resources/css/Client/landing.css

@keyframes landing-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes landing-scan {
    0% { top: 0; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes landing-pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.7); opacity: 0; }
}

@keyframes landing-blob {
    0%, 100% { border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; }
    50% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
}

@keyframes landing-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

@keyframes landing-spin {
    to { transform: rotate(360deg); }
}

@keyframes landing-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

@keyframes landing-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes landing-timeline {
    0%, 12% { opacity: 0.35; }
    18%, 100% { opacity: 1; }
}

@keyframes landing-toggle {
    0%, 40% { transform: translateX(0); }
    50%, 90% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

@keyframes landing-bubble {
    0% { opacity: 0; transform: translateY(12px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.landing-page {
    background-image: radial-gradient(rgba(128, 14, 19, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
}

.landing-grid {
    background-image: linear-gradient(#DEE3EB 1px, transparent 1px), linear-gradient(90deg, #DEE3EB 1px, transparent 1px);
    background-size: 32px 32px;
}

.landing-float {
    animation: landing-float 6s ease-in-out infinite;
}

.landing-float--delay {
    animation-delay: 1.6s;
}

.landing-scan {
    animation: landing-scan 3.6s ease-in-out infinite;
}

.landing-pulse::after {
    content: '';
    @apply absolute inset-0 rounded-full border-2 border-complement-700;
    animation: landing-pulse 2.2s ease-out infinite;
}

.landing-blob {
    animation: landing-blob 14s ease-in-out infinite;
}

.landing-kenburns {
    animation: landing-kenburns 24s ease-out forwards;
}

.landing-spin svg {
    animation: landing-spin 18s linear infinite;
}

.landing-marquee {
    animation: landing-marquee 32s linear infinite;
}

.landing-marquee:hover {
    animation-play-state: paused;
}

.landing-underline path {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: landing-draw 1.1s ease-out 0.5s forwards;
}

.landing-timeline-step {
    animation: landing-timeline 8s ease-in-out infinite;
}

.landing-timeline-step:nth-child(2) { animation-delay: 1.6s; }
.landing-timeline-step:nth-child(3) { animation-delay: 3.2s; }
.landing-timeline-step:nth-child(4) { animation-delay: 4.8s; }

.landing-toggle-thumb {
    animation: landing-toggle 6s ease-in-out infinite;
}

.landing-bubble {
    opacity: 0;
    animation: landing-bubble 0.5s ease-out forwards;
}

.landing-bubble:nth-child(2) { animation-delay: 0.6s; }
.landing-bubble:nth-child(3) { animation-delay: 1.2s; }

.landing-reveal {
    @apply opacity-0 translate-y-8 transition-all duration-700 ease-out;
}

.landing-reveal.is-visible {
    @apply opacity-100 translate-y-0;
}

.landing-reveal--1 { transition-delay: 100ms; }
.landing-reveal--2 { transition-delay: 200ms; }
.landing-reveal--3 { transition-delay: 300ms; }
.landing-reveal--4 { transition-delay: 400ms; }
.landing-reveal--5 { transition-delay: 500ms; }

.landing-timeline-line {
    @apply origin-top scale-y-0 transition-transform duration-1000 ease-out;
}

.landing-reveal.is-visible .landing-timeline-line {
    @apply scale-y-100;
}

.landing-faq summary::-webkit-details-marker {
    display: none;
}

.landing-faq[open] .landing-faq-icon {
    @apply rotate-45;
}

html:has(.landing-page) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .landing-float,
    .landing-scan,
    .landing-kenburns,
    .landing-spin svg,
    .landing-blob,
    .landing-marquee,
    .landing-timeline-step,
    .landing-toggle-thumb,
    .landing-pulse::after {
        animation: none;
    }

    .landing-underline path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .landing-bubble {
        animation: none;
        opacity: 1;
    }

    .landing-reveal {
        @apply opacity-100 translate-y-0 transition-none;
    }

    .landing-timeline-line {
        @apply scale-y-100 transition-none;
    }
}