/* EduTraderIndo custom styles — design tokens beyond Tailwind's utility set */

@font-face {
  font-display: swap;
}

:root {
  --navy: #0B1220;
  --navy-2: #101A2E;
  --gold: #C9A24B;
  --gold-light: #E4C97A;
  --slate: #8B93A7;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--navy);
}

.font-display {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* Grid texture background, subtle */
.bg-grid {
  background-image:
    linear-gradient(rgba(201, 162, 75, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 75, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-radial-gold {
  background: radial-gradient(circle at 30% 20%, rgba(201, 162, 75, 0.18), transparent 55%);
}

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Custom scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: #2A3550; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Ticker marquee for "as featured" style strip (used sparingly, honest content only) */
.animate-marquee {
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card hover lift */
.card-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 75, 0.4);
  box-shadow: 0 20px 40px -20px rgba(201, 162, 75, 0.25);
}

/* Number badge with hairline connector, used in "Why" section */
.step-connector::after {
  content: "";
  position: absolute;
  top: 2.5rem;
  left: 1.5rem;
  bottom: -2rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(201, 162, 75, 0.4), transparent);
}
.step-connector:last-child::after { display: none; }