/* eMastered mastering uploader
   The widget is isolated from campaign layout so the local preview can be
   replaced by the production mastering client without changing the page. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.widget-stage {
  width: 100%;
  perspective: 1400px;
}

.widget {
  --rx: 0deg;
  --ry: 0deg;
  --sheen-x: 18%;
  --sheen-y: 12%;
  --sheen-o: 0.1;
  --lip-from: -20deg;
  --glow-x: 50%;
  --glow-y: 28%;
  --glow-o: 0;
  position: relative;
  isolation: isolate;
  width: min(100%, 590px);
  min-height: 448px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgb(255 26 141 / var(--glow-o)), transparent 32%),
    rgb(23 25 30 / 0.78);
  box-shadow:
    0 42px 110px rgb(0 0 0 / 0.48),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: border-color 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.widget::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(520px 280px at var(--sheen-x) var(--sheen-y), rgb(255 255 255 / var(--sheen-o)), transparent 58%);
  mix-blend-mode: screen;
}

.widget::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--lip-from), transparent 0 18%, rgb(255 255 255 / 0.38) 24%, rgb(255 26 141 / 0.72) 29%, transparent 39% 72%, rgb(255 255 255 / 0.18) 81%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.widget:hover,
.widget:focus-within {
  border-color: rgb(255 26 141 / 0.4);
  box-shadow:
    0 54px 130px rgb(0 0 0 / 0.56),
    0 0 0 1px rgb(255 26 141 / 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.14);
}

.widget-refract {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.82;
  pointer-events: none;
}

.widget-lip {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 0 rgb(175 0 88 / 0.25);
}

.widget-plate,
.widget-face,
.deck-meta,
.widget-status,
.drawer,
.options {
  position: relative;
  z-index: 2;
}

.widget-plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 22px;
  border-bottom: 1px solid rgb(255 255 255 / 0.09);
  color: rgb(245 245 246 / 0.54);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.widget-plate span:first-child {
  color: #f5f5f6;
}

.widget-bay {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 268px;
  margin: 16px 16px 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 10px;
  background:
    linear-gradient(rgb(255 255 255 / 0.018), rgb(255 255 255 / 0.018)),
    radial-gradient(circle at 50% 10%, rgb(216 4 110 / 0.11), transparent 44%),
    rgb(8 9 12 / 0.64);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 0 80px rgb(0 0 0 / 0.28);
}

.widget-bay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 100% 44px, 44px 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);
}

.widget-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.widget-dash {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgb(245 245 246 / 0.17);
  border-radius: 8px;
  pointer-events: none;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.widget.is-hot .widget-dash {
  border-color: #ff1a8d;
  background: rgb(175 0 88 / 0.08);
}

.widget-drop {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: calc(100% - 48px);
  min-height: 212px;
  padding: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.widget-upload {
  align-self: end;
  width: 30px;
  height: 30px;
  color: #ff1a8d;
  filter: drop-shadow(0 0 18px rgb(255 26 141 / 0.3));
  transition: transform 180ms ease, color 180ms ease;
}

.widget-drop:hover .widget-upload,
.widget-drop:focus-visible .widget-upload {
  color: #f5f5f6;
  transform: translateY(-3px);
}

.widget-drop-copy {
  display: grid;
  gap: 6px;
  text-align: center;
}

.widget-drop strong {
  color: #f5f5f6;
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.widget-drop p {
  margin: 0;
  color: rgb(206 207 210 / 0.68);
  font-size: 12px;
}

.lathe {
  position: absolute;
  z-index: 2;
  inset: 26px;
  display: none;
  align-items: center;
}

.widget.is-working .lathe {
  display: flex;
}

.widget.is-working .widget-drop,
.widget.is-ready .widget-drop {
  display: none;
}

.lathe-rail {
  position: absolute;
  left: 3%;
  right: 3%;
  height: 1px;
  background: rgb(255 255 255 / 0.14);
}

.lathe-stripe {
  width: 100%;
  height: 92px;
  background: repeating-linear-gradient(90deg, transparent 0 3px, rgb(255 255 255 / 0.18) 3px 4px, transparent 4px 7px, rgb(216 4 110 / 0.7) 7px 9px);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  animation: widget-analyze 900ms steps(10) infinite;
}

.lathe-arm {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 14%;
  width: 1px;
  background: #ff1a8d;
  box-shadow: 0 0 16px rgb(255 26 141 / 0.72);
  animation: widget-scan 1.4s ease-in-out infinite alternate;
}

.lathe-arm::after {
  content: "Analyzing locally";
  position: absolute;
  top: -4px;
  left: 10px;
  width: max-content;
  color: #f5f5f6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.deck {
  position: relative;
  z-index: 2;
  display: none;
  grid-template-columns: 1fr 56px 1fr;
  align-items: center;
  gap: 12px;
  width: min(92%, 390px);
}

.widget.is-ready .deck {
  display: grid;
}

.pad,
.transport,
.drawer-tab,
.options-plate,
.opt-row button {
  border: 1px solid rgb(255 255 255 / 0.12);
  color: rgb(245 245 246 / 0.66);
  background: rgb(255 255 255 / 0.04);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.pad {
  min-height: 42px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.transport {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #f5f5f6;
  font-size: 15px;
}

.pad:hover,
.transport:hover,
.drawer-tab:hover,
.options-plate:hover,
.opt-row button:hover {
  border-color: rgb(255 26 141 / 0.6);
  color: #f5f5f6;
}

.pad.is-on,
.transport[aria-pressed="true"],
.opt-row button.is-on,
.drawer-tab.is-open,
.options-plate.is-open {
  border-color: #ff1a8d;
  color: #f5f5f6;
  background: rgb(175 0 88 / 0.26);
}

.deck-meta {
  min-height: 18px;
  margin: 12px 22px 0;
  overflow: hidden;
  color: rgb(206 207 210 / 0.64);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-face {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px 0;
}

.drawer-tab,
.options-plate {
  min-height: 38px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drawer-tab:hover,
.drawer-tab:focus-visible,
.options-plate:hover,
.options-plate:focus-visible {
  border-color: rgb(255 255 255 / 0.86);
  color: #fff;
  outline-color: #fff;
}

.drawer,
.options {
  display: none;
  margin: 10px 16px 0;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 10px;
  background: rgb(8 9 12 / 0.44);
}

.drawer.is-open,
.options.is-open {
  display: block;
}

.drawer p {
  margin: 0 0 10px;
  color: rgb(206 207 210 / 0.7);
  font-size: 11px;
  line-height: 1.5;
}

.ref-slot {
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1px dashed rgb(255 255 255 / 0.16);
  border-radius: 7px;
  color: #f5f5f6;
  font-size: 11px;
  cursor: pointer;
}

.opt-row {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) 1fr 1fr;
  align-items: center;
  gap: 6px;
}

.opt-row + .opt-row {
  margin-top: 8px;
}

.opt-row span {
  color: rgb(206 207 210 / 0.66);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opt-row button {
  min-height: 32px;
  border-radius: 6px;
  font-size: 10px;
}

.widget-status {
  min-height: 40px;
  margin: 0;
  padding: 12px 22px 14px;
  color: rgb(148 150 156 / 0.86);
  font-size: 10px;
  line-height: 1.45;
}

.widget-status:empty {
  display: none;
}

.widget-status[data-tone="live"] {
  color: #f5f5f6;
}

.wave-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.23;
  pointer-events: none;
}

@keyframes widget-analyze {
  from { transform: translateX(-8px); }
  to { transform: translateX(8px); }
}

@keyframes widget-scan {
  from { left: 12%; }
  to { left: 88%; }
}

@media (max-width: 680px) {
  .widget {
    min-height: 410px;
    border-radius: 20px;
    transform: none !important;
  }

  .widget-plate {
    padding-inline: 16px;
  }

  .widget-plate span:last-child {
    display: none;
  }

  .widget-bay {
    min-height: 230px;
    margin-inline: 10px;
  }

  .widget-face,
  .drawer,
  .options {
    margin-inline: 10px;
  }

  .widget-face {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget,
  .widget-upload,
  .pad,
  .transport,
  .drawer-tab,
  .options-plate,
  .opt-row button {
    transition-duration: 0.01ms;
  }

  .widget {
    transform: none !important;
  }

  .lathe-stripe,
  .lathe-arm {
    animation: none;
  }

  .wave-field {
    display: none;
  }
}