/* codex — glow-on-black image generator */

/* Self-hosted fonts (no third-party CDN calls).
 * Files in assets/fonts/ — SIL Open Font License redistributed locally.
 * Latin subset only; if we ever need other unicode ranges, redownload via
 * https://fonts.google.com (with a modern UA so it serves woff2). */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300; src: url('../assets/fonts/SpaceGrotesk-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; src: url('../assets/fonts/SpaceGrotesk-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; src: url('../assets/fonts/SpaceGrotesk-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; src: url('../assets/fonts/SpaceGrotesk-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; src: url('../assets/fonts/SpaceGrotesk-700.woff2') format('woff2'); font-display: swap; }

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; src: url('../assets/fonts/JetBrainsMono-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; src: url('../assets/fonts/JetBrainsMono-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; src: url('../assets/fonts/JetBrainsMono-600.woff2') format('woff2'); font-display: swap; }

@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; src: url('../assets/fonts/Fredoka-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; src: url('../assets/fonts/Fredoka-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; src: url('../assets/fonts/Fredoka-700.woff2') format('woff2'); font-display: swap; }

:root {
  --accent-1: #E879F9;
  --accent-2: #7C3AED;
  --bg: #050007;
  --glow: 1;
  /* Safe area insets for iOS */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  background: #0a0a0c;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  overscroll-behavior: none;
}

* { box-sizing: border-box; }

/* selection */
::selection { background: color-mix(in srgb, var(--accent-2) 40%, transparent); color: #fff; }

/* ─── animations ─── */

@keyframes breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent-1) 25%, transparent),
      0 0 calc(24px * var(--glow)) -4px color-mix(in srgb, var(--accent-1) 40%, transparent),
      0 0 calc(60px * var(--glow)) -8px color-mix(in srgb, var(--accent-2) 30%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent-1) 55%, transparent),
      0 0 calc(40px * var(--glow)) -2px color-mix(in srgb, var(--accent-1) 75%, transparent),
      0 0 calc(100px * var(--glow)) -4px color-mix(in srgb, var(--accent-2) 55%, transparent);
  }
}

@keyframes settled {
  from {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent-1) 55%, transparent),
      0 0 calc(40px * var(--glow)) -2px color-mix(in srgb, var(--accent-1) 75%, transparent),
      0 0 calc(100px * var(--glow)) -4px color-mix(in srgb, var(--accent-2) 55%, transparent);
  }
  to {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04),
      0 0 calc(24px * var(--glow)) -8px color-mix(in srgb, var(--accent-1) 18%, transparent);
  }
}

@keyframes scan {
  0%   { transform: translateY(-110%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110%); opacity: 0; }
}

@keyframes scanGrid {
  0% { background-position: 0 0; }
  100% { background-position: 0 24px; }
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes drawerIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes scrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes imageIn {
  from { opacity: 0; filter: blur(8px); transform: scale(0.98); }
  to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes caret {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(400%); }
}

@keyframes previewIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes queuedPulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.5; }
}

/* utility */
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.brand {
  font-family: 'Fredoka', 'Avenir Next Rounded', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-stretch: 100%;
  /* roomy line-height so the bubbly descenders aren't clipped */
  line-height: 1.25;
  padding-bottom: 2px;
}

.dot-pulse > span {
  display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-1);
  margin-right: 4px;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.dot-pulse > span:nth-child(2) { animation-delay: 0.2s; }
.dot-pulse > span:nth-child(3) { animation-delay: 0.4s; }

/* no scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* tap highlight off */
button { -webkit-tap-highlight-color: transparent; outline: none; }
button:focus, button:focus-visible { outline: none; }
textarea, input { outline: none; }