/* ============================================================
   Bakat.id landing page — custom styles
   Tailwind utility classes do most of the styling; this file
   holds tokens, custom components, and motion preferences.
   ============================================================ */

:root {
  --bg: #FBFAF8;
}

html, body {
  background: var(--bg);
  color: #1B2A4E;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-feature-settings: "cv11", "ss03";
}

/* Editorial italic accent: serif, slight weight bump, optical-sized */
.accent {
  font-family: 'Fraunces', 'Plus Jakarta Sans', serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.01em;
}

/* Tighten display headlines */
.display-tight {
  letter-spacing: -0.025em;
}

.container-x {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1180px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .container-x {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

main { overflow: hidden; }

/* Focus rings — visible only on keyboard nav */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #1570F9;
  outline-offset: 3px;
  border-radius: 999px;
}
.card-inner:focus-visible {
  outline-offset: 4px;
  border-radius: 28px;
}
/* On dark surfaces use white ring */
.on-dark a:focus-visible,
.on-dark button:focus-visible {
  outline-color: #FFFFFF;
}

/* Newsletter input wrapper focus-within */
.nl-form:focus-within {
  box-shadow: 0 0 0 3px rgba(21, 112, 249, 0.18),
              0 8px 28px -12px rgba(20, 35, 80, 0.14);
  border-color: #1570F9;
}

/* Pagination dot */
.pg-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transition: width .35s cubic-bezier(.2, .8, .2, 1), background .25s;
}
.pg-dot[data-active="true"] {
  width: 22px;
  background: #fff;
}

/* Ambient drifting stamps (decorative SVG layer in hero) */
.stamp {
  position: absolute;
  pointer-events: none;
  opacity: 0.10;
}
/* Hide ambient stamps on mobile to keep hero content clean */
@media (max-width: 639px) {
  .stamp { display: none; }
}

/* ------------------------------------------------------------
   Delight micro-interactions
   ------------------------------------------------------------ */

/* Coming Soon card: padlock shakes briefly on card hover */
@keyframes lockShake {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-8deg); }
  40%      { transform: rotate(6deg); }
  60%      { transform: rotate(-4deg); }
  80%      { transform: rotate(2deg); }
}
.card-inner:hover .lock-icon {
  animation: lockShake 0.55s ease-out;
  transform-origin: 50% 30%;
}

/* Conflict Language card: heart pulses gently (heartbeat motif) */
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.heart-icon {
  animation: heartPulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Manfaat pill: mascot illustration waves on hover */
@keyframes mascotWave {
  0%, 100% { transform: rotate(0) scale(1); }
  30%      { transform: rotate(-6deg) scale(1.08); }
  60%      { transform: rotate(4deg) scale(1.04); }
}
.group:hover .mascot-img {
  animation: mascotWave 0.7s ease-out;
}

/* Reduced motion: hide path-animated dots and short-circuit animations */
@media (prefers-reduced-motion: reduce) {
  .motion-dots { display: none; }
  .lock-icon, .heart-icon, .mascot-img { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}