/* ==========================================================================
   Diogo Feitosa — Portfólio
   Animações: fundo, cursor, microinterações de hover e @keyframes
   ========================================================================== */

/* ---------- Background (fixo, cobre a página inteira) ----------
   O movimento em si (malha de gradiente WebGL) é criado em
   js/gradient-wave.js e injetado como <canvas> dentro deste container. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.page-bg canvas { opacity: 0.5; }

/* ---------- Custom cursor (desktop only — ver responsive.css) ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-1);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor--ring {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cursor--ring.is-active {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}

/* ---------- Halo giratório ao redor dos botões (sempre em movimento) ---------- */
.cta-whatsapp::before,
.behance-btn::before,
.icon-btn::before {
  content: "";
  position: absolute;
  inset: -160%;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.7) 80deg, transparent 190deg);
  filter: blur(14px);
  animation: btn-halo-rotate 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cta-whatsapp::before,
  .behance-btn::before,
  .icon-btn::before { animation: none; }
}

.cta-whatsapp::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.behance-btn::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 0;
  border-radius: inherit;
  background: var(--surface-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s var(--ease);
}
.behance-btn:hover::after { background: rgba(255, 255, 255, 0.06); }
.icon-btn::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 0;
  border-radius: inherit;
  background: var(--surface-soft);
  transition: background 0.3s var(--ease);
}
.icon-btn:hover::after { background: var(--accent-bg); }

.cta-whatsapp > *,
.behance-btn > *,
.icon-btn > * { position: relative; z-index: 1; }

@keyframes btn-halo-rotate {
  to { transform: rotate(360deg); }
}

/* ---------- WhatsApp CTA — microinteração no hover ---------- */
.cta-whatsapp {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s var(--ease);
}
.cta-whatsapp:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 40px -10px rgba(255, 255, 255, 0.45);
}
.cta-whatsapp:active { transform: translateY(-1px) scale(0.985); }
.cta-whatsapp__icon svg { transition: transform 0.35s var(--ease); }
.cta-whatsapp:hover .cta-whatsapp__icon svg { transform: rotate(-8deg) scale(1.08); }

/* ---------- Work / identity cards — hover sofisticado (desktop) ---------- */
.work-card__media img,
.identity-card__media img {
  transition: transform 0.7s var(--ease);
}
.work-card:hover .work-card__media img,
.identity-card:hover .identity-card__media img {
  transform: scale(1.06);
}

.work-card__info {
  transform: translateY(0);
  opacity: 1;
}

.work-card,
.identity-card {
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
.work-card:hover,
.identity-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
}

/* ---------- Behance CTA button ---------- */
.behance-btn {
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.behance-btn:hover {
  transform: translateY(-3px);
  border-color: var(--accent-bg-strong);
}
.behance-btn svg { transition: transform 0.35s var(--ease); }
.behance-btn:hover svg { transform: translateX(4px); }

/* ---------- Hero text loop ---------- */
.hero__loop-cursor {
  animation: hero-loop-blink 0.9s ease-in-out infinite;
}
@keyframes hero-loop-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.hero__loop-rotate {
  animation: hero-loop-reveal 0.5s ease;
}
@keyframes hero-loop-reveal {
  from { opacity: 0; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor, .cursor--ring { display: none; }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}