/* Critical site extras — always after styles.css */

/* Scroll lock without layout jump */
html.lock-scroll,
body.lock-scroll {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.lock-scroll {
  padding-right: var(--lock-pad, 0px);
}
.lock-pad {
  padding-right: var(--lock-pad, 0px);
}

/* Hero + reveal animations (guaranteed even if main CSS trimmed) */
.reveal {
  animation: stomika-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reveal-delay-1 { animation-delay: 0.14s; }
.reveal-delay-2 { animation-delay: 0.28s; }
.reveal-delay-3 { animation-delay: 0.42s; }
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}
@keyframes stomika-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes stomika-float {
  0%, 100% { transform: scale(1.05) translate(0); }
  50% { transform: scale(1.09) translate(-1.4%, -0.8%); }
}
.hero-photo {
  animation: stomika-float 18s ease-in-out 2.5s infinite;
  will-change: transform;
}

/* Carousels — definite width so slides don't collapse */
.carousel-viewport {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
.carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.carousel-track.is-dragging {
  transition: none;
}
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Before / after */
.ba-slider {
  touch-action: none;
  user-select: none;
}
.ba-before,
.ba-after {
  background-repeat: no-repeat;
}
.ba-after {
  clip-path: inset(0 48% 0 0);
}

/* About slides */
.about-slide {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
}
.about-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Modals */
#booking-modal,
#promo-modal {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#booking-modal.is-open,
#promo-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
#booking-modal .modal-dialog,
#promo-modal .modal-dialog {
  transform: translateY(1.5rem) scale(0.98);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#booking-modal.is-visible .modal-dialog,
#promo-modal.is-visible .modal-dialog {
  transform: none;
  opacity: 1;
}
#promo-modal .modal-dialog {
  align-items: stretch;
}

/* FAQ / chrome */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}
.faq-panel > div {
  overflow: hidden;
}
.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#scroll-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition: opacity 0.3s, transform 0.3s;
}
#scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
#site-header.is-scrolled {
  background: rgba(26, 33, 28, 0.95);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
#cookie-banner {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s, transform 0.5s;
}
#cookie-banner.is-visible {
  opacity: 1;
  transform: none;
}
.about-dot.is-active,
.carousel-dot.is-active {
  background: var(--accent);
}

/* Honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-on-scroll,
  .hero-photo,
  .about-slide,
  .btn,
  .carousel-track {
    animation: none !important;
    transition: none !important;
  }
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}