/* Animation styles for the landing page */

@keyframes glowPulse {
  0% {
    opacity: 0.6;
    transform: scale(1) translate(0px, 0px) skewX(0deg);
    filter: blur(40px);
  }
  20% {
    opacity: 0.65;
    transform: scale(1.08) translate(40px, -20px) skewX(-1deg);
    filter: blur(45px);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.12) translate(20px, 30px) skewX(1deg);
    filter: blur(50px);
  }
  60% {
    opacity: 0.68;
    transform: scale(1.1) translate(-30px, 25px) skewX(2deg);
    filter: blur(48px);
  }
  80% {
    opacity: 0.65;
    transform: scale(1.04) translate(-35px, -30px) skewX(-2deg);
    filter: blur(45px);
  }
  100% {
    opacity: 0.6;
    transform: scale(1) translate(0px, 0px) skewX(0deg);
    filter: blur(40px);
  }
}

.animated-glow {
  position: absolute;
  z-index: 1;
  top: -180px;
  left: -180px;
  right: -180px;
  bottom: -180px;
  background: radial-gradient(
    ellipse at 40% 60%, 
    rgba(79, 70, 229, 0.25) 0%, 
    rgba(147, 51, 234, 0.1) 35%, 
    rgba(79, 70, 229, 0) 80%
  );
  filter: blur(35px);
  opacity: 0.7;
  animation: glowPulse 15s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.animated-glow-2 {
  position: absolute;
  z-index: 1;
  top: -200px;
  left: -200px;
  right: -200px;
  bottom: -200px;
  background: radial-gradient(
    ellipse at 60% 40%, 
    rgba(30, 64, 175, 0.2) 0%, 
    rgba(147, 51, 234, 0.08) 40%, 
    rgba(59, 130, 246, 0.03) 65%,
    rgba(79, 70, 229, 0) 90%
  );
  filter: blur(40px);
  opacity: 0.6;
  animation: glowPulse 20s ease-in-out infinite reverse;
  animation-delay: 2s;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Spotlight effect - more organic and natural */
@keyframes spotlightMove {
  0% {
    background-position: 0% 0%;
    opacity: 0.35;
    filter: blur(15px);
  }
  20% {
    background-position: 100% 20%;
    opacity: 0.45;
    filter: blur(18px);
  }
  40% {
    background-position: 80% 100%;
    opacity: 0.5;
    filter: blur(20px);
  }
  60% {
    background-position: 20% 80%;
    opacity: 0.45;
    filter: blur(18px);
  }
  80% {
    background-position: 40% 10%;
    opacity: 0.4;
    filter: blur(16px);
  }
  100% {
    background-position: 0% 0%;
    opacity: 0.35;
    filter: blur(15px);
  }
}

.spotlight-effect {
  position: absolute;
  z-index: 3;
  top: -15%;
  left: -15%;
  right: -15%;
  bottom: -15%;
  background: radial-gradient(
    ellipse at center, 
    rgba(148, 163, 253, 0.12) 0%, 
    rgba(79, 70, 229, 0.06) 30%, 
    rgba(79, 70, 229, 0) 75%
  );
  mix-blend-mode: soft-light;
  background-size: 250% 250%;
  animation: spotlightMove 30s ease-in-out infinite;
  pointer-events: none;
  border-radius: 16px;
  filter: blur(10px);
}

/* Additional subtle reflective highlight */
.spotlight-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border-radius: 16px;
}

@keyframes buttonFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

.hero-button:hover {
  animation: buttonFloat 0.4s ease-in-out;
  transform-origin: center;
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
  transition: all 0.2s ease;
}

.hero-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Logo styling */
.logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.logo-container:hover {
  opacity: 0.9;
}

/* Edge glow animation - moves back and forth */
@keyframes edgeLightMove {
  0% {
    transform: translateX(-20%);
  }
  50% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(-20%);
  }
}

/* Corner glow animation */
@keyframes cornerGlow {
  0% {
    opacity: 0.7;
    box-shadow: 0 0 15px 3px rgba(157, 139, 255, 0.7);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 25px 5px rgba(172, 163, 255, 0.9);
  }
  100% {
    opacity: 0.7;
    box-shadow: 0 0 15px 3px rgba(157, 139, 255, 0.7);
  }
}

/* Nav link underline animation */
@keyframes navLinkUnderline {
  0% {
    width: 0;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

.border-glow {
  position: relative;
  z-index: 2;
  border-radius: 20px;
  overflow: hidden;
  /* Box shadow removed to keep glow only at top */
}

/* Top edge light - enhanced to follow hard rim glow pattern */
.border-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg, 
    transparent 0%,
    rgba(157, 139, 255, 0.03) 15%,
    rgba(172, 163, 255, 0.7) 40%,
    rgba(202, 196, 255, 0.9) 50%,
    rgba(172, 163, 255, 0.7) 60%,
    rgba(157, 139, 255, 0.03) 85%,
    transparent 100%
  );
  z-index: 11;
  opacity: 0.85;
  animation: edgeLightMove 24s ease-in-out infinite;
  pointer-events: none;
  box-shadow: 
    0 0 12px 1px rgba(157, 139, 255, 0.5);
}

/* Very subtle highlight for top edge consistency */
.border-glow::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg, 
    rgba(157, 139, 255, 0.2) 0%,
    rgba(157, 139, 255, 0) 15%,
    rgba(157, 139, 255, 0) 85%,
    rgba(157, 139, 255, 0.2) 100%
  );
  z-index: 11;
  pointer-events: none;
}

/* Hard rim glow for top edge only */
.border-glow {
  box-shadow: 0 -45px 80px -80px rgba(79, 70, 229, 0.502);
}

/* Enhanced glow effect for top edge - more visible */
.border-glow .top-edge-glow {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    90deg, 
    rgba(157, 139, 255, 0) 0%,
    rgba(157, 139, 255, 0) 15%,
    rgba(172, 163, 255, 0.2) 35%,
    rgba(202, 196, 255, 0.4) 50%,
    rgba(172, 163, 255, 0.2) 65%,
    rgba(157, 139, 255, 0) 85%,
    rgba(157, 139, 255, 0) 100%
  );
  z-index: 10;
  pointer-events: none;
  animation: edgeLightMove 24s ease-in-out infinite;
  animation-delay: 0.3s;
  filter: blur(2px);
}

/* Nav link with animated underline */
.nav-link {
  position: relative;
  text-decoration: none;
  padding-bottom: 2px;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(79, 70, 229, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: rgba(79, 70, 229, 1);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(157, 139, 255, 0.7),
    rgba(79, 70, 229, 1)
  );
  transition: width 0.3s ease;
  transform-origin: left;
}

.nav-link:hover::after {
  width: 100%;
  animation: navLinkUnderline 0.3s ease forwards;
}

/* Tagline hover effect - glowing pulse moving from left to right */
@keyframes taglineGlowPulse {
  0% {
    opacity: 90;
    left: -30%;
    width: 30%;
  }
  50% {
    opacity: 0.8;
    width: 50%;
  }
  100% {
    opacity: 0;
    left: 100%;
    width: 30%;
  }
}

.tagline-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
}

/* .tagline-container:hover::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(79, 70, 229, 0.9),
    rgba(147, 51, 234, 0.9),
    transparent
  );
  filter: blur(20px);
  z-index: 1;
  pointer-events: none;
  animation: taglineGlowPulse 1s ease-out forwards;
} */

/* Text cycling animation for hero subtitle */
@keyframes textCycle {
  0%, 25% {
    opacity: 1;
    transform: translateY(0);
  }
  33%, 34% {
    opacity: 0;
    transform: translateY(-15px);
  }
  42%, 92% {
    opacity: 1;
    transform: translateY(0);
  }
  96%, 100% {
    opacity: 0;
    transform: translateY(15px);
  }
}

.cycling-text-container {
  height: 1.5em; /* Fixed height to prevent layout shifts */
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  min-width: 85px; /* Set minimum width to prevent layout shifts */
}

.cycling-text-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  animation: textCycle 9s infinite;
  white-space: nowrap;
  font-weight: 500;
  color: rgba(147, 51, 234, 0.9); /* Purple highlight color */
}

.cycling-text-item:nth-child(1) {
  animation-delay: 0s;
}

.cycling-text-item:nth-child(2) {
  animation-delay: 3s;
}

.cycling-text-item:nth-child(3) {
  animation-delay: 6s;
}

/* Text elements shine effect on scroll */
@keyframes textShine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.text-shine-effect {
  position: relative;
}

.text-shine-effect h1, 
.text-shine-effect h2, 
.text-shine-effect h3,
.text-shine-effect p,
.text-shine-effect .tagline-container {
  position: relative;
}

/* Apply shine effect directly on the text with ::after pseudo-element */
.text-shine-effect.shine-active h1,
.text-shine-effect.shine-active h2,
.text-shine-effect.shine-active h3,
.text-shine-effect.shine-active p,
.text-shine-effect.shine-active .tagline-container {
  position: relative;
}

/* Create a shine overlay only for the active animation */
.text-shine-effect.shine-active h1::after,
.text-shine-effect.shine-active h2::after,
.text-shine-effect.shine-active h3::after,
.text-shine-effect.shine-active p::after,
.text-shine-effect.shine-active .tagline-container::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 35%, 
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0) 65%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: textShine 1.5s ease-in-out forwards;
  display: block;
  z-index: 10;
  pointer-events: none;
  
  /* Perfect alignment with original text */
  white-space: inherit;
  word-break: inherit;
  word-spacing: inherit;
  line-height: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.tagline-container {
  transition: color 0.3s ease, text-shadow 0.3s ease;
  position: relative;
  display: inline-block;
}

/* Button shine effect animation */
@keyframes buttonShine {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}

.button-shine-effect {
  position: relative;
  overflow: hidden;
}

.button-shine-effect::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  bottom: -2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%) skewX(-12deg);
  transition: none;
  z-index: 10;
  pointer-events: none;
}

.button-shine-effect:hover::before {
  animation: buttonShine 1.5s ease-out infinite;
}

/* Checkmark drawing animation */
@keyframes drawCheckmark {
  0% {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
  }
}

@keyframes checkmarkScale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes splashLines {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.checkmark-animated {
  animation: checkmarkScale 0.25s ease-out forwards;
  position: relative;
}

.checkmark-animated::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 2px solid rgba(34, 197, 94, 0.5);
  border-radius: 50%;
  animation: splashLines 0.6s ease-out 0.4s forwards;
  opacity: 0;
  pointer-events: none;
}

.checkmark-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
  animation: drawCheckmark 0.4s ease-out 0.1s forwards;
}