/* =========================================
        ANIMACION TEXTO + JS
        ========================================= */

 /* ----------------------------
        Sistema 1: fade simple 
        ---------------------------- */
 .reveal {
     opacity: 0;
     transform: translateY(20px);
     transition: all 1s cubic-bezier(.16, 1, .3, 1);
 }

 .reveal.is-visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* ----------------------------
        Sistema 2 Text mask lineas
        ---------------------------- */
 .line {
     overflow: hidden;
 }

 .line-inner {
     display: block;
     transform: translateY(110%);
     transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
 }

 .reveal-title.is-visible .line-inner {
     transform: translateY(0);
 }

 /* stagger limpio */
 .reveal-title.is-visible .line:nth-child(1) .line-inner {
     transition-delay: 0s;
 }

 .reveal-title.is-visible .line:nth-child(2) .line-inner {
     transition-delay: 0.22s;
 }

 .reveal-title.is-visible .line:nth-child(3) .line-inner {
     transition-delay: 0.34s;
 }



 /* =========================================
   INTRO MEDIA
   Contenedor que crec con el scroll
   ========================================= */
body {
    overflow-x: hidden;
}

.intro-media {
    height: 200vh;
    position: relative;
    margin-top: -20vh;
}

.intro-media-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.intro-text {
    position: absolute;
    font-size: clamp(2rem, 9vw, 9rem);
    white-space: nowrap;
    z-index: 2;
}

.left {
    left: 20vw;
}

.right {
    right: 20vw;
}

/*  FINAL al terminar el scroll */
.intro-media-wrapper {
    /* 👇 El tamaño máximo es: viewport - navbar */
    height: calc(100vh - 150px);  /* 👈 Ajusta "80px" a la altura real de tu navbar */
    aspect-ratio: 4 / 5;
    max-width: 92vw;
    transform-origin: center center;
    will-change: transform;
    flex-shrink: 0;
}

.intro-media-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 🖥️ Desktop: máximo 1400px, pero también considerando el navbar */
@media (min-width: 1200px) {
    .intro-media-wrapper {
        height: min(calc(100vh - 80px), 1400px);
    }
}

/* 📱 Móvil: mismo cálculo */
@media (max-width: 768px) {
    .intro-media-wrapper {
        height: calc(100vh - 80px);
    }

    .left { left: 10vw;}
    .right { right: 10vw;}
}

 
/* Poster */
.intro-media-wrapper {
    position: relative;
    cursor: pointer;
}

.intro-media-wrapper .poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --------------------------
    Indicador de Play
--------------------------- */
/* Botón play SIEMPRE visible */
.play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    z-index: 3;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    
    /* 👇 Animación sutil de "pulso" para llamar la atención */
    animation: breathe 2.5s ease-in-out infinite;
}

/* 👇 Animación breathing */
@keyframes breathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 6px 40px rgba(0, 0, 0, 0.35);
    }
}

/* 👇 Hover: detiene la animación y crece un poco */
.play-indicator:hover {
    animation: none;
    transform: translate(-50%, -50%) scale(1.15);
    background: #fff;
}

/* 👇 Anillo exterior que refuerza el "es un video" */
.play-indicator::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    animation: ring 2.5s ease-in-out infinite;
}

@keyframes ring {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* Ícono de play (triángulo) */
.play-indicator svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;  /* compensación óptica del triángulo */
}

/* --------------------------
    Modal Video
--------------------------- */
/* Bloquear scroll cuando modal está abierto */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.video-modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;  /* formato vertical 4:5 */
    aspect-ratio: 4 / 5;
}

.modal-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.close-modal {
    position: absolute;
    top: -90%;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
}


/* --------------------------
   Loader del video
--------------------------- */

.video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 👇 Mostrar loader solo cuando tiene la clase active */
.video-loader.active {
    opacity: 1;
}

/* Spinner minimalista */
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ocultar controles del video mientras carga */
#reelVideo.loading {
    opacity: 0.3;
}


/* ================================================
    MARQUEE
================================================ */
.marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    pointer-events: none;
    z-index: 9999;
    background: transparent !important;
     white-space: nowrap;
}

.marquee-inner {
    display: flex;
    width: max-content;
    animation: marquee 20s linear infinite;
}

.marquee-inner h1 {
    color: var(--color-dark);
    font-size: 8rem;
    white-space: nowrap;
    margin: 0;
    padding-right: 5px;
    letter-spacing: -0.04em;
    /* espacio entre repeticiones */
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}



/* ================================================
ANIMACION FADE UP
================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: transform, opacity;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}




/* ================================================
    TEXT REVEAL
================================================ */
.text-reveal {
    color: #fff;
}

.text-reveal span {
    position: relative;
    color: rgba(0, 0, 0, 0.1);
    font-size: 1.1em;
    transition: 0.25s;
}

.text-reveal span.active {
    color: var(--color-dark);
}