/* ============================================================
   AMUN ARQUITECTURA — Animaciones de entrada (scroll reveal)

   Lenguaje de movimiento según el brief §22 (collage editorial):
   - floración de color: el fondo entra en B/N y se colorea
   - titulares que suben línea por línea desde una máscara
   - acento que se tiñe de rosa
   - trazos que se dibujan (íconos de línea, destellos, flechas, checks)
   - divisores que crecen
   - aparición escalonada
   - nota manuscrita que se escribe
   Sin rebotes, sin parallax, sin movimiento constante. Cada efecto ocurre una vez.

   Los estados iniciales solo aplican con html.js-ready (lo pone un script en <head>),
   así el sitio se ve completo si no hay JavaScript.
   js/animations.js agrega .in a cada sección cuando entra en pantalla y asigna
   --d (retraso en ms) a cada pieza según su orden visual.
   ============================================================ */

:root {
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 850ms;
  --rise: 18px;
}

@media (max-width: 999px) {
  :root { --dur: 600ms; --rise: 10px; }
}

/* ── Floración de color del fondo ── */
.js-ready .rep[data-bloom]::before {
  filter: grayscale(1) contrast(.92) brightness(1.04);
  transform: scale(1.025);
  opacity: .55;
  transition: filter 1500ms var(--ease) 120ms, transform 1700ms var(--ease), opacity 900ms var(--ease);
}
.js-ready .rep[data-bloom].in::before { filter: none; transform: none; opacity: 1; }

/* En mobile, la floración va sobre las imágenes de collage */
.js-ready .m-only {
  filter: grayscale(1);
  opacity: 0;
  transform: translateY(var(--rise));
  transition: filter 1300ms var(--ease) 200ms, opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js-ready .m-only.on, .js-ready .on .m-only { filter: none; opacity: 1; transform: none; }

/* ── Subida + aparición ── */
.js-ready [data-a="up"] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur) var(--ease) var(--d, 0ms), transform var(--dur) var(--ease) var(--d, 0ms);
}
.js-ready [data-a="up"].on { opacity: 1; transform: none; }

.js-ready [data-a="fade"] {
  opacity: 0;
  transition: opacity var(--dur) var(--ease) var(--d, 0ms);
}
.js-ready [data-a="fade"].on { opacity: 1; }

/* ── Titulares línea por línea ── */
@media (min-width: 1000px) {
  .js-ready .h .line {
    /* recorta solo por abajo (con margen para descendentes): la línea sube desde "debajo del renglón" */
    clip-path: inset(-60% -5% -0.28em -5%);
  }
  .js-ready .h .line > .li {
    display: inline-block;
    transform: translateY(calc(100% + 0.3em));
    transition: transform 1000ms var(--ease) calc(var(--d, 0ms) + var(--li, 0) * 95ms);
  }
  .js-ready .h.on .line > .li { transform: none; }
}
@media (max-width: 999px) {
  .js-ready .h { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .js-ready .h.on { opacity: 1; transform: none; }
}

/* ── Acento que se tiñe de rosa ── */
.js-ready .h .accent {
  color: #111;
  transition: color 900ms var(--ease) calc(var(--d, 0ms) + 650ms);
}
.js-ready .h.on .accent { color: var(--velvet-rose); }

/* ── Trazos que se dibujan ── */
.js-ready [data-draw] :is(path, line, polyline, circle, rect, polygon) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1200ms var(--ease) calc(var(--d, 0ms) + 200ms);
}
.js-ready .on [data-draw] :is(path, line, polyline, circle, rect, polygon),
.js-ready [data-draw].on :is(path, line, polyline, circle, rect, polygon) { stroke-dashoffset: 0; }

/* ── Divisores que crecen ── */
.js-ready .vdiv {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1100ms var(--ease) var(--d, 0ms);
}
.js-ready .vdiv.on { transform: none; }

/* ── Nota manuscrita que se escribe ── */
.js-ready [data-a="write"] {
  clip-path: inset(-20% 100% -20% -5%);
  transition: clip-path 1600ms cubic-bezier(.45, .05, .35, 1) var(--d, 0ms);
}
.js-ready [data-a="write"].on { clip-path: inset(-20% -5% -20% -5%); }

/* ── Comillas de la cita ── */
.js-ready .quote-mark {
  opacity: 0;
  transform: scale(.7) translateY(6px);
  transform-origin: left bottom;
  transition: opacity 700ms var(--ease) var(--d, 0ms), transform 900ms var(--ease) var(--d, 0ms);
}
.js-ready .quote-mark.on { opacity: 1; transform: none; }

/* ── Header ── */
.js-ready .navbar__inner > * { opacity: 0; transition: opacity 900ms var(--ease) var(--d, 0ms); }
.js-ready .navbar.in .navbar__inner > * { opacity: 1; }

/* ── Hover: la flecha avanza ── */
.svc-more svg { transition: transform .25s var(--ease); }
.svc-more:hover svg { transform: translateX(3px); }

/* ── Movimiento reducido: todo en su estado final ── */
@media (prefers-reduced-motion: reduce) {
  .js-ready *, .js-ready *::before {
    transition: none !important;
  }
  .js-ready .rep[data-bloom]::before { filter: none; transform: none; opacity: 1; }
  .js-ready [data-a], .js-ready .m-only, .js-ready .h, .js-ready .quote-mark,
  .js-ready .navbar__inner > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js-ready .h .line { clip-path: none; }
  .js-ready .h .line > .li { transform: none !important; }
  .js-ready .h .accent { color: var(--velvet-rose); }
  .js-ready [data-draw] :is(path, line, polyline, circle, rect, polygon) { stroke-dashoffset: 0 !important; }
  .js-ready .vdiv { transform: none !important; }
  .js-ready [data-a="write"] { clip-path: none !important; }
}