/* ВЕРА КОЗЛОВА · ПУЛВЕРИЗАТОР · пре-гейт «вопросики» */

/* пока гейт активен — прячем сайт и скролл */
body.quiz-open{overflow:hidden}
body.quiz-open #cursor.big,body.quiz-open #cursor-trail.big{}

.quiz-gate{
  position:fixed;inset:0;
  z-index:9000;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 24px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(243,167,18,.16), transparent 55%),
    radial-gradient(100% 100% at 50% 110%, rgba(159,32,66,.30), transparent 60%),
    #030301;
  color:#FFFFF3;
  overflow:hidden;
  cursor:none;
}
.quiz-gate.is-hiding{
  animation:quizGateOut .55s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes quizGateOut{
  to{opacity:0;transform:scale(1.06);filter:blur(8px);visibility:hidden}
}

/* зернистость поверх — в тон сайту */
.quiz-gate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,243,.05) 1px, transparent 1px),
    radial-gradient(rgba(255,255,243,.05) 1px, transparent 1px);
  background-size:3px 3px,7px 7px;background-position:0 0,1px 2px;
  opacity:.5;mix-blend-mode:screen;
}

/* счётчик */
.quiz-counter{
  position:absolute;top:24px;right:24px;
  display:flex;align-items:center;gap:10px;
  font-family:'Rubik Mono One',monospace;
  font-size:14px;letter-spacing:.5px;
  background:#F3A712;color:#030301;
  padding:10px 16px;border-radius:999px;
  box-shadow:0 10px 30px -10px rgba(243,167,18,.6);
  z-index:3;
}
.quiz-counter .ico{font-size:16px;line-height:1}
.quiz-counter b{font-size:18px}
.quiz-counter.bump{animation:quizBump .45s cubic-bezier(.34,1.7,.5,1)}
@keyframes quizBump{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-4deg)}100%{transform:scale(1)}}

/* прогресс-точки */
.quiz-progress{
  position:absolute;top:30px;left:24px;display:flex;gap:8px;z-index:3;
}
.quiz-progress i{
  width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(255,255,243,.35);
  transition:.3s;
}
.quiz-progress i.done{background:#F3A712;border-color:#F3A712;transform:scale(1.1)}
.quiz-progress i.active{border-color:#FFFFF3;box-shadow:0 0 0 4px rgba(255,255,243,.12)}

/* сцена вопроса */
.quiz-stage{
  position:relative;z-index:2;
  width:min(760px,92vw);
  text-align:center;
}
.quiz-kicker{
  font-family:'Rubik Mono One',monospace;
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:#818AA3;margin-bottom:18px;
}
.quiz-q{
  font-family:'Bowlby One SC',system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(26px,4.6vw,56px);
  line-height:1.04;
  margin:0 0 36px;
  text-wrap:balance;
}
.quiz-q .hl{color:#F3A712}

.quiz-opts{
  display:flex;flex-direction:column;gap:14px;
  width:min(560px,92vw);margin:0 auto;
}
.quiz-opt{
  position:relative;
  display:flex;align-items:center;gap:14px;
  width:100%;
  padding:20px 22px;
  background:rgba(255,255,243,.04);
  border:3px solid #FFFFF3;
  border-radius:18px;
  color:#FFFFF3;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:clamp(15px,2vw,20px);
  text-align:left;
  cursor:none;
  transition:transform .16s cubic-bezier(.34,1.4,.5,1),background .16s,color .16s,border-color .16s,box-shadow .16s;
}
.quiz-opt .num{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:9px;
  background:#9F2042;color:#FFFFF3;
  font-family:'Rubik Mono One',monospace;font-size:13px;
  transition:.16s;
}
.quiz-opts .quiz-opt:hover{
  background:#F3A712;color:#030301;
  border-color:#F3A712;
  transform:translateX(8px) translateY(-2px);
  box-shadow:0 18px 40px -18px rgba(243,167,18,.7);
}
.quiz-opts .quiz-opt:hover .num{background:#030301;color:#F3A712}

/* появление опций со стаггером */
.quiz-opt{opacity:0;transform:translateY(16px)}
.quiz-opt.in{opacity:1;transform:translateY(0);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.quiz-q.in,.quiz-kicker.in{animation:quizQIn .5s ease both}
@keyframes quizQIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* удаление опции */
.quiz-opt.removing{
  animation:quizOptOut .42s cubic-bezier(.6,-0.2,.4,1) forwards;
  pointer-events:none;
}
@keyframes quizOptOut{
  30%{transform:translateX(10px) rotate(1.5deg)}
  100%{opacity:0;transform:translateX(-40px) scale(.7) rotate(-6deg);
       max-height:0;padding-top:0;padding-bottom:0;margin-top:-14px;border-width:0}
}

/* убегающая кнопка — плавно уезжает, не телепорт */
.quiz-opt.runaway{
  transition:left .32s cubic-bezier(.2,.8,.25,1),top .32s cubic-bezier(.2,.8,.25,1),
             transform .28s cubic-bezier(.2,.8,.25,1),background .16s,color .16s,border-color .16s;
  z-index:5;will-change:left,top,transform;
}
.quiz-opt.runaway:hover{transform:none}

/* дразнилка при побеге: быстро появляется, медленнее тает */
.quiz-taunt{
  position:fixed;z-index:9300;pointer-events:none;
  font-family:'Rubik Mono One',monospace;
  font-size:clamp(16px,2.4vw,28px);
  color:#F3A712;white-space:nowrap;
  text-shadow:0 3px 0 #9F2042,0 0 20px rgba(243,167,18,.45);
  animation:quizTaunt 1.05s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes quizTaunt{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}
  11%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(-3deg)} /* выскочило быстро */
  26%{transform:translate(-50%,-55%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-95%) scale(1) rotate(3deg)}    /* тает медленнее + всплывает */
}

/* ===== модалка-попап ===== */
.quiz-modal-layer{
  position:absolute;inset:0;z-index:6;
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.quiz-modal-layer.show{display:flex}
.quiz-modal-back{
  position:absolute;inset:0;background:rgba(3,3,1,.55);backdrop-filter:blur(3px);
}
.quiz-modal{
  position:relative;
  max-width:min(560px,92vw);
  background:#9F2042;color:#FFFFF3;
  border:4px solid #FFFFF3;
  border-radius:24px;
  padding:34px 30px;
  text-align:center;
  box-shadow:0 40px 80px -20px rgba(3,3,1,.7);
  animation:quizModalIn .42s cubic-bezier(.34,1.7,.5,1) both;
}
.quiz-modal.tone-orange{background:#F3A712;color:#030301;border-color:#030301}
@keyframes quizModalIn{from{opacity:0;transform:scale(.7) translateY(20px) rotate(-2deg)}to{opacity:1;transform:none}}
.quiz-modal.out{animation:quizModalOut .3s ease forwards}
@keyframes quizModalOut{to{opacity:0;transform:scale(.85) translateY(10px)}}
.quiz-modal-title{
  font-family:'Bowlby One SC',system-ui,sans-serif;font-weight:400;
  font-size:clamp(22px,3.4vw,38px);line-height:1.08;margin:0;
  text-wrap:balance;
}
.quiz-modal-sub{
  margin:16px 0 0;font-family:'Manrope';font-weight:700;
  font-size:clamp(14px,1.8vw,17px);opacity:.9;
}
.quiz-modal-ip{
  margin:14px auto 0;display:inline-block;
  font-family:'Rubik Mono One',monospace;font-size:clamp(16px,2.6vw,26px);
  background:#030301;color:#F3A712;padding:8px 16px;border-radius:12px;
  letter-spacing:1px;
}
.quiz-modal-btn{
  margin-top:24px;
  font-family:'Manrope';font-weight:800;font-size:clamp(15px,2vw,19px);
  padding:15px 28px;border-radius:14px;border:3px solid currentColor;
  background:#030301;color:#FFFFF3;cursor:none;
  transition:transform .15s,background .15s,color .15s;
}
.quiz-modal.tone-orange .quiz-modal-btn{background:#9F2042}
.quiz-modal-btn:hover{transform:translateY(-3px) scale(1.04)}

/* белая вспышка */
.quiz-flash{
  position:fixed;inset:0;z-index:9500;background:#fff;
  opacity:0;pointer-events:none;
}
.quiz-flash.boom{animation:quizFlash .5s ease-out}
@keyframes quizFlash{0%{opacity:0}8%{opacity:1}100%{opacity:0}}

/* тряска экрана на ловушках */
.quiz-gate.shake .quiz-stage{animation:quizShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes quizShake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px) rotate(-.4deg)}
  40%,60%{transform:translateX(8px) rotate(.4deg)}
}

/* конфетти-эмодзи */
.quiz-burst{position:fixed;left:0;top:0;z-index:9400;pointer-events:none;
  font-size:28px;will-change:transform,opacity;
  animation:quizParticle .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes quizParticle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(1) rotate(var(--br))}
}

/* финал */
.quiz-final .quiz-q{color:#F3A712}
.quiz-welcome{
  font-family:'Bowlby One SC',system-ui,sans-serif;font-weight:400;
  font-size:clamp(30px,6vw,76px);line-height:1;color:#FFFFF3;text-align:center;
  text-wrap:balance;animation:quizWelcome .7s cubic-bezier(.34,1.7,.5,1) both;
}
.quiz-welcome .big{display:block;color:#F3A712;margin-top:10px}
@keyframes quizWelcome{from{opacity:0;transform:scale(.6) rotate(-3deg)}to{opacity:1;transform:none}}

@media (max-width:560px){
  .quiz-counter{top:16px;right:16px;padding:8px 13px}
  .quiz-progress{top:22px;left:16px}
  .quiz-opt{padding:16px 18px}
}