/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ===== Scroll Animations ===== */

.scroll-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade-up.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.scroll-fade-up[data-delay="1"] { transition-delay: 0.1s; }
.scroll-fade-up[data-delay="2"] { transition-delay: 0.3s; }
.scroll-fade-up[data-delay="3"] { transition-delay: 0.5s; }

/* Step number pop */
.step-number {
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease-out;
}

.animate-in .step-number {
  transform: scale(1);
  opacity: 1;
}

/* Connector line draw */
.step-connector {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.step-connector.animate-in {
  transform: scaleX(1);
}

/* Pulse on step numbers */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0.5); }
  50% { box-shadow: 0 0 24px 6px rgba(124, 92, 252, 0.15); }
}

.animate-in .step-number {
  animation: glow-pulse 3s ease-in-out 0.8s infinite;
}

/* ===== Hero App Mockup ===== */

@keyframes hero-mockup-enter {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-card {
  opacity: 0;
  animation: hero-mockup-enter 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Typing cursor blink */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: rgba(124, 92, 252, 0.8);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
}

/* Line reveal: content lines appear one by one */
@keyframes line-reveal {
  0% { width: 0; opacity: 0; }
  20% { opacity: 1; }
  100% { width: 100%; opacity: 1; }
}

.line-animate { opacity: 0; overflow: hidden; white-space: nowrap; }
.line-animate-1 { animation: line-reveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards; }
.line-animate-2 { animation: line-reveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards; }
.line-animate-3 { animation: line-reveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.0s forwards; }
.line-animate-4 { animation: line-reveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.4s forwards; }

/* Badge pop in */
@keyframes badge-pop {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  60% { transform: translateY(-4px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.badge-enter {
  opacity: 0;
  animation: badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.6s forwards;
}

/* Rotating gradient border on main card */
@keyframes border-rotate {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.rotating-border {
  --angle: 0deg;
  border-image: conic-gradient(from var(--angle), rgba(124,92,252,0.4), transparent 40%, transparent 60%, rgba(124,92,252,0.3)) 1;
  animation: border-rotate 6s linear infinite;
}

/* Shimmer effect for premium feel */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-border {
  background: linear-gradient(90deg, transparent 0%, rgba(124,92,252,0.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* Dot grid background */
.dot-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Gradient border card */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(124,92,252,0.3), transparent 40%, transparent 60%, rgba(124,92,252,0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Arrow pulse */
@keyframes arrow-slide {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}
.arrow-animate {
  animation: arrow-slide 2s ease-in-out infinite;
}

/* ===== Product Marquee ===== */
@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}

.marquee-track-left {
  animation: marquee-left 50s linear infinite;
}

.marquee-track-right {
  animation: marquee-right 50s linear infinite;
}

.marquee-track-left:hover,
.marquee-track-right:hover {
  animation-play-state: paused;
}

/* Fade edges */
.marquee-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Product card hover lift */
.product-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5);
}

/* ===== Credit Urgency Pulse ===== */
@keyframes credit-urgency {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 12px 3px rgba(245, 158, 11, 0.15); }
}

.credit-urgency-pulse {
  animation: credit-urgency 2s ease-in-out infinite;
}