/* =========================================================
   Fundación Colindres — Capa v4: todo en movimiento
   Textos palabra por palabra, párrafos y rejillas en cascada,
   íconos que se dibujan, parallax por sección, luz viva,
   entradas propias para línea de tiempo, redes, fases y pie.
   (Se carga después de v3.css; v4.js añade las clases.)
   ========================================================= */

/* ---------- Palabras que suben (títulos, leads, citas) ---------- */
[data-split]{--stagger:38ms}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.02em .06em .12em;margin:-.02em -.06em -.12em}
[data-split] .w > span{
  display:inline-block;opacity:0;transform:translateY(112%) rotate(1.5deg);
  transition:transform .85s var(--ease), opacity .45s linear;
  transition-delay:min(calc(var(--i,0) * var(--stagger)), .9s);
}
[data-split].is-in .w > span{opacity:1;transform:none}
.page-hero [data-split]{--stagger:45ms}
.statement [data-split],.quote-band [data-split]{--stagger:28ms}
.lead[data-split]{--stagger:16ms}

/* ---------- Párrafos y elementos sueltos en cascada ---------- */
.fx-fade{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .8s var(--ease);transition-delay:min(calc(var(--i,0) * 90ms), .8s)}
.fx-fade.is-in{opacity:1;transform:none}
.reveal{transition-delay:min(calc(var(--i,0) * 110ms), .9s)}

/* ---------- Eyebrow: la línea dorada se traza ---------- */
.eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .15s}
.is-in .eyebrow::before,.is-in.eyebrow::before,.page-hero .is-in .eyebrow::before{transform:none}
.hero__kicker i{animation:blink 2.6s ease-in-out infinite}
.hero__kicker i:last-child{animation-delay:1.3s}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- Ornamento: se abre desde el centro ---------- */
.ornament i{transform:scaleX(0);transition:transform .9s var(--ease) .4s}
.ornament i:first-child{transform-origin:right}
.ornament i:last-child{transform-origin:left}
.ornament svg{opacity:0;transform:rotate(-90deg) scale(.4);transition:opacity .4s .3s, transform .8s var(--ease) .3s}
.is-in .ornament i{transform:none}
.is-in .ornament svg{opacity:1;transform:none}

/* ---------- Hero: ken burns, motas de luz, flecha que invita ---------- */
.hero__scene svg{animation:kenburns 26s ease-in-out infinite alternate;transform-origin:50% 70%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1.5%)}}
.hero__motes{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__motes i{
  position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,200,.95),rgba(255,244,200,0) 70%);
  animation:mote var(--d) linear var(--dl) infinite;opacity:0;
}
@keyframes mote{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}90%{opacity:.6}100%{transform:translateY(-90vh) translateX(var(--dx));opacity:0}}
.hero__actions .btn--light svg{animation:nudge 1.8s ease-in-out 2s infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* ---------- Escenas: sol que respira y rayos en todas ---------- */
.scene circle[r="230"]{animation:breathe 7s ease-in-out infinite;transform-origin:600px 440px;transform-box:view-box}
.card--art .scene__sun{animation-duration:80s}

/* ---------- Parallax suave por elemento (v4.js escribe --py) ---------- */
.px{will-change:transform}
.px > svg,.px > .scene,.px > img,.px > iframe{transform:translateY(var(--py,0)) scale(1.12);transition:transform .08s linear}
.legacy__photo.px{transform:translateY(calc(var(--py,0) * .5))}
.legacy__photo.px > *{transform:none}
.footer__mark{transform:translateY(var(--py,0));transition:transform .08s linear}

/* ---------- Íconos de pilares que se dibujan ---------- */
.pillar__icon svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease) calc(.25s + var(--k,0) * .18s)}
.pillar.is-in .pillar__icon svg [pathLength]{stroke-dashoffset:0}
.pillar__icon{transform:scale(.7);opacity:0;transition:transform .8s var(--ease) .1s, opacity .5s .1s}
.pillar.is-in .pillar__icon{transform:none;opacity:1}

/* ---------- Tarjetas y pasos: entrada con rotación leve ---------- */
.card--art.reveal{transform:translateY(34px) rotate(1.2deg)}
.card--art.reveal.is-in{transform:none}
.step__n{transform:scale(.5) rotate(-20deg);opacity:0;transition:transform .7s var(--ease) .2s, opacity .4s .2s}
.step.is-in .step__n{transform:none;opacity:1}
.step__n::after{animation:spin 30s linear infinite}

/* ---------- Línea de tiempo: desliza desde la izquierda ---------- */
.tl-item{opacity:0;transform:translateX(-28px);transition:opacity .7s var(--ease), transform .8s var(--ease)}
.tl-item.is-in{opacity:1;transform:none}
.tl-item__num{transform:rotate(-120deg) scale(.6)}
.tl-item.is-in .tl-item__num{transform:rotate(0) scale(1.06)}

/* ---------- Fases: barra que avanza bajo las tres ---------- */
.phases{position:relative;padding-bottom:26px}
.phases::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:3px;border-radius:3px;background:var(--line)}
.phases::after{content:"";position:absolute;left:8%;bottom:0;height:3px;border-radius:3px;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width 1.6s var(--ease) .3s}
.phases.is-in::after{width:28%}
.phase--active{animation:halo 3s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 rgba(23,107,69,.18), var(--shadow-sm)}50%{box-shadow:0 0 0 10px rgba(23,107,69,0), var(--shadow-sm)}}

/* ---------- Redes: entran en cascada con el ícono girando ---------- */
.social.fx-fade{transform:translateY(18px) scale(.98)}
.social__icon{transform:rotate(-15deg) scale(.8);transition:transform .7s var(--ease)}
.social.is-in .social__icon{transform:none}
.social:hover .social__icon{transform:rotate(-6deg) scale(1.06)}
.connect .logo{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Cita: comilla que gira al entrar ---------- */
.quote-band::before{opacity:0;transform:rotate(-14deg) scale(.6);transition:opacity .6s .2s, transform 1s var(--ease) .2s;transform-origin:left top}
.quote-band.is-in::before{opacity:1;transform:none}

/* ---------- Proyecto: ficha ---------- */
.project.reveal{transform:translateY(30px) scale(.985)}
.project.reveal.is-in{transform:none}
.project__meta div{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease), transform .6s var(--ease);transition-delay:calc(.5s + var(--i,0) * .12s)}
.project.is-in .project__meta div{opacity:1;transform:none}

/* ---------- Mapa: ping del punto y zoom de entrada ---------- */
.map__frame.wipe > iframe{transform:scale(1.06)}
.map__frame.wipe.is-in > iframe{transform:none;transition:transform 1.6s var(--ease) .3s, opacity .6s .5s}

/* ---------- CTA: título y botones ---------- */
.cta .btn{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease), transform .7s var(--ease), background .25s, color .25s, border-color .25s;transition-delay:calc(.45s + var(--i,0) * .12s)}
.cta.is-in .btn{opacity:1;transform:none}
.cta__socials a{opacity:0;transform:translateY(10px) scale(.8);transition:opacity .5s, transform .6s var(--ease), background .25s;transition-delay:calc(.7s + var(--i,0) * .08s)}
.cta.is-in .cta__socials a{opacity:1;transform:none}

/* ---------- Pie: columnas en cascada ---------- */
.footer__grid > *{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .8s var(--ease);transition-delay:calc(var(--i,0) * .14s)}
.footer.is-in .footer__grid > *{opacity:1;transform:none}
.footer__bottom{opacity:0;transition:opacity .8s .5s}
.footer.is-in .footer__bottom{opacity:1}

/* ---------- Secciones suaves con luz que se mueve ---------- */
.section--soft,.section--tint,.section--warm{position:relative;overflow:hidden}
.section--soft::before,.section--tint::before,.section--warm::before{
  content:"";position:absolute;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(214,163,58,.10),transparent 60%);
  top:-30%;right:-20%;animation:lightmove 22s ease-in-out infinite alternate;
}
.section--tint::before{background:radial-gradient(circle,rgba(23,107,69,.08),transparent 60%);left:-20%;right:auto;top:auto;bottom:-30%}
@keyframes lightmove{to{transform:translate(-12%,10%) scale(1.15)}}
.section > .wrap{position:relative;z-index:1}

/* ---------- Encabezado de sección: subrayado que se traza ---------- */
.section-head .h2{position:relative}
.section-head .h2::after{content:"";display:block;width:56px;height:3px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--green));transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .5s}
.section-head.center .h2::after{margin-inline:auto;transform-origin:center}
.section-head.is-in .h2::after{transform:none}

/* ---------- Badges y chips ---------- */
.badge,.scene__chip{transition:transform .3s var(--ease)}
.badge:hover,.scene__chip:hover{transform:translateY(-2px)}

/* ---------- Movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion:reduce){
  [data-split] .w > span,.fx-fade,.tl-item,.pillar__icon,.step__n,.project__meta div,.cta .btn,.cta__socials a,.footer__grid > *,.footer__bottom,.social__icon,.quote-band::before{opacity:1 !important;transform:none !important;transition:none !important}
  .pillar__icon svg [pathLength]{stroke-dashoffset:0 !important}
  .eyebrow::before,.ornament i,.ornament svg,.section-head .h2::after{transform:none !important;opacity:1 !important}
  .phases::after{width:28%}
  .hero__motes{display:none}
  .hero__scene svg,.scene circle[r="230"],.connect .logo,.phase--active,.section--soft::before,.section--tint::before,.section--warm::before{animation:none !important}
}