/* Photo and atmosphere are isolated to the public landing page. */
.landing .hero {
    isolation: isolate;
    background: #101726;
    min-height: max(720px, calc(100svh - 80px));
}

.landing .hero-bg {
    pointer-events: none;
}

.landing .landscape {
    position: absolute;
    inset: -24px;
    background: url('../images/landing-crater-lake.png') center 55% / cover no-repeat;
    transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
    transition: transform 700ms ease-out;
}

.landing .cloud-depth {
    position: absolute;
    inset: -30px;
    overflow: hidden;
    transform: translate3d(var(--cloud-x, 0px), var(--cloud-y, 0px), 0);
    transition: transform 900ms ease-out;
    mask-image: linear-gradient(#000 5%, #000 35%, transparent 65%);
}

/* Two identical repeating tiles make each translation loop seamless. */
.landing .cloud-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 48%;
    background-image: url('../images/landing-clouds.svg');
    background-size: 50% 100%;
    background-repeat: repeat-x;
    opacity: .85;
    animation: landing-cloud-drift 42s linear infinite;
    animation-delay: -12s;
    will-change: transform;
}

.landing .cloud-track-near {
    top: 9%;
    height: 50%;
    opacity: .7;
    animation-duration: 29s;
    animation-delay: -28s;
    background-position: 320px 0;
}

.landing .landscape-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 15, .2), rgba(10, 10, 15, .28) 65%, #0a0a0f 100%),
        radial-gradient(ellipse at 50% 45%, rgba(9, 15, 31, .78), rgba(9, 15, 31, .12) 80%);
}

.landing .hero-content { text-shadow: 0 2px 22px rgba(0, 0, 0, .5); }
.landing .hero h1 { color: #fff; }
.landing .hero .highlight {
    background-image: linear-gradient(110deg, #ffd1e1, #f3b9e0 45%, #b6e4ff);
}
.landing .hero-description,
.landing .hero .trust-text { color: #e9e9f2; }
.landing .hero-tag {
    color: #ffe0ec;
    background: rgba(24, 24, 44, .65);
    border-color: rgba(255, 205, 225, .4);
    backdrop-filter: blur(12px);
}
.landing .hero-tag i { color: #ffc0d9; }
.landing .hero .btn-glass {
    background: rgba(15, 23, 42, .65);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    backdrop-filter: blur(12px);
}

@keyframes landing-cloud-drift {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 600px) {
    .landing .hero { min-height: calc(100svh - 64px); padding: 5rem 1.25rem; }
    .landing .landscape { background-position: 58% center; }
    .landing .cloud-track { width: 400%; background-size: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .landing .cloud-track,
    .landing .hero-content * { animation: none !important; }
    .landing .landscape,
    .landing .cloud-depth { transform: none; transition: none; }
    .landing .cloud-track { will-change: auto; }
}