/* ══════════════════════════════════════════════════════════════════
   SocioTI — Transiciones & Cortina diagonal
   ────────────────────────────────────────────────────────────────────
   Este archivo se carga en TODAS las páginas.
   Contiene:
     1) La "cortina diagonal" (.page-curtain) — dos paneles oscuros
        divididos a ~30° que vuelan desde fuera, CIERRAN el centro
        y luego se desvanecen. Cada panel lleva una imagen centrada.
     2) Animaciones de entrada para los elementos del sitio
        (navbar, hero, service cards, mini cards, forms, cta, footer).
     3) Utilidades de reveal-on-scroll (.reveal) que se activan
        añadiendo la clase .is-visible desde cortina.js (IntersectionObserver).
   ══════════════════════════════════════════════════════════════════ */

/* ── Reduce motion: respeta la preferencia del usuario ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   1. CORTINA DIAGONAL  (splash → abre → fade)
   ══════════════════════════════════════════════════════════════════ */
/* Dos triángulos OSCUROS divididos en diagonal a ~30°. Empiezan
   CERRADOS (.translate(0,0)) cubriendo toda la pantalla — splash con
   el logo visible — y se ABREN hacia fuera en 1.5s. El logo vive
   en el borde de unión entre los dos paneles y desaparece con la
   cortina al abrirse.

   Secuencia (orquestada con cortina.js):
     Fase 1  (0   → 1s)   : la cortina permanece a pantalla completa
                            como splash screen (1s de "respiro") con
                            el logo ya visible.
     Fase 2  (1s  → 2.5s) : los paneles ABREN hacia fuera (translate
                            negativo/positivo) dejando ver la página.
                            El logo se desvanece simultáneo.
     Fase 3  (2.5s)       : elimina el nodo y libera el scroll. */

.page-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    /* Esta transición sólo se dispara cuando el JS añade .cortina-fade
       (desvanecimiento del logo al abrir). */
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cada panel es un triángulo (clip-path) que cubre la mitad diagonal
   de la pantalla cuando está en translate(0,0). Al desplazarlo hacia
   su posición neutra se ven ambos triángulos juntos tapando todo. */
.page-curtain__panel {
    position: absolute;
    inset: 0;
    will-change: transform;
    /* overflow visible por defecto; el clip-path ya produce el triángulo. */
}

/* ── Panel superior (NOROESTE) ──
   clip-path = triángulo con vértices en (0,0), (100%,0) y (0,100%).
   La línea diagonal va de la esquina superior-derecha (100%,0)
   a la esquina inferior-izquierda (0,100%) — esto forma un
   ángulo de ~30° respecto de la horizontal en pantallas 16:9
   (ancho mucho mayor que alto → pendiente muy tendida). */
.page-curtain__panel--top {
    background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    /* Empieza "cerrado" — cubriendo la pantalla (translate 0,0). */
    transform: translate(0, 0);
    /* Abre hacia fuera arriba-izquierda en 1.5s (tras 1s de splash). */
    animation: cortina-abrir-top 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) 1s forwards;
}

/* ── Panel inferior (SURESTE) ──
   El complemento del superior: triángulo con vértices en
   (100%,0), (100%,100%) y (0,100%). */
.page-curtain__panel--bottom {
    background: linear-gradient(135deg, #000000 0%, #050505 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    /* Empieza "cerrado" — cubriendo la pantalla (translate 0,0). */
    transform: translate(0, 0);
    /* Abre hacia fuera abajo-derecha en 1.5s (tras 1s de splash). */
    animation: cortina-abrir-bottom 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) 1s forwards;
}

/* ── Animaciones: paneles vuelan de translate(0,0) hacia fuera ── */
@keyframes cortina-abrir-top {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-130%, -130%); }
}

@keyframes cortina-abrir-bottom {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(130%, 130%); }
}

/* ── Logo en el BORDE DE UNIÓN diagonal ──
   No está dentro de ningún panel — vive en .page-curtain como hijo
   directo, por encima de los paneles (z-index 3). Se queda quieto
   en el punto medio de la diagonal a ~30° (centro de la pantalla
   pero desplazado hacia la línea), dando el efecto de "puente"
   entre las dos mitades.

   Aparece con un fade-in INMEDIATO al cargar (sin delay, ya que
   la pantalla empieza cubierta) y se desvanece cuando el JS añade
   .cortina-fade coincidiendo con la apertura. */
.page-curtain__img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    max-width: 420px;
    width: 42vw;
    height: auto;
    object-fit: contain;
    /* Lo trasladamos a la línea diagonal a 30°:
       desde el centro, el punto medio de la diagonal va un poco
       hacia arriba-izquierda (donde corta la línea). Desfase
       pequeño (-8% ancho, -6% alto) para que quede "al borde". */
    transform: translate(-58%, -54%) scale(1);
    /* No hereda transform del panel: es hijo de .page-curtain. */
    transform-origin: center center;
    opacity: 0;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.85));
    user-select: none;
    pointer-events: none;
    /* Fade-in INMEDIATO (sin delay) — el splash ya está cubierto.
       Dura 0.4s para que termine ANTES de que disparemos el fade-out
       a los 0.5s (cortina.js → .cortina-fade). */
    animation: cortina-logo-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}

@keyframes cortina-logo-in {
    0%   { opacity: 0;    transform: translate(-58%, -54%) scale(0.92); }
    100% { opacity: 0.95; transform: translate(-58%, -54%) scale(1); }
}

/* ── Fase 2-3: desvanecer el logo ANTES de que los paneles abran ──
    El JS añade .cortina-fade a .page-curtain a los 0.5s — ANTES de
    que los paneles arranquen su apertura (a los 1s). Reemplazamos la
    animación de entrada por una de SALIDA (cortina-logo-out) de modo
    que NO haya dos animaciones peleando por `opacity` (lo que pasa si
    se mezcla `animation: ... forwards` con `transition: opacity`). El
    logo se va a opacity 0 en 0.45s (~0.5s + 0.45s = 0.95s), de modo
    que cuando los paneles empiezan a volar hacia fuera ya no se ve. */
.page-curtain.cortina-fade .page-curtain__img {
    animation: cortina-logo-out 0.45s ease-out forwards;
}

@keyframes cortina-logo-out {
    0%   { opacity: 0.95; transform: translate(-58%, -54%) scale(1); }
    100% { opacity: 0;    transform: translate(-58%, -54%) scale(1); }
}

/* Segunda imagen del HTML (la del panel inferior) la ocultamos
   porque ahora el logo vive en el borde de unión — sólo se usa
   una imagen central. La dejamos en el HTML por si el cliente
   quiere reactivar dos logos en el futuro. */
.page-curtain__panel--bottom .page-curtain__img {
    display: none;
}

/* Mientras la cortina está activa, se bloquea el scroll */
body.cortina-activa {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   2. ANIMACIONES DE ENTRADA (al cargar la página)
   ══════════════════════════════════════════════════════════════════ */

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-from-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-from-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
   3. APLICACIÓN DE LAS ANIMACIONES A ELEMENTOS DEL HTML
   ══════════════════════════════════════════════════════════════════ */

/* ── Navbar ── */
.navbar {
    animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
    opacity: 0;
}

/* ── Hero (home + sub-páginas) ── */
.hero-content,
.about-hero-content,
.port-hero-content,
.contact-hero-content {
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
    opacity: 0;
}

/* ── Hero iconos ── */
.port-hero-icon,
.contact-hero-icon {
    animation: scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
    opacity: 0;
}

/* ── Título del hero ── */
.hero-subtitle,
.laser-hero-title,
.it-hero-title,
.about-hero-title,
.port-hero-title,
.contact-hero-title {
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
    opacity: 0;
}

/* ── Descripción / subtítulo del hero ── */
.hero-desc,
.laser-hero-subtitle,
.it-hero-subtitle,
.about-hero-desc,
.contact-hero-subtitle {
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
    opacity: 0;
}

/* ── Botones del hero ── */
.hero-buttons,
.laser-hero-buttons,
.it-hero-buttons,
.contact-hero-buttons {
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.55s forwards;
    opacity: 0;
}

.port-hero-btn {
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
    opacity: 0;
}

/* ── 3D & Laser: orden de aparición propio ──
   En esta página el hero tiene un vídeo de fondo cíclico y queremos
   un orden distinto al del resto de páginas: el TÍTULO aparece
   PRIMERO, seguido del icono, el subtítulo y los botones.
   Estas reglas pisan a las generales de arriba (.laser-hero-*,
   .laser-hero-title, etc.) porque son selectores más específicos y
   aparecen después en la cascada. */
.laser-hero-title {
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}
.laser-hero-icon {
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.30s forwards;
}
.laser-hero-subtitle {
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.45s forwards;
}
.laser-hero-buttons {
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.60s forwards;
}

/* ── Service cards (home) ── */
.service-card {
    opacity: 0;
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.service-card.it-card    { animation-delay: 1.7s; }
.service-card.laser-card { animation-delay: 1.85s; }

/* ── Mini cards (IT Support) ── */
.it-mini-card {
    opacity: 0;
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.it-mini-cards-column:nth-child(1) .it-mini-card:nth-child(1) { animation-delay: 1.7s; }
.it-mini-cards-column:nth-child(1) .it-mini-card:nth-child(2) { animation-delay: 1.8s; }
.it-mini-cards-column:nth-child(1) .it-mini-card:nth-child(3) { animation-delay: 1.9s; }
.it-mini-cards-column:nth-child(2) .it-mini-card:nth-child(1) { animation-delay: 1.75s; }
.it-mini-cards-column:nth-child(2) .it-mini-card:nth-child(2) { animation-delay: 1.85s; }
.it-mini-cards-column:nth-child(2) .it-mini-card:nth-child(3) { animation-delay: 1.95s; }

/* ── Catálogo / mini-cards title ── */
.port-projects-title {
    opacity: 0;
    animation: fade-in 0.6s ease-out 1.65s forwards;
}

/* ── Formularios ── */
.laser-form-section,
.it-form-section,
.contact-layout {
    opacity: 0;
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.7s forwards;
}

.laser-form-title,
.it-form-title,
.contact-form-title {
    opacity: 0;
    animation: fade-down 0.6s ease-out 1.8s forwards;
}

/* Cada grupo del formulario entra uno detrás de otro, suavemente */
.laser-form > .laser-form-row:nth-child(1),
.it-form > .it-form-row:nth-child(1),
.contact-form > .contact-form-row:nth-child(1) {
    opacity: 0;
    animation: fade-up 0.5s ease-out 1.95s forwards;
}
.laser-form > .laser-form-row:nth-child(2),
.laser-form > .laser-form-group:nth-child(3),
.it-form > .it-form-row:nth-child(2),
.it-form > .it-form-group:nth-child(3),
.contact-form > .contact-form-group:nth-child(2) {
    opacity: 0;
    animation: fade-up 0.5s ease-out 2.05s forwards;
}
.laser-form > .laser-form-row:nth-child(4),
.laser-form > .laser-form-group:nth-child(4),
.it-form > .it-form-group:nth-child(3),
.contact-form > .contact-form-group:nth-child(3) {
    opacity: 0;
    animation: fade-up 0.5s ease-out 2.15s forwards;
}
.laser-form-submit,
.it-form-submit,
.contact-form-submit {
    opacity: 0;
    animation: scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s forwards;
}

/* ── CTA final ── */
.about-cta {
    opacity: 0;
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.9s forwards;
}

.about-value-card {
    opacity: 0;
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.about-value-card:nth-child(1) { animation-delay: 1.75s; }
.about-value-card:nth-child(2) { animation-delay: 1.9s; }
.about-value-card:nth-child(3) { animation-delay: 2.05s; }
.about-value-card:nth-child(4) { animation-delay: 2.2s; }
.about-cta-title { animation: fade-in 0.6s ease-out 2s forwards; opacity: 0; }
.about-cta-btn   { animation: fade-up 0.6s ease-out 2.15s forwards; opacity: 0; }

/* ── Portfolio: filtros + grid ── */
.port-filters {
    opacity: 0;
    animation: fade-down 0.6s ease-out 1.75s forwards;
}
.port-card {
    opacity: 0;
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.port-card:nth-child(1) { animation-delay: 1.85s; }
.port-card:nth-child(2) { animation-delay: 1.95s; }
.port-card:nth-child(3) { animation-delay: 2.05s; }
.port-card:nth-child(4) { animation-delay: 2.15s; }
.port-card:nth-child(5) { animation-delay: 2.25s; }
.port-card:nth-child(6) { animation-delay: 2.35s; }
.port-card:nth-child(7) { animation-delay: 2.45s; }
.port-card:nth-child(8) { animation-delay: 2.55s; }



/* ══════════════════════════════════════════════════════════════════
   4. REVEAL ON SCROLL  (utilizado vía .reveal + IntersectionObserver)
   ══════════════════════════════════════════════════════════════════ */
/* Permite animar elementos que aparecen abajo al hacer scroll. */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ══════════════════════════════════════════════════════════════════
   5. HOVER / INTERACTION TRANSITIONS  (mejoras de feedback)
   ══════════════════════════════════════════════════════════════════ */
/* Suaviza el movimiento de los enlaces del navbar al hacer hover. */
.navbar-links a,
.navbar-links a::after,
.hero-btn,
.service-card,
.service-card-btn,
.service-card-btn-r,
.it-mini-card,
.port-card,
.port-card-btn,
.port-filter-btn,
.about-value-card,
.about-cta-btn,
.laser-hero-btn,
.it-hero-btn,
.contact-hero-btn,
.footer-social a,
.footer-info a {
    transition: transform var(--transition, 0.25s ease),
                box-shadow var(--transition, 0.25s ease),
                background var(--transition, 0.25s ease),
                color var(--transition, 0.25s ease),
                border-color var(--transition, 0.25s ease);
}