/* Custom styles beyond Tailwind utilities go here */

.loading-bar-fill {
  transition: width 0.2s linear;
}

.pricing-toggle-btn:not(.bg-white):hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-bounce-gentle {
  animation: bounce-gentle 2s ease-in-out infinite;
}

.glitch-text {
  text-shadow: -2px 0 rgba(255, 40, 60, 0.55), 2px 0 rgba(0, 200, 255, 0.45);
}

.bracket-btn {
  position: relative;
  background: transparent;
  transition: padding 0.3s ease;
}

.bracket-btn::before,
.bracket-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  border-top: 3px solid #FF4D12;
  border-bottom: 3px solid #FF4D12;
  transition: width 0.3s ease;
}

.bracket-btn::before {
  left: 0;
  border-left: 3px solid #FF4D12;
}

.bracket-btn::after {
  right: 0;
  border-right: 3px solid #FF4D12;
}

.bracket-btn:hover::before,
.bracket-btn:hover::after {
  width: 20px;
}

.footer-gallery-mask {
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
  animation: marquee-scroll 70s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.glow-play {
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 18, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(255, 77, 18, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 18, 0); }
}