/* extracted from inc/xot-track-sheet.php on 2026-05-04 */
/* ── Sheet Backdrop ── */
.xot-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.xot-sheet-backdrop.open{opacity:1;pointer-events:all}

/* ── Sheet Container ── */
.xot-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9999;border-radius:24px 24px 0 0;border-top:1px solid rgba(255,255,255,.08);padding:0 0 calc(env(safe-area-inset-bottom,0px) + 1.25rem);transform:translateY(100%);transition:transform .38s cubic-bezier(.32,0,.67,1);max-height:90vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.xot-sheet.open{transform:translateY(0)}

/* Blurred cover background */
.xot-sheet__bg{position:absolute;inset:-40px;z-index:0;overflow:hidden}
.xot-sheet__bg img{width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(60px) saturate(1.6) brightness(.3);transform:scale(1.2);opacity:0;transition:opacity .5s .1s}
.xot-sheet.open .xot-sheet__bg img{opacity:1}
.xot-sheet__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,24,.7) 0%,rgba(22,22,24,.92) 50%,rgba(22,22,24,.98) 100%);z-index:1}
.xot-sheet__bg::before{content:'';position:absolute;inset:0;z-index:2;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px;pointer-events:none}

.xot-sheet__inner{position:relative;z-index:3}
.xot-sheet__handle{width:36px;height:4px;background:rgba(255,255,255,.18);border-radius:2px;margin:12px auto 0}

/* Head — stagger entrance */
.xot-sheet__head{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.25rem .75rem;opacity:0;transform:translateY(8px);transition:opacity .35s .08s,transform .35s .08s cubic-bezier(.22,1,.36,1)}
.xot-sheet.open .xot-sheet__head{opacity:1;transform:translateY(0)}

.xot-sheet__art{width:76px;height:76px;border-radius:14px;background:#242426;overflow:hidden;flex-shrink:0;box-shadow:0 8px 28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative}
.xot-sheet__art img{width:100%;height:100%;object-fit:cover;display:block}
.xot-sheet__art::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);opacity:0;animation:xot-art-shimmer 3s ease-in-out infinite}
.xot-sheet.open .xot-sheet__art::after{opacity:1}
@keyframes xot-art-shimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}

.xot-sheet__meta{flex:1;min-width:0}
.xot-sheet__title{font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xot-sheet__artist{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:.15rem}
.xot-sheet__artist a{color:inherit;text-decoration:none;transition:color .15s}
.xot-sheet__artist a:hover{color:rgba(255,255,255,.8)}

.xot-sheet__close{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s,color .2s,transform .2s}
.xot-sheet__close:hover{background:rgba(255,255,255,.12);color:#fff;transform:rotate(90deg)}

/* ── Native Audio Preview ── */
.xot-sheet__preview{padding:.5rem 1.25rem .75rem;opacity:0;transform:translateY(6px);transition:opacity .35s .15s,transform .35s .15s}
.xot-sheet.open .xot-sheet__preview{opacity:1;transform:translateY(0)}
.xot-sheet__preview[hidden]{display:none}
/* Resolving — iTunes lookup in flight. Coral-pulse the play button + dim the
   waveform so the user knows the player is real but not yet ready. */
.xot-sheet__preview.is-resolving .xot-sheet__pv-btn{
  background:rgba(240,80,108,.55);
  animation:xot-sheet-resolve 1s ease-in-out infinite;
  pointer-events:none;
}
.xot-sheet__preview.is-resolving .xot-sheet__wf{opacity:.35}
@keyframes xot-sheet-resolve{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.xot-sheet__pv-row{display:flex;align-items:center;gap:.65rem}
.xot-sheet__pv-btn{width:38px;height:38px;border-radius:50%;background:#F0506C;box-shadow:0 4px 16px rgba(240,80,108,.35);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,box-shadow .15s}
.xot-sheet__pv-btn:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(240,80,108,.45)}
.xot-sheet__pv-btn:active{transform:scale(.94)}
.xot-sheet__pv-btn svg{display:block}
/* Waveform */
.xot-sheet__wf{flex:1;display:flex;align-items:flex-end;gap:2px;height:28px;cursor:pointer;padding:4px 0}
.xot-sheet__wf-bar{width:3px;border-radius:2px;background:rgba(255,255,255,.12);transition:background .1s;flex-shrink:0}
.xot-sheet__wf-bar.played{background:#F0506C}
.xot-sheet__wf-bar.now{background:#F0506C;animation:xot-wf-glow .5s ease-in-out infinite alternate}
@keyframes xot-wf-glow{from{opacity:.7;filter:brightness(1)}to{opacity:1;filter:brightness(1.3)}}
.xot-sheet__pv-time{font-size:.6rem;font-weight:700;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;min-width:3em;text-align:right;flex-shrink:0}
.xot-sheet__pv-label{font-size:.4rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.2);text-align:center;margin-top:.25rem;display:flex;align-items:center;justify-content:center;gap:.55rem}
.xot-sheet__pv-src{font-size:.4rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:rgba(201,162,39,.7);position:relative;padding-left:.55rem}
.xot-sheet__pv-src::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:rgba(201,162,39,.55)}

/* ── Stats ── */
.xot-sheet__stats{display:flex;gap:1.75rem;padding:.5rem 1.25rem .85rem;border-bottom:1px solid rgba(255,255,255,.05);opacity:0;transform:translateY(6px);transition:opacity .35s .18s,transform .35s .18s}
.xot-sheet.open .xot-sheet__stats{opacity:1;transform:translateY(0)}
.xot-sheet__stat-val{font-size:.9rem;font-weight:700;color:#fff}
.xot-sheet__stat-lbl{font-size:.48rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.28);margin-top:.1rem}

/* ── Editorial ── */
.xot-sheet__editorial{padding:.85rem 1.25rem;font-size:.78rem;color:rgba(255,255,255,.42);font-style:italic;border-bottom:1px solid rgba(255,255,255,.05);line-height:1.6;opacity:0;transform:translateY(6px);transition:opacity .35s .22s,transform .35s .22s}
.xot-sheet.open .xot-sheet__editorial{opacity:1;transform:translateY(0)}

/* ── Spotify Embed ── */
.xot-sheet__embed{padding:.85rem 1.25rem;opacity:0;transition:opacity .35s .25s}
.xot-sheet.open .xot-sheet__embed{opacity:1}
.xot-sheet__embed iframe{border-radius:12px;border:none;width:100%;display:block}

/* ── Platform Links ── */
.xot-sheet__links{display:flex;flex-direction:column;gap:.55rem;padding:0 1.25rem .5rem;opacity:0;transform:translateY(6px);transition:opacity .35s .28s,transform .35s .28s}
.xot-sheet.open .xot-sheet__links{opacity:1;transform:translateY(0)}
.xot-sheet__link{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.07);text-decoration:none;color:#fff;transition:border-color .2s,background .2s,transform .15s}
.xot-sheet__link:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04);transform:translateX(3px)}
.xot-sheet__link-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:box-shadow .2s}
.xot-sheet__link-icon--spotify{background:#1db954}
.xot-sheet__link:hover .xot-sheet__link-icon--spotify{box-shadow:0 4px 16px rgba(29,185,84,.4)}
.xot-sheet__link-icon--apple{background:#fc3c44}
.xot-sheet__link:hover .xot-sheet__link-icon--apple{box-shadow:0 4px 16px rgba(252,60,68,.4)}
.xot-sheet__link-icon--yt{background:#ff0000}
.xot-sheet__link:hover .xot-sheet__link-icon--yt{box-shadow:0 4px 16px rgba(255,0,0,.3)}
.xot-sheet__link-label{font-size:.78rem;font-weight:600}
.xot-sheet__link-sub{font-size:.6rem;color:rgba(255,255,255,.35);margin-top:.06rem}
.xot-sheet__link-arrow{margin-left:auto;color:rgba(255,255,255,.2);font-size:1rem;transition:color .15s,transform .15s}
.xot-sheet__link:hover .xot-sheet__link-arrow{color:rgba(255,255,255,.5);transform:translateX(2px)}