/* Magic UI pass (vanilla port of magicui.design effects) - shared by Vibes Up + CineVault. Preview only. */
:root{--m1:#ffb347;--m2:#00f0ff;--m3:#ff2bd6}
html[data-mui=cv]{--m1:#ff2bd6;--m2:#00f0ff;--m3:#ffb347}
@property --mui-a{syntax:"<angle>";inherits:false;initial-value:0deg}
/* Dot pattern */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#ffffff1f 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 80%)}
/* Header: retro grid + meteors + ripple + sparkles */
header{position:relative;isolation:isolate;overflow:hidden}
.mui-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mui-grid{position:absolute;inset:0;perspective:220px;opacity:.55;-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 75%);mask-image:linear-gradient(to top,#000 0%,transparent 75%)}
.mui-grid i{position:absolute;left:-50%;width:200%;top:35%;height:300%;transform:rotateX(62deg);transform-origin:50% 0}
.mui-grid i::after{content:"";position:absolute;inset:-100% 0 0;background-image:linear-gradient(to right,color-mix(in srgb,var(--m2) 55%,transparent) 1px,transparent 0),linear-gradient(to bottom,color-mix(in srgb,var(--m3) 55%,transparent) 1px,transparent 0);background-size:48px 48px;animation:mui-grid 14s linear infinite}
@keyframes mui-grid{to{transform:translateY(50%)}}
.mui-met{position:absolute;top:-10px;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #ffffff18;transform:rotate(215deg);animation:mui-met linear infinite;opacity:0}
.mui-met::before{content:"";position:absolute;top:50%;width:70px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,var(--m2),transparent)}
@keyframes mui-met{0%{transform:rotate(215deg) translateX(0);opacity:1}70%{opacity:1}100%{transform:rotate(215deg) translateX(-520px);opacity:0}}
.mui-rip{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1px solid color-mix(in srgb,var(--m2) 45%,transparent);animation:mui-rip 6s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
@keyframes mui-rip{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.6);opacity:0}}
h1.hl{position:relative;display:block}
.mui-spk{position:absolute;width:18px;height:18px;pointer-events:none;color:var(--m2);animation:mui-spk 1.6s ease-in-out infinite;transform:scale(0)}
.mui-spk svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px currentColor)}
@keyframes mui-spk{0%,100%{transform:scale(0) rotate(0)}50%{transform:scale(1) rotate(90deg)}}
header .hlogo{animation:mui-in .9s cubic-bezier(.2,.8,.2,1) both}
/* Animated gradient text: subtitle + section titles (keeps each heading's own color) */
#src{background:linear-gradient(90deg,var(--m1),var(--m2),var(--m3),var(--m1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mui-grad 8s linear infinite,mui-in .9s .15s cubic-bezier(.2,.8,.2,1) both;font-weight:600;text-align:center}
h2.sec{background:linear-gradient(90deg,currentColor 0%,currentColor 35%,#fff 50%,currentColor 65%,currentColor 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mui-grad 7s linear infinite paused}
h2.sec.mui-v{animation-play-state:running}h2.sec>*{-webkit-text-fill-color:currentColor}
@keyframes mui-grad{from{background-position:100% 0}to{background-position:-200% 0}}
@keyframes mui-in{from{opacity:0;filter:blur(8px);translate:0 10px}}
/* Border beam on every banner (runs only while on screen) */
.banner::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;background:conic-gradient(from var(--mui-a),transparent 0deg,transparent 280deg,var(--gl,var(--m2)) 320deg,#fff 345deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:mui-beam 6s linear infinite paused}
.banner.mui-v::after{animation-play-state:running}
@keyframes mui-beam{to{--mui-a:360deg}}
/* Neon gradient card glow on hero banners */
.hb{isolation:isolate}
.hb::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 32% 30%,color-mix(in srgb,var(--gl) 32%,transparent) 0,transparent 26%);animation:mui-spin 12s linear infinite paused}
.hb.mui-v::before{animation-play-state:running}
@keyframes mui-spin{to{transform:rotate(360deg)}}
/* Magic card spotlight on posters (pointer devices) */
@media (hover:hover) and (pointer:fine){
.card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--m2) 30%,transparent),transparent 60%)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;padding:1px;opacity:0;transition:opacity .25s;background:radial-gradient(200px circle at var(--mx,50%) var(--my,30%),var(--m2),var(--m3) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card:hover::after,.card:hover::before{opacity:1}
}
/* Shimmer buttons on Watch / Trailer */
a.w{position:relative;overflow:hidden;isolation:isolate}
a.w::before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffffb0,transparent);transform:translateX(-120%) skewX(-18deg);opacity:0}
a.w.tr::before{background:linear-gradient(100deg,transparent,#ffffff40,transparent)}
a.w:hover::before,a.w:focus-visible::before{animation:mui-shim .8s ease-out}
.card.mui-v a.w:not(.tr)::before{animation:mui-shim 3.6s 1s ease-in-out infinite}
@keyframes mui-shim{0%{transform:translateX(-120%) skewX(-18deg);opacity:1}35%,100%{transform:translateX(260%) skewX(-18deg);opacity:1}}
a.w:not(.tr):hover{box-shadow:0 0 14px var(--m1)}
/* Ripple (tap) + pulsating back button */
.mui-rpl{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.35;transform:scale(0);animation:mui-rpl .6s ease-out forwards;z-index:0}
@keyframes mui-rpl{to{transform:scale(1);opacity:0}}
.chip,.hpill,.lane{position:relative;overflow:hidden}
#back{position:relative}
#back::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 var(--m2);animation:mui-pulse 2.4s ease-out infinite}
@keyframes mui-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--m2) 60%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
/* Cool mode confetti */
.mui-cf{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:9500;will-change:transform,opacity}
/* Blur fade on scroll (scroll-driven, no JS; ignored where unsupported) */
@supports (animation-timeline:view()){
.card,.banner:not(.hb),h2.sec,h3.sub,.mui-mq{animation-name:mui-bf;animation-timeline:view();animation-range:entry 0% entry 85%;animation-fill-mode:backwards;animation-timing-function:ease-out;animation-duration:auto}
h2.sec{animation:mui-grad 7s linear infinite paused,mui-bf auto ease-out backwards;animation-timeline:auto,view();animation-range:normal,entry 0% entry 85%}
@keyframes mui-bf{from{opacity:0;translate:0 24px}}
}
/* Marquee featured strip */
.mui-mq{margin:4px 14px 6px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mui-mq h4{margin:4px 6px 8px;font:800 13px/1 system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--m2);text-shadow:0 0 8px var(--m2)}
.mui-tr{display:flex;gap:12px;width:max-content;animation:mui-mq var(--mqd,60s) linear infinite}
.mui-mq:hover .mui-tr,.mui-mq:focus-within .mui-tr{animation-play-state:paused}
@keyframes mui-mq{to{transform:translateX(calc(-50% - 6px))}}
.mui-it{all:unset;cursor:pointer;flex:0 0 auto;width:clamp(92px,22vw,128px);aspect-ratio:2/3;border-radius:10px;background:#111 center/cover;position:relative;overflow:hidden;box-shadow:0 0 0 1px #ffffff22;transition:transform .25s,box-shadow .25s}
.mui-it:hover,.mui-it:focus-visible{transform:translateY(-4px) scale(1.04);box-shadow:0 0 0 1px var(--m2),0 0 18px color-mix(in srgb,var(--m2) 55%,transparent)}
.mui-it span{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;font:700 11px/1.15 system-ui,sans-serif;color:#fff;background:linear-gradient(transparent,#000d)}
.mui-flash{animation:mui-flash 1.6s ease-out}
@keyframes mui-flash{0%,40%{box-shadow:0 0 0 3px var(--m2),0 0 30px var(--m2)}}
/* Dock */
.mui-dock{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;display:flex;align-items:flex-end;gap:6px;padding:7px 10px;border-radius:20px;background:#0b0b14cc;-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border:1px solid #ffffff1f;box-shadow:0 8px 30px #000a,0 0 18px color-mix(in srgb,var(--m2) 20%,transparent);transition:transform .3s,opacity .3s}
.mui-dock.hide{transform:translate(-50%,140%);opacity:0}
.mui-dock button{all:unset;cursor:pointer;width:46px;height:46px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 9px/1 system-ui,sans-serif;letter-spacing:.04em;color:#cfd3e0;background:#ffffff0d;transform-origin:50% 100%;transition:transform .18s ease,color .18s,background .18s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mui-dock button b{font-size:19px;line-height:1;margin-bottom:3px}
@media (hover:hover){.mui-dock button:hover{transform:scale(1.32) translateY(-4px);color:#fff;background:#ffffff1f}.mui-dock button:hover+button,.mui-dock button:has(+button:hover){transform:scale(1.14) translateY(-2px)}}
.mui-dock button:focus-visible{outline:2px solid var(--m2);outline-offset:2px}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
#toast{bottom:calc(84px + env(safe-area-inset-bottom))!important}
/* Reduced motion: keep looks, drop movement */
@media (prefers-reduced-motion:reduce){
.mui-grid i::after,.mui-met,.mui-rip,.mui-spk,#back::after,.hb::before,.banner::after,h2.sec,#src,header .hlogo,a.w::before,.card.mui-v a.w::before{animation:none!important}
.mui-met,.mui-rip,.mui-spk{display:none}
.card,.banner,h2.sec,h3.sub,.mui-mq{animation:none!important}
.mui-tr{animation:none;width:auto;overflow-x:auto}.mui-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.mui-tr .mui-dup{display:none}
.mui-dock button{transition:none}
}
html body.php>#muidock#muidock#muidock.mui-dock.mui-dock{display:flex!important}

/* noanim 2026-10-22: hard-off in case of stale JS */.mui-grid,.mui-rip,.mui-met{display:none!important;animation:none!important}
.mui-dock button[data-k="new"]{width:auto;min-width:46px;padding:0 8px;white-space:nowrap}