/* ===== ZRAVIQ extras: hero search visual + letter-drop headings (27 Oct 2026) ===== */

/* ---------- Hero search visual ---------- */
.zq-sv {
  position: relative;
  width: 100%;
  aspect-ratio: 466 / 364;
  border-radius: 24px;
  --a1: #f97316; --a2: #ec4899; --a3: #facc15;
  background: #fff7ed;
  border: 1px solid #ececee;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 28px);
  font-family: var(--font-main);
  color: var(--color-black);
}
.zq-sv-blob {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .75;
  z-index: -1;
  transition: background-color 1.2s ease;
  animation: zqSvFloat 14s ease-in-out infinite alternate;
}
.zq-sv-blob.b1 { background: var(--a1); top: -22%; left: -14%; }
.zq-sv-blob.b2 { background: var(--a2); bottom: -26%; right: -12%; animation-delay: -5s; }
.zq-sv-blob.b3 { background: var(--a3); top: 30%; right: 18%; width: 38%; opacity: .55; animation-delay: -9s; }
@keyframes zqSvFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 4%) scale(1.08); }
  100% { transform: translate(-4%, 6%) scale(.96); }
}
.zq-sv-panel {
  position: relative;
  width: min(100%, 360px);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  box-shadow: 0 24px 60px -24px rgba(10, 10, 10, .22), 0 2px 6px rgba(10, 10, 10, .04);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zq-sv-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 14px;
  color: #27272a;
  white-space: nowrap;
  overflow: hidden;
}
.zq-sv-search svg { flex: none; color: #71717a; }
.zq-sv-query { overflow: hidden; text-overflow: clip; }
.zq-sv-caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  margin-left: 1px;
  background: #0a0a0a;
  vertical-align: -3px;
  animation: zqSvBlink 1s steps(1) infinite;
}
@keyframes zqSvBlink { 50% { opacity: 0; } }
.zq-sv-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a1a1aa;
  padding: 2px 4px 0;
}
.zq-sv-list { position: relative; height: 204px; }
.zq-sv-item {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid #f0f0f1;
  background: #fff;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, opacity .4s ease;
  will-change: transform;
}
.zq-sv-rank {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f4f4f5;
  color: #52525b;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .5s ease, color .5s ease;
}
.zq-sv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zq-sv-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zq-sv-meta { font-size: 12px; color: #71717a; white-space: nowrap; transition: color .5s ease; }
.zq-sv-meta b { color: #0a0a0a; font-weight: 700; transition: color .5s ease; }
.zq-sv-open { font-size: 11px; color: #16a34a; font-weight: 700; flex: none; }
.zq-sv-item.is-you.is-top {
  background: linear-gradient(120deg, var(--a1), var(--a2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 34px -14px var(--a2);
}
.zq-sv-item.is-you.is-top .zq-sv-rank { background: #fff; color: #0a0a0a; }
.zq-sv-item.is-you.is-top .zq-sv-meta,
.zq-sv-item.is-you.is-top .zq-sv-meta b { color: rgba(255, 255, 255, .92); }
.zq-sv-item.is-you.is-top .zq-sv-open { color: #fff; }
.zq-sv-item.is-you:not(.is-top) { border-style: dashed; border-color: #d4d4d8; }

.zq-sv-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ececee;
  box-shadow: 0 10px 24px -12px rgba(10, 10, 10, .25);
  font-size: 12px;
  font-weight: 700;
  color: #27272a;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
  z-index: 2;
}
.zq-sv-chip i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.zq-sv-chip.is-on { opacity: 1; transform: none; }
.zq-sv-chip.c1 i { background: #ef4444; }
.zq-sv-chip.c2 i { background: #3b82f6; }
.zq-sv-chip.c3 i { background: #a855f7; }
.zq-sv-chip.c1 { top: 9%; right: 4%; }
.zq-sv-chip.c2 { bottom: 9%; left: 4%; }
.zq-sv-chip.c3 { bottom: 9%; right: 4%; }

@media (max-width: 640px) {
  .zq-sv { aspect-ratio: auto; padding: 18px 14px 56px; }
  .zq-sv-chip { font-size: 11px; padding: 7px 10px; }
  .zq-sv-chip.c1 { top: auto; bottom: 14px; left: 50%; right: auto; transform: translate(-50%, 8px) scale(.96); }
  .zq-sv-chip.c1.is-on { transform: translate(-50%, 0); }
  .zq-sv-chip.c2, .zq-sv-chip.c3 { display: none; }
}

/* ---------- Gentle heading reveal (top to bottom, replays on scroll) ---------- */
.zq-reveal > * , .zq-reveal.zq-solo {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.zq-reveal > *:nth-child(2) { transition-delay: .12s; }
.zq-reveal > *:nth-child(3) { transition-delay: .24s; }
.zq-reveal.is-in > * , .zq-reveal.zq-solo.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .zq-reveal > *, .zq-reveal.zq-solo { opacity: 1 !important; transform: none !important; transition: none; }
  .zq-sv-blob { animation: none; }
  .zq-sv-item, .zq-sv-chip { transition: none; }
  .zq-sv-caret { animation: none; }
}