/* ============================================================
   COMPONENTS — .btn, .tag, .card, .project-card, .marquee
   ============================================================ */

/* ---------------------------------------------------------------
   BUTTON — brilho percorrendo (DS2)
   Default: conic-gradient girando lento (border-sweep sutil)
   Hover:   intensifica + glow radial na base
   --------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 180px;
  height: 52px;
  padding: 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  outline: 0;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: 2px solid var(--silver-300);
  outline-offset: 3px;
}

/* Conic ring sweeping — default subtil, hover intensifica */
.btn::before {
  content: "";
  position: absolute;
  inset: -150%;
  z-index: -2;
  background: conic-gradient(from 90deg at 50% 50%,
    var(--silver-500) 0%,
    var(--silver-500) 82%,
    rgba(240, 240, 240, 0.9) 93%,
    var(--silver-500) 100%);
  animation: spin 4s linear infinite;
  opacity: 0.6;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.btn:hover::before { opacity: 1; }

/* Inner fill — deixa só 1px de borda visível */
.btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--surface-0);
  transition: background var(--dur-base) var(--ease-out);
}

/* Glow radial na base (aparece no hover) */
.btn__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 55% at 50% 100%,
    rgba(240, 240, 240, 0.18) 0%,
    transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.btn:hover .btn__glow { opacity: 1; }

.btn__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.btn__label svg {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__label svg { transform: translateX(2px); }

/* Primary — platina sólida */
.btn--primary {
  color: var(--rp-black);
  font-weight: var(--fw-semibold);
  background: var(--grad-platinum);
}
.btn--primary::before,
.btn--primary::after,
.btn--primary .btn__glow { display: none; }
.btn--primary:hover { box-shadow: var(--shadow-glow-platinum); }

/* Secondary — outline with shimmer border sweep */
.btn--secondary {
  background: transparent;
}
.btn--secondary::before {
  background: conic-gradient(from 90deg at 50% 50%,
    var(--silver-700) 0%,
    var(--silver-700) 78%,
    var(--silver-100) 90%,
    var(--silver-700) 100%);
  opacity: 0.7;
}
.btn--secondary:hover::before {
  opacity: 1;
}
.btn--secondary::after {
  background: var(--surface-0);
}
.btn--secondary .btn__glow { display: none; }
.btn--secondary:hover .btn__label svg { transform: translateY(2px); }

/* CTA Híbrido — Fill de platina, texto escuro, mas mantendo o border sweep (girando em branco/escuro) */
.btn--cta-prata {
  color: var(--rp-black);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-glow-platinum); 
}
.btn--cta-prata::before {
  background: conic-gradient(from 90deg at 50% 50%,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.8) 78%,
    #ffffff 93%,
    rgba(0,0,0,0.8) 100%);
  opacity: 0.8;
}
.btn--cta-prata:hover::before {
  opacity: 1;
}
.btn--cta-prata::after {
  background: var(--grad-platinum);
}
.btn--cta-prata .btn__glow { display: none; }
.btn--cta-prata:hover .btn__label svg { transform: translateY(2px); }

/* Text link */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line-3);
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.btn-link:hover { border-color: var(--text-1); }
.btn-link:focus-visible {
  outline: 2px solid var(--silver-300);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   TAG (DS2)
   --------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
}
.tag--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--text-1);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
.tag--bracket {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
}
.tag--bracket::before { content: "[ "; color: var(--text-3); }
.tag--bracket::after  { content: " ]"; color: var(--text-3); }

/* ---------------------------------------------------------------
   CARD (DS1 + DS3 — quadrado, cantos retos)
   --------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  padding: var(--space-8);
  transition:
    border-color var(--dur-slow) var(--ease-out),
    background var(--dur-slow) var(--ease-out);
}
.card--square { aspect-ratio: 1 / 1; }
.card:hover {
  border-color: var(--line-3);
  background: var(--surface-3);
}

/* Corner brackets (DS2) — ativado com .card--bracket */
.card--bracket::before,
.card--bracket::after,
.card--bracket > .card__corner-tl,
.card--bracket > .card__corner-br {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--text-1);
  border-style: solid;
  border-width: 0;
}
.card--bracket::before          { top: 0;    left: 0;  border-top-width: 1px;    border-left-width: 1px; }
.card--bracket::after           { top: 0;    right: 0; border-top-width: 1px;    border-right-width: 1px; }
.card--bracket .card__corner-tl { bottom: 0; left: 0;  border-bottom-width: 1px; border-left-width: 1px; }
.card--bracket .card__corner-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-4);
}
.card__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-1);
  margin-bottom: var(--space-2);
}
.card__body {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

/* ---------------------------------------------------------------
   PROJECT CARD (DS4 — split grid + image hover | DS1 — grayscale)
   --------------------------------------------------------------- */
.project-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  overflow: hidden;
  transition: border-color var(--dur-slow) var(--ease-out);
}
@media (min-width: 768px) {
  .project-card { grid-template-columns: 1fr 1.2fr; }
}
.project-card:hover { border-color: var(--line-3); }

.project-card__content {
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}
.project-card__image {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: var(--surface-3);
}
.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.7;
  transform: scale(1);
  transition:
    transform 1500ms var(--ease-out),
    filter var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out);
}
.project-card:hover .project-card__image img {
  transform: scale(1.08);
  filter: grayscale(0);
  opacity: 1;
}

/* ---------------------------------------------------------------
   MARQUEE (DS3 — infinite scroll com fade nas bordas)
   --------------------------------------------------------------- */
.marquee-container,
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  border-block: 1px solid var(--line-1);
  padding-block: var(--space-6);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track,
.marquee__track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-right: var(--space-12);
  min-width: 100%;
  animation: marquee 40s linear infinite;
}
.marquee-container:hover .marquee-track,
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-3);
  white-space: nowrap;
}
.marquee__item--accent { color: var(--text-1); }
.marquee__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--text-4);
  flex-shrink: 0;
}