/* Kostur B — Gallery First (Coastal / Villa / Sea View) */

body.slotivo-kostur-b {
  --sv-dur: 0.8s;
  --sv-dur-fast: 0.5s;
  --sv-dur-slow: 1.4s;
  --sv-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sv-ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --sv-accent: rgba(12, 70, 97, 0.35);
  --sv-glow: rgba(12, 70, 97, 0.18);
  --sv-coastal: rgba(156, 205, 237, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  /* ── 1. Overlay Navbar — identical glass at top and while scrolling ── */
  body.slotivo-kostur-b.slotivo-anim-ready > header.slotivo-overlay-nav,
  body.slotivo-kostur-b.slotivo-anim-ready > header.slotivo-overlay-nav.slotivo-nav-scrolled {
    animation: sv-b-nav-fade var(--sv-dur) var(--sv-ease) both;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    transition: background 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready > header nav a {
    position: relative;
  }

  body.slotivo-kostur-b.slotivo-anim-ready > header nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sv-dur-fast) var(--sv-ease);
    opacity: 0.75;
  }

  body.slotivo-kostur-b.slotivo-anim-ready > header nav a:hover::after {
    transform: scaleX(1);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-nav-cta {
    transition: box-shadow var(--sv-dur-fast) ease, transform var(--sv-dur-fast) ease, background-color 0.3s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-nav-cta:hover {
    box-shadow: 0 0 22px var(--sv-coastal);
    transform: translateY(-1px);
  }

  /* ── 2. Fullscreen Hero ── */
  body.slotivo-kostur-b.slotivo-anim-ready main > section:first-of-type .slotivo-hero-img,
  body.slotivo-kostur-b.slotivo-anim-ready main > section:first-of-type > .absolute img {
    animation: sv-b-cinematic-zoom var(--sv-dur-slow) var(--sv-ease-cine) both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-hero-gradient {
    animation: sv-b-gradient-in var(--sv-dur) var(--sv-ease) 0.2s both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-hero-title {
    animation: sv-b-hero-rise var(--sv-dur) var(--sv-ease-cine) 0.35s both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-hero-subtitle {
    animation: sv-b-fade-up var(--sv-dur) var(--sv-ease) 0.5s both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-hero-cta:nth-child(1) {
    animation: sv-b-fade-up var(--sv-dur-fast) var(--sv-ease) 0.62s both;
    opacity: 0;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-hero-cta:nth-child(2) {
    animation: sv-b-fade-up var(--sv-dur-fast) var(--sv-ease) 0.78s both;
    opacity: 0;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-hero-thumbs {
    opacity: 0;
    animation: sv-b-thumbs-in var(--sv-dur) var(--sv-ease) 0.85s both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-hero-thumb {
    animation: sv-b-thumb-slide var(--sv-dur-fast) var(--sv-ease) both;
    opacity: 0;
  }

  /* ── 3. Floating Booking Card ── */
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-floating-booking {
    animation: sv-b-booking-float var(--sv-dur) var(--sv-ease-cine) 0.4s both;
    transition: box-shadow 0.45s ease, transform 0.35s var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-floating-booking::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(0px);
    opacity: 0;
    animation: sv-b-glass-in 0.9s var(--sv-ease) 0.5s both;
    pointer-events: none;
    z-index: -1;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-booking-field {
    animation: sv-b-fade var(--sv-dur-fast) var(--sv-ease) both;
    opacity: 0;
  }

  body.slotivo-kostur-b.slotivo-anim-ready input:focus,
  body.slotivo-kostur-b.slotivo-anim-ready select:focus,
  body.slotivo-kostur-b.slotivo-anim-ready textarea:focus,
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-field-focus {
    box-shadow: 0 0 0 2px var(--sv-accent), 0 0 18px var(--sv-coastal) !important;
    transition: box-shadow 0.35s ease, transform 0.25s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-selected {
    box-shadow: 0 0 0 2px var(--sv-accent), 0 0 14px var(--sv-glow) !important;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-price-area {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--sv-ease), transform 0.5s var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-price-area.slotivo-price-visible {
    opacity: 1;
    transform: translateY(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-booking-submit {
    transition: transform 0.35s var(--sv-ease), box-shadow 0.4s ease, background-color 0.25s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-booking-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px var(--sv-glow), 0 0 20px var(--sv-coastal);
  }

  /* ── 4. Gallery Showcase ── */
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-featured {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity var(--sv-dur-slow) var(--sv-ease-cine), transform var(--sv-dur-slow) var(--sv-ease-cine);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-featured.slotivo-revealed {
    opacity: 1;
    transform: scale(1);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-cell {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-cell.slotivo-revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-cell img,
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-featured img {
    transition: transform 0.85s var(--sv-ease-cine);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-cell:hover img,
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-featured:hover img {
    transform: scale(1.06);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-cell .absolute.inset-0.bg-black,
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-featured .absolute.inset-0.bg-black {
    transition: background-color 0.45s ease, opacity 0.45s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-btn {
    transition: transform 0.35s var(--sv-ease), box-shadow 0.35s ease, background-color 0.3s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-gallery-btn:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 20px var(--sv-glow);
  }

  /* ── 5. Amenities / Highlights ── */
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-highlight-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease), box-shadow 0.35s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-highlight-card.slotivo-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-highlight-icon {
    display: inline-block;
    transition: transform 0.4s var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-highlight-card:hover .slotivo-highlight-icon {
    transform: scale(1.1);
  }

  /* ── 6. Stay Details ── */
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-detail-image-split {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity var(--sv-dur-slow) var(--sv-ease-cine), transform var(--sv-dur-slow) var(--sv-ease-cine);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-detail-image-split.slotivo-revealed {
    opacity: 1;
    transform: translateX(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-detail-item {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--sv-dur-fast) var(--sv-ease), transform var(--sv-dur-fast) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-detail-item.slotivo-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-line-draw {
    position: relative;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-line-draw::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, var(--sv-accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
    animation: sv-b-line-draw 1.1s var(--sv-ease) 0.4s both;
  }

  /* ── 7. Reviews / Trust ── */
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-review-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-review-card.slotivo-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-star {
    opacity: 0;
    animation: sv-b-star-in var(--sv-dur-fast) var(--sv-ease) both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-trust-bar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-trust-bar.slotivo-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-trust-badge {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--sv-dur-fast) var(--sv-ease), transform var(--sv-dur-fast) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-trust-bar.slotivo-revealed .slotivo-trust-badge {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── 8. Location / Rules / Footer ── */
  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-map-card {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-map-card.slotivo-revealed {
    opacity: 1;
    transform: scale(1);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-location-point {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity var(--sv-dur-fast) var(--sv-ease), transform var(--sv-dur-fast) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-location-point.slotivo-revealed {
    opacity: 1;
    transform: translateX(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-rule-block {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-rule-block.slotivo-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-footer-col {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready footer[data-slotivo-reveal].slotivo-revealed .slotivo-footer-col {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── 9. Cookie banner ── */
  body.slotivo-kostur-b.slotivo-anim-ready [data-slotivo-cookie-banner] {
    animation: sv-b-cookie-up var(--sv-dur) var(--sv-ease-cine) both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready [data-slotivo-cookie-banner] > div,
  body.slotivo-kostur-b.slotivo-anim-ready #cookie-banner > div {
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.92) !important;
    transition: box-shadow 0.3s ease;
  }

  body.slotivo-kostur-b.slotivo-anim-ready [data-slotivo-cookie-banner] button:hover,
  body.slotivo-kostur-b.slotivo-anim-ready #cookie-banner button:hover {
    box-shadow: 0 0 14px var(--sv-coastal);
  }

  /* ── 10. Success modal ── */
  body.slotivo-kostur-b.slotivo-anim-ready #successModal:not(.hidden) {
    animation: sv-b-backdrop-in 0.45s ease both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready #successModal.slotivo-modal-open #modalContent,
  body.slotivo-kostur-b.slotivo-anim-ready #successModal:not(.hidden) #modalContent {
    animation: sv-b-modal-pop 0.55s var(--sv-ease-cine) both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-modal-check {
    animation: sv-b-check-pop 0.6s var(--sv-ease-cine) 0.15s both;
  }

  body.slotivo-kostur-b.slotivo-anim-ready #successModal.slotivo-modal-open .slotivo-summary-row {
    animation: sv-b-fade-up var(--sv-dur-fast) var(--sv-ease) both;
    opacity: 0;
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-stagger-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-b.slotivo-anim-ready .slotivo-stagger-item.slotivo-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sv-b-nav-fade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-b-cinematic-zoom {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sv-b-gradient-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sv-b-hero-rise {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-b-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-b-thumbs-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-b-thumb-slide {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes sv-b-booking-float {
  from { opacity: 0; transform: translate(24px, 32px) scale(0.97); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes sv-b-glass-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sv-b-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sv-b-line-draw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes sv-b-star-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sv-b-cookie-up {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-b-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sv-b-modal-pop {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes sv-b-check-pop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  body.slotivo-kostur-b .slotivo-floating-booking {
    animation-name: sv-b-booking-float-mobile;
  }
}

@keyframes sv-b-booking-float-mobile {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}