/* ==========================================================================
   Genesa Revenue OS - Marketing Site Motion
   Port of Design System v6 (genesa-dashboard/app/globals.css) to pure CSS.
   Pure CSS + vanilla JS. No Node runtime on the server.
   Task: MKT-010
   ========================================================================== */

/* ---------- 1. Motion tokens (identical to Design System v6) ---------- */
:root {
  /* Easing */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* reveal, masuk */
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);   /* keluar */
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);  /* pindah posisi */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Durasi */
  --dur-fast:   150ms;   /* hover, micro */
  --dur-base:   300ms;   /* transisi umum */
  --dur-slow:   600ms;   /* reveal besar */
  --dur-slower: 900ms;   /* hero / parallax */
  --dur-feedback: 180ms;

  /* Offset reveal */
  --reveal-y: 24px;
  --reveal-x: 32px;
  --motion-card-lift: 4px;
  --motion-press-scale: 0.98;

  /* Stagger */
  --stagger-step: 80ms;
}

/* ---------- 2. Progressive enhancement: hide only when JS enabled ---------- */
/* Tanpa JS (no .js class), konten tetap tampil (opacity 1). */
html.motion-ready [data-reveal],
html.motion-ready .reveal,
html.motion-ready .reveal-left,
html.motion-ready .reveal-right,
html.motion-ready .reveal-scale,
html.motion-ready .reveal-stagger {
  opacity: 0;
  will-change: opacity, transform;
}
html.motion-ready [data-reveal]            { transform: translateY(var(--reveal-y)); }
html.motion-ready .reveal                  { transform: translateY(32px); }
html.motion-ready .reveal-left             { transform: translateX(calc(-1 * var(--reveal-x))); }
html.motion-ready .reveal-right            { transform: translateX(var(--reveal-x)); }
html.motion-ready .reveal-scale            { transform: scale(0.92); }
html.motion-ready .reveal-stagger          { transform: translateY(32px); }

html.motion-ready [data-reveal].is-visible,
html.motion-ready .reveal.is-visible,
html.motion-ready .reveal-left.is-visible,
html.motion-ready .reveal-right.is-visible,
html.motion-ready .reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

html.motion-ready .reveal-stagger.revealed { opacity: 1; transform: none; }
html.motion-ready .reveal-stagger.revealed > * {
  opacity: 1;
  transform: none;
}

/* Stagger delays for children */
html.motion-ready .reveal-stagger > *,
html.motion-ready [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
html.motion-ready .reveal-stagger.revealed > *,
html.motion-ready [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Transition timing for reveal elements */
html.motion-ready [data-reveal],
html.motion-ready .reveal,
html.motion-ready .reveal-left,
html.motion-ready .reveal-right,
html.motion-ready .reveal-scale {
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}

/* ---------- 3. Hero & entrance (plays on load) ---------- */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}
/* MKT-020: judul hero = elemen LCP — animasi transform-only agar langsung terpaint. */
@keyframes heroRise {
  from { transform: translateY(32px); }
  to   { transform: none; }
}
.hero-title,
.page-hero h1 {
  animation: heroRise var(--dur-slower) var(--ease-out-expo) both;
}
.hero-sub,
.page-hero p {
  animation: heroUp var(--dur-slower) var(--ease-out-expo) 120ms both;
}
.hero-cta,
.hero-actions {
  animation: heroUp var(--dur-slower) var(--ease-out-expo) 240ms both;
}
.hero-eyebrow,
.eyebrow {
  animation: heroUp var(--dur-slow) var(--ease-out-expo) 60ms both;
}

/* ---------- 4. Hover / micro-interactions ---------- */
.btn,
.btn-primary,
.btn-outline,
.nav-cta {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-primary:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25);
}
.btn-primary:active,
.nav-cta:active {
  transform: translateY(0) scale(var(--motion-press-scale));
}
.btn-outline:hover {
  transform: translateY(-1px);
}
.card,
.price-card,
.step,
.trust-item,
.pipe-step,
.module-row,
.hero-card,
.faq-item {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.faq-q {
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-q:hover { color: var(--brand, #1e3a8a); }
html.interaction-ready .faq-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.125rem;
  transition: max-height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-smooth);
}
html.interaction-ready .faq-item.open .faq-a { max-height: 40rem; padding: 0 1.125rem 1.125rem; }
html:not(.interaction-ready) .faq-a {
  max-height: none;
  overflow: visible;
  padding: 0 1.125rem 1.125rem;
}
.lang-switch a {
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.logo-mark {
  transition: transform var(--dur-base) var(--ease-spring);
}
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .price-card:hover,
  .step:hover,
  .trust-item:hover,
  .pipe-step:hover,
  .module-row:hover,
  .hero-card:hover {
    transform: translateY(calc(-1 * var(--motion-card-lift)));
    box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.18);
  }
}

/* ---------- 5. Card / feature reveal ---------- */
.card,
.step,
.trust-item,
.price-card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

/* ---------- 6. Animated counter (tabular nums) ---------- */
.stat-number,
.trust-item .num,
.price-card .price {
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. Focus visible (a11y) ---------- */
:focus-visible {
  outline: 2px solid var(--brand-light, #3b82f6);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip-link:focus {
  position: absolute; top: 8px; left: 8px; z-index: 100;
  background: #fff; padding: 8px 12px; border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

/* ---------- 8. Stagger utility delays ---------- */
.stagger-1 { animation-delay: 0.08s; }
.stagger-2 { animation-delay: 0.16s; }
.stagger-3 { animation-delay: 0.24s; }
.stagger-4 { animation-delay: 0.32s; }
.stagger-5 { animation-delay: 0.40s; }
.stagger-6 { animation-delay: 0.48s; }
.stagger-7 { animation-delay: 0.56s; }
.stagger-8 { animation-delay: 0.64s; }

/* ---------- 9. Curated animation utilities ---------- */
@keyframes fade-in-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-in-right{ from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scale-in     { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes float        { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-dot    { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }
@keyframes pulse-glow   { 0%,100% { box-shadow: 0 0 0 0 rgb(30 58 138 / 0.35); } 50% { box-shadow: 0 0 20px 4px rgb(30 58 138 / 0.18); } }
@keyframes glow-breathe { 0%,100% { opacity: 0.4; } 50% { opacity: 0.8; } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer      { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes bounce-subtle{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes marquee      { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.animate-fade-in-up    { animation: fade-in-up 0.7s var(--ease-out-expo) both; }
.animate-fade-in-down  { animation: fade-in-down 0.6s var(--ease-out-expo) both; }
.animate-fade-in-left  { animation: fade-in-left 0.6s var(--ease-out-expo) both; }
.animate-fade-in-right { animation: fade-in-right 0.6s var(--ease-out-expo) both; }
.animate-scale-in      { animation: scale-in 0.5s var(--ease-spring) both; }
.animate-float         { animation: float 6s ease-in-out infinite; }
.animate-pulse-dot     { animation: pulse-dot 2s ease-in-out infinite; }
.animate-pulse-glow    { animation: pulse-glow 3s ease-in-out infinite; }
.animate-glow-breathe  { animation: glow-breathe 4s ease-in-out infinite; }
.animate-bounce-subtle { animation: bounce-subtle 2s ease-in-out infinite; }
.animate-marquee       { animation: marquee 30s linear infinite; }
.text-gradient {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #8b5cf6);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 5s ease infinite;
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.375rem;
}

@keyframes feedback-enter {
  from { opacity: 0; transform: translateY(0.375rem); }
  to { opacity: 1; transform: translateY(0); }
}
.form-feedback:not(:empty) {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-inline-start: 3px solid var(--color-action, #2563eb);
  border-radius: 0 var(--radius-sm, 0.375rem) var(--radius-sm, 0.375rem) 0;
  animation: feedback-enter var(--dur-feedback) var(--ease-out) both;
}
.form-feedback[data-feedback-state="error"],
.form-feedback[data-feedback-state="pending"] { border-inline-start-color: var(--color-warning, #b45309); }
.form-feedback[data-feedback-state="confirmed"] { border-inline-start-color: var(--color-success, #047857); }

/* ---------- 10. Reduced motion (a11y) ---------- */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready .reveal,
  html.motion-ready .reveal-left,
  html.motion-ready .reveal-right,
  html.motion-ready .reveal-scale,
  html.motion-ready .reveal-stagger,
  html.motion-ready .reveal-stagger > *,
  html.motion-ready [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 11. Print: no motion ---------- */
@media print {
  * { animation: none !important; transition: none !important; }
}

/* MKT-018: JS-enhanced mobile nav; static navigation remains available otherwise. */
@media (max-width: 720px) {
  html:not(.interaction-ready) .site-header { position: static; }
  html:not(.interaction-ready) .nav {
    display: flex;
    flex-direction: column;
    position: static;
    width: 100%;
    order: 3;
    padding: 0.5rem 0 0;
    background: transparent;
    box-shadow: none;
  }
  html:not(.interaction-ready) .nav .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  html:not(.interaction-ready) .nav .nav-links a { min-height: 2.75rem; display: flex; align-items: center; }
  html:not(.interaction-ready) .nav .nav-cta { width: fit-content; }
  html:not(.interaction-ready) .menu-toggle { display: none; }
  html.interaction-ready .nav { display: none; }
  html.interaction-ready .nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    inset: 4.5rem 0 auto;
    padding: 1.25rem var(--page-gutter, 1.25rem) 1.75rem;
    gap: 1rem;
    background: rgb(9 16 30);
    border-bottom: 1px solid var(--color-border-dark, rgb(255 255 255 / 0.12));
    box-shadow: 0 32px 64px -24px rgb(2 6 23 / 0.8);
    animation: fade-in-down var(--dur-fast) var(--ease-out) both;
  }
  html.interaction-ready .nav.open .nav-links a { width: 100%; min-height: 3rem; }
  html.interaction-ready .menu-toggle { display: block; }
}
@media (max-width: 420px) {
  html.interaction-ready .nav.open { top: 6rem; }
}

@media (hover: none) {
  .feature-card:hover,
  .step:hover,
  .price-card:hover { transform: none; }
}

/* MKT-018: stagger children mendapat indeks sendiri (bukan mewarisi indeks kontainer). */
html.motion-ready .reveal-stagger > *:nth-child(1),
html.motion-ready [data-reveal-stagger] > *:nth-child(1) { --i: 0; }
html.motion-ready .reveal-stagger > *:nth-child(2),
html.motion-ready [data-reveal-stagger] > *:nth-child(2) { --i: 1; }
html.motion-ready .reveal-stagger > *:nth-child(3),
html.motion-ready [data-reveal-stagger] > *:nth-child(3) { --i: 2; }
html.motion-ready .reveal-stagger > *:nth-child(4),
html.motion-ready [data-reveal-stagger] > *:nth-child(4) { --i: 3; }
html.motion-ready .reveal-stagger > *:nth-child(5),
html.motion-ready [data-reveal-stagger] > *:nth-child(5) { --i: 4; }
html.motion-ready .reveal-stagger > *:nth-child(6),
html.motion-ready [data-reveal-stagger] > *:nth-child(6) { --i: 5; }
html.motion-ready .reveal-stagger > *:nth-child(7),
html.motion-ready [data-reveal-stagger] > *:nth-child(7) { --i: 6; }
html.motion-ready .reveal-stagger > *:nth-child(8),
html.motion-ready [data-reveal-stagger] > *:nth-child(8) { --i: 7; }

/* MKT-018: ribbon alur — reduced-motion menampilkan daftar statis tanpa loop. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    animation: none !important;
    transform: none !important;
  }
  .marquee-group + .marquee-group { display: none; }
  .scroll-progress { display: none; }
}

/* MKT-018: header mengeras saat scroll (JS menambah .is-scrolled). */
.site-header {
  transition: background var(--dur-base, 300ms) ease, box-shadow var(--dur-base, 300ms) ease;
}
.site-header.is-scrolled {
  background: rgb(11 18 32 / 0.97);
  box-shadow: 0 16px 40px -20px rgb(2 6 23 / 0.55);
}