/* =====================================================================
   MJ CORE — MOTION
   Animaciones de entrada (scroll) y microinteracciones de hover.
   Solo se anima transform, opacity y clip-path (no provocan relayout).
   Las entradas las activa el JS (clase .mj-motion + atributo data-reveal) y
   solo en lo que está por debajo de la pantalla al cargar. Sin JS, o con
   "reducir movimiento" activado, todo se ve estático y completo.
   ===================================================================== */

@property --mj-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --mj-ease-out: cubic-bezier(.16, 1, .3, 1);   /* expo out: rápido al inicio, aterrizaje suave */
}

/* ---------------------------------------------------------------------
   1. ENTRADAS AL HACER SCROLL
   --------------------------------------------------------------------- */

.mj-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity .8s var(--mj-ease-out),
    transform 1s var(--mj-ease-out);
}
.mj-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Imágenes grandes: se "destapan" con un ligero zoom de salida */
.mj-motion [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(14% 8% 14% 8%);
  transition: clip-path 1.2s var(--mj-ease-out);
}
.mj-motion [data-reveal="clip"] img {
  transform: scale(1.12);
  transition: transform 1.6s var(--mj-ease-out);
}
.mj-motion [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.mj-motion [data-reveal="clip"].is-in img { transform: none; }

/* Cabecera de las páginas interiores: entrada en CSS puro al cargar
   (sin esperar al JS, para no retrasar el contenido principal / LCP) */
@media (prefers-reduced-motion: no-preference) {
  .mj-hero--simple .container > * {
    animation: mj-rise .9s var(--mj-ease-out) both;
  }
  .mj-hero--simple .container > :nth-child(2) { animation-delay: 80ms; }
  .mj-hero--simple .container > :nth-child(3) { animation-delay: 160ms; }
}
@keyframes mj-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   2. CARDS: elevación, borde degradado animado y brillo que sigue al cursor
   --------------------------------------------------------------------- */

.mj-card,
.mj-team-card {
  position: relative;
  isolation: isolate;
}
.mj-card {
  transition:
    transform .5s var(--mj-ease-out),
    box-shadow .5s var(--mj-ease-out),
    border-color .3s ease;
}

/* Borde degradado (máscara: solo se pinta el anillo de 1px) */
.mj-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--mj-angle), var(--mj-core-blue), var(--mj-signal-orange), var(--color-focus-ring), var(--mj-core-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

/* Brillo suave bajo el cursor (posición en --mx / --my, la fija el JS) */
.mj-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(249, 87, 56, .08), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.mj-card--project img {
  transition: transform .8s var(--mj-ease-out);
}

.mj-team-card img {
  transition: transform .6s var(--mj-ease-out), box-shadow .6s var(--mj-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mj-card:hover {
    transform: translate3d(0, -6px, 0);
    border-color: transparent;
    box-shadow: 0 28px 56px -28px rgba(0, 19, 100, .28);
  }
  .mj-card:hover::before {
    opacity: 1;
    animation: mj-spin 4s linear infinite;
  }
  .mj-card:hover::after { opacity: 1; }
  .mj-card--project:hover img { transform: scale(1.03); }

  .mj-team-card:hover img {
    transform: translate3d(0, -4px, 0) scale(1.04);
    box-shadow: 0 0 0 4px var(--color-bg-page), 0 0 0 6px var(--mj-signal-orange);
  }
}
@keyframes mj-spin {
  to { --mj-angle: 360deg; }
}

/* Pantallas táctiles: no hay hover, así que el efecto de marca se traslada a
   (a) un barrido del borde degradado cuando la card aparece en pantalla y
   (b) una ligera presión al tocarla. */
@media (hover: none) {
  .mj-card,
  .mj-team-card {
    -webkit-tap-highlight-color: transparent;
    transition: transform .3s var(--mj-ease-out);
  }
  .mj-card:active,
  .mj-team-card:active { transform: scale(.975); }

  .mj-card.mj-sweep::before {
    animation: mj-sweep 1.8s var(--mj-ease-out) var(--sweep-delay, 0ms) both;
  }
}
@keyframes mj-sweep {
  0%   { opacity: 0; --mj-angle: 0deg; }
  30%  { opacity: 1; }
  100% { opacity: 0; --mj-angle: 360deg; }
}

/* ---------------------------------------------------------------------
   3. BOTONES Y ENLACES
   --------------------------------------------------------------------- */

.mj-btn {
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .35s var(--mj-ease-out),
    box-shadow .35s var(--mj-ease-out);
}
.mj-link-arrow::after {
  display: inline-block;
  transition: transform .35s var(--mj-ease-out);
}
.mj-footer-list a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color .2s ease, background-size .4s var(--mj-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mj-btn:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 12px 28px -12px rgba(204, 74, 32, .5);
  }
  .mj-link-arrow:hover::after { transform: translateX(5px); }
  .mj-footer-list a:hover { background-size: 100% 1px; }
}
.mj-btn:active { transform: scale(.97); }

/* FAQ: el título se desplaza ligeramente al pasar el ratón */
.mj-faq__item summary { transition: color .2s ease, transform .35s var(--mj-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mj-faq__item summary:hover { color: var(--mj-signal-orange-strong); transform: translateX(4px); }
}

/* ---------------------------------------------------------------------
   4. REDUCIR MOVIMIENTO: sin animaciones de entrada ni elevaciones
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mj-motion [data-reveal],
  .mj-motion [data-reveal] img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .mj-card:hover,
  .mj-btn:hover,
  .mj-team-card:hover img,
  .mj-card--project:hover img { transform: none; }
  .mj-card:hover::before,
  .mj-card.mj-sweep::before { animation: none; }
  .mj-card:active,
  .mj-team-card:active { transform: none; }
}