/* ============================================================
   Scottbird — sistema de movimiento sutil (páginas interiores)
   Formal, discreto: distancias cortas, easing fuerte, <600ms.
   ============================================================ */

:root {
  --sb-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Barra de progreso de scroll (elemento creado por motion.js) --- */
.sb-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--turq, #53B6B5); z-index: 200; transition: width 0.1s linear;
}

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

  /* --- Entrada del hero al cargar la página (escalonada) --- */
  .pagehero .eyebrow,
  .pagehero h1,
  .pagehero .lead,
  .pagehero .btn-cta,
  .pagehero .pagehero-img {
    animation: sb-rise 0.6s var(--sb-ease) both;
  }
  .pagehero h1            { animation-delay: 0.08s; }
  .pagehero .lead         { animation-delay: 0.16s; }
  .pagehero .pagehero-img { animation-delay: 0.16s; }
  .pagehero .btn-cta      { animation-delay: 0.24s; }

  @keyframes sb-rise {
    from { opacity: 0; transform: translateY(14px); }
  }

  /* --- Aparición al hacer scroll (motion.js aplica las clases) --- */
  .sb-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--sb-ease), transform 0.55s var(--sb-ease);
  }
  .sb-reveal.sb-in {
    opacity: 1;
    transform: none;
  }

  /* --- Botones: respuesta al presionar --- */
  .btn-cta, .nav-cta, .btn-submit, .svc-more {
    transition: transform 0.16s var(--sb-ease), background 0.15s ease, color 0.15s ease;
  }
  .btn-cta:active, .nav-cta:active, .btn-submit:active, .svc-more:active {
    transform: scale(0.97);
  }
  .btn-cta, .nav-cta, .btn-submit, .svc-more {
    -webkit-tap-highlight-color: transparent;
  }

  /* --- Nav: subrayado origin-aware (el activo ya tiene su borde propio) --- */
  .nav-link { position: relative; }
  .nav-link:not(.active)::after {
    content: ""; position: absolute; left: 0; bottom: -4px;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s ease;
  }
  .nav-link:not(.active):hover::after { transform: scaleX(1); }
}

/* --- Hover de tarjetas: solo dispositivos con cursor --- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .svc, .member2 {
    transition: transform 0.2s var(--sb-ease), box-shadow 0.2s var(--sb-ease);
  }
  .svc:hover, .member2:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(19, 42, 61, 0.10);
  }

  /* --- Zoom sutil en fotos (hero y banners intermedios) --- */
  .pagehero-img img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pagehero-img:hover img { transform: scale(1.045); }
}