/**
 * Design Evolution 2026
 *
 * Camada de modernização visual sobre o tema cyber-brutalist.
 * Técnicas: scroll-driven animations (CSS nativo, sem JS), View Transitions
 * cross-document, grain texture, micro-interações com spring easing,
 * text gradients animados e detalhes de polish.
 *
 * Tudo progressivo: navegador antigo ignora e o site continua perfeito.
 * Tudo respeita prefers-reduced-motion.
 *
 * @package IgorBrasil
 * @since 1.1.0
 */

/* ============================================
   1. VIEW TRANSITIONS CROSS-DOCUMENT
   Navegação entre páginas com fade suave nativo,
   sem SPA, sem JS. Chrome/Edge/Safari 2025+.
   ============================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: igb-fade-out 0.22s ease both;
}

::view-transition-new(root) {
  animation: igb-fade-in 0.28s ease both;
}

@keyframes igb-fade-out {
  to { opacity: 0; }
}

@keyframes igb-fade-in {
  from { opacity: 0; }
}

/* ============================================
   2. SCROLL-DRIVEN ANIMATIONS (CSS NATIVO)
   Cards e seções entram com reveal conforme o scroll,
   sem IntersectionObserver, sem JS. animation-timeline: view().
   ============================================ */
@supports (animation-timeline: view()) {
  .editorial-card,
  .wall-item,
  .comunidade-card,
  .pillar-card {
    animation: igb-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
}

@keyframes igb-reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   3. GRAIN TEXTURE
   Ruído sutil sobre o fundo, estética editorial premium.
   SVG inline, zero requisição extra. Quase imperceptível,
   mas tira a "cara de flat digital barato".
   ============================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ============================================
   4. TEXT GRADIENT ANIMADO NOS DESTAQUES NEON
   Aplicado APENAS no span neon da Comunidade.
   NUNCA usar em .home-hero h1 span ou .wall-header h1 span:
   esses h1 tem 3 vozes (solida, vazada, neon) e o
   background-clip:text destroi o text-stroke da voz vazada.
   ============================================ */
.comunidades-hero__title span {
  background: linear-gradient(
    110deg,
    var(--wp--preset--color--neon, #b8ff1a) 0%,
    #e4ff7a 28%,
    var(--wp--preset--color--neon, #b8ff1a) 55%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: igb-shimmer 5.5s ease-in-out infinite;
}

@keyframes igb-shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* ============================================
   5. MICRO-INTERAÇÕES COM SPRING EASING
   linear() permite curvas de mola reais no CSS.
   Botões respondem com física, não com ease genérico.
   ============================================ */
@supports (transition-timing-function: linear(0, 1)) {
  .cta-mentoria,
  .comunidade-card__cta,
  .wall-filter,
  .mobile-menu-cta {
    transition-timing-function: linear(
      0, 0.0086, 0.0331, 0.0723, 0.1242, 0.1881,
      0.2628, 0.3461, 0.4361, 0.5307, 0.6275, 0.7244,
      0.8113, 0.8869, 0.9486, 0.995, 1.0259, 1.043,
      1.0466, 1.0411, 1.0298, 1.0156, 1.0029, 0.9942,
      0.9904, 0.9908, 0.994, 0.9982, 1
    );
    transition-duration: 0.55s;
  }
}

/* ============================================
   6. CURSOR GLOW NOS CARDS (DESKTOP)
   Borda dos cards reage à posição do mouse via
   variáveis CSS atualizadas no main.js (initCardGlow).
   ============================================ */
@media (hover: hover) and (pointer: fine) {
  .editorial-card,
  .comunidade-card--featured {
    position: relative;
  }

  .editorial-card::after,
  .comunidade-card--featured::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
      240px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(184, 255, 26, 0.45),
      transparent 65%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }

  .editorial-card:hover::after,
  .comunidade-card--featured:hover::after {
    opacity: 1;
  }
}

/* ============================================
   7. POLISH GERAL
   ============================================ */

/* Seleção de texto na identidade */
::selection {
  background: var(--wp--preset--color--neon, #b8ff1a);
  color: #050505;
}

/* Scrollbar dark integrada */
@supports (scrollbar-color: red blue) {
  html {
    scrollbar-color: #2a2a2a #0a0a0a;
    scrollbar-width: thin;
  }
}

/* Focus visível na identidade (acessibilidade com estilo) */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--neon, #b8ff1a);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Imagens com fade-in ao carregar */
img[loading="lazy"] {
  transition: opacity 0.4s ease;
}

/* Scroll suave em âncoras, respeitando reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================
   8. REDUCED MOTION: DESLIGA TUDO QUE SE MOVE
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .editorial-card,
  .wall-item,
  .comunidade-card,
  .pillar-card {
    animation: none !important;
  }

  .comunidades-hero__title span {
    animation: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}