/* Wedding Vault v5.0.1 · interactive Spotify radio */
.vault-radio{
  position:fixed;z-index:80;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:12px;pointer-events:none
}
.vault-radio-dial,.vault-radio-panel{pointer-events:auto}
.vault-radio-dial{
  width:116px;height:116px;padding:0!important;border:0!important;border-radius:50%!important;
  display:grid;place-items:center;background:transparent!important;color:#f2eee6!important;box-shadow:none!important;
  position:relative;isolation:isolate
}
.vault-radio-dial::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-2;
  background:repeating-conic-gradient(from 0deg,#d3bd89 0 2deg,#6f5931 2deg 4deg,#b99a60 4deg 7deg);
  box-shadow:0 18px 45px rgba(0,0,0,.42),inset 0 0 0 2px rgba(255,244,212,.46)
}
.vault-radio-dial::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,241,205,.62);border-radius:50%;pointer-events:none}
.vault-radio-face{
  position:absolute;inset:8px;border-radius:50%;display:block;
  background:
    radial-gradient(circle at 34% 29%,rgba(255,255,255,.18),transparent 20%),
    radial-gradient(circle,#241a14 0 13%,#957746 14% 17%,#17130f 18% 53%,#4a3926 54% 57%,#15120f 58% 100%);
  box-shadow:inset 0 0 22px #000
}
.vault-radio-face::before{
  content:"88  ·  92  ·  96  ·  100  ·  104";position:absolute;left:14px;right:14px;top:25px;
  color:rgba(242,238,230,.65);font:500 5px/1 "DM Sans",sans-serif;letter-spacing:.08em;text-align:center
}
.vault-radio-needle{position:absolute;left:50%;bottom:50%;width:1px;height:34px;background:#d7bd82;transform:rotate(-36deg);transform-origin:50% 100%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vault-radio-center{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#b99a60;box-shadow:0 0 0 3px #211811;transform:translate(-50%,-50%)}
.vault-radio-label{position:relative;z-index:2;width:82px;text-align:center;transform:translateY(1px);pointer-events:none}
.vault-radio-label small,.vault-radio-label strong{display:block;color:#f2eee6!important;text-shadow:0 1px 8px #000}
.vault-radio-label small{font:600 6px/1.2 "DM Sans",sans-serif;letter-spacing:.16em}
.vault-radio-label strong{margin-top:4px;font:italic 14px/1 "Cormorant Garamond",serif}
.vault-radio.is-playing .vault-radio-needle{transform:rotate(42deg)}
.vault-radio.is-playing .vault-radio-face{animation:vaultRadioTurn 4.8s linear infinite}
@keyframes vaultRadioTurn{to{transform:rotate(360deg)}}

.vault-radio-panel{
  order:-1;width:min(360px,calc(100vw - 164px));padding:14px;background:#11110f;color:#f2eee6;
  border:1px solid rgba(211,189,137,.68);box-shadow:0 28px 75px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(15px) scale(.98);transform-origin:bottom right;
  transition:opacity .24s ease,visibility .24s ease,transform .24s ease
}
.vault-radio.is-playing .vault-radio-panel{opacity:1;visibility:visible;transform:none}
.vault-radio-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 3px 13px;border-bottom:1px solid rgba(211,189,137,.28)}
.vault-radio-panel-heading small,.vault-radio-panel-heading strong{display:block}
.vault-radio-panel-heading small{color:#b99a60;font:600 8px/1 "DM Sans",sans-serif;letter-spacing:.22em}
.vault-radio-panel-heading strong{margin-top:6px;color:#f2eee6;font:400 1.15rem/1.1 "Cormorant Garamond",serif}
.vault-radio-panel-heading button{min-height:32px!important;width:32px;padding:0!important;border:1px solid rgba(242,238,230,.28)!important;background:transparent!important;color:#f2eee6!important;font-size:1.4rem!important}
.vault-radio-player{padding-top:12px;min-height:152px}
.vault-radio-player iframe{display:block;border:0;border-radius:0!important;width:100%;height:352px;background:#11110f}
.vault-radio-panel>a{display:block;margin-top:10px;padding:10px 4px 3px;color:#d3bd89!important;font:600 8px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-decoration:none;text-align:right}

@media(max-width:650px){
  .vault-radio{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:block}
  .vault-radio-dial{width:86px!important;height:86px!important;margin-left:auto}
  .vault-radio-label{width:62px}
  .vault-radio-label small{font-size:5px}.vault-radio-label strong{font-size:11px}
  .vault-radio-needle{height:25px}
  .vault-radio-panel{position:absolute;right:0;bottom:100px;width:min(340px,calc(100vw - 20px));max-height:70svh;overflow:auto}
  .vault-radio-player iframe{height:300px}
}

@media(prefers-reduced-motion:reduce){.vault-radio.is-playing .vault-radio-face{animation:none}}

@media print{.vault-radio{display:none!important}}
