/* ============================================================
   HERO SLIDE 2 — Generator Blueprint + Controllers
   ============================================================ */

/* ── Canvas ──────────────────────────────────────────────── */
#s2Canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: block;
}

/* ── Generator backdrop ──────────────────────────────────── */
.s2-gen-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at left center, #0a3a5c 0%, #001b30 70%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 38%, rgba(0,0,0,0.25) 62%, transparent 80%);
    mask-image: linear-gradient(to right, black 0%, black 38%, rgba(0,0,0,0.25) 62%, transparent 80%);
}

/* ── Override slide 2 overlay ─────────────────────────────── */
.hero-slide-2 .hero-overlay {
    z-index: 5;
    background: linear-gradient(
        to left,
        rgba(0, 6, 20, 0.93) 0%,
        rgba(0, 12, 35, 0.74) 46%,
        rgba(0, 18, 50, 0.12) 70%,
        transparent 100%
    );
}

/* ── Controllers container ───────────────────────────────── */
.s2-controllers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* ── Individual controller ───────────────────────────────── */
.s2-ctrl {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateX(-100px) scale(0.84);
    transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.s2-ctrl img {
    display: block;
    border-radius: 6px;
    filter: drop-shadow(0 0 16px rgba(0, 170, 255, 0.70))
            drop-shadow(0 0 38px rgba(0, 120, 220, 0.32))
            drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}

/* DC10G — compact, lower-left */
.s2-ctrl-dc10g {
    left: 4%;
    bottom: 13%;
}
.s2-ctrl-dc10g img { width: 155px; }

/* DC100D MK2 — advanced, upper area */
.s2-ctrl-dc100d {
    left: 18%;
    top: 11%;
}
.s2-ctrl-dc100d img { width: 238px; }

/* ATS320AC — upper right of visual area */
.s2-ctrl-ats320ac {
    left: 34%;
    top: 16%;
}
.s2-ctrl-ats320ac img { width: 106px; }

/* GV58VS — left side, mid height */
.s2-ctrl-gv58vs {
    left: 9%;
    top: 37%;
}
.s2-ctrl-gv58vs img { width: 96px; }

/* GM50H MK3 — lower right of visual area */
.s2-ctrl-gm50h {
    left: 33%;
    bottom: 17%;
}
.s2-ctrl-gm50h img { width: 112px; }

/* BCC6A MK2 — center, below midpoint */
.s2-ctrl-bcc6a {
    left: 23%;
    top: 51%;
}
.s2-ctrl-bcc6a img { width: 96px; }

/* ── Controller label ────────────────────────────────────── */
.s2-ctrl-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 3.5px;
    color: rgba(80, 200, 255, 0.75);
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 180, 255, 0.5);
}
.s2-ctrl-label span { color: #e77817; }

/* ── Active state — triggered by JS (staggered cascade) ─── */
.hero-slide-2.s2-active .s2-ctrl-dc10g   { opacity: 1; transform: translateX(0) scale(1); transition-delay: 0.30s; }
.hero-slide-2.s2-active .s2-ctrl-gv58vs  { opacity: 1; transform: translateX(0) scale(1); transition-delay: 0.70s; }
.hero-slide-2.s2-active .s2-ctrl-ats320ac{ opacity: 1; transform: translateX(0) scale(1); transition-delay: 1.05s; }
.hero-slide-2.s2-active .s2-ctrl-dc100d  { opacity: 1; transform: translateX(0) scale(1); transition-delay: 1.50s; }
.hero-slide-2.s2-active .s2-ctrl-bcc6a   { opacity: 1; transform: translateX(0) scale(1); transition-delay: 2.10s; }
.hero-slide-2.s2-active .s2-ctrl-gm50h   { opacity: 1; transform: translateX(0) scale(1); transition-delay: 2.65s; }

/* ── Container z-index ───────────────────────────────────── */
.hero-slide-2 .container { z-index: 6; }

/* ── Hide visuals on mobile ──────────────────────────────── */
@media (max-width: 991.98px) {
    .s2-controllers,
    .s2-gen-backdrop { display: none; }
}