/*
 * SHGT — effects.css  |  Visual Effects Layer (W3)
 * Glassmorphism · Animated Borders · Glow · Shimmer · Grain · Cursor
 *
 * Regras:
 *   - Apenas classes prefixadas fx-* ou seletores que aumentam especificidade
 *   - pointer-events: none em todas as camadas decorativas
 *   - prefers-reduced-motion: anula animações no bloco final
 *   - NÃO modifica index.html nem styles.css
 */

/* ── CSS Houdini @property (border-spin sem JS) ──────────────── */
@property --fx-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* ════════════════════════════════════════════════════════════════
   1. GLASSMORPHISM
   ════════════════════════════════════════════════════════════════ */

/* Navbar: glass mais pronunciado quando scrolled */
#navbar.scrolled {
  background: rgba(248, 246, 255, 0.78);
  backdrop-filter: blur(26px) saturate(1.9);
  -webkit-backdrop-filter: blur(26px) saturate(1.9);
  border-bottom-color: rgba(123, 58, 237, 0.24);
  box-shadow:
    0 4px 28px rgba(109, 40, 217, 0.12),
    inset 0 -1px 0 rgba(192, 96, 240, 0.10);
}

/* Cards: realce sutil de superfície (glass sheen no topo) */
.card:not(.card-highlight) {
  box-shadow:
    0 18px 55px rgba(109, 40, 217, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(123, 58, 237, 0.04);
}

/* Remove sombra duplicada no hover (styles.css tem sua própria) */
.card:not(.card-highlight):hover {
  box-shadow:
    0 28px 64px rgba(109, 40, 217, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}


/* ════════════════════════════════════════════════════════════════
   2. ANIMATED GRADIENT BORDER — .fx-border-glow
   Aplique em: .card-highlight  .case-box
   ════════════════════════════════════════════════════════════════ */

.fx-border-glow {
  position: relative;
}

/* Remove borda estática do card-highlight para não duplicar */
.card-highlight.fx-border-glow {
  border-color: transparent;
}

/* Borda cônica girando via ::after */
.fx-border-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--fx-border-angle) at 50% 50%,
    transparent 52%,
    rgba(192, 96, 240, 0.70) 68%,
    rgba(124, 58, 237, 0.55) 82%,
    transparent 96%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-border-spin 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes fx-border-spin {
  to { --fx-border-angle: 360deg; }
}


/* ════════════════════════════════════════════════════════════════
   3. BUTTON GLOW
   .btn-primary e .form-submit: hover + focus
   .hero-actions .btn-primary: pulso contínuo
   ════════════════════════════════════════════════════════════════ */

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow:
    0 16px 38px rgba(168, 85, 247, 0.38),
    0 0 0 3px rgba(192, 96, 240, 0.22),
    0 0 24px rgba(168, 85, 247, 0.26);
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.25s;
}

.form-submit:hover,
.form-submit:focus-visible {
  box-shadow:
    0 16px 38px rgba(168, 85, 247, 0.38),
    0 0 0 3px rgba(192, 96, 240, 0.18),
    0 0 20px rgba(168, 85, 247, 0.22);
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.25s;
}

/* Pulso suave e discreto no CTA do hero */
.hero-actions .btn-primary {
  animation: fx-hero-pulse 3.5s ease-in-out infinite;
}

/* Pausa ao hover para não brigar com o :hover glow */
.hero-actions .btn-primary:hover {
  animation-play-state: paused;
}

@keyframes fx-hero-pulse {
  0%, 100% {
    box-shadow:
      0 12px 32px rgba(168, 85, 247, 0.30),
      0 0 0 0   rgba(192, 96, 240, 0.00);
  }
  50% {
    box-shadow:
      0 20px 48px rgba(168, 85, 247, 0.46),
      0 0 0 7px  rgba(192, 96, 240, 0.07);
  }
}


/* ════════════════════════════════════════════════════════════════
   4. SHIMMER SWEEP — .fx-shimmer
   Varredura de brilho 1× no hover; 1 passada limpa
   ════════════════════════════════════════════════════════════════ */

.fx-shimmer {
  position: relative;
  overflow: hidden;
}

.fx-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 32%,
    rgba(255, 255, 255, 0.24) 47%,
    rgba(255, 255, 255, 0.10) 53%,
    transparent 68%
  );
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

.fx-shimmer:hover::before {
  transform: translateX(130%);
  transition: transform 0.58s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ════════════════════════════════════════════════════════════════
   5. GRAIN / RUÍDO — .fx-grain
   Insira <div class="fx-grain" aria-hidden="true"> dentro de header.hero
   pointer-events: none, z-index abaixo do conteúdo
   ════════════════════════════════════════════════════════════════ */

.fx-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}


/* ════════════════════════════════════════════════════════════════
   6. FOCO DE INPUTS — glow violeta acessível
   Aumenta especificidade para sobrescrever styles.css
   ════════════════════════════════════════════════════════════════ */

.contato-form .form-group input:focus,
.contato-form .form-group textarea:focus,
.contato-form .form-group select:focus {
  border-color: var(--violet-500);
  box-shadow:
    0 0 0 3px  rgba(124, 58, 237, 0.18),
    0 0 16px   rgba(124, 58, 237, 0.12);
  outline: 2px solid transparent;
  outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════
   7. CURSOR GLOW TARGET
   Elemento criado e posicionado via effects.js
   ════════════════════════════════════════════════════════════════ */

.fx-cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(124, 58, 237, 0.14) 0%,
    rgba(192, 96, 240, 0.08) 38%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.40s ease;
  z-index: 1;
}


/* ════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — anula todas as animações fx-*
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   8. GALAXY BUTTON — Feature V1  (adaptado paleta SHGT)
   Estrutura HTML requerida em .btn-primary.galaxy-btn:
     .spark  .backdrop  .galaxy > .galaxy__ring > .star × 20
     .galaxy__container > .star.star--static × 8  .text
   JS (effects.js) injeta --angle, --duration, --delay, --alpha,
   --size, --distance em cada .star via setAttribute.
   ════════════════════════════════════════════════════════════════ */

.btn-primary.galaxy-btn {
  --cut:        0.1em;
  --active:     1;            /* estado galaxy sempre ativo */
  --hue:        264;          /* violet SHGT */
  --spark:      1.8s;
  --transition: 0.25s;
  --bg:
    radial-gradient(
      120% 120% at 126% 126%,
      hsl(var(--hue) 97% 98% / 0.9) 40%,
      transparent 50%
    ) 0 0 / 100% 100% no-repeat,
    radial-gradient(
      120% 120% at 120% 120%,
      hsl(var(--hue) 97% 70% / 1) 30%,
      transparent 70%
    ) 0 0 / 100% 100% no-repeat,
    hsl(var(--hue) 97% 14%);

  background:        var(--bg) !important;
  animation:         none     !important;   /* cancela fx-hero-pulse e fx-grad-slide */

  display:           inline-flex;
  align-items:       center;
  justify-content:   center;
  gap:               0.25em;
  white-space:       nowrap;
  border:            0;
  font-size:         15px;
  font-weight:       700;
  padding:           15px 30px;
  border-radius:     var(--r-btn);
  position:          relative;
  overflow:          hidden;
  cursor:            pointer;
  scale:             1;

  box-shadow:
    0 0 5em 2.5em   hsl(var(--hue) 97% 61% / 0.50),
    0  0.05em 0 0   hsl(var(--hue) 97% 80%) inset,
    0 -0.05em 0 0   hsl(var(--hue) 97% 10%) inset,
    0 12px 32px     rgba(124, 58, 237, 0.32);

  transition:
    box-shadow  0.40s ease-in-out,
    transform   0.30s ease-out;
}

.btn-primary.galaxy-btn:is(:hover, :focus-visible) {
  box-shadow:
    0 0 1.4em 0.4em rgba(168, 85, 247, 0.28),
    0  0.05em 0 0   hsl(var(--hue) 97% 80%) inset,
    0 -0.05em 0 0   hsl(var(--hue) 97% 10%) inset,
    0 18px 42px     rgba(168, 85, 247, 0.44);
  transform: translateY(-2px);
}

.btn-primary.galaxy-btn:active {
  transform: translateY(0);
}

/* Spark — anel giratório com conic-gradient */
.btn-primary.galaxy-btn .spark {
  position:      absolute;
  inset:         0;
  border-radius: var(--r-btn);
  rotate:        0deg;
  overflow:      hidden;
  mask:          linear-gradient(white, transparent 50%);
  animation:     gbtn-flip calc(var(--spark) * 2) infinite steps(2, end);
  pointer-events: none;
}

@keyframes gbtn-flip {
  to { rotate: 360deg; }
}

.btn-primary.galaxy-btn .spark::before {
  content:      '';
  position:     absolute;
  width:        200%;
  aspect-ratio: 1;
  top:          0%;
  left:         50%;
  z-index:      -1;
  translate:    -50% -15%;
  rotate:       0;
  transform:    rotate(-90deg);
  opacity:      1;
  background:   conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  transition:   opacity var(--transition);
  animation:    gbtn-rotate var(--spark) linear infinite both;
}

.btn-primary.galaxy-btn .spark::after {
  content:       '';
  position:      absolute;
  inset:         var(--cut);
  border-radius: var(--r-btn);
}

@keyframes gbtn-rotate {
  to { transform: rotate(90deg); }
}

/* Backdrop — preenchimento interno */
.btn-primary.galaxy-btn .backdrop {
  position:       absolute;
  inset:          var(--cut);
  background:     var(--bg);
  border-radius:  var(--r-btn);
  transition:     background var(--transition);
  pointer-events: none;
}

/* Galaxy — anel 3D com estrelas em órbita */
.btn-primary.galaxy-btn .galaxy {
  position:       absolute;
  width:          100%;
  aspect-ratio:   1;
  top:            50%;
  left:           50%;
  translate:      -50% -50%;
  overflow:       hidden;
  opacity:        1;
  pointer-events: none;
}

.btn-primary.galaxy-btn .galaxy__ring {
  height:           200%;
  width:            200%;
  position:         absolute;
  top:              50%;
  left:             50%;
  border-radius:    50%;
  transform:        translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);
  transform-style:  preserve-3d;
}

/* Galaxy container — estrelas estáticas */
.btn-primary.galaxy-btn .galaxy__container {
  position:       absolute;
  inset:          0;
  overflow:       hidden;
  opacity:        1;
  mask:           radial-gradient(white, transparent);
  pointer-events: none;
}

/* Estrelas orbitais */
.btn-primary.galaxy-btn .star {
  height:        calc(var(--size) * 1px);
  aspect-ratio:  1;
  background:    white;
  border-radius: 50%;
  position:      absolute;
  opacity:       var(--alpha);
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px));
  animation:     gbtn-orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear;
}

@keyframes gbtn-orbit {
  to {
    transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px));
  }
}

/* Estrelas estáticas */
.btn-primary.galaxy-btn .star--static {
  top:        50%;
  left:       50%;
  transform:  translate(0, 0);
  max-height: 4px;
  filter:     brightness(4);
  opacity:    0.9;
  animation:
    gbtn-move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear,
    gbtn-move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear;
}

.btn-primary.galaxy-btn:hover .star--static {
  animation-play-state: paused;
}

@keyframes gbtn-move-x {
  0%   { translate: -100px 0; }
  100% { translate:  100px 0; }
}

@keyframes gbtn-move-y {
  0%   { transform: translate(0, -50px); }
  100% { transform: translate(0,  50px); }
}

/* Texto */
.btn-primary.galaxy-btn .text {
  position:       relative;
  z-index:        1;
  translate:      2% -6%;
  letter-spacing: 0.01ch;
  color:          #ffffff;
}

/* Cancela o pulse do hero para não conflitar */
.hero-actions .btn-primary.galaxy-btn {
  animation: none !important;
}


@media (prefers-reduced-motion: reduce) {

  .fx-border-glow::after {
    animation: none;
    /* mantém uma borda estática sutil */
    background: conic-gradient(
      from 45deg at 50% 50%,
      transparent 52%,
      rgba(192, 96, 240, 0.32) 68%,
      rgba(124, 58, 237, 0.22) 82%,
      transparent 96%
    );
  }

  .hero-actions .btn-primary {
    animation: none;
  }

  .hero-actions .btn-primary:hover {
    animation-play-state: running; /* reset */
  }

  .fx-shimmer::before {
    display: none;
  }

  .fx-cursor-glow {
    display: none !important;
  }

  /* Galaxy button — anula todas as animações */
  .btn-primary.galaxy-btn .spark,
  .btn-primary.galaxy-btn .spark::before,
  .btn-primary.galaxy-btn .star,
  .btn-primary.galaxy-btn .star--static {
    animation: none !important;
  }
}