.gradient-text {
  background: linear-gradient(
    135deg,
    #fdba74 0%,   /* orange-300 */
    #fb923c 35%,  /* orange-400 */
    #f97316 70%,  /* orange-500 */
    #ea580c 100%  /* orange-600 */
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-glow {
  background: radial-gradient(
    circle at 50% 20%,
    rgba(56, 189, 248, 0.15) 0%,
    rgba(15, 23, 42, 0) 70%
  );
}

.card-glass {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ocultar barra de scroll en el carrusel manteniendo funcionalidad táctil */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* FONDO Y CUADRÍCULA TÉCNICA */
.grid-bg {
  background-color: #030712;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
}

/* TEXTO CON BARRIDO DE LUZ (SHIMMER) */
.shimmer-text {
  background: linear-gradient(110deg, #ffffff 30%, #38bdf8 50%, #ffffff 70%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* ANIMACIÓN CONTINUA DE LEVITACIÓN DE TARJETAS FLOTANTES (Ae / Pr) */
.float-left-card {
  animation: floatLeft 6s ease-in-out infinite 1.2s;
}

.float-right-card {
  animation: floatRight 7s ease-in-out infinite 1.2s;
}

@keyframes floatLeft {
  0%,
  100% {
    transform: translateY(0px) rotate(-6deg);
  }

  50% {
    transform: translateY(-16px) rotate(-2deg);
  }
}

@keyframes floatRight {
  0%,
  100% {
    transform: translateY(0px) rotate(6deg);
  }

  50% {
    transform: translateY(-18px) rotate(10deg);
  }
}

/* PULSO DEL RESPLANDOR AMBIENTAL */
.pulse-glow {
  animation: pulseGlow 5s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  0% {
    opacity: 0.3;
    transform: scale(0.95);
  }

  100% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* ANIMACIONES WOW DE ENTRADA (ENTRANCE ANIMATIONS) */
.anim-badge {
  animation: badgeEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.anim-title {
  animation: titleEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
}

.anim-icon-left {
  animation: iconLeftEntrance 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s
    forwards;
  opacity: 0;
}

.anim-icon-right {
  animation: iconRightEntrance 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s
    forwards;
  opacity: 0;
}

.anim-subtitle {
  animation: subtitleEntrance 0.9s ease-out 0.7s forwards;
  opacity: 0;
}

.anim-buttons {
  animation: buttonsEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
  opacity: 0;
}

/* KEYFRAMES ENTRADA */
@keyframes badgeEntrance {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes titleEntrance {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.85);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes iconLeftEntrance {
  0% {
    opacity: 0;
    transform: translate(-60px, -50%) rotate(-25deg) scale(0.5);
  }

  100% {
    opacity: 1;
    transform: translate(0, -50%) rotate(-6deg) scale(1);
  }
}

@keyframes iconRightEntrance {
  0% {
    opacity: 0;
    transform: translate(60px, -50%) rotate(25deg) scale(0.5);
  }

  100% {
    opacity: 1;
    transform: translate(0, -50%) rotate(6deg) scale(1);
  }
}

@keyframes subtitleEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buttonsEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ANIMACIÓN DE FLOTADO DE TARJETAS */
@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(0.8deg);
  }
}

.floating-card {
  animation: floatCard 5s ease-in-out infinite;
}

.floating-card:nth-child(1) {
  animation-delay: 0s;
}

.floating-card:nth-child(2) {
  animation-delay: 1.2s;
}

.floating-card:nth-child(3) {
  animation-delay: 2.4s;
}

.floating-card:nth-child(4) {
  animation-delay: 3.6s;
}

.floating-card:hover {
  animation-play-state: paused;
}

/* ANIMACIÓN ENTRADA "WOW" CINEMÁTICA / AFTER EFFECTS */
.anim-title {
  /* Mantenemos el retraso de 0.2s para la secuencia de entrada */
  animation: titleWowEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
  will-change: transform, opacity, filter;
}

@keyframes titleWowEntrance {
  0% {
    opacity: 0;
    /* Entra desde el fondo en 3D, rotado y muy expandido */
    transform: perspective(1000px) translateZ(-400px) translateY(50px)
      scale(0.6) rotateX(25deg);
    filter: blur(20px) brightness(2.5);
  }

  50% {
    opacity: 0.8;
    filter: blur(8px) brightness(1.8);
  }

  75% {
    /* Ligero sobrepaso (overshoot) elástico estilo After Effects */
    transform: perspective(1000px) translateZ(30px) translateY(-5px) scale(1.03)
      rotateX(-2deg);
    filter: blur(0px) brightness(1.2);
  }

  100% {
    opacity: 1;
    /* Asentamiento perfecto en la posición original */
    transform: perspective(1000px) translateZ(0) translateY(0) scale(1)
      rotateX(0deg);
    filter: blur(0px) brightness(1);
  }
}

/* Animación de entrada con retardo dinámico para badgets secundarios */
.float-left-card,
.float-right-card {
  will-change: transform, opacity;
}

/*album*/

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(-12deg);
  }

  50% {
    transform: translateY(-12px) rotate(-9deg);
  }
}

@keyframes float-delayed {
  0%,
  100% {
    transform: translateY(0px) rotate(8deg);
  }

  50% {
    transform: translateY(-16px) rotate(11deg);
  }
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0px) rotate(15deg);
  }

  50% {
    transform: translateY(-10px) rotate(12deg);
  }
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 6s ease-in-out 1s infinite;
}

.animate-float-slow {
  animation: float-slow 7s ease-in-out 2s infinite;
}


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

.animate-marquee {
  animation: marquee 25s linear infinite;
}

/* Efecto de desvanecimiento en bordes izquierdo y derecho */
.brand-marquee-container {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}


@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}






/*brands new */
/* ===========================
TRANSICIÓN
=========================== */

.brand-enter-active,
.brand-leave-active{

transition:

all .9s cubic-bezier(.22,1,.36,1);

}

.brand-enter-from{

opacity:0;

transform:

translateY(70px)

scale(.82)

rotateX(35deg);

filter:

blur(18px);

}

.brand-enter-to{

opacity:1;

transform:

translateY(0)

scale(1)

rotateX(0);

filter:

blur(0);

}

.brand-leave-from{

opacity:1;

}

.brand-leave-to{

opacity:0;

transform:

translateY(-70px)

scale(1.12);

filter:

blur(25px);

}


/* ===========================
BRILLO DEL LOGO
=========================== */

.logoShine{

position:relative;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

padding:10px 25px;

}

.logoShine::after{

content:"";

position:absolute;

top:-30%;

left:-140%;

width:80px;

height:180%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.75),

transparent);

transform:rotate(20deg);

animation:

shine 2.8s infinite;

}

@keyframes shine{

0%{

left:-140%;

}

40%{

left:180%;

}

100%{

left:180%;

}

}


/* ===========================
FLOTACIÓN
=========================== */

.logoShine{

animation:

float 4s ease-in-out infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}