.header {
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: #0c0e13;
    background-image:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(130, 18, 11, 0.55), transparent 65%),
        radial-gradient(ellipse 55% 45% at 85% 85%, rgba(30, 58, 105, 0.45), transparent 70%),
        radial-gradient(ellipse 45% 40% at 75% 15%, rgba(196, 88, 48, 0.15), transparent 70%);
}

/* Personal backdrop: a floating collage of my own app icons. */
.header-apps {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Darkening scrim so the icons stay atmospheric and the text stays readable. */
.header-apps::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at center,
        rgba(12, 14, 19, 0.55) 0%,
        rgba(12, 14, 19, 0.86) 72%);
}

.app-tile {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    opacity: 0;
    /* Entrance state: sunk + shrunk. Settles once .is-in is added on load. */
    transform: translateY(42px) scale(0.82) rotate(var(--r, 0deg));
    transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 1.1s ease;
    transition-delay: var(--ed, 0s);
}

.app-tile.is-in {
    opacity: var(--o, 0.5);
    transform: translateY(0) scale(1) rotate(var(--r, 0deg));
}

/* Parallax layer — JS updates --py on scroll so the tiles linger in view. */
.app-drift {
    width: 100%;
    height: 100%;
    transform: translateY(var(--py, 0px)) scale(var(--ms, 1));
    will-change: transform;
}

.app-tile img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 22%;
    object-fit: cover;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: appFloat var(--dur, 9s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes appFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
    .app-tile { transform: none; transition: opacity 0.6s ease; }
    .app-tile.is-in { transform: none; }
    .app-tile img { animation: none; }
    .app-drift { transform: scale(var(--ms, 1)); }
}

@media screen and (max-width: 600px) {
    /* Compact layout (--mx/--my/--msz) so every app icon stays fully on-screen. */
    .app-tile {
        left: var(--mx, var(--x));
        top: var(--my, var(--y));
        width: var(--msz, var(--s));
        height: var(--msz, var(--s));
    }
}

.inner-header {
    position: relative;
    z-index: 2;
    /* Slightly less than full viewport so the next section peeks in. */
    min-height: 85vh;
    min-height: 85svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

.header h1 {
    font-size: clamp(44px, 8vw, 72px);
    font-weight: 700;
    letter-spacing: -2px;
    text-shadow: none;
    margin-bottom: 16px;
}

.header h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 300;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 40px;
}

/* App-grid entrance stagger.
   The cascade is derived from CSS variables (base delay + per-card step)
   instead of the hardcoded .delay-0Xs classes so each breakpoint can tune it.
   --app-delay-base/-step live on the block and are inherited down; each card
   carries its own --app-index. These defaults reproduce the original
   0.2s..0.6s cascade for the multi-column layouts. */
#app .team-leader-block {
    --app-delay-base: 0.2s;
    --app-delay-step: 0.1s;
}

#app .team-leader-box:nth-of-type(1) { --app-index: 0; }
#app .team-leader-box:nth-of-type(2) { --app-index: 1; }
#app .team-leader-box:nth-of-type(3) { --app-index: 2; }
#app .team-leader-box:nth-of-type(4) { --app-index: 3; }
#app .team-leader-box:nth-of-type(5) { --app-index: 4; }

#app .team-leader-box .wow {
    --app-delay: calc(var(--app-delay-base) + var(--app-index, 0) * var(--app-delay-step));
    animation-delay: var(--app-delay);
    -webkit-animation-delay: var(--app-delay);
}

/* Single-column layout: no per-card step, so every app shares --app-delay-base
   and fades in together rather than trickling down the stacked column. */
@media only screen and (max-width: 767px) {
    #app .team-leader-block {
        --app-delay-step: 0s;
    }
}