/* AC record (the logo) and the record transition, shared by every design and
   inicio. Only the record itself lives here: each design sizes and places it
   in its own stylesheet with --marca-tam. */

/* ---------- The logo ---------- */
.marca-ac {
  display: inline-block;
  flex: none;
  width: var(--marca-tam, 40px);
  height: var(--marca-tam, 40px);
  border-radius: 50%;
  line-height: 0;
  text-decoration: none;
}
.marca-ac__disco { width: 100%; height: 100%; overflow: visible; }
/* Only the grooves turn: the label stays still, like on inicio's disc. */
.marca-ac__surcos { transform-origin: 0 0; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.marca-ac:hover .marca-ac__surcos,
.marca-ac:focus-visible .marca-ac__surcos { transform: rotate(70deg); }
.marca-ac:focus-visible { outline: 2px solid #7cc8ff; outline-offset: 3px; }
/* Click: the whole record spins up while the page closes into it. */
.marca-ac--gira .marca-ac__disco { animation: marca-gira .56s cubic-bezier(.55, 0, .75, .2) forwards; }
@keyframes marca-gira { to { transform: rotate(-540deg) scale(1.15); } }

/* ---------- Record transition ---------- */
@property --velo-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* A vinyl centered on --velo-x/--velo-y: a round record of radius --velo-r or,
   with --hueco, a sheet with a round hole of that radius. */
.disco-velo {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--velo-x) var(--velo-y), #7cc8ff 0 18px, #050506 18px 20px, transparent 20px),
    repeating-radial-gradient(circle at var(--velo-x) var(--velo-y), #0b0b0c 0 5px, #141416 5px 6px);
  -webkit-mask: radial-gradient(circle at var(--velo-x) var(--velo-y), #000 var(--velo-r), transparent calc(var(--velo-r) + 1px));
          mask: radial-gradient(circle at var(--velo-x) var(--velo-y), #000 var(--velo-r), transparent calc(var(--velo-r) + 1px));
}
.disco-velo--hueco {
  -webkit-mask: radial-gradient(circle at var(--velo-x) var(--velo-y), transparent var(--velo-r), #000 calc(var(--velo-r) + 1px));
          mask: radial-gradient(circle at var(--velo-x) var(--velo-y), transparent var(--velo-r), #000 calc(var(--velo-r) + 1px));
}

/* Arriving through a transition: covered from the first paint until the
   record opens, and the entrance cascade waits for it. */
html.disco-entrando { background: #0b0b0c; }
html.disco-entrando body { visibility: hidden; }
html.disco-entrando .sube { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marca-ac__surcos { transition: none; }
  .marca-ac--gira .marca-ac__disco { animation: none; }
}