/* Llano maintenance — photorealistic desert + eagle flight */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Source Sans 3', sans-serif;
    background: linear-gradient(180deg, #1a4a7a 0%, #e8c88a 45%, #a67c3a 100%);
}

.llano-maintenance {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 520px;
    overflow: hidden;
    background-color: #b87333;
    background-size: cover;
    background-position: center 45%;
    background-repeat: no-repeat;
}

/* Llano desert background — full-screen photo */
.llano-bg-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    z-index: 0;
    transform: scale(1.04);
    animation: desertKenBurns 50s ease-in-out infinite alternate;
    filter: saturate(1.08) contrast(1.04);
}

.llano-bg-photo {
    position: absolute;
    inset: 0;
    background-color: #b87333;
    background-size: cover;
    background-position: center 45%;
    background-repeat: no-repeat;
    z-index: 0;
}

@keyframes desertKenBurns {
    from { transform: scale(1.04) translateX(0); }
    to   { transform: scale(1.1) translateX(-1.2%); }
}

/* Light overlays — keep the real photo visible */
.llano-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(8, 45, 82, 0.12) 0%,
            rgba(26, 111, 181, 0.03) 22%,
            rgba(255, 220, 160, 0.02) 50%,
            rgba(60, 40, 15, 0.08) 78%,
            rgba(20, 12, 5, 0.28) 100%);
    pointer-events: none;
}

.llano-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Heat shimmer over sand */
.llano-heat-haze {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
    z-index: 3;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 210, 140, 0.05) 60%, rgba(255, 180, 80, 0.08) 100%);
    pointer-events: none;
    animation: hazePulse 6s ease-in-out infinite alternate;
}

@keyframes hazePulse {
    from { opacity: 0.5; transform: translateY(0); }
    to   { opacity: 1; transform: translateY(-4px); }
}

/* Real eagle — glides across the sky over the whole page */
.llano-eagle-track {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

.llano-eagle {
    position: absolute;
    top: 12%;
    left: 0;
    will-change: transform;
    animation: eagleCrossDesert 22s linear infinite;
}

.llano-eagle--delayed {
    top: 20%;
    animation: eagleCrossDesert 30s linear infinite;
    animation-delay: -9s;
    opacity: 0.65;
}

@keyframes eagleCrossDesert {
    0% {
        transform: translateX(-40vw) translateY(4vh) scale(0.5);
    }
    15% {
        transform: translateX(5vw) translateY(6vh) scale(0.72);
    }
    45% {
        transform: translateX(48vw) translateY(2vh) scale(1);
    }
    75% {
        transform: translateX(88vw) translateY(5vh) scale(0.82);
    }
    100% {
        transform: translateX(140vw) translateY(3vh) scale(0.55);
    }
}

.llano-eagle img,
.llano-eagle-svg {
    display: block;
    width: min(520px, 68vw);
    height: auto;
    animation: eagleGlide 1.6s ease-in-out infinite alternate;
}

.llano-eagle img {
    mix-blend-mode: screen;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5)) contrast(1.1) brightness(1.08);
}

.llano-eagle-svg {
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

.llano-eagle--delayed img,
.llano-eagle--delayed .llano-eagle-svg {
    width: min(340px, 46vw);
}

@keyframes eagleGlide {
    from { transform: rotate(-6deg) translateY(0) scaleY(1); }
    to   { transform: rotate(4deg) translateY(8px) scaleY(0.96); }
}

/* Content card — centered on page */
.llano-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    text-align: center;
    padding: 1.75rem 2rem;
    width: min(680px, 92vw);
    background: rgba(255, 252, 245, 0.9);
    border-radius: 14px;
    border: 2px solid rgba(201, 149, 108, 0.5);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
}

.llano-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #3d2f1f;
    margin-bottom: 0.4rem;
}

.llano-content .subtitle {
    color: #2d6a9f;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.llano-content .message {
    color: #5a4a3a;
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.llano-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.llano-countdown-unit {
    text-align: center;
    min-width: 70px;
}

.llano-countdown-value {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    color: #1a6fb5;
    font-family: 'Playfair Display', serif;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.llano-countdown-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #8b6914;
    margin-top: 0.35rem;
    font-weight: 600;
}

.llano-countdown-separator {
    font-size: 2rem;
    color: #c9956c;
    font-weight: 300;
    line-height: 1;
    padding-bottom: 1.2rem;
}

.llano-icons {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
    margin-top: 1rem;
    opacity: 0.75;
}

.llano-icons i {
    font-size: 1.25rem;
    color: #8b6914;
}

.llano-brand {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #9a8a7a;
}

@media (max-width: 576px) {
    .llano-content { padding: 1.25rem; }
    .llano-content h1 { font-size: 1.5rem; }
    .llano-countdown { gap: 0.35rem; flex-wrap: wrap; }
    .llano-countdown-value { font-size: 1.6rem; }
    .llano-countdown-unit { min-width: 52px; }
    .llano-countdown-separator { font-size: 1.5rem; padding-bottom: 1rem; }
    .llano-eagle { top: 10%; }
    .llano-eagle--delayed { top: 18%; }
    .llano-eagle img,
    .llano-eagle-svg { width: min(360px, 78vw); }
}

@media (prefers-reduced-motion: reduce) {
    .llano-bg-photo-img,
    .llano-bg-photo,
    .llano-eagle,
    .llano-eagle img,
    .llano-eagle-svg,
    .llano-heat-haze {
        animation: none !important;
    }
    .llano-bg-photo-img,
    .llano-bg-photo { transform: scale(1.04); }
}