/*
 * NAARI.AI — "Luminous Depth" Design System (static build)
 * Ground: Deep plum-black · Text: Warm cream · Accent: Terracotta-gold
 * Typography: Cormorant Garamond (display) + DM Sans (body) + DM Mono (data)
 */

:root {
  --radius: 0.25rem;

  --background: oklch(0.14 0.06 310);
  --foreground: oklch(0.96 0.02 80);
  --card: oklch(0.18 0.055 310);
  --card-foreground: oklch(0.96 0.02 80);
  --popover: oklch(0.18 0.055 310);
  --popover-foreground: oklch(0.96 0.02 80);
  --primary: oklch(0.62 0.1 50);
  --primary-foreground: oklch(0.14 0.06 310);
  --secondary: oklch(0.25 0.05 310);
  --secondary-foreground: oklch(0.96 0.02 80);
  --muted: oklch(0.22 0.05 310);
  --muted-foreground: oklch(0.68 0.02 80);
  --accent: oklch(0.62 0.1 50);
  --accent-foreground: oklch(0.14 0.06 310);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 8%);
  --input: oklch(1 0 0 / 10%);
  --ring: oklch(0.62 0.1 50);

  --naari-plum: oklch(0.14 0.06 310);
  --naari-plum-mid: oklch(0.18 0.055 310);
  --naari-plum-light: oklch(0.25 0.05 310);
  --naari-cream: oklch(0.96 0.02 80);
  --naari-cream-dim: oklch(0.78 0.018 80);
  --naari-terracotta: oklch(0.62 0.1 50);
  --naari-terracotta-dim: oklch(0.52 0.08 50);
  --naari-sage: oklch(0.68 0.06 145);
}

* {
  box-sizing: border-box;
  border-color: var(--border);
  outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  margin: 0;
}

p { margin: 0; }

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled),
a[href],
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled) {
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Container utility */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 1024px) {
  .container { padding-left: 3rem; padding-right: 3rem; max-width: 1400px; }
}

/* Brand utilities */
.font-display { font-family: 'Cormorant Garamond', serif; }
.font-mono-data { font-family: 'DM Mono', monospace; }

.text-terracotta { color: var(--naari-terracotta); }
.text-cream { color: var(--naari-cream); }
.text-cream-dim { color: var(--naari-cream-dim); }
.text-sage { color: var(--naari-sage); }

.bg-plum { background-color: var(--naari-plum); }
.bg-plum-mid { background-color: var(--naari-plum-mid); }
.bg-plum-light { background-color: var(--naari-plum-light); }

.border-terracotta { border-color: var(--naari-terracotta); }
.border-terracotta-dim { border-color: var(--naari-terracotta-dim); }

/* Vertical spine line */
.spine-line { animation: spineGlow 3s ease-in-out infinite; }

@keyframes spineGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* Stat counter reveal */
@keyframes statReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero line reveal wrapper */
.line-reveal { overflow: hidden; }

/* Scroll fade-up */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Frosted glass card */
.glass-card {
  background: oklch(1 0 0 / 4%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid oklch(1 0 0 / 8%);
}

/* Terracotta underline on hover */
.hover-underline { position: relative; }
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--naari-terracotta);
  transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.hover-underline:hover::after { width: 100%; }

/* Press feedback */
.btn-naari {
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.2s ease,
              color 0.2s ease;
}
.btn-naari:active { transform: scale(0.97); }

/*
 * Hero on-load animation
 * Mirrors React heroVisible state — elements start hidden + translated,
 * then transition to visible when body gets .hero-loaded.
 */
.hero-fade {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateY(1rem);
}
.hero-fade.t-6 { transform: translateY(1.5rem); }
.hero-fade.t-full { transform: translateY(100%); }
.hero-fade.t-none { transform: none; }
.hero-fade.d-900 {
  transition-duration: 0.9s;
}
body.hero-loaded .hero-fade {
  opacity: 1;
  transform: translateY(0);
}

/* Stat block reveal once visible */
.stat-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.stat-block.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Waitlist spinner */
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Waitlist success card animation */
.waitlist-success {
  animation: statReveal 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* Mobile menu (hidden by default, shown when body.menu-open) */
.mobile-menu { display: none; }
body.menu-open .mobile-menu { display: flex; }

/* Hamburger transforms */
.hamburger-bar {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--naari-cream);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger-bar.mid { width: 1rem; }
body.menu-open .hamburger-bar.top { transform: rotate(45deg) translate(2px, 2px); }
body.menu-open .hamburger-bar.mid { opacity: 0; }
body.menu-open .hamburger-bar.bot { transform: rotate(-45deg) translate(2px, -2px); }

/* Form input — placeholder opacity */
input::placeholder { opacity: 0.4; }

/* Prevent body scroll when mobile menu is open */
body.menu-open { overflow: hidden; }