/* ===== SainsXplor Tawau · Static · Custom styles ===== */
:root {
  --sx-navy: #1E2A78;
  --sx-navy-dark: #0F1845;
  --sx-red: #E81E2A;
  --sx-red-dark: #B8141F;
  --sx-cream: #FAF7F0;
  --sx-ink: #0B0F2E;
  --sx-amber: #F5B947;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(900px 600px at 8% -8%, rgba(232,30,42,0.05), transparent 65%),
    radial-gradient(900px 500px at 95% 12%, rgba(30,42,120,0.06), transparent 60%),
    var(--sx-cream);
  color: var(--sx-ink);
  font-family: "Figtree", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sx-red); color: var(--sx-cream); }

.font-display { font-family: "Unbounded", "Figtree", sans-serif; letter-spacing: -0.02em; }
.font-mono-x { font-family: "JetBrains Mono", monospace; }

/* Subtle grid */
.bg-grid {
  background-image:
    linear-gradient(rgba(30,42,120,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,42,120,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.bg-grid-dark {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Marquee */
@keyframes sx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.sx-marquee-track {
  display: flex;
  width: max-content;
  animation: sx-marquee 30s linear infinite;
}

/* Outline X watermark */
.x-outline { -webkit-text-stroke: 2px rgba(30,42,120,0.18); color: transparent; font-family: "Unbounded", sans-serif; font-weight: 900; }
.x-outline-dark { -webkit-text-stroke: 2px rgba(255,255,255,0.18); color: transparent; font-family: "Unbounded", sans-serif; font-weight: 900; }

/* Sticker shadow */
.sticker {
  box-shadow: 0 1px 0 rgba(11,15,46,0.05),
              0 4px 14px rgba(11,15,46,0.06),
              0 16px 28px -16px rgba(30,42,120,0.12);
}

/* Brutal hover */
.brutal {
  box-shadow: 6px 6px 0 0 var(--sx-ink);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.brutal:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 0 var(--sx-ink);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sx-cream); }
::-webkit-scrollbar-thumb { background: rgba(30,42,120,0.4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(30,42,120,0.7); }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sx-red);
  outline-offset: 2px;
}

/* Slow ping */
@keyframes slow-ping {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.6); opacity: 0; }
}
.slow-ping { animation: slow-ping 2.4s cubic-bezier(0,0,0.2,1) infinite; }

/* Float-X */
@keyframes float-rotate {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-14px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.float-x { animation: float-rotate 9s ease-in-out infinite; }

/* Hero overlay */
.hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
  mix-blend-mode: luminosity;
}
.hero-bg-img.is-active { opacity: 0.55; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,24,69,0.85), rgba(30,42,120,0.80) 50%, rgba(11,15,46,0.90));
}

/* Fade-in on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Flatpickr theming */
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--sx-red) !important;
  border-color: var(--sx-red) !important;
}
.flatpickr-day:hover { background: #EBECF5 !important; }
.flatpickr-calendar { font-family: "Figtree", sans-serif; }

/* Utilities not in core tailwind config (we’re on CDN — JIT covers most) */
.gallery-big-tl { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
.gallery-big-bl { grid-column: span 2 / span 2; }
.gallery-tall { grid-row: span 2 / span 2; }

/* Lightbox */
.lightbox { display: none; }
.lightbox.is-open { display: flex; }

/* Lang button active */
.lang-btn[aria-pressed="true"] { background: var(--sx-navy); color: white; }
.lang-btn[aria-pressed="false"] { color: rgba(30,42,120,0.7); }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.is-open { display: flex; }