@import "tailwindcss";


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: var(--font-outfit), sans-serif;
}

@keyframes shepays-loader-spin {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader-logo-rotation {
  animation: shepays-loader-spin 2s ease-in-out infinite;
}

/* ==================================================
   HERO TEXT — BASE GRADIENT
================================================== */

.hero-gradient-main {
  background-image: linear-gradient(
    90deg,
    #ff7028 0%,
    #ff7028 12%,
    #b92bd7 42%,
    #9d28e8 58%,
    #e4009b 78%,
    #ff397d 100%
  );

  background-size: 240% 100%;

  animation:
    hero-gradient-appear 7s linear infinite,
    hero-gradient-flow 3.8s ease-in-out infinite;
}


/* ==================================================
   PURPLE SWEEP
================================================== */

.hero-purple-sweep {
  clip-path: inset(0 0 0 100%);

  animation: hero-purple-wipe 7s ease-in-out infinite;
}


/* Purple line starts at RIGHT and travels LEFT */

@keyframes hero-purple-wipe {

  /* Gradient is visible */
  0%,
  68% {
    clip-path: inset(0 0 0 100%);
  }

  /* Start revealing purple from right */
  72% {
    clip-path: inset(0 0 0 98%);
  }

  /* Sweep moving right → left */
  82% {
    clip-path: inset(0 0 0 45%);
  }

  /* Entire text becomes purple */
  90% {
    clip-path: inset(0 0 0 0%);
  }

  /* Hold purple briefly */
  94% {
    clip-path: inset(0 0 0 0%);
  }

  /* Remove overlay so gradient takes over again */
  100% {
    clip-path: inset(0 100% 0 0);
  }
}


/* ==================================================
   MOVING GRADIENT
================================================== */

@keyframes hero-gradient-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


/* Keeps gradient underneath the purple sweep */

@keyframes hero-gradient-appear {
  0%,
  100% {
    opacity: 1;
  }
}

.hero-text-scan-line {
  right: 0;
  opacity: 0;

  animation: hero-scan-line 7s ease-in-out infinite;
}

@keyframes hero-scan-line {
  0%,
  70% {
    right: 0%;
    opacity: 0;
  }

  72% {
    right: 0%;
    opacity: 1;
  }

  90% {
    right: 100%;
    opacity: 1;
  }

  92%,
  100% {
    right: 100%;
    opacity: 0;
  }
}

@keyframes shepays-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes shepays-bottom-marquee {
  from {
    transform: translateX(-50%);
  } 

  to {
    transform: translateX(0);
  }
}