/*
 * Gaya & animasi situs Mocilabs.
 * Sengaja berupa file statis (bukan Vite) karena produksi hanya memakai Tailwind CDN,
 * sehingga resources/css/app.css tidak ikut tayang.
 */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }

/* ---------- Komponen dasar (dipindah dari resources/css/app.css) ---------- */
.glass-panel {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}
.dark .glass-panel {
  background-color: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.glow-blue { box-shadow: 0 0 35px -5px rgba(37, 99, 235, 0.3); }
.glow-cyan { box-shadow: 0 0 35px -5px rgba(6, 182, 212, 0.3); }
.bg-radial-gradient { background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.15), transparent 70%); }
.dark .bg-radial-gradient { background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.25), transparent 70%); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2563eb; }

/* ---------- Navbar: progres scroll & bayangan saat discroll ---------- */
.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, #4f46e5, #2563eb, #22d3ee);
  pointer-events: none;
}
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(2, 6, 23, .35); }

/* ---------- Logo: titik kuning berkedip seperti kursor saat halaman dibuka ---------- */
.logo-dot { transform-box: fill-box; transform-origin: center; animation: logo-blink 1.1s steps(1) .6s 3; }
a:hover > svg .logo-dot { animation: logo-pop .5s var(--ease-out); }
@keyframes logo-blink { 50% { opacity: 0; } }
@keyframes logo-pop { 40% { transform: scale(1.35); } }

/* ---------- Hero: urutan masuk, gradasi bergerak, cahaya latar mengambang ---------- */
.hero-in { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
@keyframes rise {
  from { opacity: 0; translate: 0 22px; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}
.text-flow { background-size: 200% auto; animation: text-flow 8s ease-in-out infinite alternate; }
@keyframes text-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.orb { animation: orb-drift 18s ease-in-out infinite alternate; }
.orb-2 { animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes orb-drift {
  0%   { translate: 0 0; scale: 1; }
  50%  { translate: 60px -30px; scale: 1.08; }
  100% { translate: -50px 25px; scale: .95; }
}

.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, .12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, .12) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

/* ---------- Tombol utama: kilau menyapu saat hover ---------- */
.btn-sheen { position: relative; overflow: hidden; isolation: isolate; }
.btn-sheen::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  translate: -120% 0;
}
.btn-sheen:hover::after { translate: 120% 0; transition: translate .8s var(--ease-out); }

/* ---------- Kartu kaca: sorotan cahaya mengikuti kursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .glass-panel {
    background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(37, 99, 235, .10), transparent 45%);
  }
  .dark .glass-panel {
    background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(34, 211, 238, .09), transparent 45%);
  }
}

/* ---------- Muncul saat discroll (hanya aktif bila JS berjalan) ---------- */
.js-motion [data-reveal]:not(.is-in) { opacity: 0; }
.js-motion [data-reveal].is-in {
  animation: reveal .8s var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}
@keyframes reveal {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- Mockup produk mengambang ---------- */
.float-soft { animation: float-soft 7s ease-in-out infinite; }
@keyframes float-soft { 50% { translate: 0 -10px; } }
.status-live { position: relative; }
.status-live::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, .5); animation: ring 2.4s ease-out infinite;
}
@keyframes ring { 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); } }

/* ---------- FAQ: buka-tutup halus ---------- */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq-panel > div { overflow: hidden; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }

/* ---------- Hormati preferensi kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important; transition-duration: 1ms !important;
  }
  .js-motion [data-reveal]:not(.is-in) { opacity: 1; }
}

/* Navbar memakai .glass-panel, tapi tidak perlu sorotan kursor. */
.site-header.glass-panel { background-image: none; }

/* ---------- Latar animasi ---------- */
/* Hero: kanvas jaringan sinyal (digambar oleh public/js/site.js) */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 40%, transparent 100%);
}

/* Aurora: gradasi berputar pelan di balik section */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(79, 70, 229, .28) 60deg, transparent 120deg,
              rgba(34, 211, 238, .22) 200deg, transparent 260deg, rgba(37, 99, 235, .25) 320deg, transparent 360deg);
  filter: blur(90px);
  animation: aurora-spin 40s linear infinite;
}
.aurora-soft::before { opacity: .45; animation-duration: 60s; }
.dark .aurora-soft::before { opacity: .6; }
@keyframes aurora-spin { to { rotate: 360deg; } }

/* Grid yang bergerak perlahan (untuk section gelap) */
.grid-drift {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  animation: grid-drift 24s linear infinite;
}
@keyframes grid-drift { to { background-position: 48px 48px; } }
.aurora.is-paused::before, .grid-drift.is-paused { animation-play-state: paused; }