/* =========================================================
   BRAND ATMOSPHERE V2
   Real brand visuals integrated as environmental layers.
   No sticker cards. No oversized low-resolution crops.
   ========================================================= */

:where(
    .software-atlas,
    .professional-profile,
    .network,
    .engine-section,
    .story-engine,
    .contact,
    .areas,
    .intro
) {
    overflow: hidden;
}

:where(
    .software-atlas,
    .professional-profile,
    .network,
    .engine-section,
    .story-engine,
    .contact,
    .areas,
    .intro
)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    image-rendering: auto;
}

:where(
    .software-atlas,
    .professional-profile,
    .network,
    .engine-section,
    .story-engine,
    .contact,
    .areas,
    .intro
) > .shell {
    position: relative;
    z-index: 1;
}

/* Software / infrastructure — full high-resolution environment */
.software-atlas::after {
    width: min(860px, 54vw);
    aspect-ratio: 1347 / 809;
    right: -6%;
    top: 13%;
    opacity: .16;
    background-image:
        url("../images/brand-v1/te-datacenter-environment.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.08) brightness(1.04);
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 16%, #000 44%, #000 82%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 84%, transparent 100%);
    mask-composite: intersect;
}

/* Professional — compact apparel crop kept below native width */
.professional-profile::after {
    width: min(470px, 32vw);
    aspect-ratio: 536 / 242;
    right: 3%;
    bottom: 5%;
    opacity: .14;
    background-image:
        url("../images/brand-v1/te-apparel.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.04) brightness(1.05);
    mask-image:
        radial-gradient(ellipse at center, #000 20%, rgba(0,0,0,.78) 48%, transparent 78%);
}

/* Systems / network — building crop remains under source width */
.network::after {
    width: min(455px, 31vw);
    aspect-ratio: 505 / 242;
    right: 4%;
    top: 16%;
    opacity: .16;
    background-image:
        url("../images/brand-v1/te-building.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.06) brightness(1.05);
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 24%, #000 80%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 84%, transparent 100%);
    mask-composite: intersect;
}

/* Project engine / physical build — vehicle crop below native width */
.engine-section::after {
    width: min(440px, 30vw);
    aspect-ratio: 488 / 310;
    left: 2%;
    bottom: 6%;
    opacity: .14;
    background-image:
        url("../images/brand-v1/te-construction-van.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.05) brightness(1.03);
    mask-image:
        radial-gradient(ellipse at center, #000 24%, rgba(0,0,0,.72) 52%, transparent 82%);
}

/* Story / media — full-resolution creative universe */
.story-engine::after {
    width: min(820px, 48vw);
    aspect-ratio: 1536 / 1024;
    right: -7%;
    bottom: -9%;
    opacity: .115;
    background-image:
        url("../images/brand-v1/the-shed-brandboard.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.04) brightness(1.02);
    mask-image:
        radial-gradient(ellipse at center, #000 14%, rgba(0,0,0,.66) 48%, transparent 78%);
}

/* Contact / partnership — vehicles crop below native width */
.contact::after {
    width: min(470px, 32vw);
    aspect-ratio: 510 / 242;
    right: 2%;
    bottom: 7%;
    opacity: .15;
    background-image:
        url("../images/brand-v1/te-vehicles.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.06) brightness(1.04);
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 20%, #000 84%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
    mask-composite: intersect;
}

/* Competence areas — stationery / product identity as a faint design layer */
.areas::after {
    width: min(760px, 48vw);
    aspect-ratio: 1536 / 1024;
    right: -10%;
    top: 2%;
    opacity: .085;
    background-image:
        url("../images/brand-v1/te-splash-wall.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.05) brightness(1.04);
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.52) 28%, #000 62%, transparent 100%);
}

/* Intro — real TE splash wall as distant environmental identity */
.intro::after {
    width: min(760px, 50vw);
    aspect-ratio: 1536 / 1024;
    left: -10%;
    bottom: -28%;
    opacity: .075;
    background-image:
        url("../images/brand-v1/te-splash-wall.webp");
    background-size: contain;
    background-position: center;
    filter: saturate(1.05) brightness(1.04);
    mask-image:
        radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.60) 50%, transparent 80%);
}

@media (max-width: 900px) {
    .software-atlas::after,
    .story-engine::after {
        opacity: .095;
        width: min(680px, 72vw);
    }

    .professional-profile::after,
    .network::after,
    .engine-section::after,
    .contact::after {
        opacity: .085;
    }

    .areas::after,
    .intro::after {
        opacity: .055;
    }
}

@media (max-width: 620px) {
    :where(
        .software-atlas,
        .professional-profile,
        .network,
        .engine-section,
        .story-engine,
        .contact,
        .areas,
        .intro
    )::after {
        opacity: .045;
        width: 86vw;
        right: -24vw;
        left: auto;
    }
}

/* Progressive, section-bound movement — environment moves, content does not. */
@supports (animation-timeline: view()) {
    .software-atlas::after,
    .professional-profile::after,
    .network::after,
    .engine-section::after,
    .story-engine::after,
    .contact::after,
    .areas::after,
    .intro::after {
        animation: teBrandEnvironmentDrift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        will-change: transform, opacity;
    }
}

@keyframes teBrandEnvironmentDrift {
    0% {
        transform: translate3d(0, 34px, 0) scale(.985);
    }
    45% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(0, -26px, 0) scale(1.012);
    }
}

@media (prefers-reduced-motion: reduce) {
    .software-atlas::after,
    .professional-profile::after,
    .network::after,
    .engine-section::after,
    .story-engine::after,
    .contact::after,
    .areas::after,
    .intro::after {
        animation: none !important;
        transform: none !important;
    }
}