/* ===== Театр Чудес — polish + light "magic" effects (Oct 2026) =====
   Everything animated is opt-in via prefers-reduced-motion: no-preference
   and paused offscreen / in hidden tabs by magic.js (.magic-paused). */

/* ---------- A11y basics ---------- */
:focus-visible { outline: 2px solid #e8c547; outline-offset: 3px; }
.horizontal-scroller:focus-visible { outline-offset: -2px; border-radius: 14px; }
.trust-chip-igry { min-height: 44px; display: inline-flex; align-items: center; }
.nav-links-mobile a.mobile-menu-igry { color: #ffdf8a; }

/* Footer contacts: moved to footer.css (shared with city pages) */

/* ---------- 2. Starfield canvas behind hero text ---------- */
.hero .magic-stars {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; opacity: .85;
}

/* ---------- 3. Sparkles (tap / cursor) ---------- */
.magic-spark {
  position: fixed; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  pointer-events: none; z-index: 9998; opacity: 0;
  background: radial-gradient(circle, #fff8d6 0 18%, #f6c453 38%, rgba(246,196,83,0) 70%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- 1. Shimmering gold on the hero title accent ----------
     A light band sweeps across the gold text for 1.8s every ~9s (triggered by magic.js,
     only while the hero is visible) — no animation exists between sweeps, so idle cost is zero. */
  .hero h1 .accent {
    background-image: linear-gradient(100deg, rgba(255,250,225,0) 0%, rgba(255,250,225,.95) 50%, rgba(255,250,225,0) 100%),
                      linear-gradient(90deg, #f5e6a0, var(--gold, #e8c547));
    background-size: 40% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: -80% 0, 0 0;
  }
  .hero h1 .accent.magic-shine { animation: magic-shimmer 1.8s ease-in-out 1; }
  @keyframes magic-shimmer {
    from { background-position: -80% 0, 0 0; }
    to { background-position: 180% 0, 0 0; }
  }

  /* ---------- 4. Scroll reveal (only when JS is active) ---------- */
  .magic-js .magic-reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--md, 0s); }
  .magic-js .magic-reveal.is-in { opacity: 1; transform: none; }

  /* ---------- 5. Magic-hat stars on CTA hover / focus ---------- */
  .magic-hat { position: relative; }
  .magic-hat::before, .magic-hat::after {
    content: "✦"; position: absolute; top: -4px; font-size: 14px; line-height: 1;
    color: #ffe08a; text-shadow: 0 0 8px rgba(255,214,102,.9);
    opacity: 0; pointer-events: none; transform: translate3d(0, 6px, 0) scale(.4);
  }
  .magic-hat::before { left: 18%; }
  .magic-hat::after { right: 16%; font-size: 10px; }
  @media (hover: hover) {
    .magic-hat:hover::before, .magic-hat:focus-visible::before { animation: magic-pop 1.1s ease-out infinite; }
    .magic-hat:hover::after, .magic-hat:focus-visible::after { animation: magic-pop 1.1s ease-out .45s infinite; }
  }
  @keyframes magic-pop {
    0% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.4) rotate(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(0, -22px, 0) scale(1.1) rotate(90deg); }
  }

  .hero.magic-paused h1 .accent.magic-shine { animation-play-state: paused; }
}

/* ---------- Desktop nav: stop items wrapping onto 2 lines (901–1360px) ---------- */
@media (min-width: 901px) {
  .navbar .logo, .navbar .logo span, .nav-links a, .nav-actions .phone, .nav-actions .messenger-btn, .nav-actions .btn { white-space: nowrap; }
  .nav-links { gap: clamp(14px, 1.5vw, 28px); }
}
@media (min-width: 1361px) { .navbar > .container { max-width: 1320px; } }
@media (min-width: 901px) and (max-width: 1360px) {
  .nav-actions .messenger-btn { display: none; } /* Max stays reachable: floating button + hero CTA */
  .nav-actions .phone small { display: none; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .nav-links { font-size: 13px; gap: 12px; }
  .nav-actions .phone { display: none; }
}