@tailwind base;
@tailwind components;
@tailwind utilities;


.main-container {
  max-width: 90%;
  margin: 0 auto;
}

.py-128 {
  padding-top: 44rem;
  padding-bottom: 44rem;
}


.bg-gray-grad {
  background: linear-gradient(to bottom, #9c1515 0%, #1c1c1c 100%);
}

/* Hide elements when scaling pages down to 1366 resolution */
@media screen and (max-width: 1570px) {
  .hide-1366 {
    display: none !important;
  }
}

@media screen and (min-width: 1570px) {
  .hide-1080 {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .md\:clip-none {
    clip-path: none !important;
  }

  .md\:mt-0 {
    margin-top: 0 !important;
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

html {
  scroll-behavior: smooth;
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trackIn {
  from {
    letter-spacing: -0.2em;
    opacity: 0;
  }

  to {
    letter-spacing: 0.1em;
    /* Matches your tracking-[0.1em] */
    opacity: 1;
  }
}

.animate-fade-up {
  animation: fadeInUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.animate-track-in {
  animation: trackIn 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.delay-200 {
  animation-delay: 0.2s;
}

@keyframes scaleXIn {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* --- Base state: Hidden and collapsed --- */
.reveal-item {
  opacity: 0;
}

/* --- When revealed, start animations --- */
.reveal-item.reveal {
  opacity: 1;
  animation-play-state: running !important;
}

/* --- Line Grow Animation Logic --- */
.animate-line-grow {
  transform: scaleX(0);
  /* Start collapsed */
  animation: scaleXIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-play-state: paused;
}

/* --- Direction Utilities --- */
.origin-left {
  transform-origin: left;
}

.origin-center {
  transform-origin: center;
}

/* --- Existing Keyframes --- */
@keyframes scaleXIn {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}


/* Add !important to ensure these override the animation's default behavior */
.origin-left {
  transform-origin: left !important;
}

.origin-center {
  transform-origin: center !important;
}

/* Ensure the base state is set so it doesn't "flash" on load */
.animate-line-grow {
  transform: scaleX(0);
  animation: scaleXIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-play-state: paused;
}

/* --- Other Animations --- */
.animate-fade-up {
  animation: fadeInUp 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
  animation-play-state: paused;
}

.animate-track-in {
  animation: trackIn 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
  animation-play-state: paused;
}

/* Delays */
.delay-200 {
  animation-delay: 0.2s;
}

.delay-500 {
  animation-delay: 0.5s;
}