/* ============================================================
   SCROLL HINTS — стилове (езикът на сайта: крем/оранжево/злато)
   Появяване: бавен premium fade; hover: оранжев glow като
   активните точки в менюто (#E58A2E / #ffb15a).
   ============================================================ */

/* ── стрелка на първата разгъвка (сочи посоката на разлистване) ── */
.mm-hint-arrow {
  position: fixed; right: clamp(18px, 3vw, 46px); top: 50%; margin-top: -28px;
  z-index: 8990;                       /* над сцената, под менюто (9001) */
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 12, 8, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(250, 242, 227, .5);
  color: #faf2e3; cursor: pointer; padding: 0;
  /* контраст върху светли кадри без смяна на цвета */
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s ease, visibility 1.1s,
              border-color .35s ease, background .35s ease,
              color .35s ease, box-shadow .35s ease;
}
.mm-hint-arrow svg { width: 22px; height: 22px; display: block; }
.mm-hint-arrow svg path {
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.mm-hint-arrow.on {
  opacity: 1; visibility: visible;
  animation: mm-hint-float 2.6s ease-in-out infinite;
}
/* float чрез независимото `translate` свойство → не пипа transform (центриране)
   и се композира чисто със scale/rotate от editor-а */
@keyframes mm-hint-float { 0%, 100% { translate: 0 0; } 50% { translate: 7px 0; } }
.mm-hint-arrow:hover {
  border-color: #E58A2E; color: #ffb15a;
  background: rgba(36, 26, 11, .45);
  box-shadow: 0 0 14px rgba(229, 138, 46, .5), 0 0 40px rgba(229, 138, 46, .22);
}
.mm-hint-arrow.on:hover {
  animation: mm-hint-float 2.6s ease-in-out infinite,
             mm-hint-glow 1.6s ease-in-out infinite;
}
@keyframes mm-hint-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(229, 138, 46, .45), 0 0 32px rgba(229, 138, 46, .18); }
  50%      { box-shadow: 0 0 24px rgba(229, 138, 46, .85), 0 0 56px rgba(229, 138, 46, .32); }
}

/* ── текстова подсказка (втора разгъвка → нататък) ── */
.mm-hint-text {
  position: fixed; left: 50%; bottom: clamp(20px, 4.5vh, 52px);
  z-index: 8990;
  transform: translate(-50%, 16px);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'Manrope', sans-serif; font-weight: 600;
  font-size: clamp(11px, .9vw, 13px);
  letter-spacing: .38em; text-indent: .38em;   /* като "SCROLL TO STEP IN" на началния екран */
  color: #faf2e3;
  /* винаги на ЕДИН ред + четимост върху светли кадри: цветът остава,
     но с плътен тъмен ореол около буквите */
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.65), 0 0 30px rgba(0,0,0,.45);
  cursor: pointer; user-select: none;
  opacity: 0; visibility: hidden;
  transition: opacity 1.4s ease, transform 1.4s ease, visibility 1.4s, color .3s ease;
}
.mm-hint-text .mm-hint-label { white-space: nowrap; }
.mm-hint-text.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mm-hint-caret {
  font-size: 15px; letter-spacing: 0; text-indent: 0; line-height: 1;
  color: #E58A2E;
  text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 10px rgba(229, 138, 46, .6);
  animation: mm-caret-bob 2.2s ease-in-out infinite;
}
@keyframes mm-caret-bob {
  0%, 100% { transform: translateY(0);   opacity: .7; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.mm-hint-text:hover { color: #ffb15a; }
.mm-hint-text:hover .mm-hint-caret { text-shadow: 0 0 18px rgba(229, 138, 46, .95); }

@media (max-width: 760px) {
  .mm-hint-arrow { right: 12px; width: 48px; height: 48px; margin-top: -24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-hint-arrow.on, .mm-hint-arrow.on:hover, .mm-hint-caret { animation: none; }
}