/* «Проверка на нетакусика» quiz + Sfera keynote reveal. Deliberately a dark,
   single-look stage (the reveal is its own world). */

.hip-stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 18px; box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(201, 162, 74, 0.12), transparent 60%),
    linear-gradient(#0e0d14, #050509);
  color: #f0e9d8;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---- quiz ---- */
.hip-card {
  width: min(600px, 100%); text-align: center;
  background: rgba(20, 18, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px;
  padding: 34px 28px 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.hip-eyebrow {
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: #e0b64a; font-weight: 700; margin-bottom: 16px;
}
.hip-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.hip-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.hip-dot.on { background: #e0b64a; box-shadow: 0 0 8px rgba(224, 182, 74, 0.8); }
.hip-q {
  font-size: clamp(22px, 4.5vw, 32px); font-weight: 600; line-height: 1.28;
  text-wrap: balance; margin: 0 auto 8px; max-width: 22ch;
}
.hip-taunt { color: #d98a8a; font-size: 13px; font-style: italic; margin-top: 10px; }
.hip-yeses { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 18px; }
.hip-yes {
  font-family: inherit; cursor: pointer; font-size: 17px; font-weight: 600;
  color: #17130a; padding: 14px 22px; border: none; border-radius: 12px;
  background: linear-gradient(#ffe08a, #e6b23c);
  box-shadow: 0 6px 0 #a97c1e, 0 10px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.06s, box-shadow 0.06s;
}
.hip-yes:hover { transform: translateY(-2px); }
.hip-yes:active { transform: translateY(4px); box-shadow: 0 2px 0 #a97c1e; }
/* the correct answer starts tiny and unassuming, then grows huge (font-size set inline) */
.hip-no {
  display: block; margin: 6px auto 0; font-family: inherit; cursor: pointer;
  line-height: 1; font-weight: 800; letter-spacing: 0.02em;
  color: #7f8796; background: none; border: none; padding: 4px 8px;
  transition: color 0.12s, transform 0.06s;
}
.hip-no:hover { color: #eef2ff; transform: scale(1.03); }
.hip-no:active { transform: scale(0.97); }
.hip-card.shake { animation: hipShake 0.4s; }
@keyframes hipShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}

/* ---- keynote reveal ---- */
.hip-stage.hip-keynote {
  background: radial-gradient(100% 80% at 50% 42%, #14141f 0%, #030307 70%);
}
.hip-key-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hip-pass {
  font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: #7fe0a0;
  animation: hipRise 0.7s ease both;
}
.hip-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 6px 0; }
.hip-brand-word {
  font-size: clamp(72px, 20vw, 220px); font-weight: 200; line-height: 0.9;
  background: linear-gradient(100deg, #e8c98a 10%, #ffffff 35%, #9fd0ff 50%, #ffffff 65%, #e8c98a 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(159, 208, 255, 0.28));
  animation: hipBrandIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both, hipSheen 4.5s linear 1.7s infinite;
}
.hip-brand-tag {
  font-size: clamp(14px, 2.4vw, 19px); color: #b9b2a4; letter-spacing: 0.04em;
  animation: hipRise 0.9s ease 1.5s both;
}
.hip-continue {
  margin-top: 12px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  color: #0b0b12; padding: 13px 30px; border: none; border-radius: 999px;
  background: linear-gradient(#eef2ff, #cdd7ea);
  box-shadow: 0 10px 30px rgba(120, 160, 220, 0.3);
  animation: hipRise 0.8s ease 2.1s both;
  transition: transform 0.06s;
}
.hip-continue:hover { transform: translateY(-2px); }
.hip-continue:active { transform: translateY(1px); }

@keyframes hipRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hipSheen { from { background-position: 220% 0; } to { background-position: -220% 0; } }
@keyframes hipBrandIn {
  0% { opacity: 0; transform: scale(0.82); letter-spacing: 0.5em; filter: drop-shadow(0 0 0 transparent) blur(8px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: scale(1); letter-spacing: 0.06em; }
}
@media (prefers-reduced-motion: reduce) {
  .hip-brand-word, .hip-pass, .hip-brand-tag, .hip-continue, .hip-card.shake { animation: none; }
}

/* re-launch button in the console room, beside the mute button */
.check-btn {
  position: absolute; top: 12px; right: 62px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(20, 16, 12, 0.7); border: 2px solid #6b5a2f; color: #f0e4c4;
  font-size: 18px; cursor: pointer; line-height: 1;
  transition: transform 0.08s, border-color 0.1s;
}
.check-btn:hover { transform: translateY(-2px); border-color: #c9a24a; }
.check-btn:focus-visible { outline: 2px solid #efe0b0; outline-offset: 2px; }