/* Animations and Background Effects */

/* Animated gradient veil for extra depth */
body::after {
  content: ""; 
  position: fixed; 
  inset: -20% -20% auto -20%; 
  height: 100vh; 
  z-index: -2; 
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0,212,255,.08), rgba(58,134,255,.10), rgba(255,215,0,.08), rgba(255,107,53,.10), rgba(0,255,136,.08), rgba(0,212,255,.08));
  filter: blur(120px) saturate(140%);
  animation: bg-spin 26s linear infinite;
}

@keyframes bg-spin { 
  to { transform: rotate(1turn); } 
}

body.modal-open { overflow: hidden; }

.canvas-aurora {
  position: fixed;
  inset: -25% -25% auto -25%;
  height: 80vh;
  z-index: -1;
  filter: blur(100px) saturate(150%) brightness(1.2);
  background: var(--grad-anim);
  animation: aurora-spin 30s linear infinite, aurora-pulse 8s ease-in-out infinite alternate;
  opacity: .22;
  pointer-events: none;
  overflow: hidden;
}

.canvas-aurora::before {
  content: '';
  position: absolute; 
  inset: 0;
  background: conic-gradient(from 180deg at 30% 30%, #00d4ff, #0099ff, #ffd700, #ff6b35, #00ff88, #00d4ff);
  animation: aurora-reverse 25s linear infinite reverse;
  opacity: 0.55;
}

@keyframes aurora-spin { 
  to { transform: rotate(1turn); } 
}

@keyframes aurora-reverse { 
  to { transform: rotate(-1turn); } 
}

@keyframes aurora-pulse {
  0% { opacity: 0.18; transform: scale(1); }
  50% { opacity: 0.33; transform: scale(1.05); }
  100% { opacity: 0.22; transform: scale(0.97); }
}

/* Animated nav underline */
.nav a { position: relative; }
.nav a span { position: relative; z-index: 1; }
.nav a::before { display: none; }
.nav a::after {
  content: ""; 
  position: absolute; 
  inset: auto 10% 8px 10%; 
  height: 2px; 
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-1), var(--neon-2));
  transform: scaleX(0); 
  transform-origin: left; 
  transition: transform .28s ease;
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

/* Cards parallax hover depth */
.card { transform-style: preserve-3d; }
.card:hover .title { text-shadow: 0 4px 18px rgba(0,212,255,.18); }

/* Enhanced control micro-interactions */
.input { 
  transition: border-color .25s, background .25s, box-shadow .25s, transform .18s ease; 
}
.input:focus { transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.98); }

/* Panel subtle lift and gradient drift */
.panel { 
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; 
}
.panel:hover { 
  transform: translateY(-3px); 
  border-color: var(--neon-1); 
  box-shadow: var(--glow-1), var(--glow-2); 
}
.panel::before { 
  background: linear-gradient(135deg, rgba(0,212,255,.10), rgba(58,134,255,.10)); 
  animation: panel-drift 6s ease-in-out infinite alternate; 
}
@keyframes panel-drift { 
  from { opacity:.03; } 
  to { opacity:.08; } 
}

/* Payment card selection pulse */
.pay-card { 
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; 
}
.pay-card.active { 
  animation: pay-pulse 1.2s ease-in-out 1; 
}
@keyframes pay-pulse { 
  0% { box-shadow: 0 0 0 0 rgba(0,212,255,.35); } 
  100% { box-shadow: 0 0 0 14px rgba(0,212,255,0); } 
}

/* Stepper active glow loop */
.step.active { 
  animation: step-glow 2.4s ease-in-out infinite; 
}
@keyframes step-glow { 
  0%,100% { box-shadow: var(--glow-1); } 
  50% { box-shadow: 0 0 30px rgba(0,153,255,.55); } 
}

/* Modal entrance polish */
.order-modal { 
  transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .32s ease; 
}
.modal-card { 
  transform-origin: 50% 50%; 
  animation: modal-pop .4s cubic-bezier(.2,.8,.2,1); 
}
@keyframes modal-pop { 
  from { transform: scale(.98) rotateX(2deg); opacity:.96; } 
  to { transform: scale(1) rotateX(0); opacity:1; } 
}
/* Hero */
.hero { padding: 60px 0 30px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,212,255,.10), transparent 70%);
  animation: hero-glow 4s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes hero-glow { 0% { opacity:.3; transform: scale(1);} 100% { opacity:.55; transform: scale(1.08);} }

.h-eyebrow {
  display: inline-flex; gap: 10px; align-items: center; color: #fff;
  font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 12px;
  border: 1px solid var(--neon-1);
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2));
  border-radius: 999px; padding: 10px 16px;
  box-shadow: var(--glow-1), var(--glow-2);
  animation: eyebrow-pulse 2.2s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.h-eyebrow::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  animation: eyebrow-shine 3s ease-in-out infinite;
}
@keyframes eyebrow-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.04);} }
@keyframes eyebrow-shine { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

h1 {
  margin: 20px 0 10px; font-size: 52px; font-weight: 1000; letter-spacing: -.03em;
  background: linear-gradient(135deg, #fff, var(--neon-1), var(--neon-2), var(--neon-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(0, 212, 255, .35);
  animation: title-glow 3s ease-in-out infinite alternate; position: relative;
}
h1::after{ content:""; position:absolute; inset:auto 0 -6px 0; height:2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); filter: blur(1px); }
@keyframes title-glow { 0% { filter: brightness(1);} 100% { filter: brightness(1.18);} }

.hero-sub { color: var(--muted); margin: 0 0 24px; font-size: 18px; line-height: 1.6; animation: fade-in-up 1s ease-out 0.4s both; }
@keyframes fade-in-up { from { opacity:0; transform: translateY(26px);} to { opacity:1; transform: translateY(0);} }

.cta-row { display: flex; gap: 10px; flex-wrap: wrap }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius); border: 1px solid var(--neon-1);
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2), var(--neon-3));
  color: #fff; text-decoration: none; padding: 14px 22px;
  font-weight: 900; font-size: 15px; letter-spacing: .4px;
  position: relative; overflow: hidden; transition: all .25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--glow-1), var(--glow-2); animation: btn-glow 2s ease-in-out infinite alternate;
}
.btn::before { content:''; position:absolute; inset:0; border-radius: var(--radius); background: linear-gradient(135deg, var(--neon-4), var(--neon-5)); opacity:0; transition: opacity .25s; }
.btn::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-100%); transition: transform .55s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--glow-1), var(--glow-2), var(--glow-3), 0 20px 40px rgba(0,0,0,.35); border-color: var(--neon-4); }
.btn:hover::before { opacity:.25; }
.btn:hover::after { transform: translateX(100%); }
@keyframes btn-glow { 0% { box-shadow: var(--glow-1), var(--glow-2);} 100% { box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);} }

.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; animation: none; }
.btn-outline:hover { background: linear-gradient(135deg, var(--neon-1), var(--neon-2)); color: #fff; border-color: var(--neon-1); box-shadow: var(--glow-1), var(--glow-2); }

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { 
    animation: none !important; 
    transition: none !important; 
  }
}