/* Lidia Fernández — efectos de scroll «trazo y pigmento» (ver fx.js).
   Todo estado oculto vive dentro de prefers-reduced-motion:no-preference y bajo
   .js:not(.fx-off): sin JS, sin IntersectionObserver o con movimiento reducido
   la página se ve completa y estática. Solo se animan transform, opacity, clip-path
   y stroke-dashoffset. */

:root{--fx-ease:cubic-bezier(.16,1,.3,1);--fx-ease-io:cubic-bezier(.7,0,.2,1)}

/* ---------- piezas comunes (siempre) ---------- */
.fx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fx-nb{white-space:nowrap}
.fx-w,.fx-c{display:inline-block}
.fx-wi,.fx-ci{display:inline-block}

/* trazo caligráfico */
.fx-stroke{display:block;color:var(--accent);pointer-events:none}
.fx-stroke svg{display:block;width:100%;height:auto;overflow:visible}

/* ventana en arco del revelado de imágenes (la crea fx.js; fuera de movimiento no existe) */
.fx-arch{position:absolute;left:-20%;width:140%;top:0;height:145%;overflow:hidden;border-radius:50% 50% 0 0/31% 31% 0 0;background:var(--rose)}
.fx-arch-in{position:absolute;left:14.2857%;width:71.4286%;top:0;height:68.9655%;display:block}

/* el hilo del proceso */
[data-fx="steps"]{position:relative}
[data-fx="steps"]>li{position:relative}

/* firma de cierre: ceja sobre el nombre del pie */
.foot-sign{display:flex;flex-direction:column;align-items:flex-start}
.foot-brow{width:clamp(150px,27vw,430px);margin:0 0 calc(clamp(64px,14.5vw,250px) * -.06) clamp(4px,6.6vw,120px)}

@media (prefers-reduced-motion:no-preference){

  /* ===== 1 · títulos por líneas con máscara ===== */
  .js:not(.fx-off) [data-fx="lines"]:not(.fx-split){visibility:hidden}
  .js:not(.fx-off) [data-fx="lines"] .fx-w{
    /* máscara solo por abajo: cursivas y ascendentes respiran, las descendentes caben en el padding */
    padding-bottom:.22em;margin-bottom:-.22em;clip-path:inset(-.6em -.5em 0 -.5em)}
  .js:not(.fx-off) [data-fx="lines"] .fx-wi{
    transform:translate3d(0,118%,0) rotate(5deg);transform-origin:0 100%;
    transition:transform 1.35s var(--fx-ease) calc(var(--fx-d,0ms) + var(--l,0) * 130ms + var(--w,0) * 45ms)}
  .js:not(.fx-off) [data-fx="lines"].fx-in .fx-wi{transform:none}

  /* ===== 2 · la imagen se destapa como un arco que crece desde abajo ===== */
  /* antes de que fx.js monte la ventana: la foto (y el fondo de la caja) no se ven */
  .js:not(.fx-off) [data-fx="unveil"] :is(.fx-box,:has(>img)){background:transparent}
  .js:not(.fx-off) [data-fx="unveil"] :has(>img):not(.fx-arch-in)>img{opacity:0}
  .fx-arch,.fx-arch-in{transition:transform 1.75s cubic-bezier(.62,.02,.2,1) var(--fx-d,0ms)}
  /* ventana 140% de ancha y con un arco de 45% de alto: entra entera por debajo y sale entera por arriba */
  .fx-arch{transform:translate3d(0,68.9655%,0)}
  .fx-arch-in{transform:translate3d(0,-100%,0)}
  .fx-in .fx-arch{transform:translate3d(0,-31.0345%,0)}
  .fx-in .fx-arch-in{transform:translate3d(0,45%,0)}
  .fx-arch-in>img{scale:1.2;transition:scale 2.4s var(--fx-ease) var(--fx-d,0ms)}
  .fx-in .fx-arch-in>img{scale:1}
  .js:not(.fx-off) [data-fx="unveil"] figcaption{opacity:0;transform:translate3d(0,14px,0);transition:opacity 1s var(--fx-ease),transform 1.2s var(--fx-ease);transition-delay:calc(var(--fx-d,0ms) + .75s)}
  .js:not(.fx-off) [data-fx="unveil"].fx-in figcaption{opacity:1;transform:none}

  /* ===== 3 · manifiesto que se entinta ===== */
  /* la opacidad de cada palabra la pone fx.js según el scroll */
  .js:not(.fx-off) [data-fx="manifesto"] .fx-mw{opacity:.13;transition:opacity .45s linear}

  /* ===== 5 · hilo del proceso ===== */
  .js:not(.fx-off) [data-fx="steps"]{padding-top:44px}
  .js:not(.fx-off) [data-fx="steps"]::before,
  .js:not(.fx-off) [data-fx="steps"]::after{content:"";position:absolute;left:0;right:0;top:14px;height:1px;pointer-events:none}
  .js:not(.fx-off) [data-fx="steps"]::before{background:var(--line-dk)}
  .js:not(.fx-off) [data-fx="steps"]::after{background:linear-gradient(90deg,rgba(228,165,156,.35),var(--accent-lt) 60%);transform-origin:0 50%;transform:scaleX(var(--fx-p,0));transition:transform .5s var(--ease)}
  .js:not(.fx-off) [data-fx="steps"]>li::before{content:"";position:absolute;left:26px;top:-34px;width:9px;height:9px;border-radius:50%;border:1px solid rgba(228,165,156,.45);background:var(--ink);transition:background .6s,box-shadow .9s var(--fx-ease),transform .9s var(--fx-ease);transform:scale(.7)}
  .js:not(.fx-off) [data-fx="steps"]>li.fx-lit::before{background:var(--accent-lt);border-color:var(--accent-lt);box-shadow:0 0 0 6px rgba(228,165,156,.14);transform:none}
  .js:not(.fx-off) [data-fx="steps"]>li{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.1s var(--fx-ease),transform 1.3s var(--fx-ease),border-color 1.2s}
  .js:not(.fx-off) [data-fx="steps"]>li.fx-lit{opacity:1;transform:none;border-color:rgba(228,165,156,.32)}
  /* varias filas (tablet/móvil): sin hilo horizontal, cada paso se enciende al llegar */
  .js:not(.fx-off) [data-fx="steps"].fx-multi{padding-top:0}
  .js:not(.fx-off) [data-fx="steps"].fx-multi::before,
  .js:not(.fx-off) [data-fx="steps"].fx-multi::after,
  .js:not(.fx-off) [data-fx="steps"].fx-multi>li::before{display:none}

  /* ===== 6 · nombre del pie: letras que suben ===== */
  .js:not(.fx-off) [data-fx="rise"] .fx-c{clip-path:inset(-.5em -.4em 0 -.4em)}
  .js:not(.fx-off) [data-fx="rise"] .fx-ci{
    transform:translate3d(0,calc((1 - clamp(0, var(--fx-p,0) * (var(--n) * .28 + 1) - var(--i) * .28, 1)) * 112%),0);
    transition:transform .7s var(--fx-ease)}

  /* ===== 7 · ceja pelo a pelo ===== */
  .js:not(.fx-off) [data-fx="brow"].fx-brow-ready path{
    stroke-dasharray:var(--len);
    stroke-dashoffset:calc(var(--len) * (1 - clamp(0, (var(--fx-p,0) * (var(--n) + 26) - var(--i)) / 26, 1)));
    transition:stroke-dashoffset .5s var(--fx-ease)}
}


/* colocación del trazo bajo la cita de «Sobre mí» */
.about-stroke{width:min(88%,460px);margin:-44px 0 0 -6px}
.about-stroke:empty{display:none}