/* ============================================================
   Mutiara Pos Travel — custom styles (on top of Tailwind)
   Local base layer: smoothing, scrollbar util, reveal-on-scroll,
   reduced-motion kill-switch, focus ring.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* Hide scrollbars on horizontal carousels */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Reveal-on-scroll (JS toggles .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Accessibility: kill all motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Visible keyboard focus */
:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

/* ============================================================
   Task 8 — polish layer
   Selection color, chevron rotation (state owned by js/main.js),
   carousel edge fades, arrow hover lift, FAQ answer reveal.
   All colors from the configured palette (brand teal / white /
   black alpha). No transforms on elements Tailwind positions.
   ============================================================ */

/* Brand-colored text selection */
::selection {
  background: #0f766e;
  color: #fff;
}

/* Chevron rotation — js/main.js flips aria-expanded and/or adds
   .is-open; both mechanisms are covered defensively. */
.faq-question[aria-expanded="true"] .chevron,
.schedule-toggle[aria-expanded="true"] .chevron,
.schedule-toggle.is-open .chevron {
  transform: rotate(180deg);
}

/* FAQ answer reveal — .faq-answer divs carry only the "hidden"
   class (toggled by js/main.js), so hook via their stable ids. */
@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[id^="faq-answer-"]:not(.hidden) {
  animation: faqFadeIn 0.3s ease;
}

/* Carousel edge fades — subtle white gradient hinting more cards
   to either side; desktop (lg+) only. The .reveal.relative wrapper
   is the carousel's positioning context; z-index:1 keeps fades
   above card badges but below the z-10 arrow buttons.
   Scroll-aware: js/main.js toggles .can-scroll-left/.can-scroll-right
   on the wrapper in the same updateArrows() pass that disables the
   arrows — a fade is opaque ONLY while the track can scroll that
   way, so the first/last card never gets whited out at rest.
   (Reduced-motion global kill-switch above neuters the transition.) */
@media (min-width: 1024px) {
  #paket .reveal.relative::before,
  #paket .reveal.relative::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #paket .reveal.relative::before {
    left: 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  }
  #paket .reveal.relative::after {
    right: 0;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
  }
  #paket .reveal.relative.can-scroll-left::before {
    opacity: 1;
  }
  #paket .reveal.relative.can-scroll-right::after {
    opacity: 1;
  }
}

/* Carousel arrows — hover lift via shadow + brand tint.
   Deliberately NO transform: Tailwind owns -translate-y-1/2 here. */
#carousel-prev,
#carousel-next {
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
#carousel-prev:hover,
#carousel-next:hover {
  color: #0f766e;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}