/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.hero-wrapper {
  /* background-image: linear-gradient(160deg, #1a1a1a 0%, #1a1a1a 30%, #1f1f1f 30%, #1f1f1f 40%, #1a1a1a 40%, #1a1a1a 100%); */
}

.hero-container,
.hero-bg,
.hero-raid {
  --hero-skewX: 10deg;
  --hero-rotateY: 20deg;
  --hero-translateX: 15%;
  --hero-translateZ: 10px;
}

.hero-container.animated {
  perspective: 1000px;
}

.hero-container.animated .hero-bg {
  transform: skewX(var(--hero-skewX)) rotateY(var(--hero-rotateY)) translateX(var(--hero-translateX));
  transition: filter 1s ease-out;
}

.hero-container.animated .hero-raid-only {
  transform: skewX(var(--hero-skewX)) rotateY(var(--hero-rotateY)) translateX(var(--hero-translateX));
}

.hero-container.animated.animate .hero-bg,
.hero-bg.force-blur {
  filter: blur(2px) brightness(0.4);
}

.hero-container.animated .hero-raid-overlay {
  opacity: 0;
  transform: skewX(var(--hero-skewX)) rotateY(var(--hero-rotateY)) translate3d(55%, 0, var(--hero-translateZ)) scale3d(2, 2, 2);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.hero-container.animated.animate .hero-raid-overlay {
  opacity: 1;
  transform: skewX(var(--hero-skewX)) rotateY(var(--hero-rotateY)) translate3d(var(--hero-translateX), 0, var(--hero-translateZ));
}