/* ==========================================================================
   Grupo Galicia | Animaciones (keyframes, estados de revelado, precargador)
   Todas usan transform y opacity. Se reducen con prefers-reduced-motion.
   ========================================================================== */

@keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 72px 72px, 72px 72px; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(63,151,207,.2); } 50% { box-shadow: 0 0 0 9px rgba(63,151,207,.05); } }
@keyframes cueDrop { 0% { transform: translateY(-16px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
@keyframes sweep { from { left: -25%; } to { left: 110%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fabIn { from { opacity: 0; transform: translateY(20px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes plFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- Barra de progreso de página ---------- */
.page-progress { position: fixed; top: 0; left: 0; z-index: var(--z-progress); width: 100%; height: 2px; background: var(--grad-brand); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* ---------- Precargador ---------- */
.preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: grid; place-items: center; align-content: center; gap: 1.25rem; background: var(--surface-0); transition: opacity .5s var(--ease-out), visibility .5s; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.no-js .preloader { display: none; }
.preloader-mark { overflow: visible; }
.preloader-mark .pl-ring, .preloader-mark .pl-g { fill: none; stroke: var(--brand-blue-light); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: drawRing 1.1s var(--ease-out) forwards; }
.preloader-mark .pl-ring--inner { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 260; stroke-dashoffset: 260; animation-delay: .15s; }
.preloader-mark .pl-g { stroke: #fff; stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; animation-delay: .3s; }
.preloader-text { font-family: var(--font-display); font-size: var(--fs-tiny); letter-spacing: .32em; text-transform: uppercase; color: var(--text-muted); animation: plFade 1.6s ease-in-out infinite; }

/* ---------- Revelado por scroll (IntersectionObserver + CSS) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--reveal-delay, 0) * 90ms); will-change: opacity, transform; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal-mask] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
.js [data-reveal-mask].is-visible { clip-path: inset(0 0 0 0); }
.js [data-reveal-mask] img { transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.js [data-reveal-mask].is-visible img { transform: scale(1); }

/* ---------- Texto dividido (líneas y palabras) ---------- */
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-line-inner { display: block; }
.js [data-split="lines"]:not(.is-split) { opacity: 0; }
.js [data-split="lines"].is-split .split-line-inner { transform: translateY(110%); opacity: 0; transition: transform .9s var(--ease-out), opacity .6s; }
.js [data-split="lines"].is-in .split-line-inner { transform: none; opacity: 1; }
.split-word { display: inline-block; }
.js [data-split="words"]:not(.is-split) { opacity: 0; }
.js [data-split="words"].is-split .split-word { opacity: 0; transform: translateY(.45em); transition: transform .7s var(--ease-out), opacity .5s; }
.js [data-split="words"].is-in .split-word { opacity: 1; transform: none; }

/* ---------- Estados de scroll ---------- */
.js .why-connector-draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.js .services-media img, .js .method-media img { will-change: transform; }
.is-hidden-tab * { animation-play-state: paused !important; }

/* ---------- Botones magnéticos (solo escritorio) ---------- */
[data-magnetic] { transition: transform .35s var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-grid, .tech-line-sweep, .scroll-cue-line span, .hero-tag-dot { animation: none !important; }
  .hero-img { transform: none !important; }
  .js [data-reveal], .js [data-reveal-mask], .js [data-split] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-split] .split-line-inner, .js [data-split] .split-word { opacity: 1 !important; transform: none !important; }
  .js .why-connector-draw { stroke-dashoffset: 0 !important; }
  .preloader { display: none !important; }
  .wa-fab { animation: none !important; }
}
/* Dispositivos de bajo rendimiento (clase aplicada por JS) */
.low-power .hero-grid, .low-power .tech-line-sweep { animation: none; }
.low-power .hero-img { transform: none; }
.low-power [data-reveal] { transition-duration: .4s; }

/* ---------- Respaldo sin GSAP ---------- */
.js .hero.is-loaded .hero-img { transform: scale(1); transition: transform 9s cubic-bezier(.2,.6,.2,1); }
.js .why-connector-draw { transition: stroke-dashoffset 1.6s var(--ease-out); }
.js .why-connector-draw.is-drawn { stroke-dashoffset: 0; }
.js .timeline-progress { transition: transform .6s var(--ease-out); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .project-card.is-filtered-in { animation: cardIn .5s var(--ease-out) both; }