/* ============================================================
   НАКШАТРЫ — колесо 27 накшатр (ваниль). Стили и анимации.
   Размеры — через container-query-юниты (cqw), поэтому адаптив
   без JS. Подключается к #nakWheel (см. js/nakshatra-wheel.js).
   ============================================================ */

.nw-wheel {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  container-type: inline-size;
  font-family: 'Inter', 'Nunito Sans', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}

/* ---- анимации ---- */
@keyframes nw-spin   { from { transform: rotate(0); }   to { transform: rotate(360deg); } }
@keyframes nw-spin-r { from { transform: rotate(0); }   to { transform: rotate(-360deg); } }
@keyframes nw-breathe{ 0%,100% { transform: scale(1); filter: brightness(1); }
                       50%     { transform: scale(1.05); filter: brightness(1.15); } }
@keyframes nw-tile-in{ from { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
                       to   { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes nw-tip-in { from { opacity: 0; transform: translateY(6px); }
                       to   { opacity: 1; transform: translateY(0); } }

/* ---- кольца ---- */
.nw-rings { position: absolute; inset: 0; pointer-events: none; }
.nw-ring-out { position: absolute; inset: 0; transform-origin: center; animation: nw-spin 160s linear infinite; }
.nw-ring-in  { position: absolute; inset: 0; transform-origin: center; animation: nw-spin-r 220s linear infinite; }

/* ---- центральное лого (дышит) ---- */
.nw-logo-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.nw-logo { animation: nw-breathe 6s ease-in-out infinite; display: flex; }
.nw-logo svg { width: 16.5cqw; height: 16.5cqw; display: block; }

/* ---- подпись над центром ---- */
.nw-caption {
  position: absolute; left: 50%; top: 31.5%; transform: translate(-50%,-100%);
  font-size: clamp(8.5px, 2cqw, 13px);
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--nw-gold, #c9a45c);
  white-space: nowrap; pointer-events: none;
}

/* ---- плитки-глифы ---- */
.nw-tile {
  position: absolute;
  box-sizing: border-box;
  width: 8.8cqw; aspect-ratio: 1 / 1;
  transform: translate(-50%,-50%);
  border-radius: 24%;
  background: rgba(201,164,92,0.05);
  border: 1px solid rgba(201,164,92,0.42);
  cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3cqw;
  transition: transform .25s cubic-bezier(.3,1.3,.4,1), box-shadow .25s, background .25s, border-color .25s;
  z-index: 2;
}
.nw-tile.nw-enter { animation: nw-tile-in .5s cubic-bezier(.3,1.3,.4,1) backwards; }
.nw-tile:hover, .nw-tile.is-active {
  background: rgba(201,164,92,0.16);          /* подсветка — только золотая */
  border-color: #c9a45c;
  box-shadow: 0 0 26px rgba(201,164,92,0.40);
  transform: translate(-50%,-50%) scale(1.16);
  z-index: 6;
}
.nw-glyph { display: flex; align-items: center; justify-content: center; }
.nw-glyph svg { width: 3.75cqw; height: 3.75cqw; display: block; }
.nw-glyph svg path { stroke: #cda95f; }
.nw-tile:hover .nw-glyph svg path, .nw-tile.is-active .nw-glyph svg path { stroke: #f0d690; }
.nw-num { font-size: 1.15cqw; line-height: 1; letter-spacing: 0.04em; color: rgba(201,164,92,0.55); }
.nw-tile:hover .nw-num, .nw-tile.is-active .nw-num { color: #e8c984; }

/* ---- луч от звезды к плитке ---- */
.nw-ray { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.nw-ray-line { transition: opacity .2s; }

/* ---- всплывашка ---- */
/* Оверлей размером ровно во вьюпорт с overflow:hidden — физически обрезает
   любой вылет попапа за экран → страница НЕ может получить гориз. скролл
   (чёрную полосу справа) даже при дёргании viewport на разблокировке. */
.nw-overlay {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 99998;
}
.nw-tip {
  position: absolute; z-index: 1; pointer-events: none;
  box-sizing: border-box;
  background: rgba(30,16,64,0.90);   /* цвет карточек сайта, не чёрный */
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(201,164,92,0.42); border-radius: 16px; padding: 13px 15px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  animation: nw-tip-in .2s ease both;
}
.nw-tip__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nw-tip__ico {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(201,164,92,0.10); border: 1px solid rgba(201,164,92,0.42);
  display: flex; align-items: center; justify-content: center;
}
.nw-tip__no { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: #c9a45c; }
.nw-tip__name { font-family: 'Playfair Display', 'Cormorant Garamond', serif; font-size: 21px; line-height: 1; color: #f2ead9; margin-top: 2px; }
.nw-tip__key { font-size: 12.5px; color: rgba(242,234,217,0.62); line-height: 1.45; margin-bottom: 10px; }
.nw-tip__row { display: flex; gap: 14px; font-size: 11px; color: #f2ead9; }
.nw-tip__row span { color: rgba(242,234,217,0.42); }
.nw-tip__tail {
  position: absolute; left: 50%; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg); background: rgba(30,16,64,0.90);
}
.nw-tip--top .nw-tip__tail { bottom: -6px; border-right: 1px solid rgba(201,164,92,0.42); border-bottom: 1px solid rgba(201,164,92,0.42); }
.nw-tip--bottom .nw-tip__tail { top: -6px; border-left: 1px solid rgba(201,164,92,0.42); border-top: 1px solid rgba(201,164,92,0.42); }

/* ---- доступность ---- */
@media (prefers-reduced-motion: reduce) {
  .nw-ring-out, .nw-ring-in, .nw-logo, .nw-tile, .nw-tip { animation: none !important; }
}