/* ====================================================================
   style.css — Custom styles pelengkap Tailwind
   ==================================================================== */

* { scroll-behavior: smooth; }

body {
  background-color: #F7F9FC;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(26, 167, 232, 0.08), transparent 24%),
    radial-gradient(circle at 80% 8%, rgba(105, 125, 255, 0.05), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247,249,252,0.96));
  background-attachment: fixed;
}

::selection { background: rgba(26, 167, 232, 0.2); color: #0F172A; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EEF3F9; }
::-webkit-scrollbar-thumb { background: #B9C7D9; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #1AA7E8; }

/* Nav link underline animation */
.nav-link { position: relative; padding-bottom: 4px; transition: color .2s ease; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: #39C7FF;
  transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* Focus visibility (aksesibilitas) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #39C7FF;
  outline-offset: 2px;
}

/* ====================================================================
   SIGNATURE ELEMENT — Video Wall Hero Grid
   Grid tile bercahaya bergantian, merepresentasikan produk video wall
   asli milik Starva. Dihormati prefers-reduced-motion.
   ==================================================================== */
.vw-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
  width: 100%;
  height: 100%;
}
.vw-tile {
  background: #10141F;
  border: 1px solid #222938;
  border-radius: 2px;
  opacity: 0.5;
  animation: vw-flicker 6s ease-in-out infinite;
}
.vw-tile.signal { background: rgba(57,199,255,0.18); border-color: rgba(57,199,255,0.5); }
.vw-tile.alert { background: rgba(255,114,76,0.14); border-color: rgba(255,114,76,0.4); }

@keyframes vw-flicker {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .vw-tile { animation: none; opacity: 0.6; }
  * { scroll-behavior: auto !important; }
}

/* Category card hover lift */
.cat-card { transition: transform .25s ease, border-color .25s ease; }
.cat-card:hover { transform: translateY(-4px); border-color: #39C7FF; }

/* Reveal animation fallback for no-JS */
.no-js [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .45s ease, transform .45s ease;
}
.js [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Brand marquee */
.brand-row {
  overflow: hidden;
}
.brand-track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem;
}
.brand-row--ltr .brand-track {
  animation-direction: reverse;
}
.brand-row--rtl .brand-track {
  animation-direction: normal;
}
.brand-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 7rem;
  height: 2.5rem;
}
.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 2rem;
  max-width: 7rem;
  filter: none;
  object-fit: contain;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Project filter buttons inherit default colors (match product style) */
/* Active project filter: make text black when button has bg-signal (active) */
.project-filters .bg-signal {
  color: #000 !important;
}
.project-filters .bg-signal * {
  color: inherit !important;
}
/* Line clamp utilities (fallback jika Tailwind CDN versi lama) */
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.video-wall-feed {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-wall-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.video-wall-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.video-wall-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease;
}

.video-wall-dot.active {
  width: 1.5rem;
  background: #39C7FF;
  border-color: #39C7FF;
}

/* Promo flyer modal
   Catatan: styling detail (ukuran, warna, posisi) sengaja dikelola lewat
   class Tailwind langsung di HTML (partials/footer.php), bukan di sini,
   supaya tidak ada override tersembunyi yang sulit dilacak. */
#promoPopup {
  display: flex;
}
#promoPopup.hidden {
  display: none !important;
}
#promoPopupOverlay {
  backdrop-filter: blur(6px);
}