/* ============================================================
   MOTION · capa de movimiento de /taller-eventos

   La página se lee completa sin este archivo y sin JavaScript.
   Aquí solo se añade ritmo, siguiendo la progresión de un show:

     INTRO ....... hero: la luz abre sobre el escenario
     BUILD UP .... por qué: los errores se encienden uno a uno
     DROP ........ para quién: la tipografía toma el escenario
     DESARROLLO .. programa: seis fases fijadas mientras avanzas
     CLÍMAX ...... 22 documentos + trayectoria
     CIERRE ...... la luz se prende en "Solo 10 lugares"

   Clases de estado (las pone el <head> y motion.js):
     .js             hay JavaScript
     .reduce-motion  el usuario pidió movimiento reducido
     .motion-on      motion.js arrancó y hay permiso de moverse

   Todo lo ligado al scroll vive bajo .motion-on. Si motion.js no
   carga, esas reglas no aplican y la página queda en su estado final.
   Solo se animan transform y opacity salvo que se indique.
   ============================================================ */


/* ── 0 · Barra de navegación ─────────────────────────────── */

/* Progreso de lectura, pegado al borde inferior de la barra. */
.nav__progress{
  position:absolute;left:0;right:0;bottom:-1.5px;height:2px;
  background:var(--ink);transform-origin:0 50%;
  transform:scaleX(var(--page-p,0));pointer-events:none;display:none;
}
.motion-on .nav__progress{display:block}

/* Subrayado que entra desde la izquierda y sale por la derecha. */
.nav__links a,.nav__links a:hover,.nav__links a[aria-current]{border-bottom-color:transparent}
.nav__links a{position:relative}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav__links a{white-space:nowrap}
.nav__links a:hover::after,.nav__links a[aria-current]::after{
  transform:scaleX(1);transform-origin:0 50%;
}


/* ── 1 · Botones: hover, press, icono e imán ─────────────── */

/* Un solo transform compone el desplazamiento del imán (--mx/--my,
   solo escritorio) con el del hover (--h). */
.btn{transform:translate3d(calc(var(--mx,0px) + var(--h,0px)),calc(var(--my,0px) + var(--h,0px)),0)}
.btn:hover{--h:-2px;transform:translate3d(calc(var(--mx,0px) + var(--h)),calc(var(--my,0px) + var(--h)),0)}
.btn:active{--h:1px;transform:translate3d(calc(var(--mx,0px) + var(--h)),calc(var(--my,0px) + var(--h)),0)}
.btn:focus-visible{outline-offset:4px}
.btn svg{transition:transform var(--dur-fast) var(--ease-out)}
.btn:hover svg{transform:rotate(-12deg) scale(1.12)}
.nav__share:hover svg{transform:rotate(18deg) scale(1.08)}


/* Entre 900 y 1180 px la barra no tiene sitio para todo: el botón de
   compartir queda en icono y la marca no se parte en tres líneas. */
@media (min-width:900px) and (max-width:1180px){
  .nav__share-label{display:none}
  .nav__share{padding:.8em .95em}
  .nav__links{gap:1.1rem}
}

/* Objetivos táctiles de 44 px en la barra. */
@media (pointer:coarse){.nav__cta .btn,.nav__share{min-height:44px}}


/* ── 2 · INTRO · Hero ────────────────────────────────────── */

/* Apertura: el encuadre se abre como un telón de luz. CSS puro,
   no espera a JS y no retrasa el LCP: la imagen se pinta desde
   el primer frame, solo cambia de recorte y brillo. */
.hero__bg{animation:m-iris var(--dur-cine) var(--ease-cine) backwards}
@keyframes m-iris{
  from{clip-path:inset(6% 4% 6% 4% round 28px)}
  to{clip-path:inset(0 0 0 0 round 0)}
}
.hero__bg img{
  animation:
    m-hero-img var(--dur-cine) var(--ease-cine) backwards,
    kenburns 26s ease-in-out var(--dur-cine) infinite alternate;
}
@keyframes m-hero-img{
  from{transform:scale(1.16);filter:grayscale(1) contrast(1.12) brightness(.22)}
  to{transform:scale(1.02);filter:grayscale(1) contrast(1.12) brightness(.62)}
}
/* En escritorio, además, de desenfocado a foco. */
@media (min-width:1024px){
  .hero__bg img{animation-name:m-hero-img-focus,kenburns}
  @keyframes m-hero-img-focus{
    from{transform:scale(1.16);filter:grayscale(1) contrast(1.12) brightness(.22) blur(10px)}
    to{transform:scale(1.02);filter:grayscale(1) contrast(1.12) brightness(.62) blur(0)}
  }
}

/* ── Secuencia de espectáculos ──
   Cada diapositiva es una capa absoluta. La entrante se funde encima
   de la saliente, que se mantiene opaca hasta el final: así nunca hay
   un bajón de brillo a mitad del cruce. Cada foto tiene su propio
   paneo lento; --kx/--ky cambian la dirección de una a otra. */
.hero__slide{position:absolute;inset:0;display:block;z-index:0}
.hero__slide img{position:absolute;inset:0}
.hero__bg::after{z-index:2}
.is-rotating .hero__slide{opacity:0;transition:opacity 1.6s var(--ease-in-out)}
.is-rotating .hero__slide.is-prev{opacity:1;z-index:0;transition:none}
.is-rotating .hero__slide.is-active{opacity:1;z-index:1}
.is-rotating .hero__slide img{animation:none}
.is-rotating .hero__slide.is-active img,
.is-rotating .hero__slide.is-prev img{animation:hs-drift var(--hs-drift,9s) linear both}
@keyframes hs-drift{
  from{transform:scale(1.04) translate3d(calc(var(--kx,1) * -1.2%),calc(var(--ky,1) * .8%),0)}
  to{transform:scale(1.16) translate3d(calc(var(--kx,1) * 1.2%),calc(var(--ky,1) * -.8%),0)}
}
.hero__slide:nth-child(2n){--kx:-1}
.hero__slide:nth-child(3n){--ky:-1}
.hs-paused .hero__slide img{animation-play-state:paused!important}

/* Grano de película, solo sobre la fotografía. Estático: cero CPU. */
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Luz ambiental. Fija por defecto; en escritorio sigue al puntero. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42rem 30rem at var(--lx,64%) var(--ly,28%),rgba(255,255,255,.16),transparent 70%);
  mix-blend-mode:soft-light;
}

/* Salida con profundidad: la foto baja y crece, el texto sube y se
   apaga. Dos velocidades distintas = sensación de planos. */
.motion-on .hero__bg{transform:translate3d(0,calc(var(--p,0) * 14vh),0) scale(calc(1 + var(--p,0) * .05))}
.motion-on .hero__inner{
  transform:translate3d(0,calc(var(--p,0) * -7vh),0);
  opacity:calc(1 - var(--p,0) * 1.25);
}

/* Fuera de pantalla no se gasta GPU en animaciones infinitas. */
.hero.is-off .hero__bg img,.hero.is-off .hero__kicker .dot{animation-play-state:paused}

/* Datos duros: fecha, sede y precio no se hacen esperar. Llegan junto
   al subtítulo, a velocidad de interfaz, y en CSS puro. */
.fact{animation:m-rise var(--dur-fast) var(--ease-out) backwards}
.fact:nth-child(1){animation-delay:.5s}
.fact:nth-child(2){animation-delay:calc(.5s + var(--stagger-ui))}
.fact:nth-child(3){animation-delay:calc(.5s + var(--stagger-ui) * 2)}
.fact:nth-child(4){animation-delay:calc(.5s + var(--stagger-ui) * 3)}

.ticker.is-off .marquee__track{animation-play-state:paused}


/* ── 3 · Cabeceras de sección: el "beat" ─────────────────── */

/* Cada sección marca el compás igual: la etiqueta entra y la
   línea se dibuja. Mismo gesto en toda la página = ritmo. */
.sec-head .rule{transform-origin:0 50%;transition:transform var(--dur-slow) var(--ease-out) .15s}
.sec-head .sec-num{transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.js:not(.reduce-motion) .sec-head.reveal:not(.in) .rule{transform:scaleX(0)}
.js:not(.reduce-motion) .sec-head.reveal:not(.in) .sec-num{opacity:0;transform:translate3d(-14px,0,0)}
.motion-failsafe .sec-head .sec-num{opacity:1!important;transform:none!important}
.motion-failsafe .sec-head .rule{transform:none!important}


/* ── 4 · BUILD UP · Por qué ──────────────────────────────── */

.why{display:grid;gap:clamp(1.75rem,4.5vw,3rem)}
.why__head>*+*{margin-top:var(--gap)}
.why__list{gap:0}
.why__list li{
  font-size:clamp(1rem,1.5vw,1.2rem);opacity:1;
  padding-block:.95rem;border-top:1px solid rgba(255,255,255,.12);
}
.why__list li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.why__list li::before{font-size:1.25em;line-height:1}
.why__turn{display:block}
.why__line{display:block;height:2px;background:var(--volt);transform-origin:0 50%}
.why__promise>*+*{margin-top:1.25rem}

/* Cada error se enciende al cruzar el tercio inferior de la
   pantalla. Los que aún no llegan quedan en penumbra, legibles. */
.motion-on .why__list li{opacity:.3;transition:opacity var(--dur-fast) var(--ease-out)}
.motion-on .why__list li.is-lit{opacity:1}
.motion-on .why__list li::before{
  display:inline-block;transform:scale(.55) rotate(-90deg);opacity:.45;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.motion-on .why__list li.is-lit::before{transform:none;opacity:1}

/* La transición problema → promesa: una línea que se traza con el scroll. */
.motion-on .why__line{transform:scaleX(clamp(0,calc((var(--p,1) - .18) * 2.6),1))}

.motion-on .why__promise .checklist.in>li::before{
  animation:m-pop var(--dur-fast) var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * var(--stagger) + 140ms);
}
@keyframes m-pop{from{transform:scale(0) rotate(-90deg)}}

@media (min-width:1024px){
  .why{gap:0}
  /* El sticky queda acotado a este escenario: se suelta al terminar
     la lista de errores y no invade la transición ni la promesa. */
  .why__stage{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(3rem,6vw,6rem);align-items:start;
  }
  .why__head{position:sticky;top:calc(64px + 14vh);align-self:start}
  .why__list{padding-block:4vh 12vh}
  .why__list li{font-size:clamp(1.15rem,1.55vw,1.42rem);padding-block:1.4rem}
  .why__turn{margin-block:1rem 3.5rem}
  .why__promise{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(3rem,6vw,6rem);align-items:start;
  }
  .why__promise>*+*{margin-top:0}
  .why__promise .checklist{grid-template-columns:1fr 1fr;gap:1.1rem 2rem}
}
.why__stage>*+*{margin-top:clamp(1.75rem,4.5vw,3rem)}
@media (min-width:1024px){.why__stage>*+*{margin-top:0}}


/* ── 5 · DROP · Para quién ───────────────────────────────── */

/* Los perfiles dejan de ser etiquetas y pasan a ser tipografía. */
.people{gap:.15em .1em}
.people .chip{
  /* flex:none: el perfil conserva su ancho natural y salta de renglón
     completo, en vez de encogerse y partir el separador. */
  display:block;flex:none;max-width:100%;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.25rem,2.55vw,1.95rem);line-height:1.08;letter-spacing:-.02em;
  padding:.06em .18em;border:0;border-radius:4px;
  background:none;background-image:linear-gradient(var(--volt),var(--volt));
  background-repeat:no-repeat;background-size:0% 100%;background-position:0 50%;
  transition:background-size var(--dur-fast) var(--ease-out);
}
/* Separador dibujado, no texto: los lectores de pantalla no leen "barra".
   En línea (no flex) para que siga a la última palabra cuando el perfil
   ocupa dos renglones, en vez de quedarse suelto a media altura. */
.people .chip::after{
  content:"";display:inline-block;vertical-align:-.02em;
  width:.09em;height:.7em;margin-left:.32em;
  background:var(--volt-deep);transform:skewX(-20deg);
}
.people .chip:last-child::after{display:none}
.people .chip:hover{background-color:transparent;transform:none}
@media (hover:hover) and (pointer:fine){
  .people .chip:hover{background-size:100% 100%}
}

/* "No necesitas experiencia previa." se subraya al entrar. */
.people-note{
  display:inline-block;
  background-image:linear-gradient(var(--volt),var(--volt));
  background-repeat:no-repeat;background-position:0 86%;background-size:100% .42em;
}
.motion-on .people-note{background-size:0% .42em;transition:background-size var(--dur-slow) var(--ease-out) .45s}
.motion-on .reveal.in .people-note{background-size:100% .42em}


/* ── 6 · Imágenes como escenas ───────────────────────────── */

.figure picture{display:block}
.figure{--curtain:var(--ink)}
.bg-ink .figure{--curtain:var(--volt)}

/* Telón que sube y descubre la imagen. Transform, sin repintar la foto. */
.figure::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--curtain);transform-origin:50% 0;transform:scaleY(0);
}
.js:not(.reduce-motion) .figure.reveal:not(.in)::before{transform:scaleY(1)}
.js:not(.reduce-motion) .figure.reveal.in::before{animation:m-curtain var(--dur-slow) var(--ease-cine) backwards}
@keyframes m-curtain{from{transform:scaleY(1)}}

/* La foto se asienta tras el telón. */
.figure img{transform:translate3d(0,var(--py,0%),0) scale(var(--ps,1))}
.js:not(.reduce-motion) .figure.reveal.in img{animation:m-settle var(--dur-cine) var(--ease-cine) backwards}
@keyframes m-settle{from{transform:translate3d(0,0,0) scale(1.3)}}

/* Pie de foto como metadato de cámara. */
.figure figcaption{display:flex;align-items:center;gap:.6em}
.figure figcaption::before{
  content:"";flex:none;width:.55em;height:.55em;border-radius:50%;background:var(--volt);
}

/* Parallax dentro del marco: solo tablet/escritorio. */
@media (min-width:768px){
  .motion-on .figure[data-scene] img{--ps:1.12;--py:calc((var(--p,.5) - .5) * -8%)}
}

/* Imagen a sangre: la consola ocupa todo el ancho, como un plano de cine. */
.figure--bleed{
  width:100vw;margin-inline:calc(50% - 50vw);
  border-radius:0;border-left:0;border-right:0;box-shadow:none!important;
}
.figure--bleed img{aspect-ratio:4/3}
@media (min-width:768px){
  .figure--bleed img{aspect-ratio:21/9}
  /* Se expande hacia el ancho completo a medida que llega al centro. */
  .motion-on .figure--bleed{transform:scale(calc(.9 + clamp(0,calc((var(--p,.5) - .12) * 2.8),1) * .1))}
}


/* ── 7 · DESARROLLO · Programa en seis fases ─────────────── */

.phases[data-phases]{display:block}
.phase-stage{display:none}
.phases__list{display:grid;gap:var(--gap)}
@media (min-width:680px){.phases__list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.phases__list{grid-template-columns:repeat(3,1fr)}}

/* Escritorio: la etapa queda fijada a la izquierda con el número de
   fase girando como un contador, y las fases avanzan a la derecha.
   El número y la etiqueta salen de pseudo-elementos: no duplican
   texto en el DOM ni lo exponen a lectores de pantalla. */
@media (min-width:1024px){
  .motion-on .phases[data-phases]{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(3rem,6vw,6rem);align-items:start;
  }
  .motion-on [data-phases] .phase-stage{
    display:flex;flex-direction:column;gap:1.4rem;
    position:sticky;top:calc(64px + 12vh);
  }
  .phase-stage__count{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(9rem,15vw,14.5rem);line-height:1.2;height:1.2em;overflow:hidden;
    letter-spacing:-.07em;font-variant-numeric:tabular-nums;
    color:var(--volt);-webkit-text-stroke:3px var(--ink);
  }
  .phase-stage__label{
    align-self:flex-start;height:1.5em;line-height:1.5;overflow:hidden;
    font-family:var(--font-mono);font-size:1.05rem;font-weight:700;
    letter-spacing:.24em;text-transform:uppercase;
    background:var(--ink);color:var(--volt);padding-inline:.9em;border-radius:var(--r-pill);
  }
  .phase-stage__reel{
    display:block;white-space:pre;
    transition:transform var(--dur-slow) var(--ease-out);
  }
  .phase-stage__count .phase-stage__reel{transform:translate3d(0,calc(var(--i,0) * -1.2em),0)}
  .phase-stage__label .phase-stage__reel{transform:translate3d(0,calc(var(--i,0) * -1.5em),0)}
  .phase-stage__count .phase-stage__reel::before{content:var(--nums,"01")}
  .phase-stage__label .phase-stage__reel::before{content:var(--tags,"")}

  .phase-stage__rail{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:min(100%,22rem)}
  .phase-stage__rail i{position:relative;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
  .phase-stage__rail i::after{
    content:"";position:absolute;inset:0;background:var(--ink);
    transform-origin:0 50%;transform:scaleX(var(--f,0));
  }

  .motion-on [data-phases] .phases__list{grid-template-columns:1fr;gap:20vh;padding-block:6vh 30vh}
  .motion-on [data-phases] .phase{
    padding:clamp(1.75rem,3vw,2.5rem);gap:1.1rem;
    opacity:.3;transform:scale(.965);
    transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  }
  .motion-on [data-phases] .phase.is-active{opacity:1;transform:none;box-shadow:10px 10px 0 var(--ink)}
  .motion-on [data-phases] .phase.is-active:hover{transform:translate(-3px,-3px)}
  .motion-on [data-phases] .phase h3{font-size:clamp(1.6rem,2.3vw,2.15rem)}
  .motion-on [data-phases] .phase ol li{font-size:1.05rem}
}


/* ── 8 · CLÍMAX · 22 documentos ──────────────────────────── */

.docs{display:grid;gap:clamp(1rem,3vw,2.5rem);align-items:center;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
@media (min-width:900px){.docs{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* El número se cuenta con una propiedad registrada: sin JS ni
   @property soportado, muestra 22 directamente. */
@property --n{syntax:'<integer>';inherits:false;initial-value:22}
.docs__count{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(9rem,30vw,22rem);line-height:.8;letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;color:var(--volt);
  counter-reset:n var(--n);
}
.docs__count::before{content:counter(n)}
.motion-on .docs__count{
  --n:0;color:transparent;-webkit-text-stroke:2px var(--volt);
  transition:--n 1.8s var(--ease-out),color var(--dur-slow) var(--ease-out) 1.35s;
  transform:translate3d(0,calc((.5 - var(--p,.5)) * 8vh),0) scale(calc(.9 + var(--p,.5) * .14));
}
.motion-on .docs__count.in{--n:22;color:var(--volt)}


/* ── 9 · Trayectoria en cifras ───────────────────────────── */

.stat b{font-variant-numeric:tabular-nums}
.motion-on .stats.in>.stat b::after{
  content:"";display:block;height:2px;margin-top:.35em;background:var(--volt);
  transform-origin:0 50%;animation:m-draw var(--dur-slow) var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * var(--stagger) + 200ms);
}
@keyframes m-draw{from{transform:scaleX(0)}}


/* ── 10 · Proyectos ──────────────────────────────────────── */

.project__media::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--volt);transform-origin:50% 0;transform:scaleY(0);
}
.js:not(.reduce-motion) .projects[data-stagger]:not(.in) .project__media::before{transform:scaleY(1)}
.js:not(.reduce-motion) .projects[data-stagger].in .project__media::before{
  animation:m-curtain var(--dur-slow) var(--ease-cine) backwards;
  animation-delay:calc(var(--i,0) * var(--stagger) + 160ms);
}

/* Barrido de luz al pasar el cursor, como un cabezal móvil. */
.project__media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);
  transform:translate3d(-120%,0,0);
}
.project__logo img{transition:transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .project:hover .project__media::after{transform:translate3d(120%,0,0);transition:transform .9s var(--ease-out)}
  .project:hover .project__logo img{transform:scale(1.06)}
}
.project__media picture{display:contents}


/* ── 11 · Inscripción: conversión primero ────────────────── */

/* Filas rápidas: el precio y la fecha no deben hacerse esperar. */
.js:not(.reduce-motion) .sheet__rows.in>*{
  animation-duration:var(--dur-fast);
  animation-delay:calc(var(--i,0) * var(--stagger-ui) + 120ms);
}
address{font-style:normal}


/* ── 12 · CIERRE · "Solo 10 lugares" ─────────────────────── */

.cta-ten{
  display:inline-block;background:var(--ink);color:var(--volt);
  padding:0 .14em;margin-inline:.03em;border-radius:.08em;line-height:1;
}

/* La banda arranca a oscuras. Al llegar al centro de la pantalla
   se enciende un círculo de luz que la llena. Una vez encendida,
   se queda encendida: nunca vuelve a dejar texto sobre negro. */
.motion-on .cta-band[data-scene="cta"]{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.motion-on .cta-band[data-scene="cta"]::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;
  width:max(150vw,150vh);aspect-ratio:1;border-radius:50%;
  background:var(--volt);transform:translate(-50%,-50%) scale(var(--cta-s,1));
}
.motion-on .cta-band[data-scene="cta"]:not(.is-lit) .wrap>*{opacity:0}
.motion-on .cta-band[data-scene="cta"].is-lit .wrap>*{animation:m-rise var(--dur-base) var(--ease-out) backwards}
.motion-on .cta-band[data-scene="cta"].is-lit .wrap>*:nth-child(2){animation-delay:var(--stagger)}
.motion-on .cta-band[data-scene="cta"].is-lit .wrap>*:nth-child(3){animation-delay:calc(var(--stagger) * 2)}


/* ── 13 · Pie ────────────────────────────────────────────── */

.footer{overflow:hidden}
.footer a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:color var(--dur-ui) var(--ease),background-size var(--dur-fast) var(--ease-out)}
.footer a:hover{background-size:100% 1px}
.motion-on .footer__wordmark{transform:translate3d(calc((.5 - var(--p,.5)) * 12%),0,0)}