/* Global Custom Styles */

/* Grainy Button Classes */
.grainy-button-blue {
  background: linear-gradient(45deg, #1444E4, #4C74EC) !important;
  color: white !important;
  border: none !important;
  position: relative;
  transition: none;
}

.grainy-button-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  filter: contrast(200%) brightness(1500%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.grainy-button-blue > * {
  position: relative;
  z-index: 2;
}

.grainy-button-blue:hover {
  background: linear-gradient(45deg, #1444E4, #4C74EC) !important;
}

.grainy-button-blue:hover::before {
  opacity: 0;
}

.grainy-button-green {
  background: linear-gradient(45deg, #C8F230, #A8D220) !important;
  color: black !important;
  border: none !important;
  position: relative;
  transition: none;
}

.grainy-button-green::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  filter: contrast(300%) brightness(2000%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.grainy-button-green > * {
  position: relative;
  z-index: 2;
}

.grainy-button-green:hover {
  background: linear-gradient(45deg, #C8F230, #A8D220) !important;
}

.grainy-button-green:hover::before {
  opacity: 0;
}

.grainy-button-black {
  background: linear-gradient(45deg, #191919, #404040) !important;
  color: white !important;
  border: none !important;
  position: relative;
  transition: none;
}

.grainy-button-black::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  filter: contrast(300%) brightness(2000%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.grainy-button-black > * {
  position: relative;
  z-index: 2;
}

.grainy-button-black:hover {
  background: linear-gradient(45deg, #191919, #404040) !important;
}

.grainy-button-black:hover::before {
  opacity: 0;
}

/* Underline Animation Classes */
.gsap-underline-blue {
  position: relative;
}

.gsap-underline-blue::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 3px;
  background: #1444E4;
  transition: width 0.56s ease-in;
}

.gsap-underline-blue.active::after {
  width: 100%;
}

.gsap-underline-green {
  position: relative;
}

.gsap-underline-green::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 3px;
  background: #C8F230;
  transition: width 0.56s ease-in;
}

.gsap-underline-green.active::after {
  width: 100%;
}

.gsap-underline-black {
  position: relative;
}

.gsap-underline-black::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 3px;
  background: #191919;
  transition: width 0.56s ease-in;
}

.gsap-underline-black.active::after {
  width: 100%;
}

/* Circular Fill Effect */
.button__flair {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

[data-block="button"] .button__flair {
  transform: scale(0);
  transform-origin: 0 0;
  will-change: transform;
}

.button__flair:before {
  aspect-ratio: 1/1;
  background-color: #1444E4;
  border-radius: 50%;
  content: "";
  display: block;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 170%;
}

[data-block="button"]:hover .button__label {
  color: white;
  transition: color 0.15s ease;
}

/* Squiggly Line Animation */
.squiggly-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s ease-in-out;
}

.squiggly-line.active {
  stroke-dashoffset: 0;
}

/* Parallax Hero and Footer Effect */
.start-bg {
  background-color: #14141d;
}

.footerTrigger {
  will-change: transform;
}