/* Gonfixit · movimiento. Solo dos gestos de marca, los dos salen del logo:
   A · «De la I a la barra»  — se lee GONFIXIT y las dos íes se tumban y se vuelven naranjas  (.wm.is-play)
   B · «Latido»              — las dos barras laten alternas                                  (.wm-loader, .bars)
   Sin .is-play / .is-in se ve siempre el estado final, quieto. */
:root{
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-snap:cubic-bezier(.3,1.45,.5,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --wm-skew:-22deg;
}

/* ── wordmark ── */
.wm{display:inline-flex;align-items:center;font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1;font-size:var(--wm-size,56px);white-space:nowrap;color:inherit;text-decoration:none}
.wm-l{display:inline-block}
.wm-s{display:inline-block;flex:none;width:.17em;height:.98em;margin-inline:.2em;background:var(--wm-slash,#E8552E);transform:skewX(var(--wm-skew))}

/* A · De la I a la barra */
.wm.is-play .wm-l{animation:wm-fade .5s var(--ease-out) both;animation-delay:calc(var(--i)*35ms)}
.wm.is-play .wm-s{animation:wm-lean .75s var(--ease-snap) both;animation-delay:calc(var(--i)*35ms + .55s)}
@keyframes wm-fade{from{opacity:0;transform:translateY(.18em)}to{opacity:1;transform:none}}
@keyframes wm-lean{0%{transform:skewX(0) scaleY(.76);background:currentColor;opacity:0}12%,40%{transform:skewX(0) scaleY(.76);background:currentColor;opacity:1}100%{transform:skewX(var(--wm-skew)) scaleY(1);background:var(--wm-slash,#E8552E);opacity:1}}

/* El mismo gesto para una barra suelta: nace recta, como una I, y se tumba */
.lean-bar{display:inline-block;flex:none;width:.17em;height:.98em;background:var(--wm-slash,#E8552E);transform:skewX(var(--wm-skew))}
.has-motion :is([data-reveal],[data-split]) .lean-bar{transform:skewX(0) scaleY(.76);background:currentColor;transition:transform .75s var(--ease-snap) .5s,background-color .4s .7s}
.has-motion :is([data-reveal],[data-split]).is-in .lean-bar{transform:skewX(var(--wm-skew));background:var(--wm-slash,#E8552E)}
:is([data-reveal],[data-split]) .lean-bar + .lean-bar{transition-delay:.6s,.8s}

/* B · Latido */
.wm-loader{display:inline-flex;align-items:center;gap:.22em;font-size:var(--wm-size,40px);height:1em;vertical-align:middle}
.wm-loader i{display:block;width:.17em;height:.98em;background:var(--wm-slash,#E8552E);transform:skewX(var(--wm-skew));animation:wm-beat 1s var(--ease-inout) infinite alternate}
.wm-loader i + i,.wm-loader b + i{animation-delay:-.5s}
.wm-loader b{font:800 .8em/1 'Archivo',sans-serif;font-stretch:125%}
@keyframes wm-beat{from{transform:skewX(var(--wm-skew)) scaleY(.45);opacity:.4}to{transform:skewX(var(--wm-skew)) scaleY(1);opacity:1}}

/* Latido en reposo: barras quietas que solo laten en hover, con foco o con .is-busy */
.wm-loader--idle i{animation:none}
:is(a,button,.beat-host):is(:hover,:focus-visible) .wm-loader--idle i,.is-busy .wm-loader--idle i{animation:wm-beat .5s var(--ease-inout) infinite alternate}
:is(a,button,.beat-host):is(:hover,:focus-visible) .wm-loader--idle i + i,.is-busy .wm-loader--idle i + i{animation-delay:-.25s}

/* Viñetas: las dos barras del logo en pequeño. Laten cuando se pasa por su bloque. */
.bars li{position:relative;padding-left:26px}
.bars li::before,.bars li::after{content:"";position:absolute;top:.36em;width:3px;height:.8em;background:var(--wm-slash,#E8552E);transform:skewX(var(--wm-skew))}
.bars li::before{left:3px}
.bars li::after{left:10px}
.beat-host:hover .bars li::before,.beat-host:hover .bars li::after{animation:wm-beat .5s var(--ease-inout) 4 alternate}
.beat-host:hover .bars li::after{animation-delay:-.25s}

/* ── página ── */
.ticker{overflow:hidden;display:flex;white-space:nowrap;font:600 13px/1 'IBM Plex Sans',sans-serif;letter-spacing:.02em}
.ticker-track{display:flex;flex:none;animation:ticker 40s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;padding:10px 0}
.ticker-track span::after{content:"";width:3px;height:12px;margin-inline:1.6em;background:currentColor;opacity:.6;transform:skewX(var(--wm-skew))}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-100%)}}

.has-motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0)*80ms)}
.has-motion [data-reveal].is-in{opacity:1;transform:none}
.has-motion [data-reveal="left"]:not(.is-in){transform:translateX(-28px)}

.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w > span{display:inline-block;transform:translateY(112%);transition:transform .8s var(--ease-out);transition-delay:calc(var(--i)*45ms + .1s)}
.split.is-in .w > span{transform:none}

/* Palabra que rota: las letras entran desde abajo una a una y salen por arriba */
.has-motion .rot{display:inline-grid;overflow:hidden;vertical-align:bottom;padding:0 .14em .16em 0;margin:0 -.14em -.16em 0}
.has-motion .rot > span{grid-area:1/1;position:relative;justify-self:start;white-space:nowrap}
.rot i{display:inline-block;font-style:inherit;transform:translateY(115%) rotate(9deg);opacity:0}
.rot .is-on i{transform:none;opacity:1;transition:transform .7s var(--ease-out),opacity .3s;transition-delay:calc(var(--i)*30ms + .12s)}
.rot .is-out i{transform:translateY(-115%) rotate(-7deg);opacity:0;transition:transform .45s var(--ease-inout),opacity .3s .15s;transition-delay:calc(var(--i)*16ms)}

.motion-paused .belt-track,.motion-paused .ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .wm *,.wm-loader i,.ticker-track,.bars li::before,.bars li::after{animation:none!important}
  .has-motion [data-reveal],.split .w > span{opacity:1;transform:none;transition:none}
  .has-motion :is([data-reveal],[data-split]) .lean-bar{transform:skewX(var(--wm-skew));background:var(--wm-slash,#E8552E);transition:none}
  .rot i{transition:none!important}
}