/* ==========================================================================
   Licorice.ai v5
   Pure CSS. No frameworks. Hierarchical typography. Snap-scroll sections.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   Fonts
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------------
   Theme
   --------------------------------------------------------------------------- */

:root {
  /* Colors */
  --bg: #080808;
  --bg-light: #1d1d1d;
  --bg-light-border: #1f1f1f;
  --fg: #dfdfdf;
  --fg-muted: #c0c0c0ee;
  --fg-mid: #909090;
  --fg-dark: #292929;
  --accent: #ffffff;

  /* Font stacks */
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Heading scale — Inter Light */
  --h1-size: 62pt;
  --h1-line: 62pt;
  --h1-weight: 300;
  --h1-spacing: 0;

  --h2-size: 38pt;
  --h2-line: 49pt;
  --h2-weight: 300;
  --h2-spacing: 0;

  --h3-size: 31pt;
  --h3-line: 52px;
  --h3-weight: 300;
  --h3-spacing: 0;

  --h4-size: 25pt;
  --h4-line: 35pt;
  --h4-weight: 400;
  --h4-spacing: 0;

  /* Body — Inter Regular */
  --body-size: 21pt;
  --body-line: 29pt;
  --body-weight: 300;
  --body-spacing: 0;

  /* Footer — Inter Regular */
  --footer-size: 16pt;
  --footer-line: 22pt;
  --footer-weight: 400;
  --footer-spacing: 0;

  /* Mono scale — JetBrains Mono */
  --mono1-size: 20pt;
  --mono1-line: 31pt;
  --mono1-weight: 200;
  --mono1-spacing: -1pt;

  --mono2-size: 18pt;
  --mono2-line: 25pt;
  --mono2-weight: 300;
  --mono2-spacing: 0.01em;

  --mono3-size: 16pt;
  --mono3-line: 22pt;
  --mono3-weight: 300;
  --mono3-spacing: 0.01em;

  /* Navigation */
  --nav-size: 11pt;
  --nav-weight: 300;
  --nav-spacing: 0.08em;
}


/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */

.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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


/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */

a {
  color: var(--fg);
  font-weight: 400;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-spacing);
  color: var(--fg);
}

h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-spacing);
  color: var(--fg);
  margin-bottom: 0.25em;
}

h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-spacing);
  color: var(--fg);
  margin-bottom: 1.3em;
}

h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line);
  letter-spacing: var(--h4-spacing);
  color: var(--fg);
  margin-bottom: 0.5em;
}

p {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line);
  letter-spacing: var(--body-spacing);
  color: var(--fg-muted);
}

p:last-child {
  margin-bottom: 0;
}

.subtitle {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line);
  color: var(--fg-muted);
}

.emphasis {
  text-shadow: 0 0 30px #999999;
}

.mono1 {
  font-family: var(--font-mono);
  font-size: var(--mono1-size);
  font-weight: var(--mono1-weight);
  line-height: var(--mono1-line);
  letter-spacing: var(--mono1-spacing);
  padding-left: 1.7em;
  text-indent: -1.7em;
}

.mono2 {
  font-family: var(--font-mono);
  font-size: var(--mono2-size);
  font-weight: var(--mono2-weight);
  line-height: var(--mono2-line);
  letter-spacing: var(--mono2-spacing);
}

.mono3 {
  font-family: var(--font-mono);
  font-size: var(--mono3-size);
  font-weight: var(--mono3-weight);
  line-height: var(--mono3-line);
  letter-spacing: var(--mono3-spacing);
}

strong {
  font-weight: 500;
  text-shadow: 0 0 14px #ffffff20;
}


/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 2.5rem;
  background: #080808cc;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-bottom: 1px solid var(--bg-light-border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--fg);
  transition: opacity 0.2s;
}

.nav-logo:hover {
  opacity: 0.7;
}

.nav-logo span {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

#nav nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#nav nav a {
  font-family: var(--font-mono);
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  text-transform: uppercase;
  letter-spacing: var(--nav-spacing);
  text-decoration: none;
  color: var(--fg-mid);
  transition: color 0.2s;
}

#nav nav a:hover {
  color: var(--fg);
  text-decoration: underline;
}

#nav nav a.active {
  color: var(--fg);
}

.nav-sep {
  color: var(--fg-muted);
  opacity: 0.4;
  font-size: 0.7rem;
}


/* ---------------------------------------------------------------------------
   Layout — Scroll sections
   --------------------------------------------------------------------------- */

#scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
}

#scroll-container::-webkit-scrollbar {
  display: none;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 2vh;
  background: var(--bg);
}


/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero-content {
  min-height: 20vh;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  opacity: 0.9;
}

.hero-icon {
  width: 76px;
  margin-bottom: 1em;
}

#splines-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 36%;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.1s ease-out;
}

/* Convergence point glow effects */
.convergence-glow {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0.05) 40%,
      transparent 70%);
}

/* Horizontal light streak */
.convergence-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 2px;
  background: linear-gradient(to right,
      transparent 0%,
      transparent 35%,
      rgba(255, 255, 255, 0.12) 50%,
      transparent 65%,
      transparent 100%);
}

/* Typewriter cursor */
[data-typewriter] {
  position: relative;
  visibility: hidden;
}

.typewriter-cursor {
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--fg);
  margin-left: 4px;
  top: 0.25em;
}

.typewriter-cursor.blink {
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Static blinking cursor — add class "has-cursor" to any heading */
.has-cursor::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--fg);
  margin-left: 3px;
  vertical-align: baseline;
  position: relative;
  top: 0.1em;
  animation: cursor-blink 1s step-end infinite;
}


/* ---------------------------------------------------------------------------
   Wires (section 2 background)
   --------------------------------------------------------------------------- */

#wires-canvas,
#bottleneck-canvas {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  width: 100%;
  height: 50%;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.1s ease-out;
}

#reality-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   Content cards
   --------------------------------------------------------------------------- */

.section-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: top;
  text-align: left;
  color: var(--accent);
  background-color: rgba(31, 31, 31, 0.6);
  max-width: 1000px;
  min-height: 600px;
  padding: 60px 70px;
  border: 1px solid var(--bg-light-border);
  border-radius: 24px;
  z-index: 2;
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
}


/* ---------------------------------------------------------------------------
   Scroll arrow
   --------------------------------------------------------------------------- */

.scroll-arrow {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 31, 31, 0.8);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: none;
  border-radius: 50%;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.scroll-arrow:hover {
  background: var(--bg-light);
  backdrop-filter: none;
  color: var(--fg);
}

.scroll-arrow-up {
  bottom: auto;
  top: 6%;
  transform: translateX(-50%) rotate(180deg);
}


/* ---------------------------------------------------------------------------
   Contact form
   --------------------------------------------------------------------------- */

.contact-card {
  max-width: 620px;
  width: 100%;
}

.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--fg-muted);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 5px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.form-group textarea {
  resize: vertical;
  min-height: 230px;
}

.btn-submit {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bg);
  background: var(--fg);
  border: none;
  border-radius: 4px;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-submit:hover {
  opacity: 0.85;
}

.form-status {
  font-size: 0.875rem;
  margin-top: 1rem;
  color: var(--fg-muted);
}


/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-body);
  font-size: var(--footer-size);
  font-weight: var(--footer-weight);
  line-height: var(--footer-line);
  letter-spacing: var(--footer-spacing);
  color: var(--fg-muted);
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
  #nav {
    padding: 1rem 1.25rem;
  }

  #nav nav {
    display: none;
  }

  .section {
    padding: 4rem 1.5rem 3rem;
  }

  .section-card {
    max-width: 100%;
  }
}