/* ================================================
   LEVEL TECH — FOLD SYSTEM CSS

   REGLA DE ORO:
   - lt-section     → overflow:visible (para que el
                       rotate de 30deg no se clipee)
   - lt-fold-wrap   → transparente, sin background.
                       overflow:hidden para clipear
                       el contenido internamente.
   - lt-section__inner → aquí va TODO el color/fondo

   Landscape >=1024px: rotate activo.
   Mobile/portrait: transform:none, sin efecto.
================================================ */

/* La sección contenedor debe ser visible
   para que el fold-wrap rotado no quede cortado */
[data-transition="rotate"] {
    overflow: visible;
}

.lt-fold-wrap {
    position: absolute;
    inset: 0;
    transform: none;    /* seguro para tablets táctiles — GSAP no corre */
    will-change: auto;
    overflow: hidden;   /* clipea el contenido del inner */
}

/* Estado inicial de GSAP — solo cuando hay puntero fino (mouse/trackpad).
   GSAP anima desde rotate(30deg) → rotate(0deg) al hacer scroll. */
.gsap-enabled .lt-fold-wrap {
    transform: rotate(30deg);
    transform-origin: bottom left;
    will-change: transform;
}

/* Mobile/portrait — refuerzo por si llega una tablet en portrait */
@media not ((min-width: 1440px) or ((min-width: 1200px) and (pointer: fine))) {
    .lt-fold-wrap {
        transform: none !important;
        transform-origin: unset !important;
        will-change: auto;
        position: absolute;
        inset: 0;
    }
}