/* ——— Входное шоу: сепия-холст, карандашные буквы ——— */
#entrance {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(165deg, #faf8f4 0%, #f0ebe3 45%, #e8e0d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#entrance.done,
#lang-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.4s;
}

@media (prefers-reduced-motion: reduce) {
  .letter.show { animation: none !important; opacity: 1 !important; transform: none !important; }
  .logo-stage.spin-a .logo-letters,
  .logo-stage.spin-b .logo-letters { animation: none !important; }
}

.entrance-hill {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(107, 83, 68, 0.14) 0%, transparent 70%),
    url("../assets/theater-bg.png") center 30% / 120% auto no-repeat;
  filter: sepia(0.85) contrast(0.9);
  transition: opacity 2s ease;
}

.entrance-hill.visible { opacity: 0.35; }

.entrance-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.logo-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 14px);
  perspective: 800px;
  min-height: 120px;
}

.logo-stage.spin-a .logo-letters {
  animation: stage-spin 1.8s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

.logo-stage.spin-b .logo-letters {
  animation: stage-spin 1.6s cubic-bezier(0.45, 0, 0.2, 1) reverse forwards;
}

.logo-stage.shake .logo-letters {
  animation: word-shake 0.9s ease-in-out;
}

@keyframes stage-spin {
  0% { transform: rotateY(0deg) scale(1); }
  40% { transform: rotateY(180deg) scale(0.92); }
  100% { transform: rotateY(360deg) scale(1); }
}

@keyframes word-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-3px) rotate(-0.4deg); }
  28% { transform: translateX(4px) rotate(0.5deg); }
  44% { transform: translateX(-2px); }
  60% { transform: translateX(3px) rotate(-0.3deg); }
  76% { transform: translateX(-1px); }
}

.letter {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--sepia);
  text-stroke: 1.2px var(--sepia);
  opacity: 0;
  display: inline-block;
  letter-spacing: 0.02em;
  position: relative;
  filter: drop-shadow(0 0 0 rgba(107, 83, 68, 0));
}

.letter.wavy-a::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 42%;
  height: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 Q10 0 20 3 T40 3' fill='none' stroke='%236b5344' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  transition: opacity 0.6s 0.3s;
}

.letter.wavy-a.drawn::after { opacity: 1; }

.letter.show {
  opacity: 1;
  color: var(--sepia);
  -webkit-text-stroke: 0;
  text-stroke: 0;
  filter: drop-shadow(0 1px 0 rgba(107, 83, 68, 0.15));
}

.letter[data-anim="jump"].show {
  animation: L-jump 0.95s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.letter[data-anim="ray"].show {
  animation: L-ray 1.1s ease-out forwards;
}

.letter[data-anim="drop"].show {
  animation: L-drop 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.letter[data-anim="spin"].show {
  animation: L-spin 1s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.letter[data-anim="slide"].show {
  animation: L-slide 0.9s ease-out forwards;
}

.letter[data-anim="draw"].show {
  animation: L-draw 1.2s ease forwards;
}

.letter[data-anim="bounce"].show {
  animation: L-bounce 1s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}

@keyframes L-jump {
  0% { opacity: 0; transform: translateY(48px) scale(0.6); }
  55% { transform: translateY(-12px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes L-ray {
  0% { opacity: 0; transform: scale(0.2); filter: brightness(3) blur(4px); }
  30% { opacity: 0.8; filter: brightness(2); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes L-drop {
  0% { opacity: 0; transform: translateY(-60px) rotate(-8deg); }
  70% { transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes L-spin {
  0% { opacity: 0; transform: rotate(-220deg) scale(0); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes L-slide {
  0% { opacity: 0; transform: translateX(-80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes L-draw {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes L-bounce {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.12); }
  75% { transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.letter.focus-a {
  animation: letter-a-pulse 1.2s ease-in-out 2 !important;
  z-index: 5;
  color: var(--ink);
}

@keyframes letter-a-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* Встроенные gate-панели на сцене */
.entrance-gate {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, 20px);
  width: min(380px, 90vw);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0.9s;
  z-index: 10;
  text-align: center;
}

.entrance-gate.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.entrance-gate .gate-label {
  text-align: center;
  margin-bottom: 16px;
}

.entrance-gate .captcha-expr {
  margin: 16px 0 20px;
}

#btn-enter-final {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  visibility: hidden;
  z-index: 12;
  margin: 0;
}

#btn-enter-final.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pencil-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sepia-light), transparent);
  opacity: 0;
  animation: line-draw 1.5s ease forwards;
}

@keyframes line-draw {
  from { width: 0; opacity: 0; }
  to { opacity: 0.4; }
}