/* ==================================================================== */
/* Trabajos Especiales · hero sincronizado con el scroll                 */
/* Diseño CAD → armario fabricado y montado → despiece.                  */
/* Solo se carga en page-trabajos-especiales.php (ver functions.php).    */
/* ==================================================================== */

/* Fondo continuo: los tonos coinciden con los bordes de la fotografía
   (≈ #e7e7e7 a la izquierda, ≈ #ededed a la derecha) para que escenario
   e imagen sean un único plano. */
.te-hero {
    --te-bg-l: #e7e7e7;
    --te-bg-r: #ededed;
    --te-paper: #ebebeb;
    --te-ink: 27, 31, 40;
    position: relative;
    background: linear-gradient(90deg, var(--te-bg-l), var(--te-bg-r));
}
.te-hero__sticky {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 0 16px;
}
.te-hero__copy {
    position: relative;
    z-index: 20;
    text-align: center;
}
.te-hero__frame {
    position: relative;
    margin-top: 16px;
    padding: 0 16px;
}
.te-stage {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 1402 / 1122;
    container-type: inline-size;
    /* Fundido de bordes hacia el color del escenario: sin cortes ni halos */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
}
.te-stage img {
    display: block;
    user-select: none;
    pointer-events: none;
}
.te-plate,
.te-final,
.te-paper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.te-final { z-index: 10; }

/* Papel técnico de la fase CAD: retícula fina y retícula mayor */
.te-paper {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(var(--te-ink), 0.09) 1px, transparent 1px) 0 0 / 10cqw 10cqw,
        linear-gradient(0deg, rgba(var(--te-ink), 0.09) 1px, transparent 1px) 0 0 / 10cqw 10cqw,
        linear-gradient(90deg, rgba(var(--te-ink), 0.045) 1px, transparent 1px) 0 0 / 2cqw 2cqw,
        linear-gradient(0deg, rgba(var(--te-ink), 0.045) 1px, transparent 1px) 0 0 / 2cqw 2cqw,
        var(--te-paper);
}

/* Cada pieza: versión fabricada (te-real) y versión CAD (te-cad) superpuestas */
.te-part {
    position: absolute;
}
.te-part .te-real {
    width: 100%;
    height: auto;
}
.te-part .te-cad {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Estado estático (sin JS / movimiento reducido / piezas no disponibles):
   solo la imagen original */
.te-hero:not(.te-anim) .te-plate,
.te-hero:not(.te-anim) .te-paper,
.te-hero:not(.te-anim) .te-part {
    display: none;
}

/* Hasta que todas las capas han cargado (.te-ready) se ve la imagen
   original; si alguna falla, despiece.js vuelve al modo estático. */
.te-anim:not(.te-ready) .te-plate,
.te-anim:not(.te-ready) .te-paper,
.te-anim:not(.te-ready) .te-part {
    visibility: hidden;
}

/* Estado animado. --real (0 = CAD, 1 = fabricado) lo fija despiece.js en la
   sección; --e (0 = montado, 1 = posición de la foto) en cada pieza.
   Solo se animan transform y opacity. */
.te-anim .te-part {
    --e: 0;
    transform-origin: 0 0;
    transform: translate3d(calc(var(--dx) * 1cqw * (1 - var(--e))), calc(var(--dy) * 1cqw * (1 - var(--e))), 0);
    will-change: transform;
}
.te-anim .te-paper { opacity: calc(1 - var(--real, 0)); }
.te-anim .te-part .te-real { opacity: var(--real, 0); }
.te-anim .te-part .te-cad { opacity: calc(1 - var(--real, 0)); }
.te-anim.te-ready .te-final {
    opacity: var(--final, 0);
}
/* Fundido breve solo en el instante en que arranca la animación */
.te-anim.te-switching .te-final {
    transition: opacity 0.45s ease;
}

/* Recorrido de scroll: el escenario queda fijo durante toda la secuencia */
.te-hero.te-anim {
    height: calc(100svh - var(--hdr, 64px) + 170svh);
}
.te-anim .te-hero__sticky {
    position: sticky;
    top: var(--hdr, 64px);
    height: calc(100svh - var(--hdr, 64px));
    overflow: hidden;
}
.te-anim .te-hero__frame {
    flex: 1;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
}
.te-anim .te-stage {
    width: min(100%, 1200px, 100cqh * 1402 / 1122);
}

@media (min-width: 768px) {
    .te-hero.te-anim { height: calc(100svh - var(--hdr, 68px) + 230svh); }
    .te-hero__sticky { padding-top: 28px; }
    /* Como en el diseño original, el texto se superpone a la franja
       superior vacía de la fotografía */
    .te-hero__copy {
        position: absolute;
        inset: 28px 0 auto;
    }
    .te-hero__frame { margin-top: 56px; }
}

/* Ventanas de poca altura: el texto va encima del escenario (no superpuesto)
   y el armario se ajusta al espacio restante, sin tocar los botones. */
@media (min-width: 768px) and (max-height: 860px) {
    .te-hero__sticky { padding-top: 20px; }
    .te-hero__copy {
        position: relative;
        inset: auto;
    }
    .te-hero__frame { margin-top: 12px; }
}