@import url("styles-20260828-02.css");

/* Slide-to-enter control */
.cover-slider{--slide-progress:0;position:relative;width:min(440px,100%);height:72px;padding:5px;overflow:hidden;border:1px solid rgba(255,255,255,.32);border-radius:20px;background:rgba(17,20,24,.72);box-shadow:0 18px 55px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.05);backdrop-filter:blur(14px);user-select:none;isolation:isolate}
.cover-slider-fill{position:absolute;inset:0;background:linear-gradient(90deg,#e8482d,#ff6a42);transform:scaleX(var(--slide-progress));transform-origin:left center;transition:transform .42s cubic-bezier(.2,.8,.2,1);z-index:-1}
.cover-slider-label{position:absolute;inset:0;display:grid;place-items:center;padding-left:68px;color:rgba(255,255,255,.9);font-size:16px;font-weight:900;letter-spacing:.06em;pointer-events:none;transition:opacity .2s ease,transform .2s ease;animation:sliderLabelPulse 1.8s ease-in-out infinite}
.cover-slider-thumb{position:absolute;left:5px;top:5px;width:60px;height:60px;padding:0;border:0;border-radius:15px;background:#fff;color:#171a1f;box-shadow:0 8px 28px rgba(0,0,0,.34);cursor:grab;touch-action:none;transform:translateX(calc(var(--slide-progress) * var(--slide-distance,370px)));transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease}
.cover-slider-thumb i{display:grid;place-items:center;width:100%;height:100%;font-size:31px;font-style:normal;animation:sliderArrow 1.1s ease-in-out infinite}
.cover-slider.is-dragging .cover-slider-thumb{cursor:grabbing;transition:none;box-shadow:0 9px 34px rgba(232,72,45,.55)}
.cover-slider.is-dragging .cover-slider-fill{transition:none}
.cover-slider.is-dragging .cover-slider-label{opacity:.35;transform:translateX(8px);animation:none}
.cover-slider.is-complete .cover-slider-thumb{background:var(--acid)}
.cover-slider.is-complete .cover-slider-label{opacity:0}
.cover-slider-thumb:focus-visible{outline:4px solid var(--acid);outline-offset:4px}
.opening-cover.is-leaving .cover-slider{animation:buttonHit .45s ease-out forwards}
.opening-cover.is-leaving .cover-slider:after{content:"";position:absolute;left:90%;top:50%;width:20px;height:20px;background:rgba(255,255,255,.75);border-radius:50%;transform:translate(-50%,-50%) scale(0);animation:buttonShock .55s ease-out forwards}
@keyframes sliderArrow{0%,100%{transform:translateX(-3px);opacity:.65}50%{transform:translateX(5px);opacity:1}}
@keyframes sliderLabelPulse{0%,100%{opacity:.72}50%{opacity:1}}

@media(max-width:700px){
  .cover-slider{width:100%;height:68px;border-radius:18px}
  .cover-slider-thumb{width:56px;height:56px;border-radius:14px}
  .cover-slider-label{padding-left:62px;font-size:14px;letter-spacing:.03em}
}

@media(prefers-reduced-motion:reduce){
  .cover-slider-label,.cover-slider-thumb i{animation:none}
}