/* section: mascots — 3D duo band (models lazy-load; frames stand alone) */

.section--mascots {
  background: var(--navy);
}

.mascots-duo {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}

@media (min-width: 680px) {
  .mascots-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.mascot {
  margin: 0;
}

.mascot-frame {
  height: clamp(280px, 44vw, 400px);
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 65%, rgba(242, 193, 78, 0.1), transparent 65%),
    linear-gradient(to bottom, var(--navy-mid), var(--navy-deep));
  border: 1px solid rgba(242, 193, 78, 0.3);
  border-radius: 10px;
  overflow: hidden;
}

.mascot-mark {
  font-size: 3rem;
  color: var(--gold-dim);
}

.mascot-frame model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
}

.mascot figcaption {
  margin-top: 12px;
  color: var(--paper-dim);
  font-size: 0.98rem;
}

.mascot figcaption strong {
  color: var(--gold);
  font-weight: 700;
}

.mascots-hint {
  margin-top: 18px;
  font-family: var(--utility);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-align: center;
}