/* JOHNNYTECH — capa de animaciones (vanilla, solo transform/opacity: barato para GPU)
   Curvas y duraciones basadas en los estándares de Emil Kowalski (emilkowalski/skill, MIT):
   - enter/exit UI → ease-out fuerte · movimiento en pantalla → ease-in-out · jamás ease-in en UI
   - UI < 300ms; marketing puede más · stagger 30-80ms · press feedback en todo lo clickeable */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Orbes de fondo flotantes ---------- */
.orbe {
  position: fixed; border-radius: 50%; filter: blur(90px); opacity: .14;
  pointer-events: none; z-index: -1;
  animation: flotar 20s ease-in-out infinite;
}
.orbe.a { width: 440px; height: 440px; background: #38bdf8; top: -140px; left: -120px; }
.orbe.b { width: 380px; height: 380px; background: #7c3aed; bottom: -120px; right: -100px; animation-delay: -10s; }
@keyframes flotar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(46px, 34px) scale(1.08); }
}

/* ---------- Entrada del hero (stagger al cargar) ---------- */
.hero > * { opacity: 0; animation: subir .65s var(--ease-out) forwards; }
.hero > *:nth-child(1) { animation-delay: .05s; }
.hero > *:nth-child(2) { animation-delay: .13s; }
.hero > *:nth-child(3) { animation-delay: .21s; }
.hero > *:nth-child(4) { animation-delay: .29s; }
.hero > *:nth-child(5) { animation-delay: .37s; }
@keyframes subir {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- Shimmer en el acento del título ---------- */
.hero h1 em {
  background: linear-gradient(90deg, #38bdf8, #7dd3fc, #fbbf24, #38bdf8);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo 7s linear infinite;
}
@keyframes brillo { to { background-position: 300% 0; } }

/* ---------- Reveal al scrollear (JS pone data-reveal + .visible) ----------
   Nunca desde scale(0): siempre 0.97-0.98 + opacity (regla Emil) */
[data-reveal] {
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .5s ease, transform .5s var(--ease-out);
  transition-delay: var(--rev-delay, 0ms);
}
[data-reveal].visible { opacity: 1; transform: none; }

/* ---------- Micro-interacciones (hover solo con mouse real: touch dispara falsos hover) ---------- */
.card, .plan { transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; }
.btn { transition: transform 160ms var(--ease-out), border-color 160ms, box-shadow 160ms, filter 160ms; }
.btn:active { transform: scale(0.97); } /* press feedback, rango 0.95-0.98 */
nav .cta:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 14px 38px -14px rgba(56, 189, 248, .3); }
  .btn:hover { transform: translateY(-2px); }
  .btn.primario:hover { box-shadow: 0 6px 26px -6px rgba(56, 189, 248, .55); }
  .plan:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 38px -14px rgba(56, 189, 248, .25); }
  .card:hover .tag { transform: translateY(-1px); }
}
.tag, .badge { transition: transform 150ms ease; }

/* nav: subrayado que crece */
nav .links a { position: relative; }
nav .links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease-out);
}
nav .links a:hover::after, nav .links a.activa::after { transform: scaleX(1); }
nav .links a:hover { text-decoration: none; }

/* cursor del logo parpadeando */
.logo .cursorline { font-style: normal; color: var(--accent2); animation: parpadeo 1.1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* kicker con pulso sutil */
.hero .kicker { animation: subir .65s var(--ease-out) forwards, pulso 4s ease-in-out 1.2s infinite; }
@keyframes pulso {
  0%, 100% { border-color: var(--border); }
  50% { border-color: rgba(56, 189, 248, .5); }
}