/* =========================================================
   DANISS BLUE — sistema de movimiento (v6)
   Se carga después de styles.css. Aquí vive TODO lo que se mueve
   al entrar, al hacer scroll y al tocar; el diseño no cambia.

    1. Tokens (duraciones, curvas, cascada, distancias)
    2. Reveal: base + variantes data-rv + grupos data-stagger
    3. TextReveal: títulos por línea
    4. Botones y flechas
    5. Cursor con contexto
    6. Tarjetas de proyecto (respuesta al mouse)
    7. Playground: logos que flotan y se arrastran
    8. Caricaturas: miran al mouse, se asoman
    9. Navegación: menú móvil
   10. Transición de página
   11. Mobile, modo revisión y movimiento reducido

   Regla: una propiedad, un dueño. Las entradas usan `transform` y
   `clip-path`; el flotado y la mirada usan `translate`; los estados
   de presión usan `scale`. Así nada se pisa.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
@property --lx{syntax:"<length>";inherits:false;initial-value:0px}
@property --ly{syntax:"<length>";inherits:false;initial-value:0px}
@property --plx{syntax:"<number>";inherits:false;initial-value:0}
@property --zoom{syntax:"<number>";inherits:false;initial-value:1}
@property --spin{syntax:"<number>";inherits:false;initial-value:0}
@property --tilt{syntax:"<number>";inherits:false;initial-value:0}
@property --drift{syntax:"<number>";inherits:false;initial-value:0}
@property --sk{syntax:"<number>";inherits:false;initial-value:1}
@property --dim{syntax:"<number>";inherits:false;initial-value:0}
:root{
  --m-fast:.2s;                         /* respuesta a un gesto */
  --m-base:.5s;                         /* entradas chicas */
  --m-slow:.65s;                        /* entradas de bloque */
  --m-mask:.8s;                         /* máscaras y recortes */
  --m-stagger:60ms;                     /* cascada entre hermanos */
  --m-dist:24px;                        /* recorrido de una entrada (corto, estilo Apple) */
  --e-out:cubic-bezier(.16,1,.3,1);     /* salida larga y suave (expo) */
  --e-inout:cubic-bezier(.76,0,.24,1);  /* cortinas y transiciones de página */
  --e-pop:cubic-bezier(.34,1.28,.64,1); /* rebote corto y discreto */
  --e-spring:var(--e-pop);              /* resorte real donde el navegador lo soporta */
}
/* sin resorte largo: los rebotes quedan discretos (v17) */

@media (max-width:768px){
  :root{--m-base:.45s;--m-slow:.6s;--m-mask:.7s;--m-stagger:40ms;--m-dist:16px}
}

/* ---------- 2. Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(var(--m-dist))}
.js .reveal.is-in{opacity:1;transform:none;transition:transform var(--m-slow) var(--e-out) calc(var(--d,0s) + var(--b,0s)),opacity .5s ease calc(var(--d,0s) + var(--b,0s))}
.js .title.reveal,.js [data-rv="none"]{opacity:1;transform:none}

/* líneas ✦: se dibujan de izquierda a derecha */
.js .divider{clip-path:inset(-14px 100% -14px -10px)}
.js .divider.is-in{clip-path:inset(-14px -10px -14px -10px);transition:clip-path 1.3s var(--e-out) var(--b,0s)}

/* máscara: la pieza se abre y la imagen se asienta (portadas, galerías, tarjetas) */
.card{--rv-r:var(--r-md)}
.js [data-rv="clip"]:not(.is-in){opacity:1;transform:none;clip-path:inset(12% 9% 12% 9% round var(--rv-r,var(--r-lg)))}
.js [data-rv="clip"]:not(.is-in) img{transform:scale(1.16)}
.js [data-rv="clip"].is-in:not(.rv-done){clip-path:inset(0 0 0 0 round var(--rv-r,var(--r-lg)));transition:clip-path var(--m-mask) var(--e-out) calc(var(--d,0s) + var(--b,0s))}
.js [data-rv="clip"].is-in:not(.rv-done) img{transition:transform 1.3s var(--e-out) calc(var(--d,0s) + var(--b,0s))}

/* tarjeta de proyecto: sube con su texto y la portada se abre */
.pcard .cover{transition:transform .7s var(--e-out),clip-path var(--m-mask) var(--e-out) calc(var(--d,0s) + var(--b,0s))}
.pcard .cover__frame img{transition:transform 1.3s var(--e-out) calc(var(--d,0s) + var(--b,0s))}
.js .pcard[data-rv="card"]:not(.is-in) .cover{clip-path:inset(9% 7% 9% 7% round var(--r-lg))}
.js .pcard[data-rv="card"]:not(.is-in) .cover__frame img{transform:scale(1.14)}
.js .pcard[data-rv="card"].is-in:not(.rv-done) .cover{clip-path:inset(0 0 0 0 round var(--r-lg))}

/* pop: caricaturas y piezas juguetonas llegan con un resorte */
.js [data-rv="pop"]{opacity:0;transform:translateY(40px) scale(.72) rotate(-8deg)}
.js [data-rv="pop"].is-in{opacity:1;transform:none;transition:transform 1s var(--e-spring) calc(var(--d,0s) + var(--b,0s)),opacity .3s ease calc(var(--d,0s) + var(--b,0s))}

/* desde un costado */
.js [data-rv="left"]{transform:translateX(calc(var(--m-dist) * -1.5))}
.js [data-rv="right"]{transform:translateX(calc(var(--m-dist) * 1.5))}

/* entra desde el borde inferior de su tarjeta (la tarjeta la recorta) */
.js [data-rv="rise"]{opacity:1;transform:translateY(60%)}
.js [data-rv="rise"].is-in{transform:none;transition:transform 1.1s var(--e-spring) calc(var(--d,0s) + var(--b,0s) + .15s)}

/* se asoma: aparece de abajo hacia arriba, como saliendo de atrás del título */
.js [data-rv="peek"]:not(.is-in){opacity:1;transform:translateY(38%);clip-path:inset(0 0 100% 0)}
.js [data-rv="peek"].is-in:not(.rv-done){opacity:1;transform:none;clip-path:inset(-20% -20% 0 -20%);transition:transform .9s var(--e-spring) calc(var(--b,0s) + .25s),clip-path .7s var(--e-out) calc(var(--b,0s) + .25s)}

/* cortina horizontal: bandas de texto */
.js [data-rv="wipe"]:not(.is-in){opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.js [data-rv="wipe"].is-in:not(.rv-done){opacity:1;transform:none;clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--e-inout) var(--b,0s)}

/* grupos: los hijos entran en cascada */
.js [data-stagger].reveal{opacity:1;transform:none}
.js [data-stagger]:not(.rv-done) > *{opacity:0;transform:translateY(18px) scale(.94)}
.js [data-stagger="x"]:not(.rv-done) > *{transform:translateX(90px)}
.js [data-stagger].is-in:not(.rv-done) > *{opacity:1;transform:none;transition:transform .75s var(--e-out) calc(var(--b,0s) + var(--i,0) * var(--m-stagger)),opacity .4s ease calc(var(--b,0s) + var(--i,0) * var(--m-stagger))}
.js [data-stagger="pop"].is-in:not(.rv-done) > *{transition-timing-function:var(--e-spring),ease}

/* parallax suave ligado al scroll (js/motion.js escribe --plx; solo desktop) */
[data-plx]{translate:0 calc(var(--plx) * 1px)}
[data-zoom]{scale:var(--zoom,1)}
[data-spin]{rotate:calc(var(--spin,0) * 1deg)}
[data-tilt]{rotate:calc(var(--tilt,0) * 1deg)}
[data-drift]{translate:calc(var(--drift,0) * 1px) 0}

/* ---------- 3. TextReveal ---------- */
/* antes de que el script divida el texto, el título no se ve (evita un parpadeo) */
.js [data-split]:not(.is-split){visibility:hidden}
/* marco del hero: las líneas se abren desde el centro */
.js:not(.is-loaded) .frame--hero{clip-path:inset(-14px 50% -14px 50%)}
.js.is-loaded .frame--hero{clip-path:inset(-14px -10px -14px -10px);transition:clip-path 1.1s var(--e-inout)}
.js.intro-gsap .frame--hero{transition:none}
.split > span{transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform .9s var(--e-out);transition-delay:calc(var(--d,0s) + var(--b,0s) + var(--i,0) * 42ms)}
/* mientras GSAP dirige la entrada del hero, las transiciones CSS se apartan */
.intro-gsap .appear,.intro-gsap .hero .split > span{transition:none !important}
/* el hero ya entró: los efectos de scroll no deben pelear con transiciones */
.st-on .hero .appear{transition:none}

/* ---------- 4. Botones y flechas ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color var(--fast),border-color var(--fast),box-shadow var(--fast),scale .3s var(--e-out)}
.btn::before{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:260%;aspect-ratio:1;border-radius:50%;background:var(--fill,var(--blue-dark));translate:-50% -50%;scale:0;transition:scale .65s var(--e-out);pointer-events:none}
.btn--ghost{--fill:var(--blue)}
.btn--light{--fill:#DCE7FF}
.btn:hover{background:var(--blue);border-color:var(--blue-dark)}
.btn--ghost:hover{background:var(--surface);border-color:var(--blue)}
.btn--light:hover{background:var(--white);border-color:#DCE7FF}
.btn:hover::before,.btn:focus-visible::before{scale:1}
.btn:active{scale:.97}
@media (hover:none){
  .btn:hover::before{scale:0}
  .btn:active::before{scale:1;transition-duration:.25s}
}
/* la flecha sale y vuelve a entrar */
.service__arrow,.pcard__arrow{overflow:hidden}
.arrow-in{display:block}
@media (hover:hover){
  .service__link:hover .arrow-in,.pcard__arrow:hover .arrow-in,.pcard__main:hover ~ .pcard__arrow .arrow-in{animation:arrow-fly .55s var(--e-out)}
}
@keyframes arrow-fly{0%{translate:0 0;opacity:1}42%{translate:130% 0;opacity:0}43%{translate:-130% 0;opacity:0}100%{translate:0 0;opacity:1}}
/* links de texto: la línea crece desde la izquierda */
.strip__all,.menu__foot a{background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;transition:background-size .45s var(--e-out)}
.strip__all:hover,.strip__all:focus-visible,.menu__foot a:hover{background-size:100% 1.5px}
/* chips y píldoras: respuesta al tocar */
.filter,.hero__tags a,.case-tag,.socials a,.contact__links a,.page-hero__index a{transition:background var(--fast),color var(--fast),border-color var(--fast),translate var(--fast),scale .25s var(--e-out)}
.filter:active,.hero__tags a:active,.case-tag:active,.socials a:active,.contact__links a:active,.page-hero__index a:active,.strip__btn:active{scale:.94}

/* ---------- 5. Cursor con contexto ---------- */
.cursor__box{transition:width .32s var(--spring),height .32s var(--spring),scale .18s,background-color .2s,border-color .2s}
.cursor.is-link .cursor__box{width:44px;height:44px;background:rgba(2,89,246,.14);border-color:var(--blue)}
/* sobre links y botones el aro deja ver un punto en el centro: siempre se sabe dónde está el mouse */
.cursor.is-link .cursor__box::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 1.5px var(--white)}
.cursor.is-link .cursor__box{background:rgba(2,89,246,.08)}
.cursor.is-label .cursor__box{width:96px;height:96px;background:var(--blue);border-color:var(--white)}
.cursor__label{width:80px;font-size:12px}
.cursor.is-text{opacity:0 !important}
.cursor.is-drag .cursor__box::before,.cursor.is-drag .cursor__box::after{position:absolute;top:50%;translate:0 -50%;color:var(--blue);font:700 16px/1 var(--text)}
.cursor.is-drag .cursor__box::before{content:"←";right:calc(100% + 8px)}
.cursor.is-drag .cursor__box::after{content:"→";left:calc(100% + 8px)}

/* ---------- 6. Tarjetas de proyecto ---------- */
/* js/motion.js escribe --px / --py (-1 a 1) según dónde está el mouse sobre la portada */
@media (hover:hover) and (pointer:fine){
  .pcard__cover{perspective:1000px}
  .pcard:hover .cover{transform:rotateY(calc(var(--px,0) * 3.5deg)) rotateX(calc(var(--py,0) * -3.5deg))}
  .pcard:hover .cover__frame{transform:translate(calc(var(--px,0) * -12px),calc(var(--py,0) * -9px)) scale(1.06)}
  .pcard:hover .cover--web .cover__frame{transform:translate(calc(-2% + var(--px,0) * -10px),calc(-3% + var(--py,0) * -8px))}
  .pcard:hover .pcard__arrow{border-color:var(--blue)}
}
.pcard__cover:active .cover{scale:.985}
/* franja: al arrastrar, las tarjetas se inclinan con el gesto */
.strip__item{transition:rotate .6s var(--e-out),scale .6s var(--e-out)}
.strip__track.is-dragging .strip__item{scale:.975;rotate:calc(var(--v,0) * 1deg)}

/* ---------- 7. Playground ---------- */
.arena{position:relative;display:grid;justify-items:center;align-items:end;height:clamp(340px,36vw,460px);max-width:1000px;margin:clamp(36px,4vw,56px) auto 0}
.arena .play__mascot{position:relative;z-index:2;margin:0}
/* los logos viven en una capa por debajo de la caricatura: nunca le tapan la cara */
.arena__chips{position:absolute;inset:0;z-index:1}
.chip{--s:clamp(54px,5.2vw,70px);position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);will-change:transform;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.chip__in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 28px -18px rgba(2,40,120,.55);transition:scale .4s var(--e-spring),border-color var(--fast),box-shadow var(--fast)}
.chip img{width:52%;height:52%;object-fit:contain;pointer-events:none}
.chip:hover .chip__in{scale:1.12;border-color:var(--blue)}
.chip.is-drag{z-index:2}
.chip.is-drag .chip__in{scale:1.2;border-color:var(--blue);box-shadow:var(--shadow)}
.js .arena:not(.is-in) .chip__in{scale:0}
.js .arena.is-in:not(.rv-done) .chip__in{transition:scale .8s var(--e-spring) calc(.15s + var(--i,0) * 55ms)}
.js .arena:not(.is-in) .play__mascot{opacity:0;transform:translateY(40px) scale(.75)}
.js .arena.is-in .play__mascot{transition:transform 1s var(--e-spring),opacity .3s}
.arena__hint{position:absolute;left:50%;top:calc(100% + 14px);translate:-50% 0;white-space:nowrap;font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--gray)}
.arena__hint span:last-child{display:none}
@media (hover:none){
  .arena__hint span:first-child{display:none}
  .arena__hint span:last-child{display:inline}
}
:root[data-theme="dark"] .chip img[src*="chatgpt"]{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip img[src*="chatgpt"]{filter:invert(1)}}

/* ---------- 8. Caricaturas ---------- */
/* data-look: se inclinan apenas hacia el mouse (js/motion.js escribe --lx / --ly) */
[data-look]{translate:var(--lx) var(--ly)}
@keyframes float{0%,100%{translate:var(--lx) var(--ly);rotate:0deg}50%{translate:var(--lx) calc(var(--ly) - 8px);rotate:-1.2deg}}

/* ---------- 9. Navegación ---------- */
.menu nav a{transform:translateY(70%) rotate(3deg);transform-origin:0 100%;clip-path:inset(0 0 100% 0);transition:transform .7s var(--e-out),opacity .3s,clip-path .7s var(--e-out)}
.menu.is-open nav a{clip-path:inset(-12% 0 0 0)}
.menu:not(.is-open) nav a{transition-duration:.25s}
.menu nav a:active{translate:8px 0}
.nav a:active{scale:.94}

/* ---------- 10. Transición de página ---------- */
/* Un panel azul sube y cubre (salida, ~0,42 s) y en la página nueva sigue de
   largo hacia arriba (llegada, ~0,5 s). El isotipo acompaña en blanco. */
.pt{position:fixed;inset:0;z-index:2000;pointer-events:none;visibility:hidden;overflow:hidden}
.pt__panel{position:absolute;inset:-2px;background:#0259F6;transform:translateY(102%);border-radius:56px 56px 0 0}
.pt__logo{position:absolute;left:50%;top:50%;width:64px;height:auto;translate:-50% -50%;scale:.4;opacity:0;filter:brightness(0) invert(1)}
.pt.is-out{visibility:visible;pointer-events:auto}
.pt.is-out .pt__panel{transform:none;border-radius:0;transition:transform .42s var(--e-inout),border-radius .42s var(--e-inout)}
.pt.is-out .pt__logo{scale:1;opacity:1;transition:scale .45s var(--e-pop) .14s,opacity .2s .14s}
.pt-in .pt{visibility:visible}
.pt-in .pt__panel{transform:none;border-radius:0}
.pt-in .pt__logo{scale:1;opacity:1}
.pt-in.pt-go .pt__panel{transform:translateY(-102%);border-radius:0 0 56px 56px;transition:transform .5s var(--e-inout),border-radius .5s var(--e-inout)}
.pt-in.pt-go .pt__logo{translate:-50% -260%;scale:.7;opacity:0;transition:translate .45s var(--e-inout),scale .45s,opacity .25s .1s}

/* flotantes: en el celular se apartan mientras se baja (core.js pone .is-away) */
.floaters .float-cta,.floaters .wa,.radio{transition-property:opacity,transform,translate,visibility,box-shadow,background}
.floaters.is-away .float-cta,.floaters.is-away .wa,.radio.is-away{translate:0 120px;opacity:0;transition:translate .4s var(--e-out),opacity .25s}
.floaters:not(.is-away) .float-cta,.floaters:not(.is-away) .wa,.radio:not(.is-away){translate:0 0}

/* ---------- 11. Mobile, revisión y movimiento reducido ---------- */
@media (max-width:768px){
  .arena{height:380px;margin-top:28px}
  .arena .play__mascot{height:170px}
  .chip{--s:48px;left:calc(var(--xm) * 1%);top:calc(var(--ym) * 1%)}
  .js [data-rv="pop"]{transform:translateY(24px) scale(.82) rotate(-5deg)}
  .js [data-stagger="x"]:not(.rv-done) > *{transform:translateX(40px)}
  /* experiencia: sin hover, la tarjeta que cruza el centro de la pantalla se enciende */
  /* experiencia: la tarjeta activa ya no se pinta de azul (parpadeaba al desplazar); la marcan su punto y Saritah */
}

.qa .reveal,.qa [data-rv],.qa .divider,.qa [data-stagger] > *,.qa .pcard .cover,.qa [data-rv] img,.qa .pcard .cover__frame img,.qa .chip__in,.qa .arena .play__mascot{opacity:1 !important;transform:none !important;clip-path:none !important;scale:1 !important;transition:none !important}
.qa .pt{display:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js [data-rv],.js .divider,.js [data-stagger] > *,.js .pcard .cover,.js [data-rv] img,.js .pcard .cover__frame img,.js .arena .play__mascot{opacity:1 !important;transform:none !important;clip-path:none !important}
  .js .arena .chip__in{scale:1 !important}
  .chip{transform:none !important}
  [data-look],[data-plx],[data-drift]{translate:none}
  [data-zoom]{scale:none}
  [data-spin],[data-tilt]{rotate:none}
  .pt{display:none}
  .arrow-in{animation:none !important}
  .btn::before{transition:none}
}

/* ---------- 12. Loader (solo al iniciar la visita) ---------- */
/* Saritah trabajando con su laptop (Lottie) mientras sube el contador; al 100 %
   levanta el pulgar, los textos se van y una cortina doble (blanca y después
   azul) descubre la página. Solo existe con .ld-on (lo pone <head>); si algo
   fallara, a los 6 s se oculta solo y nunca deja la página tapada. */
.ld{display:none}
.ld-on .ld{position:fixed;inset:0;z-index:2100;display:block;overflow:hidden;cursor:progress;animation:ld-failsafe 0s linear 6s forwards}
.ld-on body{overflow:hidden}
.ld__curtain{position:absolute;inset:-2px;background:#0259F6}
.ld__panel{position:absolute;inset:-2px;background:#FFFFFF;color:#0A0A0A}
.ld__mascot{position:absolute;left:50%;top:44%;height:min(48vh,420px);aspect-ratio:296 / 327;translate:-50% -50%;animation:ld-pop .8s var(--e-out) .05s backwards}
.ld__still,.ld__lottie{position:absolute;inset:0;width:100%;height:100%}
.ld__still{object-fit:contain}
.ld__lottie svg{display:block;width:100%;height:100%}
.ld__still--work{animation:ld-bob 1.6s ease-in-out infinite alternate}
.ld__still--done{opacity:0;scale:.8;rotate:-6deg}
.ld__mascot.is-live .ld__still--work{opacity:0;animation:none}
.ld__mascot.is-done .ld__still--work,.ld__mascot.is-done .ld__lottie{opacity:0;scale:.9;transition:opacity .18s ease,scale .3s var(--e-out)}
.ld__mascot.is-done .ld__still--done{opacity:1;scale:1;rotate:0deg;transition:opacity .2s ease,scale .45s var(--e-pop),rotate .45s var(--e-pop)}
.ld__count{position:absolute;left:clamp(20px,3.4vw,56px);bottom:clamp(14px,2.4vw,36px);display:flex;align-items:flex-start;gap:.06em;font:900 clamp(80px,14vw,220px)/.8 var(--display);letter-spacing:-.04em;color:#0259F6;font-variant-numeric:tabular-nums;animation:ld-up .7s var(--e-out) .1s backwards}
.ld__count small{margin-top:.12em;font-size:.3em;letter-spacing:0}
.ld__line{position:absolute;right:clamp(20px,3.4vw,56px);bottom:clamp(22px,3vw,48px);display:grid;gap:6px;text-align:right;font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6B7280;animation:ld-up .7s var(--e-out) .2s backwards}
.ld__line b{font-weight:700;color:#0A0A0A}
.ld__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#DCE7FF}
.ld__bar i{display:block;height:100%;background:#0259F6;transform:scaleX(0);transform-origin:0 50%}
/* salida */
.ld.is-leaving .ld__count,.ld.is-leaving .ld__line{translate:0 -24px;opacity:0;transition:translate .4s var(--e-out),opacity .3s ease}
.ld.is-done{pointer-events:none}
.ld.is-done .ld__panel{transform:translateY(-102%);border-radius:0 0 56px 56px;transition:transform .7s var(--e-inout),border-radius .7s var(--e-inout)}
.ld.is-done .ld__mascot{translate:-50% -90%;transition:translate .7s var(--e-inout)}
.ld.is-done .ld__curtain{transform:translateY(-102%);border-radius:0 0 56px 56px;transition:transform .7s var(--e-inout) .14s,border-radius .7s var(--e-inout) .14s}
@keyframes ld-pop{from{opacity:0;scale:.85;translate:-50% -40%}}
@keyframes ld-up{from{opacity:0;translate:0 24px}}
@keyframes ld-bob{to{transform:translateY(-6px) rotate(-1deg)}}
@keyframes ld-failsafe{to{visibility:hidden;opacity:0;pointer-events:none}}
/* el loader queda claro también en modo oscuro: las líneas negras de Saritah necesitan fondo claro */
@media (max-width:768px){
  .ld__mascot{top:42%;width:min(68vw,300px);height:auto}
  .ld__count{font-size:clamp(76px,27vw,130px)}
  .ld__line{left:auto;bottom:auto;top:clamp(20px,5vw,28px);right:20px;font-size:11px}
  .ld.is-done .ld__panel,.ld.is-done .ld__curtain{border-radius:0 0 32px 32px}
}
@media (prefers-reduced-motion:reduce){.ld{display:none !important}}