/* Marco Rajt — custom layer nad Tailwind */

html { scroll-behavior: smooth; }
body { scroll-padding-top: 5rem; }

/* Form inputs (Tailwind CDN nemá @apply v runtime, preto plain CSS) */
.form-input {
  width: 100%;
  background: #0B0B0D;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  color: #F4F1EA;
  font-size: 0.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color: rgba(168, 163, 155, 0.6); }
.form-input:hover { border-color: rgba(201, 162, 78, 0.4); }
.form-input:focus {
  outline: none;
  border-color: #C9A24E;
  box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.18);
}
.form-input option { background: #16151A; color: #F4F1EA; }
/* zlepšenie čitateľnosti date pickeru v dark mode */
input[type="date"] { color-scheme: dark; }

/* Play badge na video kartách */
.play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: rgba(11, 11, 13, 0.55);
  border: 2px solid #C9A24E;
  transition: background .25s, transform .25s;
}
.play-badge::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #C9A24E;
}
.video-card:hover .play-badge { background: rgba(201, 162, 78, 0.9); }
.video-card:hover .play-badge::after { border-left-color: #0B0B0D; }
.video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,11,13,0.7), transparent 60%);
  z-index: 1;
}
.video-card > span { z-index: 2; }
.gallery-item { cursor: pointer; }

/* FAQ accordion */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.open .faq-a { max-height: 240px; }
.faq-item.open .faq-icon { transform: rotate(180deg); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Header pri scrollovaní */
#site-header.scrolled {
  background: rgba(11, 11, 13, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Full-screen mobilné menu */
#mobile-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
#mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-link {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
#mobile-menu.is-open .mobile-link { opacity: 1; transform: none; }
#mobile-menu.is-open nav .mobile-link:nth-child(1) { transition-delay: .10s; }
#mobile-menu.is-open nav .mobile-link:nth-child(2) { transition-delay: .16s; }
#mobile-menu.is-open nav .mobile-link:nth-child(3) { transition-delay: .22s; }
#mobile-menu.is-open nav .mobile-link:nth-child(4) { transition-delay: .28s; }
#mobile-menu.is-open nav .mobile-link:nth-child(5) { transition-delay: .34s; }
#mobile-menu.is-open > .mobile-link { transition-delay: .40s; }

/* Stagger reveal pre karty v mriežke */
.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.stagger.visible > * { opacity: 1; transform: none; }

/* Monochromatické (biele) logá v trust stripe */
.logo-mono { filter: brightness(0) invert(1); opacity: 0.55; transition: opacity .25s ease; width: auto; }
.logo-mono:hover { opacity: 0.9; }

/* Jemná zlatá žiara pri číslach „Ako to prebieha" */
.step-num { text-shadow: 0 0 22px rgba(201, 162, 78, 0.35); }

/* Jemný pomalý zoom hero videa (ken-burns) */
@keyframes heroZoom { from { transform: scale(1.03); } to { transform: scale(1.12); } }
#hero-video { transform-origin: center; animation: heroZoom 22s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stagger > *, .mobile-link { opacity: 1 !important; transform: none !important; transition: none !important; }
  #hero-video { animation: none !important; }
  #mobile-menu { transition: none !important; }
  .animate-bounce { animation: none !important; }
}