/* === SIM INTRO — три экрана: ИНЬ-ЯН ЗАГРУЗКА / ВСЕЛЕННАЯ / ТЫ ГОТОВ === */
#sim-intro {
  position: fixed; inset: 0; z-index: 9000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  transition: opacity 1.2s ease, transform 1.2s ease;
  overflow: hidden;
}
#sim-intro.gone { opacity: 0; pointer-events: none; transform: scale(1.08); }

#sim-intro-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1;
}

.sim-intro-stage {
  position: relative; z-index: 2; text-align: center;
  width: 100%; max-width: 1100px;
  height: 100vh;
}

.s-stage-1, .s-stage-2, .s-stage-3 {
  opacity: 0; transition: opacity .8s; pointer-events: none;
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.s-stage-1.show, .s-stage-2.show, .s-stage-3.show {
  opacity: 1; pointer-events: auto;
}

/* === Stage 1: иньянь-загрузчик === */
.s-stage-1 { height: 100vh; }
#sim-yinyang-canvas {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.s-yy-rings {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle, transparent 268px, rgba(127,255,127,.15) 270px, transparent 274px),
    radial-gradient(circle, transparent 318px, rgba(127,255,127,.09) 320px, transparent 324px),
    radial-gradient(circle, transparent 358px, rgba(127,255,127,.05) 360px, transparent 364px);
  animation: s-yy-rings-rot 40s linear infinite;
}
@keyframes s-yy-rings-rot { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 760px) {
  .s-yy-rings {
    width: 92vw; height: 92vw;
    max-width: 380px; max-height: 380px;
    background:
      radial-gradient(circle, transparent 38%, rgba(127,255,127,.15) 39%, transparent 41%),
      radial-gradient(circle, transparent 56%, rgba(127,255,127,.09) 57%, transparent 59%),
      radial-gradient(circle, transparent 74%, rgba(127,255,127,.05) 75%, transparent 77%);
  }
}

.s-yy-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  width: 360px;
  height: 360px;
  padding: 60px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.s-yy-center::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(0,8,4,.92) 0%,
      rgba(0,8,4,.85) 28%,
      rgba(0,8,4,.55) 52%,
      rgba(0,8,4,.22) 72%,
      rgba(0,8,4,0) 92%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: radial-gradient(circle at center,
    #000 0%, #000 35%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.25) 80%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at center,
    #000 0%, #000 35%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.25) 80%, rgba(0,0,0,0) 100%);
  z-index: -1;
}
.s-yy-center::after {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(0,8,4,.4) 0%,
    rgba(0,8,4,.18) 50%,
    rgba(0,8,4,0) 80%);
  z-index: -2;
  pointer-events: none;
}
.s-yy-tag, .s-yy-phrase, .s-yy-bar, .s-yy-pct {
  position: relative;
  z-index: 1;
}
.s-yy-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .35em;
  color: #ffffff;
  margin-bottom: 18px;
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,.95);
}
.s-yy-phrase {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #ffffff;
  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 6px rgba(0,0,0,1),
    0 0 14px rgba(0,0,0,1),
    0 0 24px rgba(127,255,127,.7),
    0 0 36px rgba(127,255,127,.4);
  height: 1.4em;
  line-height: 1.4em;
  white-space: nowrap;
  margin-bottom: 30px;
  transition: opacity .9s ease, transform .9s ease, filter .9s ease;
}
.s-yy-phrase.swap { opacity: 0; transform: translateY(8px); filter: blur(6px); }
.s-yy-bar {
  width: 220px; height: 1px;
  background: rgba(127,255,127,.18);
  margin: 0 auto;
  position: relative; overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,.95);
}
.s-yy-bar i {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--green), #fff, var(--green), transparent);
  box-shadow: 0 0 12px var(--green);
  transition: width .25s linear;
}
.s-yy-pct {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .3em;
  color: #ffffff;
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 0 0 16px rgba(127,255,127,.4);
}

/* === Stage 2: вселенная === */
.s-universe-line {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.2;
  font-weight: 300;
  color: var(--green-bright);
  letter-spacing: -.005em;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.s-universe-line em { font-style: italic; color: var(--green); text-shadow: 0 0 30px rgba(127,255,127,.5); }
.s-universe-line .word {
  display: inline-block;
  opacity: 0; filter: blur(8px);
  transform: translateY(6px);
  animation: s-wordIn 1s forwards;
}
@keyframes s-wordIn { to { opacity: 1; filter: none; transform: none; } }
.s-universe-counter {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .35em; opacity: .55;
  color: var(--green-bright);
}
.s-universe-counter span { color: var(--green); }

/* === Stage 3: ты готов === */
.s-ready-q {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 400;
  color: #fff;
  margin-bottom: 60px;
  letter-spacing: -.01em;
}
.s-ready-q em { font-style: italic; color: var(--green); }
.s-ready-choices {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
}
.s-ready-choices button {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  padding: 22px 44px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .35em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  min-width: 220px;
  position: relative;
}
.s-ready-choices button:hover {
  background: var(--green);
  color: #000;
  box-shadow: 0 0 40px rgba(127,255,127,.5);
  letter-spacing: .4em;
}
.s-ready-choices button.no {
  border-color: rgba(127,255,127,.25);
  color: rgba(127,255,127,.55);
  opacity: .5;
}
.s-ready-choices button.no:hover {
  border-color: var(--green);
  background: transparent;
  color: var(--green);
  opacity: 1;
  box-shadow: 0 0 30px rgba(127,255,127,.2);
}
.s-ready-hint {
  margin-top: 40px;
  font-size: 10px; letter-spacing: .3em; opacity: .4;
}

@media (max-width: 760px) {
  .s-ready-q { font-size: clamp(42px, 14vw, 72px); margin-bottom: 40px; }
  .s-ready-choices button { padding: 18px 36px; font-size: 16px; min-width: 110px; }
  .s-universe-line { font-size: clamp(24px, 7vw, 44px); padding: 0 18px; }
  .s-universe-counter { font-size: 11px; }
  .s-yy-phrase { font-size: 16px; }
  .s-yy-bar { width: 180px; }
}

/* === Запрет выделения/копирования на интро (iOS long-press, drag) === */
#sim-intro,
#sim-intro * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

/* Подсветка при удержании — ×5 ярче, без прямоугольной рамки */
#sim-intro.pressing #sim-yinyang-canvas { filter: brightness(2.2) saturate(1.5); }
#sim-intro #sim-yinyang-canvas { transition: filter .22s ease; }
#sim-intro.pressing .s-yy-bar i {
  background: #fff !important;
  box-shadow:
    0 0 30px #fff,
    0 0 60px #d8ffd8,
    0 0 110px rgba(127,255,127,1),
    0 0 180px rgba(127,255,127,.85) !important;
}
#sim-intro.pressing .s-yy-pct {
  color: #fff !important;
  text-shadow:
    0 0 12px #fff,
    0 0 30px rgba(216,255,216,1),
    0 0 70px rgba(127,255,127,1),
    0 0 130px rgba(127,255,127,.9),
    0 0 220px rgba(127,255,127,.7);
}
#sim-intro.pressing .s-yy-phrase {
  color: #fff !important;
  text-shadow:
    0 0 10px #fff,
    0 0 24px rgba(216,255,216,1),
    0 0 60px rgba(127,255,127,1),
    0 0 120px rgba(127,255,127,.8),
    0 0 200px rgba(127,255,127,.6);
}
#sim-intro.pressing .s-yy-tag {
  color: #fff !important;
  text-shadow:
    0 0 8px #d8ffd8,
    0 0 22px rgba(127,255,127,1),
    0 0 60px rgba(127,255,127,.7);
}
#sim-intro .s-yy-bar i, #sim-intro .s-yy-pct, #sim-intro .s-yy-phrase, #sim-intro .s-yy-tag { transition: color .18s ease, background .18s ease, box-shadow .18s ease, text-shadow .18s ease; }