/* =========================================================================
   MarinovOS — record-object.css
   Owner: records worker. Styles the shared record object only.
   Both modes lay out from --ro-s (the sleeve side S, in px) written by
   os/record-object.js; every offset below is the same multiple of S the
   three.js build uses, so the two modes frame identically.
   ========================================================================= */

.ro{
  position:relative;
  display:block;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:grab;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  transform:translateY(0);
  transition:transform var(--dur-base,260ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.ro[role="img"]{ cursor:default; }
.ro:hover{ transform:translateY(-3px); }          /* slight physical lift only */
.ro.is-dragging{ cursor:grabbing; transform:translateY(-3px); }
.ro:focus-visible{
  outline:3px solid var(--blue-500,#2f73f0);
  outline-offset:6px;
  border-radius:var(--radius-md,10px);
  transform:translateY(-3px);
}
.ro.is-hidden{ visibility:hidden; }
@media (prefers-reduced-motion:reduce){
  .ro{ transition:none; }
}

/* ---------- contact shadow (css mode) ---------- */
.ro-shadow{ position:absolute; inset:0; pointer-events:none; }
.ro-shadow-sleeve,
.ro-shadow-disc{
  position:absolute;
  background:rgba(12,20,44,.34);
  filter:blur(calc(var(--ro-s) * .045));
}
.ro-shadow-sleeve{ border-radius:calc(var(--ro-s) * .012); }
.ro-shadow-disc{ border-radius:50%; }

/* ---------- css-mode object ---------- */
.ro-css{ position:absolute; inset:0; }

.ro-disc{
  position:absolute;
  border-radius:50%;
  background:
    /* grazing highlight from the upper left */
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.20), rgba(255,255,255,0) 46%),
    /* groove field */
    repeating-radial-gradient(circle closest-side at 50% 50%,
      rgba(255,255,255,.075) 0 1px,
      rgba(0,0,0,.28) 1px 2px,
      rgba(255,255,255,.02) 2px 3.4px),
    radial-gradient(circle closest-side at 50% 50%, #26272d 0 34%, #1b1c21 55%, #121317 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset calc(var(--ro-s) * -.004) calc(var(--ro-s) * -.004) calc(var(--ro-s) * .012) rgba(0,0,0,.5);
  /* a real centre hole: the disc is genuinely punched through */
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%, transparent 0 3%, #000 3%);
  mask-image:radial-gradient(circle closest-side at 50% 50%, transparent 0 3%, #000 3%);
}
.ro-disc-face{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle closest-side at 50% 50%, rgba(0,0,0,.5) 0 35%, rgba(0,0,0,.18) 36%, transparent 38%);
}
.ro-disc-label{
  position:absolute;
  left:50%; top:50%;
  width:35%; height:35%;                 /* 0.35 of the disc diameter */
  transform:translate(-50%,-50%);
  border-radius:50%;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
}
.ro-disc-sheen{
  position:absolute; inset:0; border-radius:50%;
  pointer-events:none;
  background:linear-gradient(118deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.02) 22%,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,.05) 74%,
    rgba(255,255,255,0) 100%);
}

.ro-sleeve{
  position:absolute;
  border-radius:calc(var(--ro-s) * .012);
  background:#e9e3d6;
  overflow:hidden;
  box-shadow:
    /* thickness: light from the upper-left catches the top and left edges */
    inset 1px 1px 0 rgba(255,255,255,.75),
    inset -1px -1px 0 rgba(0,0,0,.18),
    calc(var(--ro-s) * .006) calc(var(--ro-s) * .008) calc(var(--ro-s) * .02) rgba(12,20,44,.20);
}
.ro-art{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ro-sleeve.is-artless .ro-art{ display:none; }
.ro-sleeve-wear{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.10) 100%);
}
.ro-sleeve-edge{
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.14);
}
/* the open mouth the disc slides out of, on the right-hand edge */
.ro-sleeve-mouth{
  position:absolute;
  top:2.5%; bottom:2.5%; right:0;
  width:1.6%;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.30));
}

/* ---------- procedural mode ---------- */
.ro-gl{ position:absolute; inset:0; display:none; }
.ro-gl canvas{ display:block; width:100%; height:100%; }
.ro[data-mode="procedural"] .ro-gl{ display:block; }
.ro[data-mode="procedural"] .ro-css,
.ro[data-mode="procedural"] .ro-shadow{ display:none; }

@media (forced-colors:active){
  .ro:focus-visible{ outline:3px solid Highlight; }
}