/* Kostur C — Urban / Street */

body.slotivo-kostur-c {
  --sv-dur: 0.45s;
  --sv-dur-med: 0.55s;
  --sv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* urban-street default — orange */
  --sv-accent: rgba(255, 92, 0, 0.55);
  --sv-accent-solid: #ff5c00;
}

/* tattoo-barber — red */
body.slotivo-kostur-c.slotivo-kostur-c-tattoo {
  --sv-accent: rgba(204, 51, 0, 0.55);
  --sv-accent-solid: #cc3300;
}

/* neon-underground — cyan */
body.slotivo-kostur-c.slotivo-kostur-c-neon {
  --sv-accent: rgba(0, 240, 255, 0.4);
  --sv-accent-solid: #00f0ff;
}

/* fade-culture — electric cyan */
body.slotivo-kostur-c.slotivo-kostur-c-fade {
  --sv-accent: rgba(0, 242, 255, 0.4);
  --sv-accent-solid: #00f2ff;
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Header */
  body.slotivo-kostur-c > nav,
  body.slotivo-kostur-c > header,
  body.slotivo-kostur-c nav.fixed {
    animation: sv-c-header-in var(--sv-dur-med) var(--sv-ease) both;
  }

  body.slotivo-kostur-c nav a {
    position: relative;
  }

  body.slotivo-kostur-c nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: var(--sv-accent-solid);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--sv-ease);
  }

  body.slotivo-kostur-c nav a:hover::after {
    transform: scaleX(1);
  }

  body.slotivo-kostur-c nav button:hover,
  body.slotivo-kostur-c header button:hover {
    box-shadow: 0 0 16px var(--sv-accent);
    transform: translateY(-1px);
  }

  /* 2. Hero */
  body.slotivo-kostur-c .slotivo-hero-title {
    animation: sv-c-slide-left var(--sv-dur-med) var(--sv-ease) 0.1s both;
  }

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

  body.slotivo-kostur-c .slotivo-hero-cta {
    animation: sv-c-fade-up var(--sv-dur-med) var(--sv-ease) both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  body.slotivo-kostur-c .slotivo-hero-cta:nth-child(1) { animation-delay: 0.35s; }
  body.slotivo-kostur-c .slotivo-hero-cta:nth-child(2) { animation-delay: 0.45s; }

  body.slotivo-kostur-c .slotivo-hero-cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 20px var(--sv-accent);
  }

  body.slotivo-kostur-c .slotivo-hero-img,
  body.slotivo-kostur-c main .absolute img {
    animation: sv-c-slide-right var(--sv-dur-med) var(--sv-ease) 0.15s both;
  }

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

  body.slotivo-kostur-c select:focus,
  body.slotivo-kostur-c input:focus,
  body.slotivo-kostur-c button.slotivo-selected {
    box-shadow: 0 0 0 2px var(--sv-accent-solid), 0 0 12px var(--sv-accent) !important;
  }

  body.slotivo-kostur-c .slotivo-booking-widget button:active {
    transform: scale(0.97);
  }

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

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

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

  body.slotivo-kostur-c .slotivo-card-lift:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--sv-accent-solid);
  }

  body.slotivo-kostur-c .slotivo-card-lift.slotivo-selected,
  body.slotivo-kostur-c .service-card.selected {
    box-shadow: 0 0 0 2px var(--sv-accent-solid), 0 0 20px var(--sv-accent) !important;
    transform: scale(1.02);
  }

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

  body.slotivo-kostur-c .group:hover img,
  body.slotivo-kostur-c article:hover img {
    transform: scale(1.06);
  }

  body.slotivo-kostur-c .group:hover .absolute.inset-0 {
    background-color: rgba(0, 0, 0, 0.4);
  }

  body.slotivo-kostur-c .slotivo-stagger-item {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity var(--sv-dur-med) var(--sv-ease), transform var(--sv-dur-med) var(--sv-ease);
  }

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

  body.slotivo-kostur-c .material-symbols-outlined.slotivo-star {
    animation: sv-c-pop 0.35s var(--sv-ease) both;
  }

  body.slotivo-kostur-c footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* 9–10 */
  body.slotivo-kostur-c #cookie-banner:not(.hidden) {
    animation: sv-c-slide-up var(--sv-dur-med) var(--sv-ease) both;
    border-top-color: var(--sv-accent-solid) !important;
  }

  body.slotivo-kostur-c #cookie-banner button {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  body.slotivo-kostur-c #cookie-banner button:hover {
    box-shadow: 0 0 14px var(--sv-accent);
    transform: translateY(-1px);
  }

  body.slotivo-kostur-c #success-modal:not(.hidden) > *:last-child,
  body.slotivo-kostur-c .slotivo-modal-open .slotivo-modal-panel {
    animation: sv-c-modal-pop 0.4s var(--sv-ease) both;
    box-shadow: 0 0 30px var(--sv-accent);
  }

  body.slotivo-kostur-c #success-modal .material-symbols-outlined {
    animation: sv-c-pop 0.4s var(--sv-ease) 0.15s both;
  }

  body.slotivo-kostur-c .slotivo-selected {
    animation: sv-c-select-pulse 0.4s ease;
  }

  /* Marquee — kontinuirano klizi, bez skoka na hover */
  body.slotivo-kostur-c .marquee-container {
    pointer-events: none;
    user-select: none;
  }

  body.slotivo-kostur-c .marquee-track {
    will-change: auto;
    backface-visibility: hidden;
    animation-name: sv-c-marquee;
    animation-play-state: running;
  }
}

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

@keyframes sv-c-slide-left {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes sv-c-slide-right {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes sv-c-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-c-pop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes sv-c-select-pulse {
  0% { box-shadow: 0 0 0 0 var(--sv-accent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes sv-c-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}