/* ============================================================
   Components — mesh, buttons, glass, marquee, etc.
   ============================================================ */

/* ---------- Mesh gradient (light, Google AI style) ---------- */
.mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: blur(80px) saturate(120%);
  opacity: 1;
}
.mesh.mesh-warm {
  background:
    radial-gradient(40% 30% at 12% 18%, var(--mesh-peach) 0%, transparent 70%),
    radial-gradient(40% 35% at 80% 22%, var(--mesh-pink) 0%, transparent 70%),
    radial-gradient(38% 30% at 30% 80%, var(--mesh-orange) 0%, transparent 70%),
    radial-gradient(40% 30% at 88% 80%, var(--mesh-violet) 0%, transparent 70%);
}
.mesh.mesh-cool {
  background:
    radial-gradient(45% 35% at 20% 20%, var(--mesh-blue) 0%, transparent 70%),
    radial-gradient(40% 35% at 80% 30%, var(--mesh-violet) 0%, transparent 70%),
    radial-gradient(40% 35% at 40% 90%, var(--mesh-mint) 0%, transparent 70%),
    radial-gradient(35% 30% at 90% 80%, var(--mesh-pink) 0%, transparent 70%);
}
.mesh.mesh-sunset {
  background:
    radial-gradient(45% 35% at 18% 28%, var(--mesh-orange) 0%, transparent 70%),
    radial-gradient(50% 40% at 80% 70%, var(--mesh-pink) 0%, transparent 70%),
    radial-gradient(35% 30% at 50% 100%, var(--mesh-peach) 0%, transparent 70%);
}

.mesh-soft { opacity: 0.65; }
.mesh-medium { opacity: 0.85; }
.mesh-strong { opacity: 1; }

.mesh-anim {
  animation: mesh-drift 28s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: scale(1)    translate(0,0)        rotate(0); }
  50%  { transform: scale(1.08) translate(-2%, 1.5%)  rotate(4deg); }
  100% { transform: scale(0.96) translate(2%, -1.5%)  rotate(-4deg); }
}

/* ---------- Floating mesh blob (used in dark sections) ---------- */
.blob {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  pointer-events: none;
  animation: blob-float 24s ease-in-out infinite alternate;
}
.blob.b-orange { background: var(--accent); }
.blob.b-violet { background: #6a5cff; }
.blob.b-pink   { background: #ff3d6e; }
.blob.b-blue   { background: #1ec8ff; }
@keyframes blob-float {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(6%, -4%) scale(1.1); }
}

/* ---------- Subtle paper noise (light sections) ---------- */
.noise-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Buttons — minimal, no fills (except primary)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-apple),
    color var(--dur-fast) var(--ease-apple),
    background var(--dur-fast) var(--ease-apple),
    transform var(--dur-fast) var(--ease-apple);
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.btn .arr { transition: transform var(--dur-med) var(--ease-apple); }
.btn:hover .arr { transform: translateX(4px); }

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
  box-shadow: 0 8px 30px -10px var(--accent-glow);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink-2);
}
.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.theme-accent .btn         { border-color: rgba(255,255,255,0.5); color: #fff; }
.theme-accent .btn:hover   { background: #fff; color: var(--accent); border-color: #fff; }
.theme-accent .btn-primary { background: #fff; border-color: #fff; color: var(--accent); }
/* Fix: inside .theme-accent, --ink is redefined to #fff, so the original
   `background: var(--ink)` rendered white-on-white on hover. Use the literal
   ink so the hover is a clearly visible dark pill (matches the final-CTA fix). */
.theme-accent .btn-primary:hover { background: #0a0a0c; color: #fff; border-color: #0a0a0c; }

.theme-dark .btn          { border-color: rgba(255,255,255,0.25); color: #fff; }
.theme-dark .btn:hover    { border-color: var(--accent); color: var(--accent); }
.theme-dark .btn-primary  { background: #fff; border-color: #fff; color: var(--ink); }
.theme-dark .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   Eyebrow with number prefix
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow .num { color: var(--accent); }

/* ============================================================
   Glass card (used in dark sections only)
   ============================================================ */
.glass {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-radius: var(--r-md);
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.marquee-track {
  display: flex;
  gap: 80px;
  width: max-content;
  align-items: center;
  animation: marquee-roll 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Tiny + arrow helpers
   ============================================================ */
.arr-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--dur-fast) var(--ease-apple),
    color var(--dur-fast) var(--ease-apple),
    border-color var(--dur-fast) var(--ease-apple),
    transform var(--dur-fast) var(--ease-apple);
}
.arr-circle:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: rotate(-45deg);
}

/* ============================================================
   Index dots / counter for asymmetric editorial rows
   ============================================================ */
.idx-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.idx-tag .num {
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}