/**
 * Lumenoid Base Styles
 * Tailwind preflight is ON — this file adds what preflight doesn't cover:
 * custom font stacks, fluid type, token-based component primitives.
 */

/* ─── Restore intentional base after Tailwind preflight ─── */

html {
  font-size: 16px;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100%;
}

/* Tailwind preflight sets img to display:block, max-width:100% — good */
/* Tailwind preflight resets margins — good */
/* We only need to layer our token-based styles on top */

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--color-accent-1); outline-offset: 3px; border-radius: 4px; }

/* ─── Container ─── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─── Section vertical rhythm ─── */

.section {
  padding-block: var(--section-y);
}

/* ─── Typography — named semantic classes ─── */

.display-1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

.heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.heading-3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

.heading-4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.text-accent-note {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* Gradient text — core brand treatment */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── Divider ─── */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

/* ─── Scroll progress ─── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--gradient-brand-h);
  z-index: var(--z-modal);
  pointer-events: none;
}

/* ─── Scroll reveal ─── */

/* Uses keyframe animations + the individual `translate` property so it never
   fights component transitions or existing transforms (tilted mocks, hover lifts). */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible {
  animation: reveal-up var(--duration-crawl) var(--ease-expo) both;
  animation-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="left"].is-visible  { animation-name: reveal-left; }
.js [data-reveal="right"].is-visible { animation-name: reveal-right; }
.js [data-reveal="fade"].is-visible  { animation-name: reveal-fade; }

@keyframes reveal-up    { from { opacity: 0; translate: 0 var(--reveal-distance); } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-left  { from { opacity: 0; translate: calc(var(--reveal-distance) * -1.4) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-right { from { opacity: 0; translate: calc(var(--reveal-distance) * 1.4) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-fade  { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; }
  .js [data-reveal].is-visible { animation: none; }
}

.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition:
    opacity var(--duration-slow) var(--ease-expo),
    transform var(--duration-slow) var(--ease-expo);
}
.word-reveal.is-visible .word { opacity: 1; transform: none; }

/* ─── Cursor orb ─── */

#cursor-orb {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,61,232,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: left 0.55s var(--ease-expo), top 0.55s var(--ease-expo);
}