/* ============================================================
   ТАНЦОРЫ ГОДА — танцевальный конкурс · синий неон-вихрь
   Fonts: Russo One (display) · Montserrat (ui)
   ============================================================ */
:root{
  --bg:#050f1f; --bg2:#08182e;
  --card:rgba(255,255,255,.05); --card-brd:rgba(120,200,255,.2);
  --ink:#eef6ff; --muted:#9fc0dd;
  --blue:#2fa8ff; --cyan:#4ff0ff; --teal:#19d6c6; --ice:#bfe9ff;
  --grad:linear-gradient(100deg,#2fa8ff,#19d6c6 52%,#4ff0ff);
  --display:'Russo One', 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(--cyan);color:#04101f}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

.chrome{font-family:var(--display);letter-spacing:.005em;
  background:linear-gradient(180deg,#ffffff 0%,#dff3ff 26%,#8fd4ff 46%,#ffffff 58%,#bfeaff 76%,#7fd0e6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 12px rgba(47,168,255,.55)) drop-shadow(0 0 34px rgba(79,240,255,.3))}

.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-size:clamp(1.7rem,5vw,3.3rem);line-height:1.05;letter-spacing:.005em}
.h2.center{text-align:center}

/* ============================================================ BACKGROUND FX */
.bg-stage{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(120% 90% at 50% -10%, #0d2647 0%, #071a30 45%, #040b18 100%)}
.vortex{position:absolute;left:50%;top:36%;width:120vmax;height:120vmax;transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 8%, rgba(47,168,255,.10) 12%, transparent 20% 30%, rgba(79,240,255,.10) 34%, transparent 42% 55%, rgba(25,214,198,.10) 60%, transparent 68%);
  filter:blur(30px);animation:spin 40s linear infinite;opacity:.8;will-change:transform}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;will-change:transform}
.b1{width:44vw;height:44vw;left:-10vw;top:-6vw;background:radial-gradient(circle,#2fa8ff,transparent 65%)}
.b2{width:40vw;height:40vw;right:-8vw;bottom:-8vw;background:radial-gradient(circle,#19d6c6,transparent 65%)}
.sparks{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(79,240,255,.8)}

/* ============================================================ STAGE / SPOTLIGHTS INTRO */
.stage{position:fixed;inset:0;z-index:100;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(85% 60% at 50% 24%, #08182e 0%, #030a16 70%, #01040a 100%);transition:opacity .8s ease}
.stage.gone{display:none}
.stage__beams{position:absolute;inset:0;pointer-events:none}
.beam{position:absolute;top:-14%;width:24vw;min-width:170px;height:132vh;transform-origin:top center;mix-blend-mode:screen;
  background:linear-gradient(to bottom, rgba(150,225,255,.55), rgba(79,240,255,.14) 42%, transparent 78%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(6px);opacity:0}
.beam:nth-child(1){left:1%;transform:rotate(-26deg)}
.beam:nth-child(2){left:23%;transform:rotate(-13deg)}
.beam:nth-child(3){left:50%;margin-left:-12vw;transform:rotate(0deg)}
.beam:nth-child(4){right:23%;transform:rotate(13deg)}
.beam:nth-child(5){right:1%;transform:rotate(26deg)}
.stage.lit .beam{animation:beamOn .7s ease forwards}
.stage.lit .beam:nth-child(2){animation-delay:.08s}
.stage.lit .beam:nth-child(3){animation-delay:.03s}
.stage.lit .beam:nth-child(4){animation-delay:.13s}
.stage.lit .beam:nth-child(5){animation-delay:.18s}
@keyframes beamOn{0%{opacity:0}8%{opacity:.9}14%{opacity:.15}24%{opacity:.85}38%{opacity:.35}60%{opacity:.9}100%{opacity:.8}}
.stage__center{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;padding:20px}
.stage__logo{font-size:clamp(1.8rem,8vw,5rem);opacity:.26;transition:opacity .7s ease}
.stage.lit .stage__logo{opacity:1}
.stage__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:.04em;color:#04101f;background:var(--grad);position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(47,168,255,.5);animation:pulse 2.4s var(--ease) infinite}
.stage__btn span{position:relative;z-index:1}
.stage__btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6),transparent 70%);transform:translateX(-120%);animation:sheen 3s ease-in-out infinite}
.stage.lit .stage__btn{opacity:0;pointer-events:none;transform:scale(.92);transition:opacity .4s,transform .4s}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes pulse{0%,100%{box-shadow:0 10px 40px rgba(47,168,255,.5)}50%{box-shadow:0 10px 60px rgba(79,240,255,.6)}}

/* ============================================================ 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(47,168,255,.32), transparent 70%)}
.hero__beams{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__beams span{position:absolute;top:-20%;width:22vw;min-width:150px;height:120vh;transform-origin:top center;mix-blend-mode:screen;background:linear-gradient(to bottom, rgba(120,210,255,.16), transparent 70%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(10px)}
.hero__beams span:nth-child(1){left:13%;transform:rotate(-16deg)}
.hero__beams span:nth-child(2){left:50%;margin-left:-11vw}
.hero__beams span:nth-child(3){right:13%;transform:rotate(16deg)}
.hero__inner{max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,16px)}
.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(--teal);font-style:normal}
.hero__pre{font-family:var(--sans);font-style:italic;font-weight:600;font-size:clamp(1rem,3vw,1.5rem);color:var(--ice);letter-spacing:.02em}
.hero__logo{font-size:clamp(2.6rem,11vw,8.5rem);line-height:.92}
.hero__sub{font-family:var(--sans);font-weight:700;font-size:clamp(.9rem,2.7vw,1.5rem);text-transform:uppercase;letter-spacing:.04em}
.hero__tag{color:var(--muted);font-size:clamp(1rem,2.3vw,1.2rem);max-width:34ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.hero__org{margin-top:12px;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;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(79,240,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:#04101f;box-shadow:0 8px 30px rgba(47,168,255,.45)}
.btn--grad:hover{box-shadow:0 12px 42px rgba(79,240,255,.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 / JURY */
.about,.jury{position:relative;padding:clamp(60px,11vh,140px) var(--pad);max-width:1200px;margin:0 auto}
.about__grid,.jury__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.jury__grid{grid-template-columns:1.1fr .9fr}
.about__text,.jury__text{display:flex;flex-direction:column;gap:14px}
.about__text .h2,.jury__text .h2{margin:2px 0 4px}
.about__text p,.jury__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-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,.jury__photo{border-radius:20px;overflow:hidden;border:1px solid var(--card-brd);box-shadow:0 30px 80px -30px rgba(47,168,255,.6)}
.about__photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.jury__photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media(max-width:820px){.about__grid,.jury__grid{grid-template-columns:1fr}.about__photo{max-width:380px;margin:0 auto}.jury__photo{order:-1;max-width:520px;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:960px;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(--cyan);background:rgba(79,240,255,.08)}
.nom svg{width:20px;height:20px;flex:0 0 auto;color:var(--teal)}
.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(140px,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-size:clamp(1.2rem,3.4vw,1.7rem);display:block;position:relative}
.age span{font-size:.7rem;letter-spacing:.14em;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-size:2.2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-family:var(--display);font-size:1.2rem;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:3;column-gap:14px;max-width:1100px;margin:0 auto}
@media(max-width:900px){.gallery__grid{column-count:2}}
@media(max-width:560px){.gallery__grid{column-count:1;max-width:420px}}
.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)}

/* ============================================================ ANKETA / FORM */
.anketa{padding:clamp(60px,10vh,130px) var(--pad)}
.anketa__card{max-width:820px;margin:0 auto;background:linear-gradient(180deg,rgba(13,38,71,.72),rgba(7,20,40,.72));border:1px solid var(--card-brd);border-radius:26px;padding:clamp(30px,5vw,64px);box-shadow:0 40px 100px -40px rgba(47,168,255,.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(20px,3vh,28px)}
.segment{position:relative;display:flex;width:max-content;margin:0 auto clamp(22px,3vh,30px);padding:5px;border-radius:100px;background:var(--card);border:1px solid var(--card-brd)}
.seg{position:relative;z-index:1;flex:1;min-width:130px;border:none;background:none;cursor:pointer;padding:.7em 1.5em;border-radius:100px;font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--muted);transition:color .3s}
.seg.on{color:#04101f}
.segment__pill{position:absolute;top:5px;left:5px;height:calc(100% - 10px);width:calc(50% - 5px);border-radius:100px;background:var(--grad);transition:transform .35s var(--ease);z-index:0}
.segment.group .segment__pill{transform:translateX(100%)}
.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:.04em;color:var(--muted)}
.fld>span i{color:var(--cyan);font-style:normal}
.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='%239fc0dd' 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(159,192,221,.6)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,240,255,.18)}
.fld input.err,.fld select.err{border-color:#ff5b7f;box-shadow:0 0 0 3px rgba(255,91,127,.22)}
.fld option{background:#0b1e38;color:var(--ink)}
.fld[hidden]{display:none}
.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(--blue);margin-top:1px}
.agree.err span{color:#ff5b7f}
.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(--teal)}
.form__req{font-size:.8rem;color:var(--muted)}
.form__req i{color:var(--cyan);font-style:normal}
.form__status{min-height:1.2em;text-align:center;font-size:.9rem;color:var(--muted)}
.form__status.err{color:#ff5b7f}
.form[hidden]{display:none}
.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(47,168,255,.6)}
.success__ic svg{width:34px;height:34px;color:#04101f}
.form__success h3{font-family:var(--display);font-size:clamp(1.4rem,4vw,2rem)}
.form__success p{color:var(--muted);margin-top:8px}

/* ============================================================ FOOTER + MODAL */
.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(1.6rem,6vw,3rem)}
.foot__org{color:var(--muted);font-size:.95rem;line-height:1.6}
.foot__contacts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.vk-btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.5em;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:22px;height:22px;color:var(--blue)}
.vk-btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.foot__policy{margin-top:2px;font-size:.82rem}
.foot__copy{color:var(--muted);font-size:.78rem;opacity:.7;margin-top:4px}

.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(2,8,20,.72);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,#0c2444,#071630);border:1px solid var(--card-brd);box-shadow:0 40px 100px -30px rgba(47,168,255,.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(--cyan);color:var(--cyan)}
.modal__content h3{font-family:var(--display);font-size:clamp(1.2rem,3.5vw,1.6rem);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,.sparks,.grain,.vortex{display:none}
}
