/* ============================================
   ANIMATIONS.CSS — Fresh animation suite
   Linear/Vercel-inspired: precise, restrained
   ============================================ */

/* ============================================
   1. SECTION REVEAL — scroll-driven entrance
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant: from left */
.reveal--left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}

.reveal--left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variant: from right */
.reveal--right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}

.reveal--right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   2. HERO STAGGER ENTRANCE
   ============================================ */
.hero-stagger {
  opacity: 0;
  transform: translateY(20px);
}

.hero-stagger--animate {
  animation: heroIn 0.85s cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--si, 0) * 0.14s + 0.25s) forwards;
}

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

/* ============================================
   3. SCROLL PROGRESS BAR
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal, #00e5a8), var(--purple, #8b5cf6));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* ============================================
   4. STEP NUMBER GLOW (handled in style.css step-card:hover)
   ============================================ */

/* ============================================
   5. BUTTON SHINE SWEEP (in style.css .btn--primary)
   ============================================ */

/* ============================================
   6. MARQUEE
   ============================================ */
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   7. CUSTOM CURSOR
   ============================================ */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
}

.cursor-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease, opacity 0.15s ease;
}

.cursor-ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.22s ease,
    height 0.22s ease,
    border-color 0.22s ease,
    opacity 0.15s ease;
}

#cursor.is-hover .cursor-dot  { width: 8px; height: 8px; }
#cursor.is-hover .cursor-ring { width: 52px; height: 52px; border-color: rgba(0, 229, 168, 0.8); }

#cursor.is-click .cursor-dot  { width: 4px; height: 4px; }
#cursor.is-click .cursor-ring { width: 26px; height: 26px; }

#cursor.is-hidden .cursor-dot,
#cursor.is-hidden .cursor-ring { opacity: 0; }

/* ============================================
   8. TERMINAL BLINK
   ============================================ */
@keyframes termBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes termDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

/* ============================================
   9. BADGE PULSE
   ============================================ */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50%       { transform: scale(1.06); opacity: 0; }
}

/* Sections are always visible — GSAP handles cross-section transitions */
.section { opacity: 1; transform: none; }

/* ============================================
   SCRAMBLE CHAR STYLE
   ============================================ */
.sc {
  color: var(--teal);
  opacity: 0.8;
}

/* ============================================
   PRODUCT HIGHLIGHTS STAGGER
   ============================================ */
.product__highlight {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.visible .product__highlight:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.12s; }
.reveal.visible .product__highlight:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.22s; }
.reveal.visible .product__highlight:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.32s; }
.reveal.visible .product__highlight:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.42s; }

/* ============================================
   COMPARISON CARD LIST ENTRY
   ============================================ */
.comparison-card__side--old li,
.comparison-card__side--new li {
  opacity: 0;
  transform: translateX(-12px);
}

.comparison-card__side--new li {
  transform: translateX(12px);
}

.reveal.visible .comparison-card__side--old li,
.reveal.visible .comparison-card__side--new li {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.45s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.45s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.reveal.visible .comparison-card__side--old li:nth-child(1),
.reveal.visible .comparison-card__side--new li:nth-child(1) { transition-delay: 0.08s; }
.reveal.visible .comparison-card__side--old li:nth-child(2),
.reveal.visible .comparison-card__side--new li:nth-child(2) { transition-delay: 0.16s; }
.reveal.visible .comparison-card__side--old li:nth-child(3),
.reveal.visible .comparison-card__side--new li:nth-child(3) { transition-delay: 0.24s; }
.reveal.visible .comparison-card__side--old li:nth-child(4),
.reveal.visible .comparison-card__side--new li:nth-child(4) { transition-delay: 0.32s; }

/* ============================================
   LOGO HOVER GLOW
   ============================================ */
.header__logo {
  transition: opacity 0.2s ease;
}

/* ============================================
   SCROLL BOUNCE (hero indicator)
   ============================================ */
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(3px, 3px); opacity: 0.9; }
}

/* ============================================
   FORM SUBMIT STATE
   ============================================ */
.contact__form.submitted .btn--primary {
  background: #10b981;
  pointer-events: none;
}

/* ============================================
   FORM INLINE FEEDBACK BANNER
   ============================================ */
.form-feedback {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 12px;
  transition: opacity 0.2s ease;
}

.form-feedback[hidden] { display: none; }

.form-feedback--success {
  background: rgba(0, 229, 168, 0.08);
  border: 1px solid rgba(0, 229, 168, 0.28);
  color: #00e5a8;
}

.form-feedback--error {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: #f87171;
}

/* ============================================
   NOISE FILM GRAIN
   ============================================ */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-stagger,
  .hero-stagger--animate {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .product__highlight {
    opacity: 1;
    transform: none;
  }

  .marquee-track {
    animation: none;
  }

  #cursor { display: none; }

  .dashboard-mock {
    animation: none;
  }
}