/* ================= Fon-video muqova (vcover) ================= */
.vcover {
  --vc: #fff; --vg: var(--gold, #e3c27a); --vsh: 0 2px 18px #000a;
  position: relative; height: 100svh; min-height: 600px; overflow: hidden; color: var(--vc);
  display: flex; align-items: center; justify-content: center; isolation: isolate; background: #111;
}
.vc-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.vc-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-tint { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #0009 0%, #0003 35%, #0003 60%, #000b 100%); }
.vcover .scroll-hint { z-index: 4; color: #fff; }

.vc-text { position: relative; z-index: 3; width: 100%; padding: 0 34px; text-align: center; }
.vc-card { max-width: 420px; margin: 0 auto; }
.vcover .vl { margin: 0; text-shadow: var(--vsh); }
.vk { font: 700 12px/1.7 Manrope, sans-serif; letter-spacing: .32em; text-transform: uppercase; max-width: 18em; margin: 0 auto !important; text-wrap: balance; }
.vn { font: 600 clamp(34px, 10vw, 52px)/1.05 "Cormorant Garamond", serif; margin: 26px 0 18px !important; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vn .amp { font: 400 .6em "Great Vibes", cursive; color: var(--vg); }
.vi { font: 700 12.5px/1.6 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.vd { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 26px 0 22px !important;
  font: 700 13px Manrope, sans-serif; letter-spacing: .25em; text-transform: uppercase; }
.vd b { font: 600 34px "Cormorant Garamond", serif; letter-spacing: .04em; color: var(--vg); }
.vd .dv { width: 34px; height: 18px; flex: none; filter: drop-shadow(0 1px 4px #0007); }
.vd .dv.flip { transform: scaleX(-1); }
.vp, .vt { font: 700 12.5px/1.6 Manrope, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.vt { margin-top: 6px !important; }

/* ---- matn animatsiyalari (intro yopilgach boshlanadi) ---- */
.vcover .vl { opacity: 0; }
body:not(.locked) .va-type .vl { animation: vcType 1.1s steps(26, end) var(--d) forwards; }
.va-type .vl { clip-path: inset(-30px 100% -30px -30px); }
body:not(.locked) .va-fade .vl { animation: vcBlur 1.4s ease var(--d) forwards; }
body:not(.locked) .va-rise .vl { animation: vcRise 1.2s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
body:not(.locked) .va-spread .vl { animation: vcSpread 1.6s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
body:not(.locked) .va-glow .vl { animation: vcGlow 1.6s ease var(--d) forwards; }
@keyframes vcType { 0% { opacity: 1; clip-path: inset(-30px 100% -30px -30px); } 99% { opacity: 1; clip-path: inset(-30px -30px -30px -30px); } 100% { opacity: 1; clip-path: none; } }
@keyframes vcBlur { 0% { opacity: 0; filter: blur(10px); transform: scale(1.06); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes vcRise { 0% { opacity: 0; transform: translateY(26px); } 100% { opacity: 1; transform: none; } }
@keyframes vcSpread { 0% { opacity: 0; letter-spacing: .9em; filter: blur(4px); } 100% { opacity: 1; filter: none; } }
@keyframes vcGlow { 0% { opacity: 0; text-shadow: 0 0 0 transparent; } 60% { opacity: 1; text-shadow: 0 0 26px var(--vg), 0 0 6px #fff; } 100% { opacity: 1; } }
.va-spread .vn { letter-spacing: .02em; }

/* ---- ramkalar ---- */
.vc-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; color: var(--vg); pointer-events: none; }
.vc-draw { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
body:not(.locked) .vc-draw { animation: vcDraw 3.2s ease .3s forwards; }
@keyframes vcDraw { to { stroke-dashoffset: 0; } }
.vc-corner { position: absolute; width: 150px; height: 150px; z-index: 2; color: var(--vg); pointer-events: none;
  filter: drop-shadow(0 2px 6px #0006); opacity: 0; transform: scale(.6); }
body:not(.locked) .vc-corner { animation: vcPop 1.4s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.vc-corner.tl { left: -10px; top: -10px; }
.vc-corner.tr { right: -10px; top: -10px; rotate: 90deg; }
.vc-corner.br { right: -10px; bottom: -10px; rotate: 180deg; }
.vc-corner.bl { left: -10px; bottom: -10px; rotate: 270deg; }
@keyframes vcPop { to { opacity: 1; transform: none; } }
.vc-box { position: absolute; inset: 22px; z-index: 1; border: 1px solid #ffffffb3; pointer-events: none; opacity: 0; }
.vc-box i { position: absolute; inset: 6px; border: 1px solid #ffffff59; }
body:not(.locked) .vc-box { animation: vcRise 1.6s ease .2s forwards; }
.vc-bars i { position: absolute; left: 0; right: 0; height: 9svh; background: #000; z-index: 2; transition: transform 1.6s cubic-bezier(.7,0,.2,1); }
.vc-bars i:first-child { top: 0; transform: translateY(-100%); }
.vc-bars i:last-child { bottom: 0; transform: translateY(100%); }
body:not(.locked) .vc-bars i { transform: none; }
.vs-kino .vc-video { animation: vcKen 24s ease-in-out infinite alternate; }
@keyframes vcKen { from { transform: scale(1); } to { transform: scale(1.14); } }
.vc-strip { position: absolute; left: 0; right: 0; height: 30px; z-index: 2; box-shadow: 0 0 16px #0008; }
.vc-strip svg { width: 100%; height: 100%; display: block; }
.vc-strip.top { top: 0; } .vc-strip.bot { bottom: 0; }
.vc-neon { position: absolute; inset: 24px; z-index: 1; border-radius: 26px; border: 2px solid var(--accent, #d06cff);
  box-shadow: 0 0 12px var(--accent, #d06cff), inset 0 0 12px var(--accent, #d06cff); animation: vcFlick 4s infinite; pointer-events: none; }
@keyframes vcFlick { 0%, 100%, 46%, 50%, 54% { opacity: 1; } 48%, 52% { opacity: .45; } }
.vc-floaters { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.vc-floaters i { position: absolute; left: var(--x); bottom: -30px; font-style: normal; font-size: calc(22px * var(--s)); color: var(--vg);
  opacity: 0; animation: vcFloat var(--t) linear var(--dl) infinite; text-shadow: 0 0 10px currentColor; }
@keyframes vcFloat { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-110svh) rotate(40deg); opacity: 0; } }
.vc-grain { position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: vcGrain .6s steps(4) infinite; }
@keyframes vcGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-5%, 3%); } 50% { transform: translate(4%, -4%); } 75% { transform: translate(-3%, -2%); } }

/* ---- uslublar (filtr + rang) ---- */
.vs-oltin .vc-video { filter: grayscale(1) contrast(1.05) brightness(.82); }
.vs-oltin { --vg: #e7c983; }
.vs-retro .vc-video { filter: sepia(.8) contrast(1.12) brightness(.78); }
.vs-retro { --vg: #f0d9a8; }
.vs-retro .vc-tint { background: radial-gradient(ellipse at center, transparent 40%, #1b0f05d9 100%); }
.vs-iliq .vc-video { filter: sepia(.3) saturate(1.15) brightness(.78); }
.vs-iliq .vc-tint { background: linear-gradient(180deg, #2a1205a6, #4a240b33 45%, #1a0b03c0); }
.vs-kino .vc-video { filter: contrast(1.1) saturate(.85) brightness(.72); }
.vs-kino .vn { font-family: "Cormorant Garamond", serif; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(30px, 9vw, 46px); }
.vs-tungi .vc-video { filter: brightness(.55) saturate(.8) hue-rotate(10deg); }
.vs-tungi .vc-tint { background: linear-gradient(180deg, #050b2ad9, #0b1a5240 50%, #050b2ae6); }
.vs-tungi { --vg: #f3e6b5; }
.vs-pastel { --vc: #4a2a33; --vg: #c45b78; --vsh: 0 1px 14px #fff; }
.vs-pastel .vc-video { filter: brightness(1.08) saturate(.7) contrast(.9); }
.vs-pastel .vc-tint { background: linear-gradient(180deg, #fff3f5cc, #ffe6ec66 45%, #fff3f5d9); }
.vs-pastel .scroll-hint { color: #4a2a33; }
.vs-milliy .vc-video { filter: sepia(.35) brightness(.7) saturate(1.1); }
.vs-minimal .vc-video { filter: brightness(.68) saturate(.9); }
.vs-minimal { --vg: #fff; }
.vs-minimal .vn { font-weight: 500; }
.vs-oyna .vc-video { filter: blur(7px) brightness(.85) saturate(1.2); transform: scale(1.08); }
.vs-oyna .vc-tint { background: #0003; }
.vs-oyna .vc-card { padding: 34px 22px; border-radius: 26px; background: #ffffff26; border: 1px solid #ffffff59;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 20px 60px #0005; }
.vs-neon .vc-video { filter: contrast(1.25) saturate(1.35) brightness(.58); }
.vs-neon { --vg: var(--accent, #e88cff); }
.vs-neon .vn { text-shadow: 0 0 18px var(--vg), 0 2px 10px #000; }

@media (prefers-reduced-motion: reduce) {
  .vcover .vl, .vc-corner, .vc-box { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .vc-floaters, .vc-grain { display: none; }
  .vc-draw { stroke-dashoffset: 0; }
}