/* ==========================================================================
   motion.css — coreografía de Polvo (Carmen Makeup)
   Dueño: [motion]. Lee los atributos del contrato en SPEC.md.
   Regla: todo movimiento vive dentro de @media (prefers-reduced-motion: no-preference)
   y respeta :root[data-motion="reduce"] (simulación del lab). La alternativa
   reducida está al final, completa.
   ========================================================================== */

:root {
  /* Curvas propias */
  --ease-polvo: cubic-bezier(.22, .8, .24, 1);   /* asentarse: llega rápido, se posa largo */
  --ease-soplo: cubic-bezier(.16, 1, .3, 1);     /* respuesta a un gesto (expo-out) */
  --ease-grano: cubic-bezier(.55, 0, .8, .35);   /* lo que se va: el grano cae (ease-in) */
  --ease-pincel: cubic-bezier(.65, 0, .25, 1);   /* barrido de brocha (in-out asimétrico) */

  /* Duraciones */
  --dur-micro: 200ms;      /* microinteracciones 150–250 */
  --dur-reveal: 800ms;     /* revelados 600–900 */
  --dur-page-out: 460ms;   /* la vista saliente se deshace */
  --dur-page-in: 620ms;    /* la entrante se asienta (total ≤ 700) */
  --stagger: 60ms;

  /* Capas */
  --z-menu: 50;
  --z-polvo-fx: 60;
  --z-polvo-ambient: 20;  /* lienzo fijo de halos y costuras: sobre el contenido, bajo la cabecera (30) */

  /* Texturas (SVG feTurbulence en data URI) */
  --grain-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 3000' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.34' stop-color='%23fff'/%3E%3Cstop offset='.66' stop-color='%23000'/%3E%3C/linearGradient%3E %3Cfilter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' seed='7' result='n'/%3E %3CfeColorMatrix in='n' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1' result='o'/%3E %3CfeComposite in='SourceGraphic' in2='o' operator='arithmetic' k2='1.56' k3='1.8' k4='-1.53'/%3E %3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='6'/%3E%3C/feComponentTransfer%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E");
  --grain-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3000 1000' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='.34' stop-color='%23fff'/%3E%3Cstop offset='.66' stop-color='%23000'/%3E%3C/linearGradient%3E %3Cfilter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='3' result='n'/%3E %3CfeColorMatrix in='n' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1' result='o'/%3E %3CfeComposite in='SourceGraphic' in2='o' operator='arithmetic' k2='1.42' k3='1.6' k4='-1.36'/%3E %3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='6'/%3E%3C/feComponentTransfer%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E");
  --brush-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3000 1000' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='.34' stop-color='%23fff'/%3E%3Cstop offset='.66' stop-color='%23000'/%3E%3C/linearGradient%3E %3Cfilter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .07' numOctaves='2' seed='11' result='n'/%3E %3CfeColorMatrix in='n' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1' result='o'/%3E %3CfeComposite in='SourceGraphic' in2='o' operator='arithmetic' k2='1.98' k3='2.4' k4='-2.04'/%3E %3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='5'/%3E%3C/feComponentTransfer%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3C/defs%3E %3Crect width='100%25' height='100%25' fill='url(%23g)' filter='url(%23f)'/%3E%3C/svg%3E");
  --specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E %3Cfilter id='s' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='4'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 9 0 0 0 -6.3'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Cpath d='M14 18 L27 5' stroke='%231B1410' stroke-width='4' stroke-linecap='round'/%3E %3Cpath d='M14 18 L27 5' stroke='%23D7A860' stroke-width='2' stroke-linecap='round'/%3E %3Cpath d='M4 28 C4 22 8 17 12.5 16.5 L15.5 19.5 C15 24 10 28 4 28 Z' fill='%23F4EDE3' stroke='%231B1410' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ utilidades */
:where(.sr-only) {
  position: absolute; 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;
}
.count-digits { font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------------ lienzo polvo */
canvas[data-polvo] { display: block; width: 100%; height: 100%; pointer-events: none; }
/* Con el motor listo, el lema lo dibuja el polvo: el texto queda para lectores de pantalla */
[data-polvo-scene].polvo-on [data-polvo-text],
.polvo-on > [data-polvo-text] {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ======================================================================
   1. Transiciones entre páginas (View Transitions entre documentos)
   ====================================================================== */
@view-transition { navigation: auto; }

[data-vt] { view-transition-class: morph; }

@media (prefers-reduced-motion: no-preference) {
  /* La vista saliente se deshace en grano: máscara de ruido con rampa que barre */
  :root:not([data-motion="reduce"])::view-transition-old(root) {
    mask-image: var(--grain-y);
    mask-size: 100% 300%;
    mask-repeat: no-repeat;
    animation: polvo-deshace var(--dur-page-out) var(--ease-grano) both;
  }
  /* La entrante se asienta: baja unos píxeles, enfoca y aparece */
  :root:not([data-motion="reduce"])::view-transition-new(root) {
    animation: polvo-asienta var(--dur-page-in) var(--ease-polvo) 80ms both;
  }
  :root:not([data-motion="reduce"])::view-transition-group(*.morph) {
    animation-duration: 600ms;
    animation-timing-function: var(--ease-polvo);
  }
  :root:not([data-motion="reduce"])::view-transition-old(*.morph),
  :root:not([data-motion="reduce"])::view-transition-new(*.morph) {
    animation-duration: 600ms;
  }

  /* Por tipo de página destino (añadidos en pageswap/pagereveal) */
  :root:not([data-motion="reduce"]):active-view-transition-type(to-producto)::view-transition-old(root) {
    animation-duration: 380ms;
  }
  :root:not([data-motion="reduce"]):active-view-transition-type(to-carrito)::view-transition-new(root) {
    animation-name: polvo-desde-lado;
  }
  :root:not([data-motion="reduce"]):active-view-transition-type(to-home)::view-transition-new(root) {
    animation-duration: 680ms;
    animation-delay: 20ms;
  }
}

@keyframes polvo-deshace {
  from { mask-position: 0 0%; opacity: 1; }
  to   { mask-position: 0 100%; opacity: .6; }
}
@keyframes polvo-asienta {
  from { opacity: 0; translate: 0 -10px; filter: blur(4px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes polvo-desde-lado {
  from { opacity: 0; translate: 24px 0; filter: blur(3px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* ======================================================================
   2. Revelados ligados al scroll
   powder: titular que aparece como polvo soplado (máscara de grano, izq→dcha)
   rise:   bloque que sube 16 px, escalonado por --i
   brush:  foto barrida por una pincelada (máscara de cerdas)
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root:not([data-motion="reduce"]) [data-reveal="powder"] {
      /* capa 2 sólida: crece al final y deja el elemento 100 % opaco (sin ruido ni costuras) */
      mask-image: var(--grain-x), linear-gradient(#000 0 0);
      mask-size: 300% 100%, 0% 100%;
      mask-repeat: no-repeat;
      animation: polvo-powder linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 100%;
    }
    :root:not([data-motion="reduce"]) [data-reveal="rise"] {
      animation: polvo-rise linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 6%) entry calc(70% + var(--i, 0) * 6%);
    }
    :root:not([data-motion="reduce"]) [data-reveal="brush"] {
      mask-image: var(--brush-x), linear-gradient(#000 0 0);
      mask-size: 300% 100%, 0% 100%;
      mask-repeat: no-repeat;
      animation: polvo-brush linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }

  /* Respaldo sin animation-timeline: IntersectionObserver añade .is-in */
  .reveal-io:not([data-motion="reduce"]) [data-reveal] {
    transition:
      opacity var(--dur-reveal) var(--ease-polvo),
      translate var(--dur-reveal) var(--ease-polvo),
      filter var(--dur-reveal) var(--ease-polvo),
      mask-position 900ms var(--ease-pincel);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .reveal-io:not([data-motion="reduce"]) [data-reveal="powder"] {
    mask-image: var(--grain-x); mask-size: 300% 100%; mask-repeat: no-repeat; mask-position: 0% 0;
  }
  .reveal-io:not([data-motion="reduce"]) [data-reveal="brush"] {
    mask-image: var(--brush-x); mask-size: 300% 100%; mask-repeat: no-repeat; mask-position: 0% 0;
  }
  .reveal-io:not([data-motion="reduce"]) [data-reveal="powder"]:not(.is-in) { mask-position: 100% 0; filter: blur(3px); }
  .reveal-io:not([data-motion="reduce"]) [data-reveal="rise"]:not(.is-in) { opacity: 0; translate: 0 16px; }
  .reveal-io:not([data-motion="reduce"]) [data-reveal="brush"]:not(.is-in) { mask-position: 100% 0; }
  .reveal-io:not([data-motion="reduce"]) [data-reveal].is-done { mask-image: none; filter: none; }
}

/* mask-image no es animable en Chrome: en el último 1 % la capa sólida cubre todo */
@keyframes polvo-powder {
  from  { mask-position: 100% 0, 0 0; mask-size: 300% 100%, 0% 100%; filter: blur(3px); translate: -4px 0; }
  60%   { filter: blur(.6px); }
  99%   { mask-position: 0% 0, 0 0; mask-size: 300% 100%, 0% 100%; filter: blur(0); translate: 0 0; }
  to    { mask-position: 0% 0, 0 0; mask-size: 300% 100%, 100% 100%; filter: none; translate: 0 0; }
}
@keyframes polvo-rise {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes polvo-brush {
  from { mask-position: 100% 0, 0 0; mask-size: 300% 100%, 0% 100%; scale: 1.04; }
  99%  { mask-position: 0% 0, 0 0; mask-size: 300% 100%, 0% 100%; scale: 1; }
  to   { mask-position: 0% 0, 0 0; mask-size: 300% 100%, 100% 100%; scale: 1; }
}

/* ======================================================================
   3. Pista horizontal anclada (sticky + scroll vertical)
   Sin JS: carrusel nativo con scroll-snap. motion.js añade .is-pinned.
   ====================================================================== */
[data-track] .track-rail {
  display: flex;
  gap: var(--track-gap, clamp(16px, 2.5vw, 40px));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
[data-track] .track-rail > [data-track-item] { flex: 0 0 auto; scroll-snap-align: start; }

[data-track].is-pinned { position: relative; view-timeline: --polvo-track block; }
[data-track].is-pinned .track-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; display: flex; align-items: center;
}
[data-track].is-pinned .track-rail {
  overflow: visible; scroll-snap-type: none; will-change: transform;
  padding-inline: var(--track-pad, clamp(16px, 6vw, 96px));
}
@supports (animation-timeline: view()) {
  [data-track].is-pinned .track-rail {
    animation: polvo-track linear both;
    animation-timeline: --polvo-track;
    animation-range: contain 0% contain 100%;
  }
}
/* Indicador de progreso del carrusel (lo crea motion.js tras la pista; oculto si la pista está anclada o cabe entera). */
[data-track] .track-progress {
  position: relative; height: 2px; margin: var(--s-3, .75rem) var(--gutter, 16px) 0; border-radius: 2px;
  background: color-mix(in oklab, currentColor 18%, transparent); overflow: hidden;
}
[data-track] .track-progress[hidden], [data-track].is-pinned .track-progress { display: none; }
/* Filas [data-swipe] (móvil): mismo indicador, bajo la fila. */
.swipe-progress { position: relative; height: 2px; margin-top: .5rem; border-radius: 2px; overflow: hidden;
  background: color-mix(in oklab, currentColor 16%, transparent); }
.swipe-progress[hidden] { display: none; }
.swipe-progress > span { position: absolute; inset-block: 0; left: 0; width: 30%; border-radius: inherit;
  background: var(--bronce, #8A5A2B); will-change: transform; }
@media (min-width: 48rem) { .swipe-progress { display: none; } }
[data-track] .track-progress > span {
  position: absolute; inset-block: 0; left: 0; width: 30%; border-radius: inherit;
  background: var(--oro, #D7A860); will-change: transform;
}
@keyframes polvo-track {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--track-dist, 0px)), 0, 0); }
}

/* ======================================================================
   4. Parallax de recortes
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root:not([data-motion="reduce"]) [data-parallax] {
      animation: polvo-parallax linear both;
      animation-timeline: view();
    }
  }
}
@keyframes polvo-parallax {
  from { translate: 0 calc(var(--parallax, .2) * 60px); }
  to   { translate: 0 calc(var(--parallax, .2) * -60px); }
}

/* ======================================================================
   5. Shimmer holográfico: tenue, oro/arena/--gama, sigue al puntero
   ====================================================================== */
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

[data-shimmer] { position: relative; isolation: isolate; --mx: 50%; --my: 50%; }
[data-shimmer]::before,
[data-shimmer]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity 240ms var(--ease-soplo);
}
/* velo cónico: oro, arena y el tono de la gama, nunca arcoíris */
[data-shimmer]::after {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgb(255 250 240 / .5), transparent 42%),
    conic-gradient(from var(--angle) at var(--mx) var(--my),
      transparent 0deg,
      color-mix(in oklab, var(--gama, #D7A860) 75%, transparent) 50deg,
      transparent 110deg,
      rgb(226 213 194 / .6) 170deg,
      transparent 230deg,
      rgb(215 168 96 / .55) 300deg,
      transparent 360deg);
  mix-blend-mode: soft-light;
}
/* motas de mica que solo aparecen cerca del puntero */
[data-shimmer]::before {
  background-image: var(--specks);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, transparent 34%);
}
@media (hover: hover) {
  [data-shimmer]:hover::after,
  [data-shimmer]:focus-within::after { opacity: .85; }
  [data-shimmer]:hover::before,
  [data-shimmer]:focus-within::before { opacity: .9; }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) [data-shimmer]:is(:hover, :focus-within)::after {
    animation: polvo-angle 7s linear infinite;
  }
}
@keyframes polvo-angle { to { --angle: 360deg; } }

/* ======================================================================
   6. Carrito: recibe la partícula
   ====================================================================== */
[data-cart-icon] { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) [data-cart-icon].is-pulsing {
    animation: polvo-cart 240ms var(--ease-soplo);
  }
  :root:not([data-motion="reduce"]) [data-cart-icon].is-pulsing::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid var(--oro, #D7A860); pointer-events: none;
    animation: polvo-ring 420ms var(--ease-soplo) forwards;
  }
  :root:not([data-motion="reduce"]) [data-cart-count].is-bumping {
    animation: polvo-bump 220ms var(--ease-soplo);
  }
}
@keyframes polvo-cart { 0% { scale: 1; } 35% { scale: 1.14; } 100% { scale: 1; } }
@keyframes polvo-ring { from { opacity: .9; scale: .6; } to { opacity: 0; scale: 1.5; } }
@keyframes polvo-bump { from { translate: 0 -4px; opacity: .4; } to { translate: 0 0; opacity: 1; } }

/* Pulsación física en controles con polvo */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) [data-puff] { transition: scale 160ms var(--ease-soplo); }
  :root:not([data-motion="reduce"]) [data-puff]:active { scale: .96; }
}

/* ======================================================================
   7. Menú a pantalla completa: círculo que nace del botón
   (solo con JS: motion.js pone data-state)
   ====================================================================== */
[data-menu][data-state] {
  position: fixed; inset: 0; z-index: var(--z-menu);
  clip-path: circle(0px at var(--menu-x, calc(100% - 40px)) var(--menu-y, 40px));
  visibility: hidden;
  transition: clip-path 420ms var(--ease-grano), visibility 0s linear 420ms;
}
[data-menu][data-state="open"] {
  clip-path: circle(150vmax at var(--menu-x, calc(100% - 40px)) var(--menu-y, 40px));
  visibility: visible;
  transition: clip-path 680ms var(--ease-polvo), visibility 0s;
}
[data-menu][data-state].is-settled { transition: none; }
[data-menu][data-state="open"].is-settled :is([data-menu-item], nav a) { transition: none; opacity: 1; translate: 0 0; }
[data-menu][data-state] :is([data-menu-item], nav a) {
  opacity: 0; translate: 0 18px;
  transition: opacity 200ms var(--ease-soplo), translate 200ms var(--ease-soplo);
}
[data-menu][data-state="open"] :is([data-menu-item], nav a) {
  opacity: 1; translate: 0 0;
  transition-duration: 600ms;
  transition-timing-function: var(--ease-polvo);
  transition-delay: calc(180ms + var(--i, 0) * 50ms);
}
[data-menu-preview] {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: clamp(160px, 18vw, 260px); aspect-ratio: 4 / 5;
  pointer-events: none; opacity: 0; scale: .92;
  transition: opacity 200ms var(--ease-soplo), scale 250ms var(--ease-soplo);
}
[data-menu][data-state] nav { position: relative; z-index: 1; }
[data-menu-preview] img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-menu-preview].is-visible { opacity: 1; scale: 1; }
@media (hover: none) { [data-menu-preview] { display: none; } }
.menu-open body { overflow: hidden; }

/* ======================================================================
   8. Cursor pincel (la estela la pinta polvo.js en la capa FX)
   ====================================================================== */
@media (pointer: fine) {
  body[data-cursor] { cursor: var(--cursor) 4 28, auto; }
  body[data-cursor] :is(a, button, [role="button"], label, summary, [data-puff]) { cursor: var(--cursor) 4 28, pointer; }
  body[data-cursor] :is(input, textarea, [contenteditable]) { cursor: text; }
}

/* ======================================================================
   9. Movimiento reducido: alternativa completa
   Partículas: un frame asentado (polvo.js). Sin parallax ni pista anclada.
   Transiciones en fundido ≤ 150 ms.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 150ms !important; animation-timing-function: ease-out; }
  ::view-transition-old(root) { mask-image: none; }
  [data-menu][data-state] { clip-path: none; transition: opacity 150ms ease-out, visibility 0s linear 150ms; opacity: 0; visibility: hidden; }
  [data-menu][data-state="open"] { opacity: 1; visibility: visible; transition: opacity 150ms ease-out, visibility 0s; }
  [data-menu][data-state] :is([data-menu-item], nav a) { opacity: 1; translate: none; transition: none; }
  [data-shimmer]::after { animation: none; }
  [data-menu-preview] { transition: opacity 150ms ease-out; scale: 1; }
  body[data-cursor] { cursor: auto; }
}
:root[data-motion="reduce"]::view-transition-group(*),
:root[data-motion="reduce"]::view-transition-old(*),
:root[data-motion="reduce"]::view-transition-new(*) { animation-duration: 150ms !important; animation-timing-function: ease-out; }
:root[data-motion="reduce"] [data-menu][data-state] { clip-path: none; transition: opacity 150ms ease-out, visibility 0s linear 150ms; opacity: 0; visibility: hidden; }
:root[data-motion="reduce"] [data-menu][data-state="open"] { opacity: 1; visibility: visible; transition: opacity 150ms ease-out, visibility 0s; }
:root[data-motion="reduce"] [data-menu][data-state] :is([data-menu-item], nav a) { opacity: 1; translate: none; transition: none; }
:root[data-motion="reduce"] [data-menu-preview] { transition: opacity 150ms ease-out; scale: 1; }
:root[data-motion="reduce"] body[data-cursor] { cursor: auto; }