/* ============================================================
   Sortum — Custom CSS
   Dark theme: neutral-950 bg, amber-600 accents
   ============================================================ */

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

/* Staggered entrance animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-headline {
  animation: fade-in-up 0.9s ease-out 0.1s both;
}

.hero-subheadline {
  animation: fade-in-up 0.9s ease-out 0.3s both;
}

.hero-badges {
  animation: fade-in-up 0.9s ease-out 0.45s both;
}

.hero-cta {
  animation: fade-in-up 0.9s ease-out 0.6s both;
}

/* ---- Animated grid lines (mouse-reactive via JS CSS vars) ---- */
@keyframes grid-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* Wrapper clips the grid so it can't bleed outside the hero */
.hero-grid-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  background-image:
    linear-gradient(rgba(217, 119, 6, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 119, 6, 0.2) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-drift 20s linear infinite;
  pointer-events: none;
  /* Mask follows mouse via CSS custom properties set by JS */
  --mx: 50%;
  --my: 50%;
  mask-image: radial-gradient(ellipse 700px 600px at var(--mx) var(--my), rgba(0,0,0,0.8) 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 700px 600px at var(--mx) var(--my), rgba(0,0,0,0.8) 0%, transparent 65%);
}

/* Optional background GIF layer */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-image: url('../hero-bg.gif');
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* CSS noise texture fallback (always present, very subtle) */
.hero-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
}

/* Ambient glows removed — caused visible orange corner artifacts */

/* ============================================================
   GLASSMORPHISM FEATURE CARDS
   ============================================================ */

.glass-card {
  background: rgba(23, 23, 23, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 119, 6, 0.12);
  border-radius: 16px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(217, 119, 6, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(217, 119, 6, 0.06);
}

/* ============================================================
   NAV LINK ANIMATED UNDERLINE
   ============================================================ */

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: #d97706;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ============================================================
   SCROLL-TRIGGERED REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Stagger children inside reveal groups */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.3s; }

/* ============================================================
   FLOWING WAVE BORDER GLOW
   ============================================================ */

@keyframes wave-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.glow-border {
  position: relative;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(217, 119, 6, 0.06) 0%,
    rgba(217, 119, 6, 0.18) 30%,
    rgba(146, 64, 14, 0.08) 50%,
    rgba(217, 119, 6, 0.18) 70%,
    rgba(217, 119, 6, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: wave-flow 12s ease-in-out infinite;
}

.glow-border > * {
  border-radius: 15px;
}

/* ============================================================
   PRICING GLASS CARD
   ============================================================ */

.pricing-glass {
  position: relative;
  border-radius: 16px;
  background: rgba(23, 23, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.pricing-glass:hover {
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(217, 119, 6, 0.06);
  transform: translateY(-3px);
}

/* ============================================================
   CTA BUTTON GLOW
   ============================================================ */

.btn-glow {
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.15s ease;
}

.btn-glow:hover {
  box-shadow: 0 0 24px rgba(217, 119, 6, 0.3);
  transform: translateY(-1px);
}

.btn-glow:active {
  transform: translateY(0);
}

/* Step connector lines removed — caused visual artifacts between sections */

/* ============================================================
   FORM STYLES
   ============================================================ */

.form-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
  outline: none;
}

/* Telegram welcome badge */
.tg-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 14px;
  color: #fbbf24;
}

/* Form success/error states */
.form-status {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  display: none;
}

.form-status.success {
  display: block;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.form-status.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(23, 23, 23, 0.3);
  border-top-color: #171717;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   PRICING SECTION — NUMBER HIGHLIGHT
   ============================================================ */

@keyframes count-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(217, 119, 6, 0); }
  50% { text-shadow: 0 0 30px rgba(217, 119, 6, 0.15); }
}

.price-number {
  animation: count-glow 4s ease-in-out infinite;
}

/* ============================================================
   MOBILE NAV TOGGLE
   ============================================================ */

.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav.open {
  max-height: 300px;
}