/* Kimoyo Systems · animaciones.
   Los estados ocultos solo existen con JavaScript activo (html.js) y sin
   "reducir movimiento": en cualquier otro caso el contenido se ve completo. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Transiciones de estado (hover, foco): cortas, siempre activas */
.btn { transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.16s var(--ease-out); }
.btn:active { transform: scale(0.97); }
.arrow, .arrow-out { transition: transform 0.3s var(--ease-out); }

.header { transition: box-shadow 0.3s, background-color 0.3s; }
.header.is-scrolled { box-shadow: 0 10px 28px -18px rgba(11, 31, 75, 0.4); }
/* Vidrio: solo donde el navegador puede desenfocar el fondo; si no, queda opaco y legible */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header.is-scrolled {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
  }
}
.nav-links a { transition: color 0.2s; }
.nav-links a::after { transition: transform 0.2s var(--ease-out); }

.burger span { transition: transform 0.25s var(--ease-out), opacity 0.2s; }
.mobile-menu { transition: grid-template-rows 0.35s var(--ease-out); }

.svc { transition: background-color 0.25s; }
.svc::before { transition: opacity 0.25s; }
.svc-icon { transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out); }
.route { transition: color 0.25s; }
.svc:hover .route { color: var(--cobalt-600); }

.why { transition: background-color 0.25s; }
.sw { transition: opacity 0.25s linear; } /* palabras de la promesa: las enciende el scroll */
.faq-item summary { transition: color 0.2s, transform 0.16s var(--ease-out); }
.nav-toggle { transition: transform 0.16s var(--ease-out); }
.nav-toggle:active, .work-link:active { transform: scale(0.97); }
.faq-item summary:active { transform: scale(0.985); }
.faq-icon { transition: transform 0.25s var(--ease-out), background-color 0.25s; }
.contact-ico { transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.foot-col a { transition: color 0.2s; }
.work-link { transition: color 0.2s, transform 0.16s var(--ease-out); }
.browser { transition: transform 0.25s var(--ease-out); }
.field input, .field select, .field textarea { transition: border-color 0.2s; }

.spinner { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(4px); }
  .btn:hover .arrow-out, .work:hover .arrow-out { transform: translate(2px, -2px); }
  .svc:hover .svc-icon { transform: translateY(-3px) rotate(-6deg); }
  .work:hover .browser { transform: translateY(-6px); }
  .btn-amber:hover, .btn-navy:hover { transform: translateY(-2px); }
  .btn-amber:active, .btn-navy:active { transform: scale(0.97); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Carga: logo que se dibuja */
  .js .header .mark-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
  .js .header .mark-arms, .js .header .mark-slash { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .header .brand-word > span { opacity: 0; transform: translateY(8px); display: inline-block; }
  .js.is-loaded .header .mark-bar { transform: none; transition: transform 0.5s var(--ease-out) 0.1s; }
  .js.is-loaded .header .mark-arms { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s var(--ease-in-out) 0.35s; }
  .js.is-loaded .header .mark-slash { stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s var(--ease-out) 0.8s; }
  .js.is-loaded .header .brand-word > span { opacity: 1; transform: none; transition: opacity 0.5s 0.55s, transform 0.6s var(--ease-out) 0.55s; }
  .js.is-loaded .header .brand-word > .bw-s { transition-delay: 0.7s; }
  .js.is-loaded .header .brand-word > .bw-b { transition-delay: 0.8s; }

  /* Hero */

  .hero-glow { animation: glow-breathe 7s ease-in-out infinite alternate; }
  @keyframes glow-breathe { from { opacity: 0.65; } to { opacity: 1; } }

  .pill-dot { position: relative; }
  .pill-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber-400);
    animation: ping 2.4s var(--ease-out) infinite;
  }
  @keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

  .js [data-hero] { opacity: 0; transform: translateY(20px); }
  .js.is-loaded [data-hero] {
    opacity: 1; transform: none;
    transition: opacity 0.5s calc(0.3s + var(--d, 0) * 50ms), transform 0.65s var(--ease-out) calc(0.3s + var(--d, 0) * 50ms);
  }

  .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .wi { display: inline-block; }
  .js .wi { transform: translateY(110%); }
  .js.is-loaded .wi { transform: none; transition: transform 1s var(--ease-out) calc(0.25s + var(--i, 0) * 70ms); }

  .hero-aura::before { animation: aura-a 16s ease-in-out infinite alternate; }
  .hero-aura::after { animation: aura-b 22s ease-in-out infinite alternate; }
  @keyframes aura-a { to { transform: translate3d(6%, -4%, 0) scale(1.08); } }
  @keyframes aura-b { to { transform: translate3d(-10%, -8%, 0) scale(1.12); } }

  /* Aparición al hacer scroll */
  .js [data-reveal] { opacity: 0; transform: translateY(28px); }
  .js [data-reveal="scale"] { transform: translateY(32px) scale(0.95); }
  .js [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity 0.6s calc(var(--i, 0) * 60ms), transform 0.7s var(--ease-out) calc(var(--i, 0) * 60ms), background-color 0.25s;
  }

  /* Celular del caso */
  .phone { will-change: transform; }
  .phone-glare {
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
  }
  .case-visual:hover .phone-glare { opacity: 1; transform: translateX(120%); transition: transform 1.1s var(--ease-out); }

  /* Pasos: la línea se dibuja de uno a otro */
  .js .steps .step-num { opacity: 0; transform: scale(0.9); }
  .js .steps .step-line { transform: scaleX(0); }
  .js .steps .step h3, .js .steps .step p { opacity: 0; transform: translateY(14px); }
  .js .steps.is-in .step-num { opacity: 1; transform: none; transition: opacity 0.4s calc(var(--i) * 260ms), transform 0.7s var(--ease-out) calc(var(--i) * 260ms); }
  .js .steps.is-in .step-line { transform: none; transition: transform 0.7s var(--ease-in-out) calc(var(--i) * 260ms + 180ms); }
  .js .steps.is-in .step h3, .js .steps.is-in .step p { opacity: 1; transform: none; transition: opacity 0.6s calc(var(--i) * 260ms + 120ms), transform 0.7s var(--ease-out) calc(var(--i) * 260ms + 120ms); }
  .js .steps.is-in .step p { transition-delay: calc(var(--i) * 260ms + 200ms); }

  /* Menú del celular */
  .js .mobile-menu-links a { opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s; }
  .js .mobile-menu.is-open .mobile-menu-links a { opacity: 1; transform: none; transition: opacity 0.25s calc(var(--i, 0) * 40ms + 60ms), transform 0.3s var(--ease-out) calc(var(--i, 0) * 40ms + 60ms); }

  /* Formulario */
  .form-status:not(:empty), .field-error:not(:empty) { animation: status-in 0.3s var(--ease-out); }
  @keyframes status-in { from { opacity: 0; transform: translateY(8px); } }
  .form.is-shake { animation: shake 0.4s; }
  @keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .btn:active, .nav-toggle:active, .work-link:active, .faq-item summary:active, .svc:hover .svc-icon, .work:hover .browser, .btn:hover .arrow, .btn:hover .arrow-out, .work:hover .arrow-out { transform: none; }
  .js [data-reveal] { opacity: 0; }
  .js [data-reveal].is-in { opacity: 1; transition: opacity 0.3s; }
}