.gradient-text {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.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;
}