/* v3: первый экран «Полярный круг». Фото стелы «66 параллель» в сумерках, поверх — тонкий круг-циферблат:
   точки на окружности — разделы и цены, в центре знак, по кругу медленно идёт подпись широты, тёплая точка — солнце над Салехардом сейчас. */

.dial {
  --D: min(72svh, 56vw, 780px);
  --R: calc(var(--D) * .48);
  --dial-ink: #EEF2F8;
  --dial-muted: rgba(226, 233, 244, .72);
  --dial-line: rgba(238, 242, 248, .62);
  --sun: #E8A47F;
  position: relative;
  min-height: max(100svh, 640px);
  margin-top: calc(-1 * var(--top-h));
  overflow: hidden;
  isolation: isolate;
  background: #131B41;
  color: var(--dial-ink);
}

/* фото: тонировка в сумерки, медленный дрейф, лёгкий параллакс от курсора */
.dial__photo { position: absolute; inset: 0; z-index: -2; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 1.2s var(--ease); }
.dial__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: saturate(.78) contrast(1.1) brightness(.6) hue-rotate(6deg); transform: scale(1.04); }
.dial::before, .dial::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dial::before { background: linear-gradient(180deg, rgba(10, 16, 40, .62) 0%, rgba(10, 16, 40, .08) 26%, rgba(10, 16, 40, 0) 52%, rgba(10, 16, 40, .5) 84%, rgba(10, 16, 40, .86) 100%); }
.dial::after { background: radial-gradient(circle at 50% calc(50% + var(--top-h) * .35), rgba(10, 16, 40, .58) 0, rgba(10, 16, 40, .42) calc(var(--D) * .36), rgba(10, 16, 40, .12) calc(var(--D) * .62), rgba(10, 16, 40, 0) calc(var(--D) * .9)), linear-gradient(rgba(19, 27, 65, .2), rgba(19, 27, 65, .2)); }
.dial__glow { position: absolute; z-index: -1; left: -10%; right: 40%; bottom: 6%; height: 40%; pointer-events: none; background: radial-gradient(closest-side, rgba(232, 164, 127, .34), rgba(232, 164, 127, 0)); filter: blur(8px); opacity: .6; }

/* сцена: круг по центру экрана */
.dial__stage { position: absolute; left: 50%; top: calc(50% + var(--top-h) * .35); width: var(--D); height: var(--D); transform: translate(-50%, -50%); }
.dial__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__circle { fill: none; stroke: var(--dial-line); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dial__legend { font: 500 15px/1 var(--f-mono); letter-spacing: .32em; text-transform: uppercase; fill: rgba(238, 242, 248, .6); }
.dial__spin { transform-box: view-box; transform-origin: 50% 50%; }
.dial__sun circle { fill: var(--sun); stroke: var(--sun); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dial__sun.is-down circle { fill: #131B41; }
.dial__sun { opacity: 0; transition: opacity .6s var(--ease); }
.dial__sun.is-set { opacity: 1; }
.dial__sun text { font: 500 20px/1 var(--f-mono); letter-spacing: .12em; fill: var(--sun); paint-order: stroke; stroke: rgba(10, 16, 40, .55); stroke-width: 4px; }
.on-dial .lat { opacity: 0; }
.lat { transition: opacity .4s var(--ease); }

.dial__core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; }
.dial__kind { font: 400 max(15px, calc(var(--D) * .034))/1 var(--f-sans); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(8, 12, 32, .5), 0 2px 22px rgba(8, 12, 32, .75); }
.dial__lat { margin-top: calc(var(--D) * .03); font-size: 12px; letter-spacing: .14em; color: rgba(238, 242, 248, .8); }
.dial__title { margin: calc(var(--D) * .03) 0 calc(var(--D) * .026); font: 300 calc(var(--D) * .102)/1 var(--f-sans); letter-spacing: .26em; margin-right: -.26em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(8, 12, 32, .7), 0 0 2px rgba(8, 12, 32, .4); }
.dial__sub { font: 400 max(15px, calc(var(--D) * .025))/1.3 var(--f-sans); letter-spacing: .04em; color: var(--dial-ink); text-shadow: 0 1px 14px rgba(8, 12, 32, .7); }

/* точки на окружности: угол --a от севера по часовой */
.dial__points { list-style: none; margin: 0; padding: 0; }
.dial__points li { --ang: calc(var(--a) * 1deg); position: absolute; left: calc(50% + sin(var(--ang)) * var(--R)); top: calc(50% - cos(var(--ang)) * var(--R)); width: 0; height: 0; }
.dial__points li::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--dial-ink); box-shadow: 0 0 0 4px rgba(19, 27, 65, .35); transition: transform .3s var(--ease); }
.dial__points a { position: absolute; display: grid; gap: 3px; width: max-content; max-width: 230px; color: var(--dial-ink); text-decoration: none; text-shadow: 0 1px 2px rgba(8, 12, 32, .55), 0 2px 22px rgba(8, 12, 32, .75); }
.dial__points li:has(a:hover)::before, .dial__points li:has(a:focus-visible)::before { transform: scale(1.6); }
.dial__name { font: 500 18px/1.2 var(--f-sans); letter-spacing: .01em; }
.dial__price { font: 300 36px/1 var(--f-sans); letter-spacing: -.01em; }
.dial__meta { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .03em; color: rgba(238, 242, 248, .84); }
.dial__points a:hover .dial__name, .dial__points a:focus-visible .dial__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* подписи отходят от точки наружу круга */
.dial__points .is-top a { left: 0; bottom: 18px; transform: translateX(-50%); justify-items: center; text-align: center; }
.dial__points .is-right a { left: 22px; top: 0; transform: translateY(-50%); }
.dial__points .is-left a { right: 22px; top: 0; transform: translateY(-50%); justify-items: end; text-align: right; }
.dial__points li.dial__cta::before { display: none; }
.dial__points li.dial__cta a { left: 0; top: 0; transform: translate(-50%, -50%); max-width: none; text-shadow: none; }

.dial .btn--light { background: #EEF2F8; color: #131B41; border-color: #EEF2F8; padding-inline: 34px; text-shadow: none; }
.dial .btn--light:hover { background: #fff; }

.dial__rates { display: none; }

.dial__foot { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-between; align-items: end; gap: 24px; font-size: 11.5px; letter-spacing: .03em; color: rgba(226, 233, 244, .78); }
.dial__foot a { color: inherit; }
.dial__now { text-align: right; }

/* шапка поверх фото, пока экран со стелой на виду */
.on-dial .top {
  --ink: #EEF2F8; --muted: rgba(226, 233, 244, .72); --line: rgba(238, 242, 248, .16); --line-strong: rgba(238, 242, 248, .42);
  --accent: #EEF2F8; --accent-ink: #131B41; --bg: #131B41;
  background: transparent; color: var(--ink); backdrop-filter: none;
}

/* живость: круг прорисовывается, точки проявляются, подпись медленно идёт по кругу, свет у горизонта дышит */
@media (prefers-reduced-motion: no-preference) {
  .dial__photo img { animation: dial-drift 46s ease-in-out infinite alternate; }
  .dial__glow { animation: dial-breathe 9s ease-in-out infinite alternate; }
  .dial__spin { animation: dial-spin 260s linear infinite; }
  .js .dial__circle { animation: dial-draw 1.9s var(--ease-io) .2s both; }
  .js .dial__core { animation: dial-rise 1.1s var(--ease) .5s both; }
  .js .dial__points li { animation: dial-rise .8s var(--ease) both; animation-delay: calc(.9s + var(--a) / 360 * 1.1s); }
  .js .dial__legend { animation: fade-in 1.2s var(--ease) 1.6s both; }
}
@keyframes dial-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.08) translate(-1%, -.8%); } }
@keyframes dial-breathe { from { opacity: .42; } to { opacity: .82; } }
@keyframes dial-spin { to { transform: rotate(360deg); } }
@keyframes dial-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dial-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* меньше 1024: круг без подписей, цены отдельной плашкой внизу экрана */
@media (max-width: 1023px) {
  .dial { --D: min(84vw, 52svh); min-height: max(100svh, 600px); }
  .dial__stage { top: calc(var(--top-h) + 24px + var(--D) / 2 + 4svh); }
  .dial__points li:not(.dial__cta) a { display: none; }
  .dial__points li.dial__cta { display: none; }
  .dial__title { font-size: calc(var(--D) * .098); letter-spacing: .16em; margin-right: -.16em; }
  .dial__kind { font-size: 14px; letter-spacing: .44em; margin-right: -.44em; }
  .dial__sub { font-size: 14px; }
  .dial__lat { font-size: 10.5px; }
  .dial__legend { font-size: 19px; }
  .dial__rates {
    position: absolute; left: var(--gut); right: var(--gut); bottom: calc(46px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid rgba(238, 242, 248, .3);
  }
  .dial__rate { display: grid; gap: 4px; padding: 14px 0 0; color: var(--dial-ink); text-decoration: none; }
  .dial__rate + .dial__rate { padding-left: 16px; border-left: 1px solid rgba(238, 242, 248, .3); }
  .dial__rate span { font: 400 11.5px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--dial-muted); }
  .dial__rate b { font: 200 30px/1 var(--f-sans); }
  .dial__rates .btn { grid-column: 1 / -1; margin-top: 16px; }
  .dial__foot { bottom: 12px; font-size: 10px; }
  .dial__now { display: none; }
}
@media (max-width: 767px) {
  .dial { min-height: 100svh; }
  .dial__rates { bottom: calc(118px + env(safe-area-inset-bottom)); }
  .dial__rates .btn { display: none; }
  .dial__foot { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .dial__credit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dial__credit-place { display: none; }
}

/* ловушка для ботов в форме заявки */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* без стыка со страницей: низ фото растворяется в цвет фона темы; при прокрутке фото отстаёт, круг гаснет и уезжает */
.dial__fade {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; height: clamp(200px, 36vh, 400px); pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg) 18%, transparent) 28%,
    color-mix(in srgb, var(--bg) 48%, transparent) 54%,
    color-mix(in srgb, var(--bg) 80%, transparent) 78%,
    var(--bg) 100%);
  transition: background .5s var(--ease);
}
.dial__photo { translate: 0 var(--sy, 0px); }
.dial__stage, .dial__rates, .dial__foot { opacity: var(--fo, 1); }
.dial__stage { translate: 0 var(--sy2, 0px); }
.dial__foot { color: color-mix(in srgb, var(--ink) 72%, transparent); }
@media (max-width: 767px) { .dial__fade { height: 110px; } }

/* нижняя полоса: на телефоне «Позвонить | Заявка» на всю ширину; на десктопе — плавающая капсула, появляется, когда экран со стелой ушёл */
.dock__d { display: none; }
@media (min-width: 768px) {
  .dock {
    display: flex; position: fixed; z-index: 40; left: 50%; bottom: 22px; gap: 8px; padding: 7px;
    border: 1px solid var(--line); border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 90%, transparent); box-shadow: 0 12px 40px rgba(8, 12, 32, .22);
    transform: translateX(-50%); transition: transform .45s var(--ease), opacity .35s var(--ease), background-color .5s var(--ease);
  }
  @supports (backdrop-filter: blur(4px)) { .dock { backdrop-filter: blur(12px); } }
  .dock a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font: 500 15px/1 var(--f-sans); white-space: nowrap; }
  .dock a .ph { font-size: 18px; }
  .dock .dock__main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .dock__m { display: none; }
  .dock__d { display: inline; }
  .dock.is-away, .on-dial .dock { opacity: 0; transform: translate(-50%, 140%); pointer-events: none; }
}

/* название номера на главной — ссылка в карточку */
.room__name a { color: inherit; text-decoration: none; }
.room__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (min-width: 768px) { .on-ring .dock { opacity: 0; transform: translate(-50%, 140%); pointer-events: none; } }
.foot__legal { margin-top: 18px; font-size: 12px; letter-spacing: .02em; color: var(--muted); }
/* на десктопе шапка липкая и в ней те же телефон и «Оставить заявку» — плавающая капсула не нужна */
@media (min-width: 1024px) { .dock { display: none !important; } }
/* после первого экрана — без лишней пустоты до «Номеров» */
.dial + .sec { margin-top: clamp(40px, 5vw, 80px); }
/* заголовок формы на ноутбуках не упирается в рамку формы */
@media (min-width: 1024px) and (max-width: 1366px) { .book__side .h2 { font-size: clamp(40px, 4vw, 56px); } }