/* ==========================================================================
   SELO DE TEXTO CIRCULAR — selo-
   Disco de texto curvo girando devagar, com um sinal no miolo.
   CSS puro: nao ha script.js neste componente.
   ========================================================================== */

.selo{
  --selo-size:132px;
  --selo-dur:22s;
  position:relative;
  display:grid;
  place-items:center;
  inline-size:var(--selo-size);
  block-size:var(--selo-size);
  /* Sem isto, o disco encolhe quando o pai e' flex e o espaco aperta --
     e um selo achatado deixa de ser selo. */
  flex:0 0 auto;
}

/* O SVG e' quem gira. Poderia girar o .selo inteiro, mas ai' o miolo giraria
   junto -- e seta girando nao aponta para nada. */
.selo-svg{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  animation:selo-volta var(--selo-dur) linear infinite;
}

@media (prefers-reduced-motion: reduce){
  /* Colado na regra que desliga, como manda o §6.5. O selo continua
     LEGIVEL parado: o texto curvo e' desenho, nao informacao em
     movimento -- so' o giro sai. */
  .selo-svg{animation:none}
}

.selo-texto{
  font-family:var(--display);
  font-weight:700;
  /* O viewBox e' 100x100, entao a unidade aqui e' porcentagem do disco: o
     corpo acompanha --selo-size sozinho, sem media query nem clamp. */
  font-size:7.4px;
  letter-spacing:.086em;
  text-transform:uppercase;
  fill:var(--fg-2);
}

.selo-miolo{
  position:relative;
  display:grid;
  place-items:center;
  inline-size:34%;
  block-size:34%;
  border-radius:var(--radius-pill);
  border:1px solid var(--rule-2);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter:blur(6px);
  color:var(--accent);
}

.selo-miolo svg{
  inline-size:42%;
  stroke:currentColor;
  stroke-width:1.8;
}

@keyframes selo-volta{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ---- Palco de demonstracao (nao e' o componente) ---- */
.selo-palco{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-media);
  aspect-ratio:16 / 8;
}

.selo-foto{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  display:block;
}

/* O selo ancorado no canto da foto. Fora do palco ele nao precisa de
   position: e' um bloco comum, que entra em qualquer fluxo. */
.selo-palco .selo{
  position:absolute;
  inset-block-end:6%;
  inset-inline-end:4%;
}

@media (max-width: 760px){
  .selo{--selo-size:104px}
  .selo-palco{aspect-ratio:4 / 3}
}

@media (max-width: 460px){
  .selo{--selo-size:86px}
}