/* Kostur A — Premium / Luxury */

body.slotivo-kostur-a {
  --sv-dur: 0.85s;
  --sv-dur-fast: 0.5s;
  --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* modern-minimal / modern-luxury default — gold #f2ca50 */
  --sv-glow: rgba(242, 202, 80, 0.35);
  --sv-gold: #f2ca50;
}

/* luxury-gold */
body.slotivo-kostur-a.slotivo-kostur-a-luxury {
  --sv-glow: rgba(212, 175, 55, 0.35);
  --sv-gold: #d4af37;
}

/* black-prestige — silver */
body.slotivo-kostur-a.slotivo-kostur-a-prestige {
  --sv-glow: rgba(226, 226, 226, 0.3);
  --sv-gold: #e2e2e2;
}

/* Cookie banner — centar ekrana (animacija ne smije pregaziti translateX) */
body.slotivo-kostur-a #cookie-banner {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
  body.slotivo-kostur-a.slotivo-page-loaded {
    animation-duration: 0.7s;
  }

  /* 1. Header */
  body.slotivo-kostur-a > nav.fixed,
  body.slotivo-kostur-a > header.fixed {
    animation: sv-a-header-down var(--sv-dur) var(--sv-ease) both;
  }

  body.slotivo-kostur-a nav.fixed a,
  body.slotivo-kostur-a header.fixed a {
    position: relative;
  }

  body.slotivo-kostur-a nav.fixed a:not([aria-label])::after,
  body.slotivo-kostur-a nav.fixed .hidden.md\:flex a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--sv-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sv-dur-fast) var(--sv-ease);
    opacity: 0.7;
  }

  body.slotivo-kostur-a nav.fixed a:hover::after,
  body.slotivo-kostur-a nav.fixed .hidden.md\:flex a:hover::after {
    transform: scaleX(1);
  }

  body.slotivo-kostur-a nav.fixed button,
  body.slotivo-kostur-a nav button.hidden.md\:inline-flex {
    transition: box-shadow var(--sv-dur-fast) var(--sv-ease), background-color var(--sv-dur-fast) var(--sv-ease), border-color var(--sv-dur-fast) var(--sv-ease);
  }

  body.slotivo-kostur-a nav.fixed button:hover,
  body.slotivo-kostur-a nav button.hidden.md\:inline-flex:hover {
    box-shadow: 0 0 20px var(--sv-glow);
  }

  /* 2. Hero */
  body.slotivo-kostur-a main .absolute.inset-0 img,
  body.slotivo-kostur-a main > .absolute img {
    animation: sv-a-hero-img 1.4s var(--sv-ease) both;
  }

  body.slotivo-kostur-a .slotivo-hero-title {
    animation: sv-a-fade-up var(--sv-dur) var(--sv-ease) 0.15s both;
  }

  body.slotivo-kostur-a .slotivo-hero-subtitle {
    animation: sv-a-fade-up var(--sv-dur) var(--sv-ease) 0.45s both;
  }

  body.slotivo-kostur-a .slotivo-hero-cta {
    animation: sv-a-fade-up var(--sv-dur) var(--sv-ease) both;
  }

  body.slotivo-kostur-a .slotivo-hero-cta:nth-child(1) { animation-delay: 0.65s; }
  body.slotivo-kostur-a .slotivo-hero-cta:nth-child(2) { animation-delay: 0.8s; }

  /* 3. Booking widget */
  body.slotivo-kostur-a .slotivo-booking-widget {
    animation: sv-a-booking-slide var(--sv-dur) var(--sv-ease) 0.35s both;
  }

  body.slotivo-kostur-a .slotivo-booking-widget .space-y-2,
  body.slotivo-kostur-a .slotivo-booking-widget .space-y-8 > div,
  body.slotivo-kostur-a .slotivo-booking-widget form > div {
    animation: sv-a-fade-up var(--sv-dur-fast) var(--sv-ease) both;
  }

  body.slotivo-kostur-a .slotivo-booking-field:nth-child(1) { animation-delay: 0.5s; }
  body.slotivo-kostur-a .slotivo-booking-field:nth-child(2) { animation-delay: 0.58s; }
  body.slotivo-kostur-a .slotivo-booking-field:nth-child(3) { animation-delay: 0.66s; }
  body.slotivo-kostur-a .slotivo-booking-field:nth-child(4) { animation-delay: 0.74s; }
  body.slotivo-kostur-a .slotivo-booking-field:nth-child(5) { animation-delay: 0.82s; }

  body.slotivo-kostur-a select:focus,
  body.slotivo-kostur-a input:focus {
    box-shadow: 0 1px 0 0 var(--sv-gold), 0 0 12px var(--sv-glow);
  }

  body.slotivo-kostur-a .slotivo-booking-widget button[type="submit"],
  body.slotivo-kostur-a .slotivo-booking-widget button[type="button"]:last-child {
    transition: box-shadow var(--sv-dur-fast) var(--sv-ease), transform var(--sv-dur-fast) var(--sv-ease);
  }

  body.slotivo-kostur-a .slotivo-booking-widget button[type="submit"]:hover {
    box-shadow: 0 0 24px var(--sv-glow);
  }

  /* 4–7. Cards */
  body.slotivo-kostur-a [data-slotivo-reveal] {
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-a .slotivo-card-lift {
    transition: transform 0.45s var(--sv-ease), box-shadow 0.45s var(--sv-ease), border-color 0.45s var(--sv-ease);
  }

  body.slotivo-kostur-a .slotivo-card-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--sv-glow);
  }

  body.slotivo-kostur-a section img,
  body.slotivo-kostur-a article img {
    transition: transform 0.7s var(--sv-ease);
  }

  body.slotivo-kostur-a section .group:hover img,
  body.slotivo-kostur-a article:hover img {
    transform: scale(1.04);
  }

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

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

  /* 8. Footer */
  body.slotivo-kostur-a footer [data-slotivo-reveal] {
    transition-duration: 1s;
  }

  /* 9–10. Cookie & modal */
  body.slotivo-kostur-a #cookie-banner:not(.hidden) {
    animation: sv-a-cookie-slide-up var(--sv-dur) var(--sv-ease) both;
  }

  body.slotivo-kostur-a #cookie-banner button {
    transition: opacity var(--sv-dur-fast) ease, box-shadow var(--sv-dur-fast) var(--sv-ease);
  }

  body.slotivo-kostur-a #cookie-banner button:hover {
    box-shadow: 0 0 12px var(--sv-glow);
  }

  body.slotivo-kostur-a #success-modal:not(.hidden) > *:last-child,
  body.slotivo-kostur-a .slotivo-modal-open .slotivo-modal-panel {
    animation: sv-a-modal-pop 0.55s var(--sv-ease) both;
  }

  body.slotivo-kostur-a #success-modal .material-symbols-outlined,
  body.slotivo-kostur-a .slotivo-modal-panel .material-symbols-outlined {
    animation: sv-a-check-pop 0.6s var(--sv-ease) 0.2s both;
  }

  body.slotivo-kostur-a .slotivo-selected,
  body.slotivo-kostur-a select.slotivo-selected {
    box-shadow: 0 0 0 1px var(--sv-gold), 0 0 16px var(--sv-glow) !important;
  }
}

@keyframes sv-a-header-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-a-hero-img {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes sv-a-booking-slide {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes sv-a-cookie-slide-up {
  from { opacity: 0; transform: translate(-50%, 100%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

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

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