/* ═══════════════════════════════════════════════════════════════
   PIXEL CARD — Vanilla CSS Port
   Original: @react-bits/PixelCard
   ─────────────────────────────────────────────────────────────
   Usage:
     <div class="pixel-card pixel-card--pink">
       <canvas class="pixel-canvas"></canvas>
       <div style="position: absolute; ...">Your content</div>
     </div>
   ═══════════════════════════════════════════════════════════════ */

.pixel-card {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid #27272a;
  border-radius: 25px;
  isolation: isolate;
  transition: border-color 200ms cubic-bezier(0.5, 1, 0.89, 1);
  user-select: none;
  cursor: pointer;
}

.pixel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  aspect-ratio: 1;
  background: radial-gradient(circle, #09090b, transparent 85%);
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.5, 1, 0.89, 1);
  pointer-events: none;
  z-index: 1;
}

.pixel-card:hover::before,
.pixel-card:focus-within::before {
  opacity: 1;
}

/* Variants — border glow on hover */
.pixel-card--default:hover  { border-color: #cbd5e1; box-shadow: 0 0 20px rgba(203,213,225,0.15); }
.pixel-card--blue:hover     { border-color: #0ea5e9; box-shadow: 0 0 20px rgba(14,165,233,0.2); }
.pixel-card--yellow:hover   { border-color: #eab308; box-shadow: 0 0 20px rgba(234,179,8,0.2); }
.pixel-card--pink:hover     { border-color: #e11d48; box-shadow: 0 0 20px rgba(225,29,72,0.3); }

/* Purple variant (project brand) */
.pixel-card--purple:hover   { border-color: var(--purple-main, #7B2FFF); box-shadow: 0 0 20px rgba(123,47,255,0.3); }

/* Cyan variant */
.pixel-card--cyan:hover     { border-color: var(--cyan, #00D4FF); box-shadow: 0 0 20px rgba(0,212,255,0.25); }

/* Semantic Variants */
.pixel-card--primary:hover   { border-color: var(--purple-main); box-shadow: 0 0 20px rgba(123,47,255,0.3); }
.pixel-card--secondary:hover { border-color: var(--btn-gray, #6b7280); box-shadow: 0 0 20px rgba(107,114,128,0.15); }
.pixel-card--success:hover   { border-color: var(--success, #10b981); box-shadow: 0 0 20px rgba(16,185,129,0.25); }
.pixel-card--danger:hover    { border-color: var(--danger, #ef4444); box-shadow: 0 0 20px rgba(239,68,68,0.25); }
.pixel-card--warning:hover   { border-color: var(--warning, #f59e0b); box-shadow: 0 0 20px rgba(245,158,11,0.25); }
.pixel-card--info:hover      { border-color: var(--info, #0ea5e9); box-shadow: 0 0 20px rgba(14,165,233,0.25); }

/* Text Hover for Dark Variants */
.pixel-card span { transition: color 0.3s ease; }
.pixel-card--primary:hover span   { color: var(--purple-light, #9B59B6); }
.pixel-card--secondary:hover span { color: #f3f4f6; }
.pixel-card--success:hover span   { color: var(--success, #10b981); }
.pixel-card--danger:hover span    { color: var(--danger, #ef4444); }
.pixel-card--warning:hover span   { color: var(--warning, #f59e0b); }
.pixel-card--info:hover span      { color: var(--info, #0ea5e9); }


.pixel-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Preset Sizes */
.pixel-card--sm { width: 200px; height: 250px; }
.pixel-card--md { width: 300px; height: 375px; }
.pixel-card--lg { width: 400px; height: 500px; }

/* Full width (gallery use) */
.pixel-card--full { width: 100%; height: auto; min-height: 300px; aspect-ratio: unset; }

/* ── PIXEL BUTTON VARIANT ── */
.pixel-btn {
  width: auto;
  height: 48px;
  padding: 0 28px;
  border-radius: 50px; /* Estilo pílula para botões */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  box-sizing: border-box;
}

/* White Variant (Premium Clean) */
.pixel-card--white, 
.pixel-btn--white,
.pixel-btn--white-primary,
.pixel-btn--white-secondary,
.pixel-btn--white-success,
.pixel-btn--white-danger,
.pixel-btn--white-warning,
.pixel-btn--white-info {
  background: #ffffff !important;
  border-color: #e2e8f0;
  color: #05051A !important;
}

.pixel-card--white::before, 
.pixel-btn--white::before,
.pixel-btn--white-primary::before,
.pixel-btn--white-secondary::before,
.pixel-btn--white-success::before,
.pixel-btn--white-danger::before,
.pixel-btn--white-warning::before,
.pixel-btn--white-info::before {
  /* Glow sutil em tons de roxo para o fundo branco */
  background: radial-gradient(circle, rgba(123, 47, 255, 0.08), transparent 80%);
}

.pixel-card--white:hover, 
.pixel-btn--white:hover {
  border-color: var(--purple-main, #7B2FFF);
  box-shadow: 0 12px 25px rgba(123, 47, 255, 0.12);
}

.pixel-card--white .pixel-canvas, 
.pixel-btn--white .pixel-canvas,
.pixel-btn--white-primary .pixel-canvas,
.pixel-btn--white-secondary .pixel-canvas,
.pixel-btn--white-success .pixel-canvas,
.pixel-btn--white-danger .pixel-canvas,
.pixel-btn--white-warning .pixel-canvas,
.pixel-btn--white-info .pixel-canvas {
  /* Pixels com transparência sutil para não ofuscar o texto */
  opacity: 0.85;
}

/* Garante que o texto esteja sempre acima do canvas de pixels */
.pixel-btn span,
.pixel-card span {
  position: relative;
  z-index: 2;
}

/* Specific Hover Effects for White Semantic Variants */
.pixel-btn--white-primary:hover   { border-color: var(--purple-main); box-shadow: 0 12px 25px rgba(123, 47, 255, 0.15); color: var(--purple-main) !important; }
.pixel-btn--white-secondary:hover { border-color: var(--btn-gray, #6b7280); box-shadow: 0 12px 25px rgba(107, 114, 128, 0.15); color: var(--btn-gray, #6b7280) !important; }
.pixel-btn--white-success:hover   { border-color: var(--success, #10b981); box-shadow: 0 12px 25px rgba(16, 185, 129, 0.15); color: var(--success, #10b981) !important; }
.pixel-btn--white-danger:hover    { border-color: var(--danger, #ef4444); box-shadow: 0 12px 25px rgba(239, 68, 68, 0.15); color: var(--danger, #ef4444) !important; }
.pixel-btn--white-warning:hover   { border-color: var(--warning, #f59e0b); box-shadow: 0 12px 25px rgba(245, 158, 11, 0.15); color: #d97706 !important; }
.pixel-btn--white-info:hover      { border-color: var(--info, #0ea5e9); box-shadow: 0 12px 25px rgba(14, 165, 233, 0.15); color: var(--info, #0ea5e9) !important; }

/* In case text is nested in span for white variant, we handle color there */
.pixel-btn--white span,
.pixel-btn--white-primary span,
.pixel-btn--white-secondary span,
.pixel-btn--white-success span,
.pixel-btn--white-danger span,
.pixel-btn--white-warning span,
.pixel-btn--white-info span {
  transition: color 0.3s ease;
}

/* Inherit the !important parents for span and add white glow */
.pixel-btn--white-primary:hover span   { color: var(--purple-main); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; }
.pixel-btn--white-secondary:hover span { color: var(--btn-gray, #6b7280); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; }
.pixel-btn--white-success:hover span   { color: var(--success, #10b981); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; }
.pixel-btn--white-danger:hover span    { color: var(--danger, #ef4444); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; }
.pixel-btn--white-warning:hover span   { color: #d97706; text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; }
.pixel-btn--white-info:hover span      { color: var(--info, #0ea5e9); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; }

