/* Movimento é uma camada opcional: todo o conteúdo nasce visível. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-duration: 700ms;
  --motion-fast: 220ms;
  --motion-distance: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .draw-underline::after {
    transform-origin: left center;
    animation: underline-arrive 850ms var(--motion-ease) 180ms backwards;
  }

  .button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background var(--motion-fast), border-color var(--motion-fast),
      transform 300ms var(--motion-ease), box-shadow 300ms var(--motion-ease);
  }

  .button::after {
    content: '';
    position: absolute;
    inset: -60% -20%;
    background: linear-gradient(105deg, transparent 35%, #ffffff42 50%, transparent 65%);
    transform: translateX(-110%);
    pointer-events: none;
  }

  .button:is(:hover, :focus-visible)::after {
    animation: button-light 650ms var(--motion-ease);
  }

  .button .icon, .text-link .icon {
    transition: transform 300ms var(--motion-ease);
  }

  .button:is(:hover, :focus-visible) .icon,
  .text-link:is(:hover, :focus-visible) .icon {
    transform: translateX(3px);
  }

  .fabric-tag, .hero-note, .offer-card, .gallery-options button {
    transition: transform 450ms var(--motion-ease), box-shadow 450ms var(--motion-ease),
      border-color 300ms, background 300ms;
  }

  .offer-card:focus-within {
    border-color: var(--action);
    box-shadow: 0 16px 35px #132d4310;
  }

  .hero-image-wrap > img, .technology-image > img {
    transition: transform 1100ms var(--motion-ease);
  }

  .header nav a { position: relative; }
  .header nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: var(--action);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 350ms var(--motion-ease);
  }
  .header nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }

  dialog[open] { animation: dialog-arrive 280ms var(--motion-ease); }
  dialog[open]::backdrop { animation: soft-arrive 220ms ease-out; }
  .faq-list details[open] > p { animation: soft-arrive 260ms ease-out; }

  @media (hover: hover) and (pointer: fine) {
    .fabric-tag:hover { transform: translateY(-4px); box-shadow: 0 18px 40px #132d431a; }
    .hero-note:hover { transform: rotate(0deg) translateY(-3px); }
    .hero-visual:hover .hero-image-wrap > img,
    .technology-image:hover > img { transform: scale(1.025); }
    .offer-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px #132d4310; }
    .gallery-options button:hover { transform: translateY(-2px); }
  }

  @media (max-width: 900px) {
    .header nav a::after { left: 12px; right: 12px; bottom: 7px; }
    .header nav.open { animation: dialog-arrive 220ms var(--motion-ease); }
  }
}

@keyframes underline-arrive {
  from { transform: rotate(-1deg) scaleX(0); }
  to { transform: rotate(-1deg) scaleX(1); }
}
@keyframes button-light {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
@keyframes dialog-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes soft-arrive { from { opacity: 0; } to { opacity: 1; } }

/* Também interrompe efeitos caso a preferência mude com a página aberta. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  [data-motion] { opacity: 1 !important; transform: none !important; }
}