/* ==========================================================================
   GRUPO MARCHI · movimiento con propósito
   Solo transform / opacity / clip-path (compositor). Respeta reduced motion.
   ========================================================================== */

/* --- Revelado al scroll --------------------------------------------------- */
.mk-reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
.mk-reveal.mk-in{opacity:1; transform:none;}
.mk-reveal:nth-child(2){transition-delay:.08s;} .mk-reveal:nth-child(3){transition-delay:.16s;} .mk-reveal:nth-child(4){transition-delay:.24s;}
.mk-reveal:nth-child(5){transition-delay:.32s;} .mk-reveal:nth-child(6){transition-delay:.4s;} .mk-reveal:nth-child(7){transition-delay:.48s;}
.no-js .mk-reveal{opacity:1; transform:none;}

/* --- Titular palabra a palabra (motion.js trocea .mk-split) -------------- */
.mk-split .mk-w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em;}
.mk-split .mk-w > span{display:inline-block; transform:translateY(110%); animation:mkWord .9s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--mk-i) * .06s + var(--mk-split-base, .35s));}
@keyframes mkWord{to{transform:none;}}

/* --- Entrada escalonada del hero ---------------------------------------- */
.mk-hero > *{opacity:0; animation:mkRise .9s cubic-bezier(.22,1,.36,1) forwards;}
.mk-hero > :nth-child(1){animation-delay:.2s;} .mk-hero > :nth-child(2){animation-delay:.3s;}
.mk-hero > :nth-child(3){animation-delay:.75s;} .mk-hero > :nth-child(4){animation-delay:.95s;}
.mk-hero > :nth-child(5){animation-delay:1.1s;}
@keyframes mkRise{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}

/* --- Marquee de marcas -------------------------------------------------- */
.mk-marquee{overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);}
.mk-marquee-track{display:inline-flex; gap:3rem; padding-right:3rem; animation:mkMarquee 32s linear infinite; will-change:transform;}
.mk-marquee:hover .mk-marquee-track{animation-play-state:paused;}
@keyframes mkMarquee{to{transform:translateX(-50%);}}

/* --- Ken Burns lento (heroes interiores) -------------------------------- */
.mk-kenburns img{animation:mkKen 22s ease-in-out infinite alternate; will-change:transform;}
@keyframes mkKen{from{transform:scale(1);} to{transform:scale(1.07) translate(-1%, .8%);}}

/* --- HERO PRINCIPAL: del plano técnico a la pieza instalada --------------
   Secuencia (aprox. 2.2 s, CTAs visibles desde 0.9 s):
   0.00  rejilla técnica aparece
   0.15  trazos del plano se dibujan (stroke)
   0.90  la fotografía real se revela de izquierda a derecha
   1.75  el plano queda como trazo fantasma sobre la pieza
   ------------------------------------------------------------------------ */
.gm-hero-media .bp-grid{opacity:0; animation:mkFade .6s ease-out forwards;}
.gm-hero-media .bp-line{stroke:var(--c-oro); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:mkDraw 1s cubic-bezier(.65,0,.35,1) forwards; animation-delay:calc(.15s + var(--d, 0) * .12s);}
.gm-hero-media .bp-line--thin{stroke-width:1.2; opacity:.75;}
.gm-hero-media .bp-line--dash{stroke-width:1.1; opacity:.6;}
.gm-hero-media .bp-mark{stroke:var(--c-oro); fill:none; stroke-width:1.6; opacity:0; animation:mkFade .35s ease-out forwards; animation-delay:calc(.6s + var(--d, 0) * .08s);}
.gm-hero-media .bp-text{font-family:var(--ff-body); font-size:18px; font-weight:700; letter-spacing:.2em; fill:var(--c-oro); opacity:0; animation:mkFade .4s ease-out forwards; animation-delay:calc(.75s + var(--d, 0) * .1s);}
.gm-hero-media svg{opacity:1; animation:mkGhost 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay:1.85s;}
.gm-hero-media img{opacity:0; clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); animation:mkWipe 1.15s cubic-bezier(.76,0,.24,1) forwards, mkHeroKen 26s ease-in-out 2s infinite alternate; animation-delay:.9s, 2s; will-change:clip-path, transform;}
@keyframes mkDraw{to{stroke-dashoffset:0;}}
@keyframes mkFade{to{opacity:1;}}
@keyframes mkGhost{to{opacity:.2;}}
@keyframes mkWipe{0%{opacity:1; clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);} 100%{opacity:1; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}}
@keyframes mkHeroKen{from{transform:scale(1);} to{transform:scale(1.05) translate(-.6%, .4%);}}
/* etapas (Diseñamos · Fabricamos · Instalamos) se encienden en secuencia */
.gm-hero-stages li:nth-child(1){animation:mkStageOn .3s ease-out .4s forwards;}
.gm-hero-stages li:nth-child(2){animation:mkStageOn .3s ease-out 1.05s forwards;}
.gm-hero-stages li:nth-child(3){animation:mkStageOn .3s ease-out 1.8s forwards;}
@keyframes mkStageOn{to{color:var(--c-crema);}}
.gm-hero-stages li::before{animation:mkDotOn .3s ease-out forwards; animation-delay:inherit;}
@keyframes mkDotOn{to{background:var(--c-oro); border-color:var(--c-oro); box-shadow:0 0 0 4px rgba(216,156,42,.22);}}
/* sin JS: estado final directo */
.no-js .gm-hero-media img{opacity:1; clip-path:none; animation:none;}
.no-js .gm-hero-media svg{opacity:.2; animation:none;}
.no-js .gm-hero-media .bp-line{stroke-dashoffset:0; animation:none;}
.no-js .gm-hero-media .bp-grid, .no-js .gm-hero-media .bp-mark, .no-js .gm-hero-media .bp-text{opacity:1; animation:none;}
.no-js .mk-hero > *{opacity:1; animation:none;}
.no-js .mk-split .mk-w > span{transform:none; animation:none;}

/* --- Proceso: corte CNC que recorre las letras (etapa 3) ---------------- */
.gm-process[data-stage="3"] .pv-cut{animation:mkCut 6s linear infinite;}
@keyframes mkCut{to{stroke-dashoffset:-240;}}

/* --- Lightbox ----------------------------------------------------------- */
.gm-lightbox.is-open figure{animation:mkLb .35s cubic-bezier(.22,1,.36,1);}
@keyframes mkLb{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:none;}}

/* --- Parallax sutil (motion.js escribe --py en px) ---------------------- */
[data-parallax] img{transform:translate3d(0, var(--py, 0px), 0) scale(1.08); will-change:transform;}

/* --- Accesibilidad: reduced motion → todo visible, sin movimiento -------- */
@media (prefers-reduced-motion: reduce){
  .mk-reveal, .mk-hero > *, .mk-split .mk-w > span{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;}
  .mk-marquee-track{animation:none !important;}
  .mk-kenburns img{animation:none !important;}
  .gm-hero-media img{opacity:1 !important; clip-path:none !important; animation:none !important;}
  .gm-hero-media svg{opacity:.2 !important; animation:none !important;}
  .gm-hero-media .bp-line{stroke-dashoffset:0 !important; animation:none !important;}
  .gm-hero-media .bp-grid, .gm-hero-media .bp-mark, .gm-hero-media .bp-text{opacity:1 !important; animation:none !important;}
  .gm-hero-stages li{color:var(--c-crema) !important; animation:none !important;}
  .gm-hero-stages li::before{background:var(--c-oro) !important; border-color:var(--c-oro) !important; animation:none !important;}
  .gm-pv-layer, .gm-pv-bg, .gm-pv-grid, .gm-step{transition:none !important;}
  .pv-cut{animation:none !important;}
  [data-parallax] img{transform:none !important;}
  .gm-lightbox.is-open figure{animation:none !important;}
  .gm-btn, .gm-scard, .gm-scard-img img, .gm-fitem img, .gm-case-media img, .gm-gitem img{transition:none !important;}
}