/* ============================================================
   СЧАСТЬЕ ЕСТЬ — телевизионный концерт-фестиваль
   Палитра снята с афиши: морозная синь, лёд и снег,
   объёмные ледяные буквы, золото наградной статуэтки.
   Fonts: Unbounded (display) · Montserrat (ui)
   ============================================================ */
:root{
  /* страница и так тёмная: говорим об этом браузеру, иначе
     Android доворачивает её в тёмную второй раз и гасит ледяные буквы */
  color-scheme:dark;
  --bg:#041730; --bg2:#092a52; --bg3:#12477f;
  --card:rgba(255,255,255,.055); --card-brd:rgba(150,210,255,.22);
  --ink:#eef7ff; --muted:#a3c3e2;
  --ice:#9fe3ff; --ice-deep:#3f9fe0; --frost:#dff2ff;
  --gold:#ffd77a; --warn:#ff7a9c;
  --grad:linear-gradient(100deg,#ffffff,#9fe3ff 46%,#3f9fe0);
  --on-grad:#042038;
  --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%;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(40,130,220,.55), transparent 70%),
    radial-gradient(60% 40% at 88% 12%, rgba(140,225,255,.18), transparent 70%),
    linear-gradient(180deg,#06254a,#041730 48%,#020d1d)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--ice);color:#042038}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

.snow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
.site{position:relative;z-index:1}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:var(--grad);box-shadow:0 0 16px rgba(159,227,255,.6)}

/* ледяной логотип — как объёмные буквы на афише */
.chrome{
  font-family:var(--display);font-weight:800;letter-spacing:-.005em;display:block;
  background:linear-gradient(180deg,#ffffff 0%,#eaf8ff 20%,#7cc8f5 46%,#ffffff 58%,#d6ecff 76%,#2f7fb8 100%);
  -webkit-background-clip:text;background-clip:text;color:#eaf8ff;
  filter:drop-shadow(0 3px 0 rgba(16,70,130,.55)) drop-shadow(0 10px 26px rgba(50,150,230,.5))
         drop-shadow(0 0 42px rgba(159,227,255,.3))}
/* Если обрезка фона по тексту не сработала, буквы должны остаться светлыми,
   а не чёрными: прозрачный цвет назначаем только там, где обрезка есть. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .chrome{color:transparent}
}


.eyebrow{font-weight:700;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4.6vw,3rem);line-height:1.12;letter-spacing:-.01em}
[data-in]{opacity:0;transform:translateY(24px)}

/* ── открывашка: общая оболочка, остальное — в intro-<имя>.css ── */
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;background:#01070f}
.intro.gone{display:none}
html.intro-lock,html.intro-lock body{overflow:hidden}

/* ── кнопки ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1em 2.2em;border-radius:100px;font-family:var(--sans);font-weight:700;font-size:.92rem;
  border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s,color .3s;will-change:transform}
.btn--grad{background:var(--grad);color:var(--on-grad);box-shadow:0 14px 42px -14px rgba(90,190,255,.75)}
.btn--grad:hover{transform:translateY(-2px);box-shadow:0 20px 56px -14px rgba(90,190,255,.9)}
.btn--ghost{background:var(--card);border-color:var(--card-brd);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ice);color:var(--ice)}
.btn--big{padding:1.15em 2.8em;font-size:.95rem;width:100%}

/* ── шапка ── */
.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) clamp(146px,19vh,172px)}
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 34% at 50% 34%, rgba(159,227,255,.22), transparent 70%)}
.hero__inner{max-width:1040px;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px)}
.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 rgba(159,227,255,.45);border-radius:100px;
  background:rgba(159,227,255,.08);color:var(--ice)}
.hero__badge i{font-style:normal}
.hero__logo{font-size:clamp(2.9rem,12vw,7.6rem);line-height:.92;margin:2px 0}
.hero__sub{font-weight:700;font-size:clamp(.92rem,2.7vw,1.4rem);text-transform:uppercase;letter-spacing:.05em}
.hero__where{font-size:clamp(.92rem,2.3vw,1.15rem);color:var(--frost)}
.hero__where b{color:var(--ice)}
.hero__tag{color:var(--muted);font-size:clamp(.95rem,2.2vw,1.12rem);max-width:40ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.hero__org{margin-top:12px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);max-width:56ch}
.scrollcue{position:absolute;bottom:clamp(16px,3vh,30px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;font-weight:700;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase}
.scrollcue__mouse{width:26px;height:42px;border:2px solid var(--ice);border-radius:14px;position:relative;
  box-shadow:0 0 18px rgba(159,227,255,.45)}
.scrollcue__mouse::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:9px;border-radius:2px;
  background:var(--ice);transform:translateX(-50%);animation:wheel 1.5s ease-in-out infinite}
.scrollcue__txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.scrollcue__ch{width:20px;height:20px;color:var(--ice);animation:bob 1.5s var(--ease) infinite}
@keyframes wheel{0%{transform:translate(-50%,0);opacity:1}70%{transform:translate(-50%,12px);opacity:0}100%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (max-height:640px){.scrollcue{display:none}.hero{padding-bottom:clamp(24px,5vh,44px)}}

/* ── о фестивале ── */
.about{position:relative;padding:clamp(60px,11vh,140px) var(--pad);max-width:1200px;margin:0 auto}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.about__text{display:flex;flex-direction:column;gap:14px}
.about__text p{color:var(--muted);font-size:clamp(1rem,2vw,1.1rem)}
.about__text b{color:var(--ink)}
.about__photo{border-radius:22px;overflow:hidden;border:1px solid var(--card-brd);
  box-shadow:0 34px 90px -34px rgba(50,150,230,.8)}
.about__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.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)}
@media(max-width:860px){.about__grid{grid-template-columns:1fr}.about__photo{max-width:560px;margin:0 auto}}

/* ── что входит в участие ── */
.perks{padding:clamp(40px,8vh,110px) var(--pad);max-width:1150px;margin:0 auto;text-align:center}
.perks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,28px);margin-top:clamp(26px,4vw,44px);text-align:left}
.perk{padding:clamp(22px,3vw,34px);border-radius:22px;background:var(--card);border:1px solid var(--card-brd);
  transition:transform .4s var(--ease),border-color .4s}
.perk:hover{transform:translateY(-4px);border-color:var(--ice)}
.perk__ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:var(--on-grad);margin-bottom:14px}
.perk__ic svg{width:28px;height:28px}
.perk h3{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2.6vw,1.3rem);margin-bottom:8px}
.perk p{color:var(--muted);font-size:.96rem}
@media(max-width:860px){.perks__grid{grid-template-columns:1fr}}

/* взнос */
.price{margin:clamp(26px,4vw,40px) auto 0;max-width:720px;padding:clamp(22px,3.4vw,34px);border-radius:24px;
  background:linear-gradient(180deg,rgba(18,71,127,.55),rgba(6,30,60,.55));border:1px solid var(--card-brd);
  display:flex;flex-direction:column;align-items:center;gap:12px}
.price__row{display:flex;gap:clamp(20px,6vw,70px);flex-wrap:wrap;justify-content:center}
.price__item{display:flex;flex-direction:column;align-items:center;gap:2px}
.price__item span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.price__item b{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,4.4vw,2.1rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price__note{color:var(--muted);font-size:.9rem;max-width:44ch}

/* ── направления ── */
.tracks{padding:clamp(50px,9vh,120px) var(--pad);max-width:1150px;margin:0 auto;text-align:center}
.tracks__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,28px);margin-top:clamp(26px,4vw,44px);text-align:left}
.track{padding:clamp(22px,3vw,34px);border-radius:22px;background:var(--card);border:1px solid var(--card-brd);
  transition:transform .4s var(--ease),border-color .4s}
.track:hover{transform:translateY(-4px);border-color:var(--ice)}
.track__ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:var(--on-grad);margin-bottom:14px}
.track__ic svg{width:28px;height:28px}
.track h3{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,3vw,1.6rem);margin-bottom:8px}
.track p{color:var(--muted);font-size:.96rem}
.track__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.track__list li{font-size:.8rem;padding:.42em 1em;border-radius:100px;background:rgba(255,255,255,.06);
  border:1px solid var(--card-brd);color:var(--frost)}
@media(max-width:760px){.tracks__grid{grid-template-columns:1fr}}

/* ── шаги ── */
.steps{padding:clamp(40px,8vh,110px) var(--pad);max-width:1150px;margin:0 auto;text-align:center}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,28px);margin-top:clamp(26px,4vw,44px);text-align:left}
.step{padding:clamp(22px,3vw,32px);border-radius:22px;background:var(--card);border:1px solid var(--card-brd)}
.step b{font-family:var(--display);font-size:1.5rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:8px 0 6px}
.step p{color:var(--muted);font-size:.94rem}
@media(max-width:760px){.steps__grid{grid-template-columns:1fr}}

/* ── галерея ── */
.gallery{padding:clamp(40px,8vh,110px) var(--pad);max-width:1250px;margin:0 auto;text-align:center}
.gallery__grid{column-count:4;column-gap:14px;margin-top:clamp(26px,4vw,44px)}
.gallery__grid img{width:100%;margin-bottom:14px;border-radius:16px;border:1px solid var(--card-brd);
  break-inside:avoid;transition:transform .5s var(--ease),border-color .5s}
@media(hover:hover){.gallery__grid img:hover{transform:scale(1.03);border-color:var(--ice)}}
@media(max-width:1000px){.gallery__grid{column-count:3}}
@media(max-width:620px){.gallery__grid{column-count:2}}

/* ── анкета ── */
.anketa{padding:clamp(50px,9vh,120px) var(--pad);max-width:1000px;margin:0 auto}
.anketa__card{max-width:840px;margin:0 auto;border-radius:28px;padding:clamp(30px,5vw,64px);text-align:center;
  background:linear-gradient(180deg,rgba(14,60,110,.76),rgba(4,20,42,.76));
  border:1px solid var(--card-brd);box-shadow:0 44px 110px -44px rgba(50,150,230,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.anketa .h2{margin:8px 0 10px}
.anketa__lead{color:var(--muted);margin-bottom:clamp(20px,3vh,28px)}

/* вкладки направления */
.tabs{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto clamp(14px,2vh,20px);
  padding:6px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid var(--card-brd)}
.tab{position:relative;z-index:1;flex:1 1 0;min-width:clamp(120px,32vw,168px);display:inline-flex;align-items:center;
  justify-content:center;gap:.5em;border:none;background:none;cursor:pointer;padding:.85em 1.4em;border-radius:100px;
  font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--muted);transition:color .3s}
.tab svg{width:20px;height:20px}
.tab.on{color:var(--on-grad)}
.tabs__pill{position:absolute;top:6px;left:6px;height:calc(100% - 12px);width:calc((100% - 12px) / 2);
  border-radius:100px;background:var(--grad);transition:transform .35s var(--ease);z-index:0}
.tabs[data-track="dance"] .tabs__pill{transform:translateX(100%)}

/* формат участия */
.segment{position:relative;display:flex;width:max-content;max-width:100%;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 1 0;min-width:clamp(86px,24vw,128px);border:none;background:none;cursor:pointer;
  padding:.7em 1.1em;border-radius:100px;font-family:var(--sans);font-weight:700;font-size:.9rem;
  color:var(--muted);transition:color .3s;white-space:nowrap}
.seg.on{color:var(--on-grad)}
.segment__pill{position:absolute;top:5px;left:5px;height:calc(100% - 10px);width:calc((100% - 10px) / 3);
  border-radius:100px;background:var(--grad);transition:transform .35s var(--ease);z-index:0}
.segment[data-mode="duet"] .segment__pill{transform:translateX(100%)}
.segment[data-mode="group"] .segment__pill{transform:translateX(200%)}

.form{display:flex;flex-direction:column;gap:16px;text-align:left}
/* атрибут hidden должен перебивать display у классов ниже */
[hidden]{display:none!important}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld>span{font-size:.76rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.fld>span i{color:var(--ice);font-style:normal}
.fld>span label{cursor:pointer}
.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;
  outline:none;transition:border-color .25s,box-shadow .25s}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23a3c3e2' 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(163,195,226,.62)}
.fld input:focus,.fld select:focus{border-color:var(--ice);box-shadow:0 0 0 3px rgba(159,227,255,.2)}
.fld option{background:#092a52;color:var(--ink)}
.fld input.err,.fld select.err{border-color:var(--warn);box-shadow:0 0 0 3px rgba(255,122,156,.25)}
.form__hint{font-size:.82rem;color:var(--muted);margin-top:-6px}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--muted);cursor:pointer;line-height:1.45}
.agree input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--ice-deep);margin-top:1px}
.agree.err span{color:var(--warn)}
.form__req{font-size:.78rem;color:var(--muted)}
.form__req i{color:var(--ice);font-style:normal}
.form__status{font-size:.88rem;color:var(--muted);min-height:1.2em;text-align:center}
.form__status.err{color:var(--warn)}
.form__success{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.success__ic{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--on-grad)}
.success__ic svg{width:34px;height:34px}
.form__success h3{font-family:var(--display);font-weight:700;font-size:1.4rem}
.form__success p{color:var(--muted)}
.policy-link{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--ice);
  text-decoration:underline;text-underline-offset:2px}
.policy-link:hover{color:var(--gold)}
@media(max-width:600px){.row{grid-template-columns:1fr}}
@media(max-width:560px){
  .segment,.tabs{width:100%}
  .seg{min-width:0;padding:.72em .2em;font-size:.82rem}
  .tab{min-width:0;font-size:.88rem;padding:.8em .6em}
}
@media(max-width:420px){.anketa__card{padding-left:18px;padding-right:18px}}

/* ── футер ── */
.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:18px}
.foot__logo{font-size:clamp(1.5rem,5.4vw,2.8rem)}
.foot__org{color:var(--muted);font-size:.95rem;line-height:1.65}
.foot__org a{color:var(--ice)}
.foot__vk{display:flex;flex-direction:column;align-items:center;gap:14px;margin:6px 0}
.foot__vk-label{font-weight:700;font-size:clamp(1rem,2.9vw,1.3rem);line-height:1.35;max-width:30ch}
.vk-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.05em 2.3em;border-radius:100px;background:var(--grad);color:var(--on-grad);font-weight:700;
  box-shadow:0 16px 46px -16px rgba(90,190,255,.8);transition:transform .35s var(--ease)}
.vk-cta:hover{transform:translateY(-3px)}
.vk-cta svg{width:26px;height:26px}
.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.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}
.vk-btn svg{width:22px;height:22px;color:var(--ice)}
.vk-btn:hover{border-color:var(--ice);color:var(--ice);transform:translateY(-2px)}
.foot__policy{font-size:.82rem}
.foot__copy{color:var(--muted);font-size:.78rem;opacity:.7}

/* ── модалка положения ── */
.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,12,26,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal__box{position:relative;max-width:660px;width:100%;max-height:86vh;overflow:auto;border-radius:24px;
  background:linear-gradient(180deg,#0d3b61,#051a33);border:1px solid var(--card-brd);
  box-shadow:0 44px 110px -34px rgba(50,150,230,.9);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(--ice);color:var(--ice)}
.modal__content h3{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,3.5vw,1.7rem);margin-bottom:16px;padding-right:34px}
.modal__content h4{font-family:var(--display);font-weight:700;font-size:1rem;margin:22px 0 10px}
.modal__content p{color:var(--muted);font-size:.92rem;line-height:1.65;margin-bottom:12px}
.reg__facts{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.reg__facts>div{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:12px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--card-brd)}
.reg__facts>div:last-child{border-bottom:none;padding-bottom:0}
.reg__facts dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.reg__facts dd{font-size:.95rem;color:var(--ink)}
.reg__ul,.reg__ol{margin:0 0 4px 0;padding-left:20px;color:var(--muted);font-size:.92rem;line-height:1.65}
.reg__ul li,.reg__ol li{margin-bottom:7px}
.reg__links{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 14px}
.reg__links .vk-btn{font-size:.86rem;padding:.72em 1.3em}
.reg__after{font-size:.88rem}
@media(max-width:520px){.reg__links{flex-direction:column}.reg__links .vk-btn{justify-content:center}
  .reg__facts>div{grid-template-columns:1fr;gap:2px}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-in]{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .intro{display:none}
}