/* SVIYART — позиціонування, навігація та сторінка «Хто він?» */
:root {
  --sv-header-height: 5.9rem;
  --sv-header-gap: 1.8rem;
  --sv-about-avatar-size: 195px;
  --sv-about-section-gap: 0.6rem;
  --sv-about-content-width: 850px;
}

html {
  scroll-padding-top: calc(var(--sv-header-height) + var(--sv-header-gap));
}
body {
  padding-top: 0 !important;
}
section.menu {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 5000 !important;
}

section.image3,
section.image01,
#about,
#contacts,
#page-intro {
  scroll-margin-top: calc(var(--sv-header-height) + var(--sv-header-gap));
}

.sviyart-page-intro {
  margin: 0 !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.65rem !important;
}
.sviyart-page-intro h1 {
  margin-bottom: 0.25rem !important;
}

/* Сторінка «Хто він?»: однакова права межа всіх текстів. */
.about-hero {
  padding-top: 0.75rem !important;
  padding-bottom: 0.55rem !important;
}
.about-hero > .container,
.about-section > .container {
  max-width: var(--sv-about-content-width) !important;
}
.about-hero .row {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.about-avatar {
  flex: 0 0 30% !important;
  max-width: 30% !important;
  padding-left: 0 !important;
  padding-right: 0.7rem !important;
}
.about-avatar img {
  width: var(--sv-about-avatar-size) !important;
  max-width: var(--sv-about-avatar-size) !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}
.about-lead {
  flex: 0 0 70% !important;
  max-width: 70% !important;
  padding: 0.2rem 0 0.2rem 0.7rem !important;
}
.about-lead h1 {
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
  margin-bottom: 0.4rem !important;
}
.about-lead p,
.about-text p {
  text-align: justify !important;
  text-align-last: left;
}
.about-section {
  padding-top: var(--sv-about-section-gap) !important;
  padding-bottom: var(--sv-about-section-gap) !important;
}
.about-text h2 {
  margin-bottom: 0.3rem !important;
}
.about-text p {
  margin-bottom: 0.4rem !important;
}

@media (max-width: 991.98px) {
  :root {
    --sv-header-height: 4.1rem;
    --sv-header-gap: 0.85rem;
    --sv-about-avatar-size: 165px;
  }
  .about-avatar,
  .about-lead {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .about-lead {
    padding-top: 0.45rem !important;
  }
  .about-lead h1 {
    font-size: 2rem !important;
    text-align: center !important;
  }
}

/* Додатковий запас над цільовим постером під час переходу з меню. */
section.image3,
section.image01 {
  scroll-margin-top: calc(var(--sv-header-height) + var(--sv-header-gap)) !important;
}


/* SVIYART v8 — прибрати тонку смугу під навігаційною панеллю. */
section.menu,
section.menu .navbar,
section.menu .navbar-dropdown {
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
section.menu::after,
section.menu .navbar::after {
  content: none !important;
  display: none !important;
}


/* SVIYART — додаткові параметри оформлення постерів і аватара. */
:root {
  --sv-poster-shadow-x: 0px;
  --sv-poster-shadow-y: 0px;
  --sv-poster-shadow-blur: 9px;
  --sv-poster-shadow-spread: 0px;
  --sv-poster-shadow-color: rgba(0, 0, 0, 0.32);
  --sv-poster-outline-width: 1px;
  --sv-poster-outline-color: rgba(255, 245, 210, 0.12);
  --sv-avatar-rotation-duration: 32s;
}

section.image3 .image-wrapper,
section.image01 .image-wrapper {
  box-shadow:
    var(--sv-poster-shadow-x)
    var(--sv-poster-shadow-y)
    var(--sv-poster-shadow-blur)
    var(--sv-poster-shadow-spread)
    var(--sv-poster-shadow-color) !important;
  outline: var(--sv-poster-outline-width) solid var(--sv-poster-outline-color);
}

.about-avatar img.sviyart-spinning-avatar {
  display: block;
  animation-name: sviyart-avatar-spin !important;
  animation-duration: var(--sv-avatar-rotation-duration) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}
.about-avatar img.sviyart-spinning-avatar:hover { animation-play-state: paused !important; }
@keyframes sviyart-avatar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* SVIYART v16 — параметри плавності інтерфейсу. */
:root {
  --sv-story-transition-duration: 420ms;
  --sv-story-transition-easing: ease-in-out;
  --sv-playlist-scroll-duration: 720ms;
}

/* Плавніше розгортання та згортання історій без зміни логіки Bootstrap. */
.panel-collapse.collapsing {
  transition-property: height !important;
  transition-duration: var(--sv-story-transition-duration) !important;
  transition-timing-function: var(--sv-story-transition-easing) !important;
}