/* ============================================================
   components.css — Reusable visual building blocks
   ============================================================ */

/* -------- Cards -------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
}

/* -------- Mesh / aurora backgrounds -------- */
.mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.mesh::before, .mesh::after, .mesh > span {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  animation: drift 22s ease-in-out infinite;
}
.mesh::before {
  width: 60vmax; height: 60vmax;
  left: -15vmax; top: -20vmax;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
}
.mesh::after {
  width: 55vmax; height: 55vmax;
  right: -15vmax; bottom: -15vmax;
  background: radial-gradient(circle at 70% 70%, var(--accent-2), transparent 60%);
  animation-delay: -8s;
  animation-duration: 28s;
}
.mesh > span {
  width: 40vmax; height: 40vmax;
  left: 40%; top: 30%;
  background: radial-gradient(circle, var(--accent-3), transparent 60%);
  animation-delay: -14s;
  animation-duration: 26s;
}
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(5vmax, 3vmax) scale(1.1); }
  66% { transform: translate(-4vmax, 6vmax) scale(0.95); }
}

/* -------- Film grain overlay -------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}
[data-palette="dusk"] .grain { mix-blend-mode: screen; opacity: 0.08; }

/* -------- Particles canvas (positioned by JS) -------- */
.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* -------- Marquee / ticker -------- */
.marquee-wrap { overflow: hidden; position: relative; z-index: 2; }
.marquee {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--card) 60%, transparent);
}
.marquee span {
  font-size: clamp(20px, 3.5vw, 42px);
  display: inline-flex; align-items: center; gap: 60px;
  font-weight: 500; letter-spacing: -0.02em;
}
.marquee em {
  color: var(--accent); font-style: italic;
  font-family: 'Instrument Serif', serif; font-weight: 400;
}
@keyframes scroll { to { transform: translateX(-50%); } }

/* -------- Reveal: disabled here (the page already has plenty of motion
   from mesh/particles/typewriter). Kept as a marker class in case you
   want to re-enable a CSS animation later. -------- */
.reveal { opacity: 1; transform: none; }

/* -------- Typewriter caret -------- */
.caret::after {
  content: "";
  display: inline-block;
  width: 0.05em;
  height: 0.85em;
  background: var(--accent);
  vertical-align: -8%;
  margin-left: 4px;
  animation: blink 1.05s steps(2) infinite;
}
@keyframes blink { to { opacity: 0; } }

/* -------- Logo (inline SVG, currentColor) -------- */
.c3-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.c3-logo svg { fill: currentColor; }

/* -------- Arrow icon -------- */
.arrow {
  width: 14px; height: 14px; display: inline-block;
}