/* ============================================================
   BASE.CSS — Reset, Variables, Typography
   Mothrills 3D Studio
   ============================================================ */

/* ── CSS Variables ── */
:root {
  /* Core backgrounds */
  --bg:              #080810;
  --bg-raised:       #0c0c18;
  --surface:         #10101e;
  --surface-2:       #14142a;

  /* Glass */
  --glass:           rgba(255, 255, 255, 0.035);
  --glass-hover:     rgba(255, 255, 255, 0.06);
  --glass-strong:    rgba(255, 255, 255, 0.08);

  /* Borders */
  --border:          rgba(255, 255, 255, 0.07);
  --border-hover:    rgba(255, 255, 255, 0.14);
  --border-glow:     rgba(79, 172, 254, 0.35);

  /* Text */
  --text-primary:    #f0f0f8;
  --text-secondary:  #8b8ba8;
  --text-muted:      #4a4a6a;

  /* Accent — electric blue */
  --accent:          #4facfe;
  --accent-light:    #a8d8ff;
  --accent-deep:     #1a7eff;
  --accent-dim:      rgba(79, 172, 254, 0.12);
  --accent-glow:     rgba(79, 172, 254, 0.06);

  /* Neon glow values */
  --neon-sm:         0 0 8px rgba(79, 172, 254, 0.5);
  --neon-md:         0 0 20px rgba(79, 172, 254, 0.3), 0 0 40px rgba(79, 172, 254, 0.15);
  --neon-lg:         0 0 30px rgba(79, 172, 254, 0.4), 0 0 80px rgba(79, 172, 254, 0.1);

  /* Typography — Apple-style system stack */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* Type scale */
  --text-xs:         0.72rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.125rem;
  --text-xl:         1.25rem;
  --text-2xl:        1.5rem;
  --text-3xl:        2rem;
  --text-4xl:        2.75rem;
  --text-5xl:        3.75rem;
  --text-6xl:        5rem;
  --text-7xl:        6.5rem;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout */
  --container:        1280px;
  --container-narrow: 800px;
  --radius-sm:        6px;
  --radius:           10px;
  --radius-lg:        16px;
  --radius-xl:        24px;

  /* Transitions */
  --ease:            cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration:        260ms;
  --duration-slow:   420ms;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

h1 { font-size: var(--text-6xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); font-weight: 700; }
h3 { font-size: var(--text-3xl); font-weight: 700; }
h4 { font-size: var(--text-2xl); font-weight: 600; }
h5 { font-size: var(--text-xl);  font-weight: 600; }
h6 { font-size: var(--text-lg);  font-weight: 600; }

p {
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: var(--text-base);
}

strong { color: var(--text-primary); font-weight: 600; }

/* ── Scroll bar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(79, 172, 254, 0.3); }

/* ── Selection ── */
::selection { background: rgba(79, 172, 254, 0.2); color: var(--text-primary); }

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Utility ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.text-accent    { color: var(--accent); }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ── Reveal animation base ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}

/* ── Noise texture overlay ── */
.noise-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}