/* =========================================================
   PROTECH ARGENTINA - Animaciones
   ---------------------------------------------------------
   Las clases .slide-right / .slide-left / .slide-top arrancan
   ocultas y se muestran cuando animaciones.js les agrega la
   clase .animate al entrar en pantalla.
   ========================================================= */


/* ---------- Logo del header ---------- */

.box {
    animation: slide-top 2s ease-out;
}


/* ---------- Menú ---------- */

.nav {
    animation: scale-up-hor-center 2s ease-out;
}


/* ---------- Carrusel principal ---------- */

.scale-up-ver-bottom {
    animation: scale-up-ver-bottom 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


/* ---------- Aparición al hacer scroll ---------- */

.slide-right {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.slide-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-left {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.slide-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-top {
    opacity: 0;
    animation: slide-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-top.animate {
    opacity: 1;
    transform: translateX(0);
}


/* ---------- Modal de producto ---------- */

.scale-up-center {
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


/* ---------- Título con parpadeo (Puntos de venta) ---------- */

.text-flicker-in-glow {
    animation: text-flicker-in-glow 4s linear both;
}


/* =========================================================
   Keyframes
   ========================================================= */

@keyframes slide-top {
    0%   { transform: translateY(100px); }
    100% { transform: translateY(0); }
}

@keyframes scale-up-hor-center {
    0%   { transform: scaleX(0.4); }
    100% { transform: scaleX(1); }
}

@keyframes scale-up-ver-bottom {
    0%   { transform: scaleY(0.4); transform-origin: 0% 100%; }
    100% { transform: scaleY(1);   transform-origin: 0% 100%; }
}

@keyframes scale-up-center {
    0%   { transform: scale(0.5); }
    100% { transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes text-flicker-in-glow {
    0%     { opacity: 0; }
    10%    { opacity: 0; text-shadow: none; }
    10.1%  { opacity: 1; text-shadow: none; }
    10.2%  { opacity: 0; text-shadow: none; }
    20%    { opacity: 0; text-shadow: none; }
    20.1%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); }
    20.6%  { opacity: 0; text-shadow: none; }
    30%    { opacity: 0; text-shadow: none; }
    30.1%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    30.5%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    30.6%  { opacity: 0; text-shadow: none; }
    45%    { opacity: 0; text-shadow: none; }
    45.1%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    50%    { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    55%    { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    55.1%  { opacity: 0; text-shadow: none; }
    57%    { opacity: 0; text-shadow: none; }
    57.1%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); }
    60%    { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); }
    60.1%  { opacity: 0; text-shadow: none; }
    65%    { opacity: 0; text-shadow: none; }
    65.1%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); }
    75%    { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); }
    75.1%  { opacity: 0; text-shadow: none; }
    77%    { opacity: 0; text-shadow: none; }
    77.1%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); }
    85%    { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); }
    85.1%  { opacity: 0; text-shadow: none; }
    86%    { opacity: 0; text-shadow: none; }
    86.1%  { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); }
    100%   { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); }
}