/* ══════════════════════════════════════════════════════════════════
   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  (cierra → splash → fade)
   ══════════════════════════════════════════════════════════════════ */
/* Dos triángulos OSCUROS divididos en diagonal a ~30°. Empiezan
   ABIERTOS (cada uno desplazado fuera de pantalla en su propia
   dirección) y CIERRAN hacia el centro en 1.5s. El logo vive
   en el borde de unión — la línea diagonal — y aparece cuando
   los paneles se juntan, simulando que "conecta" las dos mitades.

   Secuencia (orquestada con cortina.js):
     Fase 1  (0   → 1.5s)  : los paneles CIERRAN hacia translate(0,0).
                              El logo fade-in simultáneo.
     Fase 2  (1.5s → 2.5s) : la cortina permanece a pantalla completa
                              como splash screen (1s de "respiro").
     Fase 3  (2.5s → 4s)   : .cortina-fade desvanece todo suavemente
                              (1.5s) dejando ver la página. */

.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. */
    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恢复了
   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, #1a1a2e 0%, #16162a 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    /* Empieza "abierto" — desplazado hacia fuera arriba-izquierda. */
    transform: translate(-130%, -130%);
    /* Cierra hacia translate(0,0) en 1.5s suave. */
    animation: cortina-cerrar-top 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) 0s 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, #16162a 0%, #0d0d1a 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    /* Empieza "abierto" — desplazado hacia fuera abajo-derecha. */
    transform: translate(130%, 130%);
    /* Cierra hacia translate(0,0) en 1.5s suave. */
    animation: cortina-cerrar-bottom 1.5s cubic-bezier(0.65, 0.05, 0.36, 1) 0s forwards;
}

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

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

/* ── 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 suave JUSTO cuando los paneles terminan
   de cerrarse (delay 1.3s → empieza a verse mientras cuadran el
   cruce, plenamente visible al final del cierre). */
.page-curtain__img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    max-width: 280px;
    width: 28vw;
    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 suave coincidiendo con el cierre. */
    animation: cortina-logo-in 1s cubic-bezier(0.16, 1, 0.3, 1) 1.3s 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); }
}

/* 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;
}

/* ── Fase 3: desvanecer todo el bloque ──
   El JS añade .cortina-fade a .page-curtain cuando pasan ~2.5s.
   Toda la cortina (paneles + logo) se va a opacity 0 en 1.5s. */
.page-curtain.cortina-fade {
    opacity: 0;
}

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

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

/* ── Contenedores genéricos de animación ── */
.intro-fade,
.intro-fade-up,
.intro-fade-down,
.intro-fade-left,
.intro-fade-right,
.intro-scale {
    opacity: 0;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-fade       { animation-name: fade-in;        animation-delay: 1s; }
.intro-fade-up    { animation-name: fade-up;         animation-delay: 1s; }
.intro-fade-down  { animation-name: fade-down;       animation-delay: 1s; }
.intro-fade-left  { animation-name: fade-from-left;  animation-delay: 1s; }
.intro-fade-right { animation-name: fade-from-right; animation-delay: 1s; }
.intro-scale      { animation-name: scale-in;       animation-delay: 1s; }

/* Delays ayudan a crear efecto de "cascada" */
.delay-1 { animation-delay: 1.1s; }
.delay-2 { animation-delay: 1.2s; }
.delay-3 { animation-delay: 1.3s; }
.delay-4 { animation-delay: 1.4s; }
.delay-5 { animation-delay: 1.5s; }
.delay-6 { animation-delay: 1.6s; }

@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,
.laser-hero-content,
.it-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 ── */
.laser-hero-icon,
.it-hero-icon,
.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;
}

/* ── 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; }

/* ── Catalog cards (3D & Laser) ── */
.laser-catalog-card {
    opacity: 0;
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.laser-catalog-column:nth-child(1) .laser-catalog-card:nth-child(1) { animation-delay: 1.7s; }
.laser-catalog-column:nth-child(1) .laser-catalog-card:nth-child(2) { animation-delay: 1.85s; }
.laser-catalog-column:nth-child(1) .laser-catalog-card:nth-child(3) { animation-delay: 2s; }
.laser-catalog-column:nth-child(2) .laser-catalog-card:nth-child(1) { animation-delay: 1.78s; }
.laser-catalog-column:nth-child(2) .laser-catalog-card:nth-child(2) { animation-delay: 1.93s; }
.laser-catalog-column:nth-child(2) .laser-catalog-card:nth-child(3) { animation-delay: 2.08s; }

/* ── Catálogo / mini-cards title ── */
.laser-catalog-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 ── */
.laser-cta,
.about-cta {
    opacity: 0;
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.9s forwards;
}
.laser-cta-icon {
    opacity: 0;
    animation: scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s forwards;
}

/* ── About cards ── */
.about-core-card,
.about-value-card {
    opacity: 0;
    animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.about-core-card:nth-child(1) { animation-delay: 1.7s; }
.about-core-card:nth-child(2) { animation-delay: 1.85s; }
.about-core-card:nth-child(3) { animation-delay: 2s; }
.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; }

/* ── Contact side cards ── */
.contact-side-col .contact-insta-card,
.contact-side-col .contact-info-card {
    opacity: 0;
    animation: fade-from-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.contact-side-col > *:nth-child(1) { animation-delay: 1.9s; }
.contact-side-col > *:nth-child(2) { animation-delay: 2.05s; }
.contact-side-col > *:nth-child(3) { animation-delay: 2.2s; }

/* ══════════════════════════════════════════════════════════════════
   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,
.laser-catalog-card,
.laser-example-card,
.port-card,
.port-card-btn,
.port-filter-btn,
.about-core-card,
.about-value-card,
.about-cta-btn,
.laser-cta-btn,
.laser-hero-btn,
.it-hero-btn,
.contact-hero-btn,
.contact-insta-card,
.contact-info-card,
.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);
}