/*
 * Prototype home1_1 (/html/home1_1.html), on top of css/home1.css: full-width banner with the logo
 * and the DEPO intro, two photo walls around "DEPO – THE SPEED OF YOUR VISION", then the CLIENT MAP
 * and PEOPLE blocks of the current home (modules/FirstScreen.css, Masonry.css) on the animated
 * site background (.ellipses, js/ellipses.js).
 */
body.proto-home1-1 { background: var(--bg); }
.proto-home1-1 .ellipses { display: block; }

/* ── banner ─────────────────────────────────────────────────────────── */
.h11-banner {
    position: relative; display: grid; place-items: center; overflow: hidden;
    min-height: clamp(520px, 82vh, 860px); padding: 64px 16px;
    isolation: isolate;
}
.h11-banner__img {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.06); animation: h11-settle 1600ms cubic-bezier(.2, .7, .2, 1) forwards;
}
.h11-banner::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.15) 35%, rgb(0 0 0 / 0.55)),
        radial-gradient(ellipse 60% 55% at 50% 50%, rgb(0 0 0 / 0.45), transparent 75%);
}
/* Soft edge into the page background under the banner. */
.h11-banner::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 120px; z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--bg));
}
@keyframes h11-settle { to { transform: none; } }

.h11-banner__content {
    display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3vw, 36px);
    max-width: 820px; text-align: center;
}
.h11-banner__logo { width: clamp(170px, 18vw, 260px); height: auto; filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.45)); }
.h11-banner__text {
    margin: 0; color: #fff;
    font: 400 clamp(16px, 1.45vw, 21px)/1.6 var(--font);
    text-shadow: 0 1px 14px rgb(0 0 0 / 0.55);
}
.h11-banner__content > * { opacity: 0; transform: translateY(14px); animation: h1-rise 800ms cubic-bezier(.2, .7, .2, 1) forwards; }
.h11-banner__content > :nth-child(2) { animation-delay: 120ms; }
.h11-banner__content > :nth-child(3) { animation-delay: 240ms; }

/* ── walls between the blocks ───────────────────────────────────────── */
.proto-home1-1 .h1-wall::after { background: linear-gradient(to bottom, transparent, var(--bg)); }
.proto-home1-1 .h1-wall + .FirstScreen_blockText,
.proto-home1-1 .h1-wall + .FirstScreen_clientMap { margin-top: -40px; position: relative; }

@media (max-width: 575px) {
    .h11-banner { min-height: 560px; padding: 48px 16px; }
    .h11-banner__text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .h11-banner__img, .h11-banner__content > * { animation: none; opacity: 1; transform: none; }
}