/* Capa de movimiento de Handyman. Autosuficiente: no depende
   de los resets ni de los tokens de hm.css. */

/* ============================================================
   Movimiento — técnicas tomadas de las referencias
   · incredibles.dev  → revelado por clip-path dirigido por clase
   · datacurve.ai     → chips de imagen en el titular, conector
                         con view-timeline, tokens de easing
   ============================================================ */

/* ---------- Tokens de movimiento ----------
   Fuente única. Al portar a Laravel, esto es lo que se copia
   a los tokens del proyecto; nada de curvas sueltas en el JS. */
:root{
  --ease-ds-out:cubic-bezier(.2,.6,.35,1);      /* uso general */
  --ease-out-quint:cubic-bezier(.23,1,.32,1);   /* salidas amplias */
  --ease-reveal:cubic-bezier(0,.65,.2,1);       /* descubrir medios */
  --dur-fast:.25s;
  --dur-base:.45s;
  --dur-slow:.7s;
  --dur-reveal:1.1s;
}

/* ---------- Revelado de medios por clip-path ----------
   El movimiento vive en CSS; el JS solo añade .is-revealed.
   La referencia usa xywh(); aquí inset(), mejor soportado y
   visualmente idéntico para un rectángulo centrado.          */
[data-reveal="media"]{
  --clip-o:1.15rem;
  clip-path:inset(var(--clip-o) round 14px);
  transition:clip-path var(--dur-reveal) var(--ease-reveal);
  will-change:clip-path;
}
[data-reveal="media"].is-revealed{clip-path:inset(0 round 14px)}

@media (prefers-reduced-motion:reduce){
  [data-reveal="media"]{clip-path:none;transition:none}
}

/* ---------- Conector entre secciones ----------
   Animación dirigida por scroll nativa de CSS: sin JavaScript,
   el progreso lo aporta el compositor. Fuera de @supports el
   elemento simplemente se queda quieto y visible.            */
.bridge-wrap{display:block;line-height:0;padding:0 0 22px;max-width:var(--wrap,1320px);margin:0 auto;padding-left:40px;padding-right:40px}
.bridge{
  display:block;width:1px;height:64px;
  background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,0));
  transform-origin:top center;
}
.bridge--dark{background:linear-gradient(var(--line-mid,#D9D4EE),transparent)}

@supports (animation-timeline:view()){
  .bridge-wrap{view-timeline:--bridge block}
  .bridge{
    animation:bridge-draw linear both;
    animation-timeline:--bridge;
    animation-range:entry-crossing;
  }
  @keyframes bridge-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* ---------- Titular del footer con chips de imagen ---------- */
.foot-lead{max-width:var(--wrap,1320px);margin:0 auto 54px;padding:0 40px}
.foot-line{
  font-family:'Outfit','DM Sans',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(30px,4.4vw,54px);line-height:1.06;letter-spacing:-.035em;
  text-wrap:balance;
}

/* El hueco escala con la tipografía porque va en em. */
.chip-slot{
  position:relative;display:none;vertical-align:middle;
  height:.76em;width:1.34em;margin:0 .12em .08em;
  border-radius:.14em;overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
@media (min-width:900px){.chip-slot{display:inline-block}}

.chip-slot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--dur-slow) var(--ease-ds-out);
}
.chip-slot img.is-on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .chip-slot img{transition:none}
}

/* ---------- Enlaces del footer: un solo tratamiento ---------- */
.site-footer .cl a{
  transition:opacity var(--dur-base) var(--ease-ds-out),color var(--dur-base) var(--ease-ds-out);
}
.site-footer .cl a:hover{opacity:.7}

/* ---------- Lenis ----------
   Mientras Lenis manda, el scroll nativo se desactiva. Las dos
   reglas son las que pide su documentación.                   */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}