/* ==========================================================================
   Portfólio — Raylander Guimarães
   Base, animações e estados de interação.
   O layout vive em estilos inline no index.html (vindo do design original);
   aqui ficam apenas as regras que atributos inline não conseguem expressar.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #08090C; -webkit-font-smoothing: antialiased; }
a { color: oklch(0.70 0.15 250); text-decoration: none; }
a:hover { color: oklch(0.82 0.11 250); }
::selection { background: oklch(0.70 0.15 250); color: #08090C; }
input, textarea, button { font: inherit; }

@keyframes rg-marquee { from { transform: translateX(0); }   to { transform: translateX(-50%); } }
@keyframes rg-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes rg-blink   { 0%,100% { opacity: 1; }               50% { opacity: 0.15; } }

/* --- Estados de hover/foco -------------------------------------------------
   Sobrescrevem estilos inline, por isso precisam de !important. --------- */
.x1:hover { color:#EAEEF7 !important; }
.x2:hover { color:#EAEEF7 !important; border-color:rgba(255,255,255,0.32) !important; }
.x3:hover { background:oklch(0.82 0.11 250) !important; color:#08090C !important; }
.x4:hover { transform:translateY(-3px) !important; box-shadow:0 22px 52px -18px oklch(0.70 0.15 250 / 0.95) !important; color:#08090C !important; }
.x5:hover { border-color:rgba(255,255,255,0.4) !important; transform:translateY(-3px) !important; color:#EAEEF7 !important; }
.x6:hover { color:oklch(0.70 0.15 250) !important; }
.x7:hover { transform:translateY(-6px) !important; border-color:oklch(0.70 0.15 250 / 0.5) !important; }
.x8:hover { border-color:oklch(0.70 0.15 250 / 0.5) !important; transform:translateY(-5px) !important; }
.x9:hover { transform:translateY(-2px) !important; }
.x10:focus { border-color:oklch(0.70 0.15 250) !important; }
/* --- Contato: seletor de provedor de e-mail --------------------------------
   O <details> guarda as opções; sem o marcador nativo do navegador. ----- */
[data-mail] summary::-webkit-details-marker { display: none; }
[data-mail] summary::marker { content: ""; }
[data-mail][open] summary { box-shadow: 0 22px 52px -18px oklch(0.70 0.15 250 / 0.6); }

/* --- Acessibilidade --------------------------------------------------------
   Respeita quem pede menos movimento no sistema operacional. ----------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Foco visível por teclado (o design original zera o outline dos campos). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid oklch(0.70 0.15 250);
  outline-offset: 2px;
}