/* ============================================================
   ANGR — Custom styles (converted from React/Tailwind v4 + Framer Motion)
   Only holds what Tailwind utility classes can't express directly.
   Tailwind (fonts, colors, animations) is configured in the inline
   tailwind.config inside each HTML <head>.
   ============================================================ */

/* Base reset parity with the original React app */
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}

/* ------------------------------------------------------------
   Giant "ANGR" hero letters — animated gradient shimmer
   (was an inline <style> block + shimmer-letter class in Home.tsx)
   ------------------------------------------------------------ */
@keyframes textShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.shimmer-letter {
  background-size: 200% auto !important;
  animation: textShimmer 7s ease-in-out infinite !important;
}

/* ------------------------------------------------------------
   Section 4 marquee ticker — replaces the Framer Motion
   animate={{ x: ["0%", "-50%"] }} linear 32s infinite loop.
   ------------------------------------------------------------ */
@keyframes marqueeX {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee-track {
  animation: marqueeX 32s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* ------------------------------------------------------------
   Section 3 cards carousel — infinite horizontal scroll.
   Pauses on hover. Cards are duplicated in HTML for seamless loop.
   ------------------------------------------------------------ */
.cards-carousel-card {
  width: min(380px, 85vw);
}
.cards-carousel-track {
  animation: cardsScroll 30s linear infinite;
  will-change: transform;
}
@keyframes cardsScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.cards-carousel-track-wrapper:hover .cards-carousel-track {
  animation-play-state: paused;
}
.carousel-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: auto;
  will-change: transform, opacity, filter;
}
