/* base.css - design tokens, reset, typography, cursor, loader */

:root {
  /* Painterly warm palette inspired by DUNA + monopo editorial */
  --cream: #f4ede4;
  --cream-2: #efe6da;
  --peach: #f6c9a8;
  --apricot: #f1a986;
  --lavender: #cfc3e8;
  --rose: #f3b6b0;
  --sky: #b9cfe0;
  --sage: #b8c9a9;

  --ink: #16130f;
  --ink-soft: #4a443c;
  --ink-mute: #8a8278;
  --line: rgba(22, 19, 15, 0.12);

  --accent: #ff5a3c;     /* THE single accent - signal coral */
  --accent-deep: #e23f23;
  --coral: #ff5a3c;

  --bg: var(--cream);
  --card: #fffaf3;
  --screen: #0e0b08;     /* the one dark - used only for "screens" + final CTA */

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 72px);
  --section-pad: clamp(72px, 8.25vw, 108px);   /* vertical rhythm between sections */
  --radius: 22px;
  --radius-lg: 34px;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: auto; /* Lenis handles smoothing */
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

::selection { background: var(--accent); color: #fff; }

/* Split-line wrappers (added by JS / i18n) */
.line { display: block; overflow: hidden; }
.line > span { display: block; }

/* Loader */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  background:
    radial-gradient(120% 80% at 50% 32%, rgba(255,90,60,0.10), transparent 60%),
    var(--ink);
  color: var(--cream);
  display: grid; place-items: center;
  overflow: hidden;
}
.loader__inner {
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 4vh, 40px);
  font-family: var(--font-display);
}

/* voice waveform */
.loader__wave {
  display: flex; align-items: center; gap: 7px; height: 56px;
}
.loader__wave i {
  width: 5px; height: 18px; border-radius: 99px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  transform-origin: center;
  animation: loaderWave 1.05s var(--ease-out) infinite;
  opacity: .92;
}
.loader__wave i:nth-child(1) { animation-delay: 0s;    }
.loader__wave i:nth-child(2) { animation-delay: .12s;  }
.loader__wave i:nth-child(3) { animation-delay: .24s;  }
.loader__wave i:nth-child(4) { animation-delay: .36s;  }
.loader__wave i:nth-child(5) { animation-delay: .24s;  }
.loader__wave i:nth-child(6) { animation-delay: .12s;  }
.loader__wave i:nth-child(7) { animation-delay: 0s;    }
@keyframes loaderWave {
  0%, 100% { transform: scaleY(0.5); opacity: .55; }
  50%      { transform: scaleY(2.7); opacity: 1; }
}

/* wordmark that fills with coral as it loads */
.loader__mark {
  position: relative;
  font-size: clamp(2.6rem, 9vw, 5.5rem); font-weight: 700; letter-spacing: -0.04em;
  line-height: 1;
}
.loader__mark-base { color: rgba(244,237,228,0.14); }
.loader__mark-fill {
  position: absolute; inset: 0;
  width: 0%; overflow: hidden; white-space: nowrap;
  background: linear-gradient(100deg, var(--peach), var(--accent) 55%, var(--apricot));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: width .25s var(--ease-out);
}

/* percentage */
.loader__foot {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 8vh, 64px);
  display: grid; place-items: center;
}
.loader__pct { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .05em; color: var(--ink-mute); }
.loader__pct b { color: var(--cream); font-weight: 500; font-variant-numeric: tabular-nums; }
.loader__pct i { color: var(--accent); font-style: normal; }

/* sweeping progress line */
.loader__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(244,237,228,0.10);
}
.loader__bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--peach));
  box-shadow: 0 0 14px rgba(255,90,60,0.7);
  transition: width .25s var(--ease-out);
}
.loader.is-done { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}