/* ============================================================
   TNT STUDIO — ANIMATIONS v2.0
   Premium motion design system.
   GPU-accelerated, performant, reduced-motion aware.
   ============================================================ */

/* ── 1. KEYFRAME DEFINITIONS ── */

/* Fade up (used for hero text, section reveals) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade down (eyebrow labels, notifications) */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade left / right */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Generic fade */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Slide up from bottom (mobile menu items, toasts) */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Floating / levitation */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50%       { transform: translateY(-20px) translateX(-50%); }
}

@keyframes floatFree {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

/* Gradient animation (for text, backgrounds) */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Neon pulse (glow breathing) */
@keyframes glowPulse {
  0%, 100% {
    box-shadow:
      0 0 8px  rgba(138, 99, 240, 0.5),
      0 0 20px rgba(138, 99, 240, 0.3);
  }
  50% {
    box-shadow:
      0 0 16px rgba(138, 99, 240, 0.9),
      0 0 40px rgba(138, 99, 240, 0.5),
      0 0 70px rgba(138, 99, 240, 0.2);
  }
}

@keyframes glowPulseSecondary {
  0%, 100% {
    box-shadow:
      0 0 8px  rgba(127, 209, 203, 0.5),
      0 0 20px rgba(127, 209, 203, 0.3);
  }
  50% {
    box-shadow:
      0 0 16px rgba(127, 209, 203, 0.9),
      0 0 40px rgba(127, 209, 203, 0.5);
  }
}

/* Pulse dot (status indicators, eyebrow badges) */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

/* Grid background pulse */
@keyframes gridPulse {
  0%   { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* Grid pulse (legacy compatibility) */
@keyframes pulseGrid {
  0%   { opacity: 0.05; }
  100% { opacity: 0.18; }
}

/* Shimmer (skeleton loading, loading bars) */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* Scroll dot (hero scroll indicator) */
@keyframes scrollDot {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  80%  { transform: translateX(-50%) translateY(12px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 0; }
}

/* Border gradient rotation (premium card borders) */
@keyframes borderRotate {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* Counter bounce (number counters) */
@keyframes counterBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Heartbeat (live/online indicators) */
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.15); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.1); }
  70%       { transform: scale(1); }
}

/* Spin (loading spinners) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Spinner pulse (combined scale + opacity) */
@keyframes spinnerPulse {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Ripple */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

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

/* ── 2. UTILITY ANIMATION CLASSES ── */

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--color-brand-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  will-change: transform;
}

.spinner-lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}

/* Ripple container */
.ripple-container {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.ripple-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple 0.6s var(--ease-out) forwards;
  pointer-events: none;
}

/* Glow pulse loop */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

.glow-pulse-secondary {
  animation: glowPulseSecondary 3s ease-in-out infinite;
}

/* Float loop */
.float {
  animation: floatFree 5s ease-in-out infinite;
}

/* ── 3. SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* ── 4. PAGE TRANSITION ── */
.page-fade-in {
  animation: fadeIn 0.4s var(--ease-out) forwards;
}

/* ── 5. LOADING BUTTON STATE ── */
.btn.loading {
  pointer-events: none;
  opacity: 0.75;
}

.btn.loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: var(--sp-2);
  display: inline-block;
}

/* ── 6. TOAST / NOTIFICATION ── */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-sm);
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  z-index: var(--z-toast);
  opacity: 0;
  transition: opacity var(--transition-normal), transform var(--transition-spring);
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast.toast-success { border-color: rgba(58, 245, 197, 0.3); }
.toast.toast-success .toast-icon { color: var(--color-success); }
.toast.toast-error   { border-color: rgba(255, 77, 109, 0.3); }
.toast.toast-error   .toast-icon { color: var(--color-error); }

/* ── 7. COUNTER ANIMATION ── */
.counter-animated {
  display: inline-block;
  transition: transform 0.3s var(--ease-spring);
}

.counter-animated.bouncing {
  animation: counterBounce 0.4s var(--ease-spring);
}

/* ── 8. FORM STATES ── */
.form-field {
  position: relative;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(138, 99, 240, 0.15);
}

.form-field input.error,
.form-field textarea.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.1);
}

.form-field input.success,
.form-field textarea.success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(58, 245, 197, 0.1);
}

.field-error {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--sp-1);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.field-error.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 9. AMBIENT ORBS (decorative background elements) ── */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.ambient-orb-primary {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(138, 99, 240, 0.1) 0%, transparent 70%);
  animation: floatFree 15s ease-in-out infinite;
}

.ambient-orb-secondary {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(127, 209, 203, 0.08) 0%, transparent 70%);
  animation: floatFree 18s ease-in-out infinite reverse;
}

/* ── 10. HOVER LIFT SYSTEM ── */
.hover-lift {
  transition: transform var(--transition-spring), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.hover-lift-sm:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── 11. LINK UNDERLINE ANIMATION ── */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-brand-secondary);
  transition: width var(--transition-normal) var(--ease-spring);
}

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

/* ── 12. GLITCH EFFECT (optional premium accent) ── */
@keyframes glitch {
  0%   { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
  20%  { clip-path: inset(92% 0 1% 0);  transform: translate(1px, -1px); }
  40%  { clip-path: inset(43% 0 56% 0); transform: translate(-1px, 3px); }
  60%  { clip-path: inset(25% 0 58% 0); transform: translate(3px, -2px); }
  80%  { clip-path: inset(54% 0 7% 0);  transform: translate(-1px, 1px); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -1px); }
}

/* ── 13. HERO VIDEO OVERLAY ── */
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0.15) 30%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0.85) 100%
  );
  z-index: 0;
}

/* ── 14. REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .glow-pulse,
  .glow-pulse-secondary,
  .float,
  .ambient-orb-primary,
  .ambient-orb-secondary { animation: none; }

  .hero-eyebrow,
  .hero h1, .hero h2,
  .hero p,
  .cta-buttons,
  .platforms,
  .scroll-indicator {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}