/* ============================================================
   TOP MUSIC — вокальный конкурс · неон-сцена
   Fonts: Unbounded (display) · Montserrat (ui)
   ============================================================ */
:root{
  --bg:#070718; --bg2:#0e0b2e;
  --card:rgba(255,255,255,.05); --card-brd:rgba(150,170,255,.18);
  --ink:#f3f4ff; --muted:#a7b0dd;
  --blue:#3b82f6; --cyan:#35e6ff; --violet:#7c3aed; --magenta:#ff2fbf; --pink:#ff6ad5;
  --grad:linear-gradient(100deg,#3b82f6,#7c3aed 52%,#ff2fbf);
  --display:'Unbounded', system-ui, sans-serif;
  --sans:'Montserrat', system-ui, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,90px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--magenta);color:#fff}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* chrome logotype */
.chrome{
  font-family:var(--display); font-weight:800; font-style:italic; letter-spacing:-.01em;
  background:linear-gradient(180deg,#ffffff 0%,#dcecff 28%,#8fb7ff 48%,#ffffff 60%,#ffd3f4 78%,#c9a9ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 12px rgba(80,140,255,.55)) drop-shadow(0 0 34px rgba(255,60,200,.3));
}

/* shared type */
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow.center{text-align:center;display:block}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5.5vw,3.6rem);line-height:1.02;letter-spacing:-.01em}
.h2.center{text-align:center}

/* ============================================================ BACKGROUND FX */
.bg-stage{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 90% at 50% -10%, #170f3d 0%, #0b0a24 45%, #050512 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.b1{width:46vw;height:46vw;left:-10vw;top:-8vw;background:radial-gradient(circle,#2f6bff,transparent 65%)}
.b2{width:42vw;height:42vw;right:-8vw;top:18vh;background:radial-gradient(circle,#ff2fbf,transparent 65%);opacity:.4}
.b3{width:40vw;height:40vw;left:20vw;bottom:-10vw;background:radial-gradient(circle,#7c3aed,transparent 65%);opacity:.45}
.notes{position:fixed;inset:0;z-index:-1;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:var(--grad);box-shadow:0 0 12px rgba(124,58,237,.8)}

/* ============================================================ CURTAIN */
.curtain{position:fixed;inset:0;z-index:100;overflow:hidden}
.curtain__panel{position:absolute;top:0;bottom:0;width:52%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 10%, rgba(0,0,0,0) 88%, rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg,#3c060d 0,#74111e 26px,#94182a 46px,#74111e 66px,#3c060d 92px);
  box-shadow:inset 0 -60px 120px rgba(0,0,0,.6);
  transition:transform 1.5s var(--ease);will-change:transform}
.curtain__panel.left{left:0;border-right:2px solid rgba(0,0,0,.4)}
.curtain__panel.right{right:0;border-left:2px solid rgba(0,0,0,.4)}
.curtain__valance{position:absolute;top:0;left:0;right:0;height:80px;z-index:2;
  background:repeating-linear-gradient(90deg,#4a0812 0,#8a1526 24px,#5a0b18 48px);
  box-shadow:0 8px 24px rgba(0,0,0,.5);border-bottom:3px solid #d4af37;
  -webkit-mask:radial-gradient(22px 26px at 22px 100%,transparent 96%,#000) repeat-x;mask:radial-gradient(22px 26px at 22px 100%,transparent 96%,#000) repeat-x;-webkit-mask-size:44px 100%;mask-size:44px 100%}
.curtain__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;z-index:3;text-align:center}
.curtain__logo{font-size:clamp(2.4rem,10vw,6rem)}
.curtain__btn{cursor:pointer;border:none;border-radius:100px;padding:1.1em 2.6em;font-family:var(--sans);font-weight:700;
  font-size:.9rem;letter-spacing:.06em;color:#fff;background:var(--grad);position:relative;overflow:hidden;
  box-shadow:0 10px 40px rgba(124,58,237,.5);animation:pulse 2.4s var(--ease) infinite}
.curtain__btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5),transparent 70%);transform:translateX(-120%);animation:sheen 3s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes pulse{0%,100%{box-shadow:0 10px 40px rgba(124,58,237,.5)}50%{box-shadow:0 10px 60px rgba(255,47,191,.6)}}
.curtain.open .curtain__panel.left{transform:translateX(-102%)}
.curtain.open .curtain__panel.right{transform:translateX(102%)}
.curtain.open .curtain__center,.curtain.open .curtain__valance{opacity:0;transition:opacity .5s}
.curtain.gone{display:none}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(90px,14vh,150px) var(--pad) 0}
.spotlight{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%, rgba(124,90,255,.35), transparent 70%),
             conic-gradient(from 180deg at 50% -10%, transparent 44%, rgba(120,160,255,.18) 50%, transparent 56%)}
.hero__inner{max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px)}
.hero__badge{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.5em 1.2em;border:1px solid var(--card-brd);border-radius:100px;background:var(--card);color:var(--cyan)}
.hero__badge i{color:var(--magenta);font-style:normal}
.hero__logo{font-size:clamp(3.4rem,15vw,11rem);line-height:.9}
.hero__sub{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,3vw,1.7rem);text-transform:uppercase;letter-spacing:.04em}
.hero__tag{color:var(--muted);font-size:clamp(1rem,2.3vw,1.2rem);max-width:32ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.hero__org{margin-top:14px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scrollcue{position:absolute;bottom:clamp(16px,3vh,30px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:9px;text-decoration:none;color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.scrollcue__mouse{width:27px;height:44px;border:2px solid var(--cyan);border-radius:15px;position:relative;box-shadow:0 0 18px rgba(53,230,255,.55)}
.scrollcue__mouse::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:9px;border-radius:2px;background:var(--cyan);
  transform:translateX(-50%);animation:wheel 1.5s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}80%,100%{opacity:0;transform:translate(-50%,13px)}}
.scrollcue__txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.scrollcue__ch{width:22px;height:22px;color:var(--cyan);animation:bob 1.5s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;position:relative;
  padding:1em 2.2em;border-radius:100px;font-family:var(--sans);font-weight:700;font-size:.86rem;letter-spacing:.04em;
  border:1px solid transparent;overflow:hidden;will-change:transform;transition:transform .3s var(--ease),box-shadow .3s}
.btn span{position:relative;z-index:1}
.btn--grad{background:var(--grad);color:#fff;box-shadow:0 8px 30px rgba(124,58,237,.45)}
.btn--grad:hover{box-shadow:0 12px 42px rgba(255,47,191,.5);transform:translateY(-2px)}
.btn--ghost{background:var(--card);border-color:var(--card-brd);color:var(--ink)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn--big{padding:1.15em 2.8em;font-size:.95rem;width:100%}

/* ============================================================ ABOUT */
.about{position:relative;padding:clamp(70px,12vh,150px) var(--pad);max-width:1200px;margin:0 auto}
.eq{display:flex;gap:6px;align-items:flex-end;height:40px;margin:0 auto clamp(30px,5vh,50px);width:max-content}
.eq i{width:6px;height:100%;border-radius:4px;background:var(--grad);transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(2n){animation-duration:.8s}.eq i:nth-child(3n){animation-duration:1.4s}.eq i:nth-child(4n){animation-duration:.6s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.about__text{display:flex;flex-direction:column;gap:16px}
.about__text .h2{margin:2px 0 6px}
.about__text p{color:var(--muted);font-size:clamp(1rem,2vw,1.1rem)}
.about__text b{color:var(--ink)}
.stats{display:flex;gap:clamp(18px,4vw,44px);margin-top:14px}
.stat b{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,5vw,2.8rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1}
.stat span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.about__photo{border-radius:20px;overflow:hidden;border:1px solid var(--card-brd);box-shadow:0 30px 80px -30px rgba(124,58,237,.6)}
.about__photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media(max-width:820px){.about__grid{grid-template-columns:1fr}.about__photo{max-width:380px;margin:0 auto}}

/* ============================================================ NOMINATIONS */
.noms{padding:clamp(60px,10vh,130px) var(--pad);max-width:1150px;margin:0 auto;text-align:center}
.noms .h2{margin:8px 0 clamp(30px,5vh,50px)}
.noms__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:920px;margin:0 auto}
.nom{display:inline-flex;align-items:center;gap:.55em;padding:.9em 1.4em;border-radius:100px;background:var(--card);
  border:1px solid var(--card-brd);font-weight:600;white-space:nowrap;line-height:1;
  transition:transform .3s var(--ease),border-color .3s,background .3s}
.nom:hover{transform:translateY(-4px);border-color:var(--magenta);background:rgba(255,47,191,.08)}
.nom svg{width:20px;height:20px;flex:0 0 auto;color:var(--cyan)}
.noms__note{margin-top:24px;color:var(--muted);font-size:.95rem}

/* ============================================================ AGES */
.ages{padding:clamp(60px,10vh,130px) var(--pad);max-width:1100px;margin:0 auto;text-align:center}
.ages .h2{margin:8px 0 clamp(30px,5vh,50px)}
.ages__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.age{padding:1.6em 1em;border-radius:18px;background:var(--card);border:1px solid var(--card-brd);position:relative;overflow:hidden;transition:transform .3s var(--ease)}
.age::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .3s}
.age:hover{transform:translateY(-4px)}.age:hover::before{opacity:.12}
.age b{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.5vw,1.8rem);display:block;position:relative}
.age span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);position:relative}

/* ============================================================ STEPS */
.steps{padding:clamp(60px,10vh,130px) var(--pad);max-width:1150px;margin:0 auto;text-align:center}
.steps .h2{margin:8px 0 clamp(30px,5vh,50px)}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.step{padding:clamp(24px,3vw,40px);border-radius:20px;background:var(--card);border:1px solid var(--card-brd);text-align:left}
.step__n{font-family:var(--display);font-weight:800;font-size:2.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:.4em 0 .3em}
.step p{color:var(--muted);font-size:.98rem}
@media(max-width:760px){.steps__grid{grid-template-columns:1fr}}

/* ============================================================ GALLERY */
.gallery{padding:clamp(60px,10vh,130px) var(--pad);max-width:1200px;margin:0 auto;text-align:center}
.gallery .h2{margin:8px 0 clamp(30px,5vh,50px)}
.gallery__grid{column-count:4;column-gap:14px;max-width:1200px;margin:0 auto}
@media(max-width:900px){.gallery__grid{column-count:3}}
@media(max-width:560px){.gallery__grid{column-count:2}}
.g-item{break-inside:avoid;margin:0 0 14px;border-radius:16px;overflow:hidden;border:1px solid var(--card-brd)}
.g-item img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
.g-item:hover img{transform:scale(1.05)}

/* ============================================================ JURY */
.jury{padding:clamp(60px,10vh,130px) var(--pad);max-width:1200px;margin:0 auto}
.jury__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.jury__photo{border-radius:20px;overflow:hidden;border:1px solid var(--card-brd);box-shadow:0 30px 80px -30px rgba(59,130,246,.6)}
.jury__photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.jury__text{display:flex;flex-direction:column;gap:14px}
.jury__text .h2{margin:2px 0 4px}
.jury__text p{color:var(--muted);font-size:clamp(1rem,2vw,1.1rem)}
@media(max-width:820px){.jury__grid{grid-template-columns:1fr}.jury__photo{order:-1;max-width:520px;margin:0 auto}}

/* ============================================================ ANKETA / FORM */
.anketa{padding:clamp(60px,10vh,130px) var(--pad)}
.anketa__card{max-width:760px;margin:0 auto;background:linear-gradient(180deg,rgba(30,28,64,.7),rgba(12,10,36,.7));
  border:1px solid var(--card-brd);border-radius:26px;padding:clamp(30px,5vw,64px);
  box-shadow:0 40px 100px -40px rgba(124,58,237,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center}
.anketa .h2{margin:8px 0 10px}
.anketa__lead{color:var(--muted);margin-bottom:clamp(24px,4vh,36px)}
.form{display:flex;flex-direction:column;gap:16px;text-align:left}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.row{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:8px}
.fld>span{font-size:.76rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.fld input,.fld select{width:100%;min-height:50px;padding:12px 16px;border-radius:12px;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--card-brd);font-family:var(--sans);font-size:1rem;
  transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23a7b0dd' stroke-width='1.8'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:44px}
.fld input::placeholder{color:rgba(167,176,221,.6)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,230,255,.18)}
.fld option{background:#141230;color:var(--ink)}
.fld input.err,.fld select.err{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,47,191,.22)}
.form__req{font-size:.8rem;color:var(--muted)}
.form__req i{color:var(--magenta);font-style:normal}
.agree.err span{color:var(--magenta)}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--muted);cursor:pointer;line-height:1.4}
.agree input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--violet);margin-top:1px}
.form__status{min-height:1.2em;text-align:center;font-size:.9rem;color:var(--muted)}
.form__status.err{color:var(--magenta)}
.form__success{text-align:center;padding:clamp(20px,4vh,36px) 0}
.success__ic{width:70px;height:70px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);box-shadow:0 10px 40px rgba(124,58,237,.6)}
.success__ic svg{width:34px;height:34px;color:#fff}
.form__success h3{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4vw,2.2rem)}
.form__success p{color:var(--muted);margin-top:8px}
.form[hidden]{display:none}

/* ============================================================ FOOTER */
.foot{text-align:center;padding:clamp(60px,10vh,120px) var(--pad);border-top:1px solid var(--card-brd);
  display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:40px}
.foot__logo{font-size:clamp(2rem,7vw,3.4rem)}
.foot__org{color:var(--muted);font-size:.95rem;line-height:1.6}
.vk-btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.6em;border-radius:100px;background:var(--card);
  border:1px solid var(--card-brd);font-weight:700;transition:transform .3s var(--ease),border-color .3s,color .3s;will-change:transform}
.vk-btn svg{width:24px;height:24px;color:#4a76a8}
.vk-btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.foot__copy{color:var(--muted);font-size:.78rem;opacity:.7;margin-top:6px}

/* required mark + policy link + footer contacts + modal */
.fld>span i{color:var(--magenta);font-style:normal}
.policy-link{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.policy-link:hover{color:var(--pink)}
.foot__contacts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.foot__policy{margin-top:4px;font-size:.82rem}

.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .3s var(--ease)}
.modal[hidden]{display:none}
.modal.open{opacity:1}
.modal__backdrop{position:absolute;inset:0;background:rgba(4,4,15,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal__box{position:relative;max-width:640px;width:100%;max-height:86vh;overflow:auto;border-radius:22px;
  background:linear-gradient(180deg,#151233,#0c0a24);border:1px solid var(--card-brd);
  box-shadow:0 40px 100px -30px rgba(124,58,237,.7);padding:clamp(24px,4vw,44px);transform:translateY(16px);transition:transform .3s var(--ease)}
.modal.open .modal__box{transform:none}
.modal__close{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--card-brd);
  background:var(--card);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;transition:border-color .3s,color .3s}
.modal__close:hover{border-color:var(--magenta);color:var(--magenta)}
.modal__content h3{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.5vw,1.8rem);margin-bottom:16px;padding-right:34px}
.modal__content p{color:var(--muted);font-size:.92rem;line-height:1.65;margin-bottom:12px}
.modal__content b{color:var(--ink)}
.modal__note{border-top:1px solid var(--card-brd);padding-top:12px;font-style:italic}

/* ============================================================ REVEAL / MOTION */
[data-in]{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  [data-in]{opacity:1!important;transform:none!important}
  .curtain{display:none}
  .notes,.grain{display:none}
}