/**
 * Shared public marketing page shell (Imperial Vaults & Logistics index.html parity).
 * Use on body with: class="bg-gray-900 ivl-public-marketing"
 */

:root {
    --bg-dark: #0A0A10;
    --glow-primary: rgba(79, 70, 229, 0.5);
    --glow-secondary: rgba(139, 92, 246, 0.4);
}

body.ivl-public-marketing {
    font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
    background-color: var(--bg-dark);
    color: #E0E0E0;
    overflow-x: hidden;
}

.ivl-public-marketing .main-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(124, 58, 237, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 85% 75%, rgba(59, 130, 246, 0.1) 0%, transparent 30%);
    animation: ivl-mkt-float 25s infinite ease-in-out;
    z-index: -1;
    will-change: transform;
}

@keyframes ivl-mkt-float {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-20px, -25px); }
    100% { transform: translate(0, 0); }
}

.ivl-public-marketing .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.ivl-public-marketing .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.ivl-public-marketing .loader-container {
    position: relative;
    width: 250px;
    overflow: hidden;
}

.ivl-public-marketing .truck-animation {
    font-size: 3rem;
    color: #818cf8;
    animation: ivl-mkt-drive 2.5s ease-in-out infinite;
    position: relative;
    z-index: 10;
}

.ivl-public-marketing .road {
    height: 4px;
    width: 100%;
    background-color: #4b5563;
    position: relative;
    margin-top: -8px;
}

.ivl-public-marketing .road::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(90deg, #4b5563, #4b5563 10px, transparent 10px, transparent 20px);
    animation: ivl-mkt-road-lines 0.5s linear infinite;
}

@keyframes ivl-mkt-drive {
    0% { transform: translateX(-100px); }
    10% { transform: translateX(0); }
    90% { transform: translateX(200px); }
    100% { transform: translateX(350px); }
}

@keyframes ivl-mkt-road-lines {
    from { background-position: 0 0; }
    to { background-position: -20px 0; }
}