/* Kostur D — Game UI / Futuristic */

body.slotivo-kostur-d {
  --sv-dur: 0.5s;
  --sv-dur-slow: 0.75s;
  --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Cinematic / game-ui default — gold (#f2ca50) */
  --sv-glow: rgba(242, 202, 80, 0.45);
  --sv-glow-border: rgba(242, 202, 80, 0.3);
}

/* CYBER BARBER — cyan glow */
body.slotivo-kostur-d.slotivo-kostur-cyber {
  --sv-glow: rgba(0, 240, 255, 0.4);
  --sv-glow-border: rgba(0, 240, 255, 0.3);
}

/* PRECISION BARBER — white / tech glow */
body.slotivo-kostur-d.slotivo-kostur-darktech {
  --sv-glow: rgba(255, 255, 255, 0.22);
  --sv-glow-border: rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: no-preference) {
  /* Screen transitions */
  body.slotivo-kostur-d .game-screen {
    transition: opacity var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-d .game-screen.slotivo-screen-enter {
    animation: sv-d-screen-in var(--sv-dur-slow) var(--sv-ease) both;
  }

  body.slotivo-kostur-d .game-screen.slotivo-screen-exit {
    animation: sv-d-screen-out 0.35s var(--sv-ease) both;
    pointer-events: none;
  }

  /* 1. Home menu */
  body.slotivo-kostur-d #screen-home .fixed.inset-0 img,
  body.slotivo-kostur-d #screen-home > .fixed img {
    animation: sv-d-bg-zoom 1.6s var(--sv-ease) both;
  }

  body.slotivo-kostur-d #screen-home .slotivo-menu-item {
    animation: sv-d-menu-in var(--sv-dur) var(--sv-ease) both;
  }

  body.slotivo-kostur-d #screen-home header h1,
  body.slotivo-kostur-d #screen-home .font-display-lg,
  body.slotivo-kostur-d #global-sidebar h1 {
    animation: sv-d-glow-in var(--sv-dur-slow) var(--sv-ease) 0.2s both;
    text-shadow: 0 0 20px var(--sv-glow);
  }

  body.slotivo-kostur-d #global-sidebar a,
  body.slotivo-kostur-d #screen-home nav a {
    transition: transform var(--sv-dur) var(--sv-ease), box-shadow var(--sv-dur) var(--sv-ease), border-color var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-d #global-sidebar a:hover,
  body.slotivo-kostur-d #screen-home nav a:hover {
    transform: translateX(4px);
    box-shadow: 0 0 16px var(--sv-glow);
  }

  body.slotivo-kostur-d #global-sidebar .global-nav-link.is-active,
  body.slotivo-kostur-d #screen-home nav a[class*="border-primary"] {
    box-shadow: 0 0 20px var(--sv-glow);
  }

  /* 3. HUD / booking panels */
  body.slotivo-kostur-d .slotivo-hud-panel,
  body.slotivo-kostur-d #screen-booking .glass-panel,
  body.slotivo-kostur-d #screen-booking .tech-panel,
  body.slotivo-kostur-d #screen-booking .cinematic-card {
    animation: sv-d-panel-reveal var(--sv-dur-slow) var(--sv-ease) both;
    position: relative;
  }

  body.slotivo-kostur-d .slotivo-hud-panel::before,
  body.slotivo-kostur-d #screen-booking form::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    animation: sv-d-border-draw 1s var(--sv-ease) 0.3s both;
  }

  body.slotivo-kostur-d .booking-steps-row .step-active,
  body.slotivo-kostur-d #booking-step-info.step-active,
  body.slotivo-kostur-d #booking-step-confirm.step-active {
    animation: sv-d-step-glow 0.6s ease;
  }

  /* 4–6. Cards */
  body.slotivo-kostur-d .barber-card,
  body.slotivo-kostur-d .service-card {
    transition: transform var(--sv-dur) var(--sv-ease), box-shadow var(--sv-dur) var(--sv-ease), border-color var(--sv-dur) var(--sv-ease);
  }

  body.slotivo-kostur-d .barber-card:hover,
  body.slotivo-kostur-d .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--sv-glow);
  }

  body.slotivo-kostur-d .barber-card.slotivo-selected,
  body.slotivo-kostur-d .service-card.selected,
  body.slotivo-kostur-d .barber-card.slotivo-lock-in,
  body.slotivo-kostur-d .service-card.slotivo-lock-in {
    animation: sv-d-lock-in 0.5s var(--sv-ease) both;
    box-shadow: 0 0 0 1px var(--sv-glow), 0 0 24px var(--sv-glow) !important;
    transform: scale(1.02);
  }

  /* 6. Date & time */
  body.slotivo-kostur-d #screen-datetime button:not([disabled]) {
    transition: transform 0.2s ease, box-shadow var(--sv-dur) var(--sv-ease), border-color var(--sv-dur) ease;
  }

  body.slotivo-kostur-d #screen-datetime button:not([disabled]).slotivo-selected,
  body.slotivo-kostur-d #screen-datetime .tech-panel-active {
    box-shadow: 0 0 18px var(--sv-glow);
    animation: sv-d-lock-in 0.4s ease;
  }

  body.slotivo-kostur-d #screen-datetime button:not([disabled]):active {
    transform: scale(0.96);
  }

  /* 7. Form fields */
  body.slotivo-kostur-d .slotivo-form-field {
    animation: sv-d-field-in var(--sv-dur) var(--sv-ease) both;
  }

  body.slotivo-kostur-d input:invalid:not(:placeholder-shown),
  body.slotivo-kostur-d input.slotivo-shake {
    animation: sv-d-shake 0.4s ease;
  }

  body.slotivo-kostur-d #booking-submit-btn:not(:disabled):hover,
  body.slotivo-kostur-d [data-nav="booking"]:hover {
    box-shadow: 0 0 28px var(--sv-glow);
  }

  /* 8. Confirm summary */
  body.slotivo-kostur-d #booking-screen-confirm .slotivo-summary-item {
    animation: sv-d-field-in var(--sv-dur) var(--sv-ease) both;
  }

  /* 9. Success modal */
  body.slotivo-kostur-d #booking-success-modal.flex #booking-success-modal-content,
  body.slotivo-kostur-d #booking-success-modal:not(.hidden) #booking-success-modal-content {
    animation: sv-d-success-pop 0.55s var(--sv-ease) both;
    box-shadow: 0 0 40px var(--sv-glow), inset 0 0 0 1px var(--sv-glow);
  }

  body.slotivo-kostur-d #booking-success-modal .material-symbols-outlined {
    animation: sv-d-check-glow 0.6s var(--sv-ease) 0.2s both;
  }

  body.slotivo-kostur-d #booking-success-done-btn {
    animation: sv-d-field-in var(--sv-dur) var(--sv-ease) 0.5s both;
  }

  /* 10. Cookie HUD */
  body.slotivo-kostur-d #cookie-banner:not(.hidden) {
    animation: sv-d-hud-slide var(--sv-dur-slow) var(--sv-ease) both;
  }

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

  body.slotivo-kostur-d [data-slotivo-reveal] {
    transition: opacity var(--sv-dur-slow) var(--sv-ease), transform var(--sv-dur-slow) var(--sv-ease);
  }
}

@keyframes sv-d-screen-in {
  from { opacity: 0; transform: scale(0.98) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes sv-d-screen-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.98); }
}

@keyframes sv-d-bg-zoom {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sv-d-menu-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes sv-d-glow-in {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes sv-d-panel-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-d-border-draw {
  from { clip-path: inset(0 100% 100% 0); border-color: var(--sv-glow); }
  to { clip-path: inset(0 0 0 0); border-color: var(--sv-glow-border); }
}

@keyframes sv-d-lock-in {
  0% { box-shadow: 0 0 0 0 var(--sv-glow); }
  50% { box-shadow: 0 0 24px var(--sv-glow); }
  100% { box-shadow: 0 0 16px var(--sv-glow); }
}

@keyframes sv-d-field-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sv-d-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes sv-d-pulse-soft {
  0%, 100% { box-shadow: 0 0 16px var(--sv-glow); }
  50% { box-shadow: 0 0 28px var(--sv-glow); }
}

@keyframes sv-d-success-pop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sv-d-check-glow {
  from { opacity: 0; transform: scale(0.5); filter: drop-shadow(0 0 0 transparent); }
  to { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 12px var(--sv-glow)); }
}

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

@keyframes sv-d-step-glow {
  from { opacity: 0.5; }
  to { opacity: 1; }
}