/* ============================================================
   AiMuzica — vinilul de încărcare (sursa unică)
   ------------------------------------------------------------
   Este vinilul de pe /cadou, folosit peste tot unde se încarcă
   ceva. Discul stă pe loc, fața lui (::before, cu nota ♪ pe
   etichetă) se rotește, iar reflexia (::after) rămâne fixă, ca
   la un vinil adevărat. Proporțiile sunt relative, deci arată la
   fel la orice mărime: se schimbă doar --am-vinyl-size.

   .am-vinyl        vinilul complet, pentru încărcări de pagină
                    sau de secțiune (de la ~56px în sus)
   .am-vinyl-mini   același vinil într-un singur strat, pentru
                    butoane, pastile de status și pași (sub ~44px);
                    reflexia se rotește odată cu discul, ca mișcarea
                    să se vadă și la mărimi mici

   Regulile mai vechi (pastile, pași, butoane) folosesc direct
   variabilele --am-vinyl-mini-bg / --am-vinyl-mini-shadow.
   .account-auth-vinyl-disc este vechiul nume al vinilului din
   cont, bibliotecă și generator; primește același aspect.
   ============================================================ */

:root {
  /* Fața discului: gaura, marginea etichetei, eticheta verde, șanțurile.
     Procentele sunt din raza discului, deci nu depind de mărime. */
  --am-vinyl-face:
    radial-gradient(circle closest-side, #03100b 0 5%, transparent 6%),
    radial-gradient(circle closest-side, transparent 0 33.3%, rgba(0, 0, 0, 0.45) 34.2% 35.4%, transparent 36.3%),
    radial-gradient(circle closest-side, #29bb7e 0, #14895b 18.75%, #0a6142 34.6%, transparent 35.4%),
    repeating-radial-gradient(circle, #0e1412 0 1px, #060908 1px 2.4px),
    #050807;
  --am-vinyl-gloss: conic-gradient(
    from 200deg,
    transparent 0 16deg,
    rgba(255, 255, 255, 0.15) 38deg,
    transparent 64deg 180deg,
    rgba(255, 255, 255, 0.09) 206deg,
    transparent 232deg
  );
  /* Varianta mini: eticheta puțin mai mare și o reflexie mai vie. */
  --am-vinyl-mini-bg:
    conic-gradient(
      from 200deg,
      transparent 0 18deg,
      rgba(255, 255, 255, 0.3) 46deg,
      transparent 78deg 196deg,
      rgba(255, 255, 255, 0.14) 224deg,
      transparent 252deg
    ),
    radial-gradient(circle closest-side, #03100b 0 9%, transparent 10.5%),
    radial-gradient(circle closest-side, #2fca88 0, #14895b 22%, #0a6142 38%, transparent 40%),
    repeating-radial-gradient(circle closest-side, #121a17 0 7%, #060908 7% 15%),
    #050807;
  --am-vinyl-mini-shadow: 0 1px 3px rgba(4, 24, 15, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* Umbra pe fundal deschis; pe fundal închis este mai adâncă (mai jos). */
  --am-vinyl-drop: rgba(9, 38, 25, 0.26);
  --am-vinyl-glow: rgba(40, 190, 120, 0.12);
}

html[data-theme="dark"],
body.gift-page {
  --am-vinyl-drop: rgba(0, 0, 0, 0.55);
  --am-vinyl-glow: rgba(70, 225, 150, 0.12);
  --am-vinyl-mini-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ---------- Vinilul complet ---------- */

.am-vinyl,
.account-auth-vinyl-disc {
  --am-vinyl-size: 88px;
  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  width: var(--am-vinyl-size);
  height: var(--am-vinyl-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow:
    0 calc(var(--am-vinyl-size) * 0.146) calc(var(--am-vinyl-size) * 0.354) var(--am-vinyl-drop),
    0 0 calc(var(--am-vinyl-size) * 0.48) var(--am-vinyl-glow);
  animation: none;
}

.am-vinyl::before,
.account-auth-vinyl-disc::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: auto;
  height: auto;
  padding: 0 0 calc(var(--am-vinyl-size) * 0.156);
  border: 0;
  border-radius: 50%;
  background: var(--am-vinyl-face);
  box-shadow: none;
  color: rgba(236, 255, 244, 0.92);
  font: 400 calc(var(--am-vinyl-size) * 0.115) / 1 Georgia, "Times New Roman", serif;
  font-variant-emoji: text;
  mix-blend-mode: normal;
  content: "\266A\FE0E";
  animation: am-vinyl-spin 1.8s linear infinite;
}

.am-vinyl::after,
.account-auth-vinyl-disc::after {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 50%;
  background: var(--am-vinyl-gloss);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  mix-blend-mode: normal;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 36.5%, #000 37.5%);
  mask: radial-gradient(circle closest-side, transparent 0 36.5%, #000 37.5%);
  pointer-events: none;
  content: "";
}

/* Vechiul „balon” din jurul vinilului rămâne doar un suport invizibil. */
.account-auth-vinyl {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ---------- Vinilul mini ---------- */

.am-vinyl-mini {
  --am-vinyl-size: 18px;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--am-vinyl-size);
  height: var(--am-vinyl-size);
  border: 0;
  border-radius: 50%;
  background: var(--am-vinyl-mini-bg);
  box-shadow: var(--am-vinyl-mini-shadow);
  vertical-align: middle;
  animation: am-vinyl-spin 1.2s linear infinite;
}

@keyframes am-vinyl-spin {
  to {
    rotate: 360deg;
  }
}

/* Apare lin, ca să nu clipească la încărcările foarte scurte. */
@keyframes am-vinyl-appear {
  from {
    opacity: 0;
    scale: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .am-vinyl::before,
  .account-auth-vinyl-disc::before {
    animation-duration: 4s;
  }

  .am-vinyl-mini {
    animation-duration: 3s;
  }
}