/* ============================================================
   preloader-v2.css — Editorial Cinematic Reveal
   ------------------------------------------------------------
   Carga inicial premium: frame dorado se traza en secuencia,
   logo emerge, tagline aparece, dos cortinas se separan
   revelando el sitio (como una apertura de teatro/carta).

   Reversible: borrar este archivo + el <link> y volver al
   preloader original con los pulse rings.
   ============================================================ */

/* Override del preloader base */
.preloader {
    background: radial-gradient(ellipse at center, #2a1810 0%, #1a0e08 55%, #0a0402 100%);
    overflow: hidden;
    /* La transicion ahora la hacen las cortinas, no el opacity */
    transition: opacity 0.5s ease 0.7s, visibility 0s linear 1.2s;
}

/* Cortinas que cubren la pantalla y se separan al final */
.pre-curtain {
    position: absolute;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #2a1810 0%, #1a0e08 100%);
    z-index: 1;
    transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

.pre-curtain--top {
    top: 0;
    height: 50%;
    background: linear-gradient(180deg, #2a1810 0%, #1a0e08 100%);
}

.pre-curtain--bottom {
    bottom: 0;
    height: 50%;
    background: linear-gradient(0deg, #2a1810 0%, #1a0e08 100%);
}

.preloader.fade-out .pre-curtain--top {
    transform: translateY(-100%);
}

.preloader.fade-out .pre-curtain--bottom {
    transform: translateY(100%);
}

/* Stage = contenedor de todo el contenido del preloader */
.pre-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.4s ease;
}

.preloader.fade-out .pre-stage {
    opacity: 0;
}

/* Frame dorado contenedor del logo */
.pre-frame {
    position: relative;
    width: clamp(280px, 36vw, 420px);
    height: clamp(280px, 36vw, 420px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bordes del frame — 4 lineas que se trazan en secuencia */
.pre-frame::before,
.pre-frame::after,
.pre-frame > .pre-edge--bottom,
.pre-frame > .pre-edge--left {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--dorado-sutil, #C9A961), var(--dorado-brillante, #E4D4A8), var(--dorado-sutil, #C9A961), transparent);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

/* Top edge — animacion de izquierda a derecha */
.pre-frame::before {
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    transform-origin: left center;
    transform: scaleX(0);
    animation: edgeDraw 350ms cubic-bezier(0.4, 0, 0.2, 1) 200ms forwards;
}

/* Right edge — top a bottom */
.pre-frame::after {
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--dorado-sutil, #C9A961), var(--dorado-brillante, #E4D4A8), var(--dorado-sutil, #C9A961), transparent);
    transform-origin: top center;
    transform: scaleY(0);
    animation: edgeDraw 350ms cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}

/* Bottom edge — derecha a izquierda */
.pre-edge--bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    transform-origin: right center;
    transform: scaleX(0);
    animation: edgeDraw 350ms cubic-bezier(0.4, 0, 0.2, 1) 800ms forwards;
}

/* Left edge — bottom a top */
.pre-edge--left {
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(0deg, transparent, var(--dorado-sutil, #C9A961), var(--dorado-brillante, #E4D4A8), var(--dorado-sutil, #C9A961), transparent);
    transform-origin: bottom center;
    transform: scaleY(0);
    animation: edgeDraw 350ms cubic-bezier(0.4, 0, 0.2, 1) 1100ms forwards;
}

@keyframes edgeDraw {
    to { transform: scaleX(1) scaleY(1); }
}

/* Logo dentro del frame */
.pre-logo {
    width: 72%;
    height: 72%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.82) translateY(-6px);
    filter: blur(8px);
    animation: logoReveal 750ms cubic-bezier(0.34, 1.2, 0.34, 1) 1400ms forwards;
}

.pre-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 28px rgba(212, 175, 55, 0.35));
}

@keyframes logoReveal {
    50% {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Tagline debajo del frame */
.pre-tagline {
    margin: 36px 0 8px;
    font-family: 'Valerius', 'Playfair Display', serif;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: var(--dorado-brillante, #E4D4A8);
    letter-spacing: 0.8em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    animation: taglineReveal 700ms cubic-bezier(0.4, 0, 0.2, 1) 1900ms forwards;
    padding-left: 0.8em; /* compensar el ultimo letter-spacing */
}

@keyframes taglineReveal {
    to {
        opacity: 1;
        letter-spacing: 0.45em;
        transform: translateY(0);
    }
}

/* Subtitulo: ubicacion */
.pre-location {
    margin: 0;
    font-family: 'Causten', 'Poppins', sans-serif;
    font-size: clamp(0.7rem, 0.9vw, 0.78rem);
    color: rgba(228, 212, 168, 0.6);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    animation: locationReveal 500ms cubic-bezier(0.4, 0, 0.2, 1) 2350ms forwards;
}

@keyframes locationReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glow sutil pulsante en el frame mientras carga (despues que se traza) */
.pre-frame {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    animation: frameGlow 2s ease-in-out 1500ms infinite;
}

@keyframes frameGlow {
    0%, 100% {
        box-shadow:
            inset 0 0 80px rgba(212, 175, 55, 0.04),
            0 0 30px rgba(212, 175, 55, 0.05);
    }
    50% {
        box-shadow:
            inset 0 0 120px rgba(212, 175, 55, 0.10),
            0 0 60px rgba(212, 175, 55, 0.15);
    }
}

/* Reduced motion: solo fade simple, sin animaciones de stroke */
@media (prefers-reduced-motion: reduce) {
    .pre-frame::before,
    .pre-frame::after,
    .pre-edge--bottom,
    .pre-edge--left {
        transform: none !important;
        animation: none !important;
        opacity: 0.6;
    }
    .pre-logo {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .pre-tagline,
    .pre-location {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        letter-spacing: 0.4em;
    }
    .pre-frame {
        animation: none !important;
    }
    .pre-curtain {
        transition: opacity 0.3s ease !important;
    }
}

/* Mobile adjust */
@media (max-width: 640px) {
    .pre-frame {
        width: 70vw;
        height: 70vw;
        max-width: 320px;
        max-height: 320px;
    }
    .pre-tagline {
        font-size: 0.78rem;
        letter-spacing: 0.5em;
        margin-top: 28px;
    }
    .pre-location {
        font-size: 0.65rem;
        letter-spacing: 0.25em;
    }
}