:root {
  --page-width: 1440px;
  --page-height: 7859px;
  --green: #008b15;
  --focus: #1457ff;
  --overlay: rgb(0 0 0 / 0.55);
  --accent: #ffc24d;
  --accent-strong: #ffb229;
  --accent-soft: rgb(255 194 77 / 0.28);
  --motion-fast: 140ms;
  --motion-medium: 280ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-press: cubic-bezier(0.2, 0, 0.2, 1);
  --shadow-lift: 0 18px 46px rgb(0 0 0 / 0.16);
  --shadow-warm: 0 18px 42px rgb(255 178 41 / 0.24);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.festival-page {
  width: 100%;
  overflow-x: hidden;
  background: #fff;
}

.festival-page__artboard {
  position: relative;
  width: min(100%, var(--page-width));
  margin: 0 auto;
  line-height: 0;
  background: #fff;
}

.festival-page__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

.hotspot {
  --hover-transform: translate3d(0, -2px, 0);
  --active-transform: translate3d(0, 0, 0) scale(0.985);
  --feedback-transform: scaleX(0.24);
  --feedback-hover-transform: scaleX(1);
  --ambient-opacity: 0;
  --ambient-inset: -8px;
  --ambient-radius: inherit;
  position: absolute;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  font: 0/0 a;
  cursor: pointer;
  transform: translateZ(0);
  transform-origin: center;
  transition:
    box-shadow var(--motion-medium) var(--motion-ease),
    opacity var(--motion-fast) ease,
    transform var(--motion-medium) var(--motion-ease);
  will-change: transform;
}

.hotspot::before,
.hotspot::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.hotspot::before {
  inset: var(--ambient-inset);
  border-radius: var(--ambient-radius);
  background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / 0.32), transparent 52%),
    radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 68%);
  filter: blur(14px);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--motion-medium) ease,
    transform var(--motion-slow) var(--motion-ease);
}

.hotspot::after {
  inset: 0;
  opacity: 0;
  transform: var(--feedback-transform);
  transform-origin: center;
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-medium) var(--motion-ease),
    opacity var(--motion-fast) ease,
    transform var(--motion-medium) var(--motion-ease);
}

.hotspot:hover,
.hotspot:focus-visible {
  transform: var(--hover-transform);
}

.hotspot:hover::before,
.hotspot:focus-visible::before {
  opacity: var(--ambient-opacity);
  transform: scale(1);
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
  opacity: 1;
  transform: var(--feedback-hover-transform);
}

.hotspot:active {
  transform: var(--active-transform);
  transition-duration: 90ms;
}

.hotspot:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.hotspot--dogs {
  left: 29.79%;
  top: 0.78%;
  width: 4.1%;
  height: 0.45%;
}

.hotspot--dogs::after,
.hotspot--partners::after,
.hotspot--market::after,
.hotspot--shelter::after,
.hotspot--faq::after,
.hotspot--contacts::after {
  top: auto;
  bottom: 6%;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #ffe07a 52%, var(--accent-strong));
  box-shadow: 0 6px 14px rgb(255 178 41 / 0.34);
}

.hotspot--dogs:hover::after,
.hotspot--partners:hover::after,
.hotspot--market:hover::after,
.hotspot--shelter:hover::after,
.hotspot--faq:hover::after,
.hotspot--contacts:hover::after,
.hotspot--dogs:focus-visible::after,
.hotspot--partners:focus-visible::after,
.hotspot--market:focus-visible::after,
.hotspot--shelter:focus-visible::after,
.hotspot--faq:focus-visible::after,
.hotspot--contacts:focus-visible::after {
  transform: scaleX(1);
}

.hotspot--partners {
  left: 38.61%;
  top: 0.78%;
  width: 5.35%;
  height: 0.45%;
}

.hotspot--market {
  left: 48.68%;
  top: 0.78%;
  width: 3.96%;
  height: 0.45%;
}

.hotspot--shelter {
  left: 57.22%;
  top: 0.78%;
  width: 5.28%;
  height: 0.45%;
}

.hotspot--faq {
  left: 67.15%;
  top: 0.78%;
  width: 5%;
  height: 0.45%;
}

.hotspot--contacts {
  left: 76.88%;
  top: 0.78%;
  width: 5.35%;
  height: 0.45%;
}

.hotspot--klepa,
.hotspot--belka,
.hotspot--tolik,
.hotspot--persey {
  top: 31.58%;
  width: 18.2%;
  height: 5.05%;
  border-radius: 30px;
}

.hotspot--klepa {
  left: 8.8%;
}

.hotspot--belka {
  left: 29.65%;
}

.hotspot--tolik {
  left: 50.35%;
}

.hotspot--persey {
  left: 71.05%;
}

.dog-card-hotspot::after {
  inset: 0;
  border: 4px solid var(--accent);
  border-radius: inherit;
  background: transparent;
  box-shadow:
    var(--shadow-lift),
    var(--shadow-warm),
    inset 0 1px 0 rgb(255 255 255 / 0.55);
  transform: scale(0.985);
}

.dog-card-hotspot {
  --ambient-opacity: 0;
  --ambient-inset: -14px;
  --hover-transform: translate3d(0, -6px, 0);
  --active-transform: translate3d(0, -2px, 0) scale(0.99);
  --feedback-hover-transform: scale(1);
}

.dog-card-hotspot.is-active::after {
  opacity: 1;
  transform: scale(1);
}

.hotspot--menu-dogs,
.hotspot--menu-activities,
.hotspot--menu-market,
.hotspot--menu-shelter,
.hotspot--menu-djs,
.hotspot--menu-faq {
  --ambient-opacity: 0.45;
  --ambient-inset: -12px;
  --hover-transform: translate3d(0, -2px, 0);
  --active-transform: translate3d(0, 0, 0) scale(0.99);
  --feedback-hover-transform: scale(1);
  height: 0.58%;
  border-radius: 999px;
}

.hotspot--menu-dogs {
  left: 25.83%;
  top: 12.75%;
  width: 48.4%;
}

.hotspot--menu-activities {
  left: 24.58%;
  top: 13.65%;
  width: 51.12%;
}

.hotspot--menu-market {
  left: 36.88%;
  top: 14.65%;
  width: 26.4%;
}

.hotspot--menu-shelter {
  left: 33.89%;
  top: 15.55%;
  width: 32.1%;
}

.hotspot--menu-djs {
  left: 43.4%;
  top: 16.55%;
  width: 13.13%;
}

.hotspot--menu-faq {
  left: 36.25%;
  top: 17.45%;
  width: 27.3%;
}

.hotspot--menu-dogs::after,
.hotspot--menu-activities::after,
.hotspot--menu-market::after,
.hotspot--menu-shelter::after,
.hotspot--menu-djs::after,
.hotspot--menu-faq::after {
  inset: -3px -10px;
  width: auto;
  height: auto;
  border: 3px solid #0b940e;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(11 148 14 / 0.14), rgb(11 148 14 / 0.04));
  box-shadow:
    0 10px 22px rgb(11 148 14 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.28);
  transform: scale(0.985);
}

.hotspot--cards-prev,
.hotspot--cards-next {
  --ambient-opacity: 0.72;
  --ambient-inset: -10px;
  --hover-transform: scale(1.08);
  --active-transform: scale(0.96);
  --feedback-hover-transform: scale(1);
  top: 33.55%;
  width: 4.5%;
  height: 1.4%;
  border-radius: 50%;
}

.hotspot--cards-prev::after,
.hotspot--cards-next::after {
  inset: 6%;
  border: 4px solid var(--accent-strong);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgb(255 255 255 / 0.36), rgb(255 194 77 / 0.08) 58%, transparent 70%);
  box-shadow:
    0 10px 22px rgb(0 0 0 / 0.14),
    0 10px 24px rgb(255 178 41 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.55);
  transform: scale(0.9);
}

.hotspot--cards-prev { left: 1.7%; }
.hotspot--cards-next { left: 93.8%; }

.hotspot--partners-row {
  --ambient-opacity: 0.46;
  --ambient-inset: -14px;
  --hover-transform: translate3d(0, -3px, 0);
  --active-transform: translate3d(0, -1px, 0) scale(0.995);
  --feedback-hover-transform: scale(1);
  left: 8%;
  top: 52.85%;
  width: 84%;
  height: 1.55%;
  border-radius: 24px;
}

.hotspot--market-logos {
  --ambient-opacity: 0.46;
  --ambient-inset: -14px;
  --hover-transform: translate3d(0, -3px, 0);
  --active-transform: translate3d(0, -1px, 0) scale(0.995);
  --feedback-hover-transform: scale(1);
  left: 17.5%;
  top: 59.85%;
  width: 65%;
  height: 4%;
  border-radius: 24px;
}

.hotspot--shelter-site {
  --ambient-opacity: 0.58;
  --ambient-inset: -10px;
  --hover-transform: translate3d(0, -3px, 0);
  --active-transform: translate3d(0, -1px, 0) scale(0.99);
  --feedback-hover-transform: scale(1);
  left: 40.2%;
  top: 72.52%;
  width: 17.2%;
  height: 0.55%;
  border-radius: 999px;
}

.hotspot--shelter-site::after {
  inset: 0;
  border: 3px solid var(--accent-strong);
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.16), rgb(255 194 77 / 0.08));
  box-shadow:
    0 10px 22px rgb(0 0 0 / 0.12),
    0 10px 24px rgb(255 178 41 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.45);
  transform: scale(0.985);
}

.hotspot--partners-row::after,
.hotspot--market-logos::after {
  inset: 0;
  border: 3px solid var(--accent-strong);
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.18), rgb(255 194 77 / 0.06) 42%, transparent 78%);
  box-shadow:
    0 16px 34px rgb(0 0 0 / 0.12),
    0 16px 34px rgb(255 178 41 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.5);
  transform: scale(0.99);
}

.hotspot--contact-1,
.hotspot--contact-2,
.hotspot--contact-3,
.hotspot--contact-4 {
  --ambient-opacity: 0.22;
  --ambient-inset: -4px;
  --hover-transform: translate3d(0, -2px, 0);
  --active-transform: translate3d(0, 0, 0) scale(0.985);
  top: 98.35%;
  height: 0.45%;
  border-radius: 999px;
}

.hotspot--contact-1 {
  left: 9.65%;
  width: 14.95%;
}

.hotspot--contact-2 {
  left: 33.55%;
  width: 11.2%;
}

.hotspot--contact-3 {
  left: 54.24%;
  width: 13.9%;
}

.hotspot--contact-4 {
  left: 75.55%;
  width: 18.8%;
}

.hotspot--contact-1::after,
.hotspot--contact-2::after,
.hotspot--contact-3::after,
.hotspot--contact-4::after {
  top: auto;
  bottom: 0;
  height: 4px;
  background: var(--accent);
}

.anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.anchor--dogs {
  top: 21.8%;
}

.anchor--activities {
  top: 36.2%;
}

.anchor--partners {
  top: 35%;
}

.anchor--market {
  top: 48.5%;
}

.anchor--shelter {
  top: 62.5%;
}

.anchor--faq {
  top: 74.6%;
}

.anchor--djs {
  top: 85.7%;
}

.anchor--contacts {
  top: 94%;
}

.dog-status {
  position: absolute;
  left: 35%;
  top: 34.9%;
  width: 30%;
  min-height: 34px;
  border-radius: 999px;
  background: rgb(255 194 77 / 0.94);
  color: #000;
  font: 800 18px/34px Arial, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.dog-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-section {
  position: absolute;
  left: 0;
  top: 74.6%;
  z-index: 3;
  width: 100%;
  min-height: 12%;
  padding: 2.1% 8.1% 1.6%;
  background: #fff;
  color: #111;
  font-family: Arial, sans-serif;
  line-height: 1.2;
}

.faq-section__flower {
  position: absolute;
  top: 1.2%;
  right: 8.6%;
  width: 13.1%;
  height: auto;
  filter: hue-rotate(78deg) saturate(2.4) brightness(0.68);
  pointer-events: none;
}

.faq-section__title {
  margin: 0 0 8.1%;
  padding-top: 3.15%;
  color: #000;
  font-size: clamp(30px, 4.65vw, 67px);
  font-weight: 900;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
}

.faq-list {
  width: 100%;
  margin: 0;
}

.faq-item {
  border-bottom: 1.5px solid #111;
}

.faq-item__button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(28px, 3vw, 44px);
  align-items: center;
  width: 100%;
  min-height: clamp(50px, 5.7vw, 78px);
  border: 0;
  padding: clamp(6px, 0.72vw, 11px) 0 clamp(7px, 0.82vw, 13px);
  background: transparent;
  color: #000;
  font: 800 clamp(17px, 1.86vw, 29px) / 1.16 Arial, sans-serif;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.faq-item__button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}

.faq-item__mark {
  position: relative;
  justify-self: end;
  width: clamp(24px, 2.55vw, 39px);
  height: clamp(24px, 2.55vw, 39px);
}

.faq-item__mark::before,
.faq-item__mark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20px, 2.12vw, 34px);
  height: 2px;
  background: #111;
  content: "";
  transform: translate(-50%, -50%);
  transition:
    opacity 160ms ease,
    transform 220ms var(--motion-ease);
}

.faq-item__mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 260ms var(--motion-ease),
    opacity 180ms ease,
    padding 260ms var(--motion-ease),
    transform 260ms var(--motion-ease);
}

.faq-item__answer > p {
  overflow: hidden;
  margin: 0;
  padding: 0 12% 0 0;
  color: #000;
  font: 700 clamp(13px, 1.12vw, 18px) / 1.34 Arial, sans-serif;
}

.faq-item.is-open .faq-item__mark::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0.35);
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
  padding: 1.15% 0 3.2%;
  opacity: 1;
  transform: translateY(0);
}

.faq-item__button:hover .faq-item__mark::before,
.faq-item__button:hover .faq-item__mark::after,
.faq-item__button:focus-visible .faq-item__mark::before,
.faq-item__button:focus-visible .faq-item__mark::after {
  background: var(--green);
}

.dog-modal {
  width: min(92vw, 1100px);
  max-height: 92vh;
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.dog-modal[open],
.info-modal[open] {
  animation: modal-pop 320ms var(--motion-ease) both;
}

.dog-modal.is-closing,
.info-modal.is-closing {
  animation: modal-out 210ms var(--motion-press) both;
}

.dog-modal::backdrop {
  background: var(--overlay);
  animation: backdrop-fade 320ms ease both;
}

.dog-modal.is-closing::backdrop {
  animation: backdrop-out 210ms ease both;
}

.dog-modal__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 28px;
}

.dog-modal__close {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font: 700 32px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgb(0 0 0 / 0.24),
    0 0 0 1px rgb(255 194 77 / 0.36);
  transform: translateZ(0);
  transition:
    box-shadow var(--motion-medium) var(--motion-ease),
    transform var(--motion-medium) var(--motion-ease);
}

.dog-modal__close:focus,
.dog-modal__close:focus-visible,
.info-modal__close:focus,
.info-modal__close:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.info-modal {
  width: min(90vw, 520px);
  border: 2px solid #ffc24d;
  border-radius: 28px;
  padding: 34px 34px 30px;
  background: #fff;
  color: #000;
  box-shadow: 0 20px 80px rgb(0 0 0 / 0.22);
}

.info-modal::backdrop {
  background: var(--overlay);
  animation: backdrop-fade 320ms ease both;
}

.info-modal.is-closing::backdrop {
  animation: backdrop-out 210ms ease both;
}

.info-modal__text {
  margin: 0;
  font: 700 20px/1.35 Arial, sans-serif;
  text-align: center;
}

.info-modal__close {
  position: absolute;
  z-index: 2;
  top: -16px;
  right: -16px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font: 700 30px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgb(0 0 0 / 0.24),
    0 0 0 1px rgb(255 194 77 / 0.36);
  transform: translateZ(0);
  transition:
    box-shadow var(--motion-medium) var(--motion-ease),
    transform var(--motion-medium) var(--motion-ease);
}

.info-modal__close:hover,
.dog-modal__close:hover {
  box-shadow:
    0 12px 30px rgb(0 0 0 / 0.28),
    0 0 0 5px rgb(255 194 77 / 0.2),
    0 0 26px rgb(255 178 41 / 0.32);
  transform: translateY(-2px) scale(1.05);
}

.info-modal__close:active,
.dog-modal__close:active {
  transform: translateY(0) scale(0.96);
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes backdrop-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 700px) {
  .dog-modal {
    width: 96vw;
  }

  .dog-modal__image {
    border-radius: 12px;
  }

  .dog-modal__close {
    top: -12px;
    right: -8px;
  }
}