/* ==========================================================================
   utilities.css — Utilitários e estados globais
   Ordem de carregamento: 7/7
   ========================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
  transition: top var(--duration-fast) ease;
}

.skip-link:focus {
  top: 1rem;
}

/* Revelação ao rolar ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.7s var(--ease-out),
      transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* Preferência por menos movimento ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__canvas {
    display: none !important;
  }

  .hero-scene,
  .hero__visual:hover .hero-scene {
    transform: none !important;
  }

  .reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero {
    background:
      radial-gradient(90% 90% at 72% 18%, rgba(16, 26, 133, 0.9) 0%, transparent 62%),
      radial-gradient(70% 70% at 18% 82%, rgba(242, 116, 94, 0.18) 0%, transparent 60%),
      var(--ink-deep) !important;
  }
}

/* Estados de formulário/feedback ----------------------------------------- */
[aria-busy="true"] {
  cursor: progress;
}

/* Auxiliares de visibilidade --------------------------------------------- */
.hide-mobile {
  display: initial;
}

.show-mobile {
  display: none;
}

@media (max-width: 720px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: initial;
  }
}

/* Impressão --------------------------------------------------------------- */
@media print {
  html {
    scroll-behavior: auto;
  }

  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  .float-wa,
  .hero__canvas,
  .softbar,
  .portfolio__controls,
  .skip-link {
    display: none !important;
  }

  .section {
    padding-block: 2rem;
    background: #fff !important;
    color: #000 !important;
  }

  .hero {
    min-height: auto;
    padding-top: 2rem;
  }

  .hero__visual,
  .tech__visual {
    display: none;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.7em;
    color: #444;
  }

  .portfolio-card {
    position: static !important;
    transform: none !important;
    width: 33%;
    break-inside: avoid;
  }

  .portfolio__stage {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    gap: 1rem;
  }
}