/* A native, layered record: fixed material reflections, rotating pressing/label. */
.hero { --record-top:max(var(--hero-header-bottom,calc(112px + env(safe-area-inset-top,0px))),clamp(118px,13vh,164px)); }
.hero-vinyl {
  --record-size: clamp(650px, 61vw, 990px);
  position: absolute;
  width: var(--record-size);
  height: var(--record-size);
  left: 76%;
  top: var(--record-top);
  margin-left: calc(var(--record-size) / -2);
  z-index: -3;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, #000a 67%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 54%, #000a 67%, transparent 86%);
  contain: layout style;
}
.record-entrance,.record-parallax,.record-deck,.record-rotor { width:100%;height:100%;position:absolute;inset:0; }
.record-deck { border-radius:50%;isolation:isolate;transform:rotateX(4deg) rotateY(-5deg);box-shadow:0 22px 80px #0008; }
.record-finish { position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;border-radius:50%; }
.record-finish--gold,.record-finish--platinum { opacity:0; }
.record-rotor { border-radius:50%;transform-origin:50% 50%; }
.hero-vinyl.is-animating .record-rotor,.hero-vinyl.is-animating .record-parallax { will-change:transform; }
.hero-vinyl.is-animating .record-finish--gold,.hero-vinyl.is-animating .record-finish--platinum { will-change:opacity; }
.record-pressing { width:100%;height:100%;position:absolute;inset:0;max-width:none; }
.record-reflection { position:absolute;inset:.3%;border-radius:50%;background:conic-gradient(from 32deg,transparent 0deg,#ffffff0a 20deg,transparent 40deg,transparent 170deg,#ffffff0c 198deg,transparent 220deg);opacity:.7;mix-blend-mode:screen; }
.record-label { position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle at 35% 25%,#22252a,#15171a 35%,#0b0c0e 80%);box-shadow:0 0 0 1px #0b0c0d,0 0 0 3px #ffffff16,inset 0 1px 4px #ffffff16; }
.record-label:before { content:'';position:absolute;inset:6.5%;border:1px solid #ffffff16;border-radius:50%; }
.record-brand { position:absolute;left:11%;top:18%;width:78%;height:auto;max-width:none; }
.record-label-type { position:absolute;inset:0;width:100%;height:100%;fill:#aaaeb2;font-family:Arial,Helvetica,sans-serif;font-size:8px;letter-spacing:1.8px; }
.record-spindle { position:absolute;left:46.5%;top:46.5%;width:7%;height:7%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#020203 55%,#33383c 60%,#0a0a0b 70%);box-shadow:0 0 0 1px #bfc4c638,0 1px 3px #000; }
.record-label-rule { position:absolute;bottom:27%;left:38%;width:24%;height:1px;background:#74787e55; }
.vinyl-motion-control { position:absolute;right:var(--gutter);bottom:112px;z-index:3;display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 0;background:transparent;color:#b4b6b7;font-size:9px;letter-spacing:.025em; }
.vinyl-motion-control .pause-icon { width:7px;height:8px; }
.vinyl-motion-control[aria-pressed=true] .pause-icon { border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%); }
.hero-shade { background:linear-gradient(90deg,#141414 2%,#141414ed 22%,#14141490 45%,#14141400 72%),linear-gradient(0deg,#141414 0%,#14141400 40%); }
@media(min-width:1700px) { .hero-vinyl { --record-size:990px;left:74%; } }
@media(max-width:1150px) and (min-width:901px) { .hero-vinyl { --record-size:710px;left:79%; } }
@media(min-width:641px) and (max-width:900px) {
  .hero-vinyl { --record-size:685px;left:84%; }
  .hero-shade { background:linear-gradient(90deg,#141414 0%,#141414e6 23%,#1414147a 51%,#14141405 83%),linear-gradient(0deg,#141414,transparent 55%); }
}
@media(max-width:640px) {
  .hero { --record-top:var(--hero-header-bottom,calc(108px + env(safe-area-inset-top,0px))); }
  .hero-vinyl { --record-size:min(104vw,585px);left:50%;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 51%,#000b 62%,transparent 80%);mask-image:linear-gradient(to bottom,#000 0%,#000 51%,#000b 62%,transparent 80%); }
  .record-deck { transform:none;box-shadow:0 10px 35px #0008; }
  .hero-shade { background:linear-gradient(0deg,#141414 0%,#141414 40%,#141414a6 51%,#14141400 69%,#14141410 100%); }
  .hero-copy { padding-top:calc(var(--record-top) + min(104vw,585px) * .60); }
  .vinyl-motion-control { right:25px;bottom:100px;font-size:8px; }
}
@media(max-width:370px) { .hero-copy { padding-top:calc(var(--record-top) + 104vw * .60); }.vinyl-motion-control { right:20px; } }
@media(prefers-reduced-motion:reduce) { .vinyl-motion-control { display:none; }.record-rotor,.record-parallax,.record-entrance { transform:none!important; }.hero-vinyl,.record-entrance { opacity:1!important;visibility:visible!important; } }