/* ═══════════════════════════════════════════════════════════
   base.css — Variables, Reset, Body
   Theme: NEOBRUTALISM — Off-white canvas, ink-black structure,
   electric blue / cyan accents.
═══════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg:          #F5F3EE;
  --bg-card:     #FFFFFF;
  --bg-card2:    #FFFDF7;

  /* ── Ink ──────────────────────────────────────────────── */
  --ink:         #0A0A0A;
  --ink-soft:    #1C1C1C;

  /* ── Accents ──────────────────────────────────────────── */
  --blue:        #3B82F6;
  --cyan:        #06B6D4;
  --blue-light:  #60A5FA;
  --cyan-light:  #38BDF8;
  --green:       #25D366;
  --violet:      #8B5CF6;
  --white:       #FFFFFF;

  /* ── Text on light surfaces ───────────────────────────── */
  --gray-1:      rgba(10,10,10,0.88);
  --gray-2:      rgba(10,10,10,0.62);
  --gray-3:      rgba(10,10,10,0.40);
  --gray-4:      rgba(10,10,10,0.08);
  --border:      var(--ink);
  --border-glow: rgba(59,130,246,0.45);

  --grad-blue:   linear-gradient(135deg, #3B82F6, #06B6D4);
  --grad-card:   var(--bg-card);

  /* ── Neobrutalist hard shadow system: solid, offset, no blur ── */
  --shadow-sm:   3px 3px 0 var(--ink);
  --shadow-md:   5px 5px 0 var(--ink);
  --shadow-lg:   8px 8px 0 var(--ink);
  --shadow-blue: 5px 5px 0 var(--blue);
  --shadow-cyan: 5px 5px 0 var(--cyan);
  --shadow-green:5px 5px 0 var(--green);

  --radius:      14px;
  --radius-sm:   10px;
  --border-w:    3px;
  --border-w-lg: 4px;

  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-snap:   cubic-bezier(0.16,1,0.3,1);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ── Proteksi konten dasar ──────────────────────────────── */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

img, video {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

.allow-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ── Keyframes ────────────────────────────────────────────
   All animation here only ever touches transform / opacity,
   so it stays compositor-only and cheap on low-end phones. ── */
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes pulseGlow {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@keyframes blobDrift {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  33%      { transform: translate(18px,-12px) rotate(4deg); }
  66%      { transform: translate(-14px,10px) rotate(-3deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes rippleOut {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* Gentle idle float — used sparingly (avatar ring, icon chips) */
@keyframes floatSoft {
  0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-4px) rotate(var(--r, 0deg)); }
}

/* Idle breathing scale — for status dots / live indicators */
@keyframes breathe {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ── Reveal variants — each carries its own personality so the
   page-load sequence doesn't read as one repeated tween ──── */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(22px) rotate(var(--tilt, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
}

@keyframes revealPop {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.85); }
  70%  { opacity: 1; transform: translateY(2px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes revealScale {
  from { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Shared utilities ──────────────────────────────────── */
.text-shimmer {
  background: linear-gradient(90deg, #3B82F6, #38BDF8, #06B6D4, #2563EB, #3B82F6);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 4s linear infinite;
}

.hidden { opacity: 0; pointer-events: none; }
.visible { opacity: 1; pointer-events: auto; }

/* ── Ambient background — spans the FULL page height (not just one
   viewport), positioned relative to <body> rather than fixed to the
   screen. This means it scrolls along with the page, so new blobs
   keep appearing as you scroll instead of the same ones sitting
   pinned in place — that's the "kejut" / surprise-on-scroll feel. ── */
.ambient {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-blob {
  position: absolute;
  will-change: transform;
  opacity: 1;
  animation: blobDrift 22s ease-in-out infinite;
}

.blob-1 {
  width: 120px; height: 120px;
  background: var(--blue);
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
  top: 5%; left: -40px;
  opacity: 0.16;
}

.blob-2 {
  width: 90px; height: 90px;
  background: var(--cyan);
  border: var(--border-w) solid var(--ink);
  top: 22%; right: -30px;
  opacity: 0.14;
  animation-duration: 26s;
  animation-direction: reverse;
}

.blob-3 {
  width: 56px; height: 56px;
  background: var(--violet);
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
  top: 40%; right: 8%;
  opacity: 0.12;
  animation-duration: 19s;
  animation-delay: -6s;
}

.blob-4 {
  width: 100px; height: 100px;
  background: var(--green);
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
  top: 62%; left: -36px;
  opacity: 0.14;
  animation-duration: 24s;
  animation-delay: -3s;
}

.blob-5 {
  width: 70px; height: 70px;
  background: var(--blue);
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
  top: 84%; right: -26px;
  opacity: 0.13;
  animation-duration: 21s;
  animation-direction: reverse;
  animation-delay: -9s;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.05) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(10,10,10,0.05) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
}

/* ── Main app ──────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  transition: opacity 0.6s var(--ease-smooth);
}

#app.hidden  { opacity: 0; }
#app.visible { opacity: 1; }

/* ── Reveal animations — three flavors, picked per element so
   the entrance sequence feels orchestrated, not monotone.
   All fire once via IntersectionObserver, all transform/opacity. ── */
.reveal-up, .reveal-pop, .reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal-up    { transform: translateY(22px) rotate(0deg); }
.reveal-pop   { transform: translateY(-10px) scale(0.85); }
.reveal-scale { transform: scale(0.6) rotate(-6deg); }

.reveal-up.in {
  animation: revealUp 0.55s var(--ease-snap) forwards;
  animation-delay: var(--delay, 0s);
}
.reveal-pop.in {
  animation: revealPop 0.6s var(--ease-spring) forwards;
  animation-delay: var(--delay, 0s);
}
.reveal-scale.in {
  animation: revealScale 0.55s var(--ease-spring) forwards;
  animation-delay: var(--delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-pop, .reveal-scale { transition: opacity 0.3s ease; transform: none; animation: none !important; opacity: 1; }
  .ambient-blob { animation: none; }
  .text-shimmer { animation: none; }
  .avatar-ring { animation: none; }
  .badge-dot { animation: none; }
  .avatar-status { animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.15ms !important; }
}