/* assets/css/album.css — Seção Álbum de Gráficos na homepage */

/* === Section === */
.album {
  padding: var(--space-2xl) var(--content-padding);
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}

.album__golden-line {
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--dourado-light),
    transparent
  );
  margin: 0 auto var(--space-2xl);
  max-width: 400px;
  width: 0%;
  transition: width 1.2s var(--ease-out);
}

.album__golden-line.visible {
  width: 100%;
}

.album__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.album__title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-h1);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.album__subtitle {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-body);
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.75;
}

/* === Grid de figurinhas === */
.album__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
  justify-items: center;
}

@media (max-width: 520px) {
  .album__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* === Figurinha (card) === */
.figurinha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--space-lg) var(--space-md);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.4s var(--ease-standard),
    border-color 0.4s var(--ease-standard),
    transform 0.4s var(--ease-out);
}

.figurinha:hover {
  border-color: var(--border-strong);
  box-shadow:
    0 4px 8px rgba(46, 31, 74, 0.04),
    0 12px 30px rgba(46, 31, 74, 0.06);
  transform: translateY(-4px);
}

.figurinha:focus-visible {
  outline: 2px solid var(--purpura);
  outline-offset: 2px;
}

/* Anéis decorativos (aparecem no hover) */
.figurinha__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard);
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 30%,
      rgba(139, 107, 191, 0.04) 31%,
      transparent 32%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 50%,
      rgba(212, 162, 84, 0.03) 51%,
      transparent 52%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 70%,
      rgba(139, 107, 191, 0.02) 71%,
      transparent 72%
    );
}

.figurinha:hover .figurinha__rings {
  opacity: 1;
}

/* Símbolo SVG */
.figurinha__symbol {
  width: clamp(100px, 55%, 140px);
  height: auto;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.figurinha__symbol svg,
.figurinha__symbol img {
  width: 100%;
  height: auto;
  display: block;
}

/* Nome do gráfico */
.figurinha__name {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-body);
  color: var(--text-primary);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Accent line */
.figurinha__accent {
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--dourado), var(--dourado-light));
  margin: var(--space-sm) auto 0;
  border-radius: 1px;
  transition: width 0.5s var(--ease-out);
  position: relative;
  z-index: 1;
}

.figurinha:hover .figurinha__accent {
  width: 60px;
}

/* Badge de cases */
.figurinha__badge {
  font-family: var(--mono);
  font-size: var(--text-overline);
  color: var(--dourado-text-safe);
  letter-spacing: 0.04em;
  margin-top: var(--space-sm);
  position: relative;
  z-index: 1;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .figurinha {
    transition: none;
  }

  .figurinha__accent {
    transition: none;
  }

  .figurinha__rings {
    transition: none;
  }

  .album__golden-line {
    width: 100%;
    transition: none;
  }
}