/* =========================================================
   García Recta Design — proteccion-solar-brazo.css
   "Brazo Invisible": animación cinematográfica de despliegue
   y retracción, controlada 100% por scroll (GSAP ScrollTrigger,
   scrub — ver proteccion-solar-brazo.js).

   La sección se divide en dos mitades:
     · Izquierda → fotografía / video real (instalación real)
     · Derecha   → mecanismo técnico en SVG: carcasa, brazos
       articulados (2 segmentos + pivote), lona, barra frontal
       y sombra proyectada.

   Identidad de esta animación dentro del sistema: mientras
   Rollkit = desplazamiento y Plegakit = pliegue, Brazo Invisible
   = DESPLIEGUE + LUZ + SOMBRA.
   ========================================================= */

.ps-deploy { position: relative; height: 380vh; border-top: 1px solid var(--line); }
.ps-deploy-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--black); }
.ps-deploy-split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }

/* ---------- Mitad izquierda: material real ---------- */
.ps-deploy-media { position: relative; overflow: hidden; }
.ps-deploy-photo { filter: brightness(.62) saturate(.98); }
.ps-deploy-media-shade {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 85% 15%, rgba(10,10,10,.05) 0%, rgba(10,10,10,.5) 55%, rgba(10,10,10,.86) 100%);
    opacity: 0; transition: opacity .1s linear;
}
.ps-deploy-media-tag {
    position: absolute; left: 24px; bottom: 24px; z-index: 2;
}

/* ---------- Mitad derecha: mecanismo ---------- */
.ps-deploy-mechanism {
    position: relative; overflow: hidden;
    background: var(--carbon);
    border-left: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
}
.ps-deploy-mech-bg { position: absolute; inset: 0; z-index: 0; }
/* Fondo arquitectónico abstracto (nunca una foto falsa): líneas
   finas verticales sugieren una fachada/paramento detrás del
   mecanismo, coherente con el resto del sistema editorial. */
.ps-deploy-mech-lines {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(245,245,243,.05) 0, rgba(245,245,243,.05) 1px, transparent 1px, transparent 58px);
}
/* Luz → sombra en el fondo, ligada al mismo progreso que el resto
   de la escena (LUZ DIRECTA → LUZ FILTRADA → LUZ CONTROLADA). */
.ps-deploy-mech-light {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(245,245,243,.05) 0%, transparent 40%);
    opacity: .6; transition: opacity .1s linear;
}

.ps-deploy-svg { position: relative; z-index: 1; width: min(84%, 620px); overflow: visible; }

/* A. Carcasa — perfil delgado, grafito, prácticamente inmóvil */
.ba-housing { fill: #1c1c1c; stroke: rgba(245,245,243,.12); stroke-width: 1; }
.ba-housing-hi { stroke: rgba(245,245,243,.16); stroke-width: 1; }

/* B/C. Brazos: dos segmentos + pivote, discretos y precisos (no industriales) */
.ba-arm-seg { stroke: rgba(245,245,243,.55); stroke-width: 2.2; stroke-linecap: round; }
.ba-pivot { fill: var(--black); stroke: rgba(245,245,243,.6); stroke-width: 1.2; }

/* D. Lona — degradado translúcido, nunca un bloque opaco; deja ver el fondo */
.ba-fabric { transition: opacity .1s linear; }

/* E. Barra frontal — el borde físico delantero del toldo; único acento rojo */
.ba-frontbar { stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.ba-frontbar-hi { stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-linecap: round; }

/* F. Sombra proyectada — ver gradiente radial en el propio SVG (baShadowGrad) */
.ba-shadow { transition: none; }

/* Indicador de progreso — fino, rojo, discreto */
.ps-deploy-progress {
    position: absolute; z-index: 2; left: 28px; top: 50%; transform: translateY(-50%);
    width: 2px; height: 120px; background: rgba(245,245,243,.14);
}
.ps-deploy-progress-fill {
    position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
    background: var(--red); transition: height .1s linear;
}

.ps-deploy-label {
    position: absolute; z-index: 2; left: 28px; bottom: 40px;
    display: flex; align-items: baseline; gap: 14px;
}
.ps-deploy-stage-num { font-family: var(--font-display); font-size: 1rem; color: var(--red); }
.ps-deploy-stage-text {
    font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(245,245,243,.75); transition: opacity .3s ease;
}

@media (max-width: 900px) {
    .ps-deploy { height: 300vh; }
    .ps-deploy-split { grid-template-columns: 1fr; grid-template-rows: 42% 58%; }
    .ps-deploy-mechanism { border-left: none; border-top: 1px solid var(--line); }
    .ps-deploy-svg { width: 88%; }
    .ps-deploy-media-tag { display: none; }
    .ps-deploy-progress { left: 18px; height: 84px; }
    .ps-deploy-label { left: 18px; bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-deploy-media-shade, .ps-deploy-mech-light, .ps-deploy-progress-fill, .ba-fabric { transition: none !important; }
}