/* VIP progression presentation. The unlock movie is a cropped native-app capture. */
#vip.vip.section{padding-block:clamp(72px,9vw,140px);gap:30px}
#vip .vip-copy{max-width:960px}
#vip .vip-copy>p:not(.eyebrow){max-width:780px;color:#f8e8d4;line-height:1.55}
#vip .vip-copy>p:not(.eyebrow)+p{margin-top:12px}
#vip .vip-showcase{width:min(1040px,100%);max-width:none;margin:8px auto 0;padding:clamp(15px,3vw,30px);border:1px solid #b68842;border-radius:24px;background:linear-gradient(160deg,#310704,#610907 58%,#330503);box-shadow:0 28px 55px #52230d38;color:#fff}
.vip-progress-demo{--progress:0%;display:flex;align-items:center;gap:clamp(12px,2vw,26px);width:min(850px,100%);margin:8px auto 25px;padding:10px 3px 14px}
.vip-progress-track{position:relative;flex:1;min-width:0;height:5px;border:0;border-radius:10px;background:#121426;box-shadow:inset 0 1px 2px #0009}
.vip-progress-track::before,.vip-progress-fill{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#bc1723 0%,#ef6023 20%,#f8d936 40%,#56ad44 60%,#387fd1 80%,#9b4abc 100%)}
.vip-progress-track::before{opacity:.16}
.vip-progress-fill{clip-path:inset(0 calc(100% - var(--progress)) 0 0);box-shadow:0 0 7px #ffffff32}
#vip .vip-progress-crown{position:absolute;z-index:2;top:50%;left:var(--progress);width:31px;height:auto;max-width:none;border:0;border-radius:0;box-shadow:none;transform:translate(-50%,-54%);filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 5px #f8d936b5);opacity:1;transition:opacity 180ms ease}
#vip .vip-progress-demo.has-arrived .vip-progress-crown{opacity:0}
.vip-tier-crowns{display:flex;align-items:center;justify-content:space-between;gap:clamp(4px,.8vw,10px);flex:0 0 clamp(105px,21%,180px)}
#vip .vip-tier-crowns img{display:block;width:clamp(17px,2vw,26px);height:auto;max-width:none;border:0;border-radius:0;box-shadow:none;filter:grayscale(1) brightness(.65);opacity:.85;transition:filter 250ms ease,opacity 250ms ease,transform 250ms ease}
#vip .vip-tier-crowns img.is-lit{filter:brightness(0) saturate(100%) invert(83%) sepia(83%) saturate(1248%) hue-rotate(355deg) brightness(104%) contrast(105%) drop-shadow(0 0 6px #ffdd00);opacity:1;transform:translateY(-2px)}
.vip-unlock-stage{position:relative;overflow:hidden;border:1px solid #d2a74b;border-radius:12px;background:#180304;aspect-ratio:1460/554}
.vip-unlock-stage video{display:block;width:100%;height:100%;object-fit:cover}
#vip .vip-showcase figcaption{color:#f6ddb6;margin:18px auto 0;font-size:15px}
.vip-replay{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:17px;padding:10px 18px;border:1px solid #dcb45b;border-radius:30px;background:#640b0d;color:#fff;font:700 13px/1.2 Arial,sans-serif;cursor:pointer}
.vip-replay:hover{background:#8f1314}
.vip-replay:focus-visible{outline:3px solid #ffdd00;outline-offset:4px}
@media(max-width:650px){#vip.vip.section{padding-block:72px;gap:24px}#vip .vip-showcase{border-radius:16px;padding:12px}.vip-progress-demo{gap:12px;margin:4px auto 18px}.vip-progress-track{height:4px}#vip .vip-progress-crown{width:23px}.vip-tier-crowns{flex-basis:105px;gap:4px}#vip .vip-tier-crowns img{width:17px}}
@media(prefers-reduced-motion:reduce){#vip .vip-tier-crowns img{transition:none}}