/* ==========================================================================
   ABZEND Development — styles.css
   Sistema de diseño oscuro + contrato de animación.
   Nota: Tailwind se compila aparte desde las clases del HTML.
   Aquí viven SOLO las clases personalizadas de movimiento y estados.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #0a0f1d;
  color: #cbd5e1; /* slate-300 */
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Evita scroll horizontal en 360px */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Cada sección con ancla deja aire arriba al navegar */
section {
  scroll-margin-top: 5rem;
}

/* --------------------------------------------------------------------------
   2. ACCESIBILIDAD
   -------------------------------------------------------------------------- */

/* Skip link: oculto hasta recibir foco por teclado */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  background: #111827;
  color: #ffffff;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: top 200ms ease;
}
.skip-link:focus {
  top: 1rem;
}

/* Anillo de foco visible y consistente (AA) */
:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* --------------------------------------------------------------------------
   3. UTILIDADES DE MARCA
   -------------------------------------------------------------------------- */

/* Texto con degradado azul -> violeta */
.text-gradient {
  background-image: linear-gradient(90deg, #38bdf8 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Superficie tipo vidrio (usar con moderación: nav y tarjetas pequeñas) */
.glass {
  background-color: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Botón principal con glow (transición de box-shadow pequeña y barata) */
.btn-glow {
  position: relative;
  box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 250ms ease;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(56, 189, 248, 0.35),
              0 4px 16px rgba(139, 92, 246, 0.28);
}
.btn-glow:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. REVEAL (aparición al hacer scroll)
   .reveal -> main.js añade .is-visible
   data-delay="0|100|200|300|400" -> main.js define transition-delay
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.reveal-left {
  transform: translateX(-40px);
}
.reveal-right {
  transform: translateX(40px);
}
.reveal-scale {
  transform: scale(0.94);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* main.js añade .done tras transitionend: liberamos la capa de composición */
.reveal.done {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   5. PARALLAX
   main.js actualiza transform: translate3d(0, Ypx, 0) solo en viewport
   -------------------------------------------------------------------------- */
.parallax {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   6. FLOAT (flotación infinita suave)
   Solo transform, 60fps
   -------------------------------------------------------------------------- */
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.float {
  animation: floatY 6s ease-in-out infinite;
}
.float-slow {
  animation-duration: 9s;
}
.float-delay {
  animation-delay: 1.5s;
}

/* --------------------------------------------------------------------------
   7. CARD LIFT (elevación al hover)
   -------------------------------------------------------------------------- */
.card-lift {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms ease,
              box-shadow 300ms ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.55);
}

/* --------------------------------------------------------------------------
   8. TIMELINE / PROCESO
   #process define --progress (0..1) desde main.js
   -------------------------------------------------------------------------- */
.timeline-progress {
  transform: scaleY(var(--progress, 0));
  transform-origin: top center;
  transition: transform 120ms linear;
}

.step {
  opacity: 0.55;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.step.is-active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   9. HEADER + SCROLL BAR
   -------------------------------------------------------------------------- */
#site-header {
  transition: background-color 300ms ease, border-color 300ms ease,
              backdrop-filter 300ms ease;
  border-bottom: 1px solid transparent;
}
#site-header.is-scrolled {
  background-color: rgba(10, 15, 29, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

#scroll-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
}

/* Enlace de navegación activo */
.nav-link.is-current {
  color: #ffffff;
}
.nav-link.is-current::after {
  transform: scaleX(1);
}
.nav-link::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, #38bdf8, #8b5cf6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   10. FORMULARIO
   Estados: .is-valid / .is-invalid en el input
   -------------------------------------------------------------------------- */
.field-error {
  color: #f87171; /* red-400 */
  font-size: 0.8125rem;
  margin-top: 0.375rem;
}

.is-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

/* Botón de envío: 3 estados */
#submit-btn .label-sending,
#submit-btn .label-sent {
  display: none;
}

#submit-btn[data-state="sending"] .label-idle,
#submit-btn[data-state="sent"] .label-idle {
  display: none;
}
#submit-btn[data-state="sending"] .label-sending {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
#submit-btn[data-state="sent"] .label-sent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#submit-btn[data-state="sending"],
#submit-btn[data-state="sent"] {
  pointer-events: none;
  opacity: 0.9;
}

/* Spinner del estado "sending" */
@keyframes spin360 {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: spin360 700ms linear infinite;
}

/* --------------------------------------------------------------------------
   11. HERO: helpers 3D (solo transform, sin JS)
   -------------------------------------------------------------------------- */
.phone-3d {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.phone-3d > * {
  transform: rotateY(-14deg) rotateX(6deg) translateZ(0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.phone-3d:hover > * {
  transform: rotateY(-6deg) rotateX(3deg) translateZ(18px);
}

.browser-3d {
  perspective: 1400px;
  transform-style: preserve-3d;
}
.browser-3d > * {
  transform: rotateY(10deg) rotateX(4deg);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.browser-3d:hover > * {
  transform: rotateY(4deg) rotateX(2deg) translateZ(14px);
}

/* --------------------------------------------------------------------------
   12. PREFERS-REDUCED-MOTION
   Desactiva float, parallax y desplazamientos de reveal.
   El contenido aparece de inmediato.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .float,
  .float-slow,
  .float-delay {
    animation: none !important;
  }

  .parallax {
    transform: none !important;
    will-change: auto !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .card-lift:hover {
    transform: none;
  }

  .btn-glow:hover {
    transform: none;
  }

  .phone-3d > *,
  .browser-3d > *,
  .phone-3d:hover > *,
  .browser-3d:hover > * {
    transform: none !important;
  }

  .timeline-progress {
    transition: none;
  }

  .spinner {
    animation: none;
  }
}