/*
 * Motion layer — cargar al final de las hojas de estilo.
 * API opcional para JS, aplicada por tarjeta:
 * --motion-rx: 2deg; --motion-ry: -3deg;
 * --motion-spot-x: 62%; --motion-spot-y: 35%;
 * --motion-spot-opacity: .7;
 * Alias admitidos: --tilt-x, --tilt-y, --pointer-x, --pointer-y.
 */

:root {
  --motion-fast: 160ms;
  --motion-mid: 360ms;
  --motion-slow: 700ms;
  --motion-out: cubic-bezier(.16, 1, .3, 1);
  --motion-spring: cubic-bezier(.2, .9, .25, 1.14);
}

@media (prefers-reduced-motion: no-preference) {
  html.interactions-paused *,
  html.interactions-paused *::before,
  html.interactions-paused *::after {
    animation-play-state: paused !important;
  }

  /* Entrada general y encabezados editoriales. */
  .js.motion-ready .reveal {
    opacity: 0;
    translate: 0 1.25rem;
    filter: blur(3px);
    transition:
      opacity var(--motion-slow) var(--motion-out),
      translate var(--motion-slow) var(--motion-out),
      filter 520ms ease-out;
  }

  .js.motion-ready .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }

  .js.motion-ready .section-header.reveal {
    opacity: 1;
    translate: 0;
    filter: none;
    transition: none;
  }

  .js.motion-ready .section-header.reveal > * {
    opacity: 0;
    translate: 0 1rem;
    transition:
      opacity var(--motion-slow) var(--motion-out),
      translate var(--motion-slow) var(--motion-out);
  }

  .js.motion-ready .section-header.reveal > .section-summary { transition-delay: 100ms; }

  .js.motion-ready .section-header.reveal.is-visible > * {
    opacity: 1;
    translate: 0;
  }

  /* Hero escalonado; usa propiedades individuales para conservar rotaciones. */
  .js.motion-ready .hero-title-wrap.reveal .tape,
  .js.motion-ready .hero-title-wrap.reveal .micro-label,
  .js.motion-ready .hero-title-wrap.reveal h1 > span,
  .js.motion-ready .hero-title-wrap.reveal .role-tag,
  .js.motion-ready .hero-bottom.reveal > * {
    opacity: 0;
    translate: 0 .7rem;
    scale: .97;
    transition:
      opacity 560ms var(--motion-out),
      translate 680ms var(--motion-out),
      scale 680ms var(--motion-spring);
  }

  .js.motion-ready .hero-title-wrap.reveal .tape {
    scale: .25 1;
    transform-origin: center;
  }

  .js.motion-ready .hero-title-wrap.reveal .micro-label { transition-delay: 60ms; }
  .js.motion-ready .hero-title-wrap.reveal h1 > span:first-child { transition-delay: 110ms; }
  .js.motion-ready .hero-title-wrap.reveal h1 > span:nth-child(2) { transition-delay: 180ms; }
  .js.motion-ready .hero-title-wrap.reveal .role-tag--left { transition-delay: 270ms; }
  .js.motion-ready .hero-title-wrap.reveal .role-tag--right { transition-delay: 320ms; }
  .js.motion-ready .hero-bottom.reveal > :nth-child(2) { transition-delay: 90ms; }
  .js.motion-ready .hero-bottom.reveal > :nth-child(3) { transition-delay: 160ms; }

  .js.motion-ready .hero-title-wrap.reveal.is-visible .tape,
  .js.motion-ready .hero-title-wrap.reveal.is-visible .micro-label,
  .js.motion-ready .hero-title-wrap.reveal.is-visible h1 > span,
  .js.motion-ready .hero-title-wrap.reveal.is-visible .role-tag,
  .js.motion-ready .hero-bottom.reveal.is-visible > * {
    opacity: 1;
    translate: 0;
    scale: 1;
  }

  /* Navegación, filtros y presión de controles. */
  .nav a,
  .nav a::after,
  .button,
  .header-cta,
  .icon-button,
  .filters button,
  .project-open {
    transition:
      color var(--motion-fast) ease,
      background-color var(--motion-fast) ease,
      box-shadow var(--motion-mid) var(--motion-out),
      transform var(--motion-mid) var(--motion-spring);
  }

  .nav a.is-active { background: color-mix(in srgb, var(--yellow) 18%, transparent); }
  .filters button.is-active { transform: translateY(-1px); box-shadow: 2px 3px 0 var(--coral); }

  .button > span,
  .header-cta > span,
  .inline-link > span,
  .resource-card > a > span,
  .back-top > span {
    display: inline-block;
    transition: translate var(--motion-mid) var(--motion-out);
  }

  .button:active,
  .header-cta:active,
  .icon-button:active,
  .filters button:active {
    transform: translate(1px, 2px) scale(.975);
    transition-duration: 70ms;
  }

  .project-open:hover { transform: rotate(45deg) scale(1.05); }
  .project-open:active { transform: rotate(45deg) scale(.94); transition-duration: 70ms; }

  .scroll-cue i { transform-origin: right center; animation: motion-cue 1.9s var(--motion-out) infinite; }
  .community-card.is-visible .community-signal i { transform-origin: center bottom; animation: motion-signal 3.6s ease-in-out infinite alternate; }
  .community-card.is-visible .community-signal i:nth-child(2) { animation-delay: -1.35s; }
  .community-card.is-visible .community-signal i:nth-child(3) { animation-delay: -.7s; }

  /*
   * Actividad ambiental: cada bloque conserva un pulso propio sin mover el
   * contenido que se lee. Los retrasos negativos evitan un arranque mecánico.
   */
  .app-ready .hero-orbit--one {
    animation: ambient-orbit 8.5s ease-in-out -2.2s infinite alternate;
  }

  .app-ready .hero-orbit--two {
    animation: ambient-orbit 10s ease-in-out -6.4s infinite alternate-reverse;
  }

  .app-ready .kicker i {
    animation: ambient-beacon 3.8s ease-out -1.1s infinite;
  }

  .portrait-wrap.is-visible .portrait-art::before {
    animation: ambient-grid-flow 22s linear infinite;
  }

  .portrait-wrap.is-visible .portrait-network i {
    transform-origin: center;
    animation: ambient-node 4.8s ease-in-out infinite alternate;
  }

  .portrait-wrap.is-visible .portrait-network i:nth-child(2) { animation-delay: -3.1s; }
  .portrait-wrap.is-visible .portrait-network i:nth-child(3) { animation-delay: -1.6s; }
  .portrait-wrap.is-visible .portrait-network i:nth-child(4) { animation-delay: -4.2s; }

  .process-card.is-visible .process-icon::after {
    content: "";
    position: absolute;
    inset: -.6rem;
    border: 1px solid currentColor;
    border-radius: inherit;
    opacity: 0;
    transform-origin: center;
    animation: ambient-ring 5.6s ease-out infinite;
  }

  .process-card:nth-child(2) .process-icon::after { animation-delay: -4.1s; }
  .process-card:nth-child(3) .process-icon::after { animation-delay: -2.7s; }
  .process-card:nth-child(4) .process-icon::after { animation-delay: -1.3s; }

  .project-card.is-visible .topology path {
    stroke-dasharray: 24 12;
    animation: ambient-network-flow 18s linear infinite;
  }

  .project-card.is-visible .topology circle,
  .project-card.is-visible .topology rect {
    transform-box: fill-box;
    transform-origin: center;
    animation: ambient-endpoint 4.6s ease-in-out infinite alternate;
  }

  .project-card.is-visible .topology circle:nth-of-type(2) { animation-delay: -3.2s; }
  .project-card.is-visible .topology circle:nth-of-type(3) { animation-delay: -1.5s; }
  .project-card.is-visible .topology circle:nth-of-type(4) { animation-delay: -4s; }
  .project-card.is-visible .topology rect { animation-delay: -2.4s; }

  .project-card.is-visible .cloud-shell i,
  .project-card.is-visible .code-window header i {
    transform-origin: center;
    animation: ambient-status-light 4.2s ease-in-out infinite;
  }

  .project-card.is-visible .cloud-shell i:nth-of-type(2),
  .project-card.is-visible .code-window header i:nth-child(2) { animation-delay: -2.8s; }

  .project-card.is-visible .cloud-shell i:nth-of-type(3),
  .project-card.is-visible .code-window header i:nth-child(3) { animation-delay: -1.4s; }

  .project-card.is-visible .soc-wave span {
    transform-origin: center bottom;
    animation: ambient-telemetry 3.7s ease-in-out infinite alternate;
  }

  .project-card.is-visible .soc-wave span:nth-child(2) { animation-delay: -2.9s; }
  .project-card.is-visible .soc-wave span:nth-child(3) { animation-delay: -1.1s; }
  .project-card.is-visible .soc-wave span:nth-child(4) { animation-delay: -3.4s; }
  .project-card.is-visible .soc-wave span:nth-child(5) { animation-delay: -2s; }
  .project-card.is-visible .soc-wave span:nth-child(6) { animation-delay: -.55s; }

  .resource-card.is-visible .resource-state--ready {
    animation: ambient-ready 4.6s ease-in-out infinite;
  }

  .resource-card.is-visible:nth-child(2) .resource-state--ready { animation-delay: -2.3s; }

  .community-roadmap.is-visible article > i {
    transform-origin: center;
    animation: ambient-roadmap 5s ease-in-out infinite;
  }

  .community-roadmap.is-visible article:nth-child(2) > i { animation-delay: -3.3s; }
  .community-roadmap.is-visible article:nth-child(3) > i { animation-delay: -1.65s; }

  .contact-copy.is-visible ~ .contact-network {
    transform-origin: center;
    animation: ambient-contact 8.5s ease-in-out infinite alternate;
  }

  .case-dialog[open]::backdrop { animation: motion-backdrop-in 260ms ease-out both; }
  .case-dialog[open] .dialog-shell { animation: motion-dialog-in 520ms var(--motion-out) both; }

  /* Tarjetas: cero tilt por defecto; JS puede alimentar estas variables. */
  .project-card,
  .process-card,
  .resource-card,
  .community-card {
    --motion-rx: var(--tilt-x, 0deg);
    --motion-ry: var(--tilt-y, 0deg);
    --motion-rz: 0deg;
    --motion-lift: 0rem;
    --motion-spot-x: var(--pointer-x, 50%);
    --motion-spot-y: var(--pointer-y, 50%);
    --motion-spot-opacity: 0;
    isolation: isolate;
    backface-visibility: hidden;
    transform:
      perspective(70rem)
      translate3d(0, var(--motion-lift), 0)
      rotateX(var(--motion-rx))
      rotateY(var(--motion-ry))
      rotateZ(var(--motion-rz));
    transition:
      transform 420ms var(--motion-out),
      box-shadow 420ms var(--motion-out),
      background-color var(--motion-mid) ease,
      opacity var(--motion-mid) ease;
  }

  .community-card { --motion-rz: 1deg; }

  .project-card:active,
  .resource-card:active,
  .community-card:active {
    --motion-lift: -.08rem;
    scale: .992;
    transition-duration: 80ms;
  }

  .project-card::before,
  .process-card::before,
  .resource-card::before,
  .community-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(
      17rem circle at var(--motion-spot-x) var(--motion-spot-y),
      color-mix(in srgb, var(--yellow) 16%, transparent),
      transparent 72%
    );
    opacity: var(--motion-spot-opacity);
    pointer-events: none;
    transition: opacity var(--motion-mid) ease;
  }

  .project-art,
  .project-sticker,
  .project-meta h3,
  .process-card h3,
  .resource-card h3,
  .community-card h3 {
    transition:
      transform 420ms var(--motion-out),
      translate 420ms var(--motion-out),
      scale 420ms var(--motion-spring),
      box-shadow 420ms var(--motion-out);
  }

  /* Los resultados filtrados reaparecen sin bloquear interacción. */
  .project-card.is-visible:not(.is-hidden),
  .resource-card.is-visible:not([hidden]) {
    animation: motion-filter-in 360ms var(--motion-out) backwards;
  }

  @media (hover: hover) and (pointer: fine) {
    .nav a:hover,
    .filters button:hover { transform: translateY(-2px); }

    .button:hover,
    .header-cta:hover { transform: translate(-1px, -2px); }

    .button:hover > span,
    .header-cta:hover > span,
    .inline-link:hover > span,
    .resource-card > a:hover > span,
    .back-top:hover > span { translate: .22rem 0; }

    .icon-button:hover { transform: translateY(-2px) rotate(2deg); }

    .project-card:hover,
    .process-card:hover,
    .resource-card:hover,
    .community-card:hover {
      --motion-lift: -.25rem;
      --motion-spot-opacity: .68;
      box-shadow: 6px 7px 0 color-mix(in srgb, var(--ink) 88%, transparent);
    }

    .project-card:hover .project-art {
      transform: translateZ(0) scale(1.01);
      box-shadow: 0 .22rem 0 var(--ink);
    }

    .project-card:hover .project-sticker { translate: 0 -.14rem; scale: 1.02; }

    .project-card:hover .project-meta h3,
    .process-card:hover h3,
    .resource-card:hover h3,
    .community-card:hover h3 { translate: 0 -.1rem; }
  }

  @media (max-width: 80rem) {
    .js .nav a {
      opacity: 0;
      transform: translateY(.75rem);
      transition: opacity 280ms ease, transform 400ms var(--motion-out);
    }

    .js .nav.is-open a { opacity: 1; transform: none; }
    .js .nav.is-open a:nth-child(2) { transition-delay: 40ms; }
    .js .nav.is-open a:nth-child(3) { transition-delay: 80ms; }
    .js .nav.is-open a:nth-child(4) { transition-delay: 120ms; }
    .js .nav.is-open a:nth-child(5) { transition-delay: 160ms; }
  }

  @media (max-width: 42rem) {
    .project-card,
    .process-card,
    .resource-card,
    .community-card { --motion-rx: 0deg; --motion-ry: 0deg; }

    .community-card { --motion-rz: 0deg; }
  }

  @media (max-width: 25rem) {
    .project-open:hover { transform: translateY(-1px); }
    .project-open:active { transform: translateY(1px) scale(.98); }
  }

  @keyframes motion-filter-in {
    from { opacity: 0; translate: 0 .65rem; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes motion-cue {
    0%, 100% { scale: .45 1; opacity: .5; }
    48% { scale: 1 1; opacity: 1; }
  }

  @keyframes motion-signal {
    from { scale: 1 .86; opacity: .78; }
    to { scale: 1 1; opacity: 1; }
  }

  @keyframes ambient-orbit {
    0% { translate: 0 0; scale: .97; }
    55% { translate: .22rem -.48rem; scale: 1.025; }
    100% { translate: -.16rem .12rem; scale: 1; }
  }

  @keyframes ambient-beacon {
    0%, 42%, 100% { box-shadow: 0 0 0 .3rem rgba(53, 173, 101, .14); }
    18% { box-shadow: 0 0 0 .3rem rgba(53, 173, 101, .16), 0 0 0 .72rem rgba(53, 173, 101, 0); }
  }

  @keyframes ambient-grid-flow {
    to { background-position: 2rem 2rem; }
  }

  @keyframes ambient-node {
    from { scale: .93; box-shadow: 0 0 0 0 rgba(23, 23, 20, .12); }
    to { scale: 1.06; box-shadow: 0 0 0 .42rem rgba(23, 23, 20, 0); }
  }

  @keyframes ambient-ring {
    0%, 52% { opacity: 0; scale: .82; }
    68% { opacity: .42; }
    100% { opacity: 0; scale: 1.22; }
  }

  @keyframes ambient-network-flow {
    to { stroke-dashoffset: -216; }
  }

  @keyframes ambient-endpoint {
    from { scale: .97; }
    to { scale: 1.035; }
  }

  @keyframes ambient-status-light {
    0%, 100% { scale: .9; opacity: .58; box-shadow: 0 0 0 0 currentColor; }
    45% { scale: 1.08; opacity: 1; box-shadow: 0 0 .5rem currentColor; }
  }

  @keyframes ambient-telemetry {
    from { scale: 1 .76; opacity: .72; }
    to { scale: 1 1; opacity: 1; }
  }

  @keyframes ambient-ready {
    0%, 100% { box-shadow: 0 0 0 0 rgba(35, 121, 73, 0); }
    50% { box-shadow: 0 0 0 .32rem rgba(35, 121, 73, .12); }
  }

  @keyframes ambient-roadmap {
    0%, 100% { scale: .9; box-shadow: 0 0 0 .22rem rgba(130, 211, 182, .14); }
    50% { scale: 1.08; box-shadow: 0 0 0 .5rem rgba(130, 211, 182, 0); }
  }

  @keyframes ambient-contact {
    from { translate: 0 0; scale: .985; }
    to { translate: -.32rem -.42rem; scale: 1.025; }
  }

  @keyframes motion-backdrop-in { from { opacity: 0; } }

  @keyframes motion-dialog-in {
    from { opacity: 0; translate: 2.5rem 0; }
    to { opacity: 1; translate: 0; }
  }
}

/* Reducción exhaustiva: contenido visible, sin desplazamientos ni parpadeos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .js.motion-ready .reveal,
  .js.motion-ready .reveal.is-visible,
  .js.motion-ready .section-header.reveal > * {
    opacity: 1 !important;
    translate: 0 !important;
    scale: 1 !important;
    filter: none !important;
  }

  .ticker-track,
  .code-caret { animation: none !important; }
  .cursor { display: none !important; }
}