/* ─────────────────────────────────────────────────────────────────────────────────────────────
   MIBL — the VIP crown (one component for every player).  10 Oct 2026.

   The owner: «برای پلن‌هایی که وی‌آی‌پی هستن … داخل پلیرها یه انیمیشن زیبا از تاج وی‌آی‌پی‌شون».
   A station that holds one of the three VIP rungs wears the crown of its metal wherever it is
   tuned in: the NOVA player, the analog tuner, the 3D set, the station page. The ARTWORK is the one
   gold PNG the pricing cards already use (/members/Icons/crown-128.webp); silver and bronze are that
   same file re-coloured with the very numbers mibl_crown_css() / cr_crown_html() use, so one metal
   means one metal everywhere and there is no second crown to keep in step.

   THE CORONATION — plays once each time the crest is put on the page (a station is tuned in):
     0.00 s  the crown falls from above, tilted
     0.55 s  it lands (a small squash), a flat ring spreads from its base, a few specks fly out
     1.10 s  the idle: it floats, a glint crosses the metal every ~5 s, stars twinkle on the tips
   The ladder is READABLE: bronze is calm (one star, a slow glint), silver has two stars, gold has
   four, a breathing halo and — on the large crown only — slow rays behind it.

   Only transform / opacity are animated, so it costs the compositor, not layout. Every part is
   decorative (aria-hidden); the plan's name is always written next to it in plain text.
   prefers-reduced-motion: the crown stands still with its glow, nothing else.

   Markup comes from /assets/js/mibl_crest.js (miblCrest.html); this file is only looks + placements.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vcr{--vc:24px;--m1:#fff3b0;--m2:#fbbf24;--m3:#b45309;--glow:rgba(251,191,36,.55);--spark:#fff7d6;--ray:rgba(255,222,120,.55);
  position:relative;display:inline-block;width:var(--vc);height:var(--vc);flex:0 0 auto;vertical-align:middle;
  pointer-events:none;isolation:isolate;line-height:0}
.vcr-silver{--m1:#ffffff;--m2:#cfd8e6;--m3:#64748b;--glow:rgba(190,205,228,.52);--spark:#f8fbff;--ray:rgba(214,226,244,.5)}
.vcr-bronze{--m1:#fde3c8;--m2:#d98a4e;--m3:#7c3f1d;--glow:rgba(205,127,68,.5);--spark:#ffe6cf;--ray:rgba(220,150,90,.4)}

/* the crown itself: drop (once) → float (for ever); the glint rides INSIDE both so it can never drift off the metal */
.vcr-drop{position:absolute;inset:0;animation:vcr-drop 1.1s linear both;transform-origin:50% 92%}
.vcr-float{position:absolute;inset:0;animation:vcr-float 4.6s ease-in-out 1.15s infinite;transform-origin:50% 90%}
.vcr-float img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 calc(var(--vc)*.05) calc(var(--vc)*.13) var(--glow))}
.vcr-silver .vcr-float img{filter:grayscale(1) brightness(1.18) contrast(.97) drop-shadow(0 calc(var(--vc)*.05) calc(var(--vc)*.13) var(--glow))}
.vcr-bronze .vcr-float img{filter:saturate(.78) hue-rotate(-14deg) brightness(.80) contrast(1.06) drop-shadow(0 calc(var(--vc)*.05) calc(var(--vc)*.13) var(--glow))}
/* gravity: it accelerates down, squashes on contact, rebounds a little, settles */
@keyframes vcr-drop{
  0%{opacity:0;transform:translateY(-150%) rotate(-26deg) scale(.72);animation-timing-function:cubic-bezier(.5,.02,.85,.55)}
  10%{opacity:1}
  50%{transform:translateY(7%) rotate(4deg) scale(1.1,.9);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  68%{transform:translateY(-4%) rotate(-2deg) scale(.97,1.04);animation-timing-function:ease-in-out}
  100%{opacity:1;transform:none}
}
@keyframes vcr-float{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-5.5%) rotate(1.4deg)}}

/* the glint: a soft white band crossing the crown, painted only where the crown has metal (its own alpha is the mask) */
.vcr-sheen{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:url(/members/Icons/crown-128.webp) center/contain no-repeat;mask:url(/members/Icons/crown-128.webp) center/contain no-repeat}
.vcr-sheen::before{content:"";position:absolute;top:-12%;bottom:-12%;left:-60%;width:46%;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.18) 22%,rgba(255,255,255,.92) 50%,rgba(255,255,255,.18) 78%,transparent 100%);
  transform:skewX(-20deg) translateX(0);animation:vcr-glint 5.4s ease-in-out 1.7s infinite}
.vcr-silver .vcr-sheen::before{animation-duration:5.9s}
.vcr-bronze .vcr-sheen::before{animation-duration:7s;background:linear-gradient(100deg,transparent 0,rgba(255,235,210,.14) 22%,rgba(255,235,210,.7) 50%,rgba(255,235,210,.14) 78%,transparent 100%)}
@keyframes vcr-glint{0%{transform:skewX(-20deg) translateX(0)}34%,100%{transform:skewX(-20deg) translateX(480%)}}

/* the halo behind: a flash on landing, then a slow breath */
.vcr-aura{position:absolute;left:50%;top:58%;width:215%;height:215%;transform:translate(-50%,-50%);z-index:-1;opacity:0;
  background:radial-gradient(circle,var(--glow) 0%,transparent 60%);
  animation:vcr-flash 1.5s ease-out .5s both,vcr-breathe 4s ease-in-out 2s infinite}
.vcr-bronze .vcr-aura{--glow:rgba(205,127,68,.42);animation:vcr-flash 1.5s ease-out .5s both,vcr-breathe 5.2s ease-in-out 2s infinite}
@keyframes vcr-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}}
@keyframes vcr-breathe{0%,100%{opacity:.38;transform:translate(-50%,-50%) scale(.94)}50%{opacity:.78;transform:translate(-50%,-50%) scale(1.08)}}

/* landing: a flat ring spreads from the base, and a few specks fly out */
.vcr-ring{position:absolute;left:50%;top:80%;width:118%;height:34%;margin:-17% 0 0 -59%;border-radius:50%;opacity:0;
  border:max(1px,calc(var(--vc)*.035)) solid var(--m2);box-shadow:0 0 calc(var(--vc)*.14) var(--glow);
  animation:vcr-ring 1.05s ease-out .55s both}
@keyframes vcr-ring{0%{opacity:.95;transform:scale(.25)}100%{opacity:0;transform:scale(2.5)}}
.vcr-burst{position:absolute;left:50%;top:52%;width:0;height:0}
.vcr-burst b{position:absolute;left:calc(var(--vc)*-.05);top:calc(var(--vc)*-.05);width:calc(var(--vc)*.1);height:calc(var(--vc)*.1);border-radius:50%;opacity:0;
  background:var(--m1);box-shadow:0 0 calc(var(--vc)*.14) var(--m2);
  animation:vcr-pop .95s cubic-bezier(.12,.7,.3,1) .6s both}
@keyframes vcr-pop{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--vc)*-.9)) scale(.15)}}

/* twinkles on the tips and the band */
.vcr-sp{position:absolute;width:calc(var(--vc)*.3);height:calc(var(--vc)*.3);opacity:0;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  background:radial-gradient(circle,#fff 0%,var(--spark) 34%,var(--m2) 72%,transparent 100%);
  animation:vcr-tw 3.9s ease-in-out infinite}
.vcr-sp.s1{left:35%;top:-9%;animation-delay:1.5s}
.vcr-sp.s2{left:-6%;top:20%;width:calc(var(--vc)*.24);height:calc(var(--vc)*.24);animation-delay:2.7s}
.vcr-sp.s3{right:-6%;top:18%;animation-delay:3.4s}
.vcr-sp.s4{left:39%;top:50%;width:calc(var(--vc)*.22);height:calc(var(--vc)*.22);animation-delay:2.1s}
@keyframes vcr-tw{0%,56%,100%{opacity:0;transform:scale(.2) rotate(0)}66%{opacity:1;transform:scale(1) rotate(38deg)}80%{opacity:0;transform:scale(.4) rotate(84deg)}}
/* the rungs: bronze keeps one star, silver two, gold all four */
.vcr-bronze .vcr-sp.s2,.vcr-bronze .vcr-sp.s3,.vcr-bronze .vcr-sp.s4,.vcr-silver .vcr-sp.s4{display:none}

/* the large gold/silver crown only: slow rays behind it */
.vcr-rays{display:none}
.vcr-lg .vcr-rays{display:block;position:absolute;left:50%;top:56%;width:270%;height:270%;margin:-135% 0 0 -135%;z-index:-2;opacity:0;
  background:repeating-conic-gradient(from 0deg,var(--ray) 0 5deg,transparent 5deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.65) 22%,transparent 62%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.65) 22%,transparent 62%);
  animation:vcr-rays-in 1.6s ease-out 1s both,vcr-spin 40s linear 1s infinite}
.vcr-lg.vcr-bronze .vcr-rays{display:none}
.vcr-lg.vcr-silver .vcr-rays{--ray:rgba(214,226,244,.32)}
@keyframes vcr-rays-in{from{opacity:0}to{opacity:.55}}
@keyframes vcr-spin{to{transform:rotate(360deg)}}

/* small sizes keep the crown, the glint and two stars — nothing that would turn to mush at 20px */
.vcr-xs .vcr-aura,.vcr-xs .vcr-ring,.vcr-xs .vcr-burst,.vcr-xs .vcr-sp.s2,.vcr-xs .vcr-sp.s4{display:none}
.vcr-xs .vcr-sp{width:calc(var(--vc)*.42);height:calc(var(--vc)*.42)}

/* a still crown, for lists (the stations browser): it never moves */
.vcr-still .vcr-drop,.vcr-still .vcr-float{animation:none}
.bb-name .vcr-still{margin-inline-start:6px;vertical-align:-3px}

/* the plan's own name in its metal */
.vcr-txt{background:linear-gradient(100deg,var(--t1) 0%,var(--t2) 34%,var(--t3) 50%,var(--t2) 66%,var(--t1) 100%);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;animation:vcr-txt 6.5s linear infinite}
.vcr-txt-gold{--t1:#d99a0b;--t2:#fbbf24;--t3:#fff4c2}
.vcr-txt-silver{--t1:#9aa8bd;--t2:#d3dbe8;--t3:#ffffff}
.vcr-txt-bronze{--t1:#b9692f;--t2:#e09a62;--t3:#ffe0c4}
@keyframes vcr-txt{from{background-position:120% 0}to{background-position:-120% 0}}

/* ═══ PLACEMENTS ═══════════════════════════════════════════════════════════════════════════════ */

/* the metal's own colour, for rings and borders around whatever carries a crest */
.vip-gold{--vm:#fbbf24;--vg:rgba(251,191,36,.45)}
.vip-silver{--vm:#cfd8e6;--vg:rgba(203,213,225,.40)}
.vip-bronze{--vm:#d98a4e;--vg:rgba(205,127,68,.40)}

/* NOVA — the crown on the cover: .vcr-wrap is put around the cover by the player (only for a VIP station), the hat sits on its top edge */
.vcr-wrap{position:relative;flex:0 0 auto;width:fit-content;height:fit-content;line-height:0}
.vcr-pulse{position:absolute;inset:0;z-index:5;pointer-events:none}
.vcr-pulse .vcr-hat{position:absolute;left:50%;top:0;transform:translate(-50%,-62%);display:block;line-height:0}
/* the cover breathes while it plays (hero-art-pulse, 2.6 s, scale 1.05): the crown rides the same breath so it never drifts off the edge */
.vcr-wrap:has(> .on) .vcr-pulse{animation:vcr-pulse 2.6s ease-in-out infinite}
@keyframes vcr-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* NOVA — the identity chip under the controls, and the «Tuned in» card */
.station-ident-name{display:flex;align-items:center;min-width:0}
.station-ident-name .vcr-slot{display:inline-flex;align-items:center;margin-inline-start:7px}
.station-ident.vip .station-ident-logo{box-shadow:0 0 0 2px var(--vm),0 0 14px var(--vg)}
.station-ident.vip{border-color:color-mix(in srgb,var(--vm) 40%,rgba(255,255,255,.06))}
.rb-card.rb-vip{position:relative;border-color:color-mix(in srgb,var(--vm) 34%,var(--line,rgba(255,255,255,.09)))}
.rb-card.rb-vip .rb-card-art{box-shadow:0 0 0 2px var(--vm),0 4px 14px rgba(0,0,0,.42)}
.rb-crest{position:absolute;inset-inline-start:36px;top:2px;margin-inline-start:-14px;pointer-events:none;line-height:0}

/* the analog tuner — a colour logo burned into the corner of the tube, and an etched crown on the LCD */
.crtvip{position:absolute;top:19px;right:21px;width:38px;height:38px;pointer-events:none;opacity:0;transition:opacity .5s;
  filter:brightness(1.4) saturate(1.25) drop-shadow(0 0 7px rgba(255,214,120,.4))}
/* the set is off until it is switched on: the coronation waits for the tube to light, then plays */
.crt:not(.on) .crtvip *,.crt:not(.on) .crtvip *::before{animation-play-state:paused!important}
.crt.on .crtvip{opacity:.96}
.tierbox{display:inline-flex;align-items:center}
.tcrest{display:none;width:15px;height:15px;flex:0 0 auto;background:#28311e;
  -webkit-mask:url(/members/Icons/crown-128.webp) center/contain no-repeat;mask:url(/members/Icons/crown-128.webp) center/contain no-repeat}
.tcrest.on{display:inline-block;margin-inline-end:5px;animation:tcrest 4.4s steps(1) infinite}
@keyframes tcrest{0%,84%,100%{opacity:1}86%,90%{opacity:.22}}

/* the station page — beside the name */
.r-crest{display:inline-block;vertical-align:middle;margin-inline-start:10px;line-height:0}

@media (prefers-reduced-motion:reduce){
  .vcr-drop,.vcr-float,.vcr-aura,.vcr-ring,.vcr-burst b,.vcr-sheen::before,.vcr-sp,.vcr-rays,.vcr-txt,.vcr-pulse,.tcrest.on{animation:none!important}
  .vcr-ring,.vcr-burst,.vcr-sp,.vcr-sheen,.vcr-rays{display:none!important}
  .vcr-aura{opacity:.5}
  .vcr-txt{background-position:50% 0}
}