/* Visionhost brand layer — loaded after tailwind.css.
   Hand-built visual language: control-room dark, blue swoosh energy,
   a "process flow" spine, animated SVG pipelines, glass + mesh glows. */

:root {
  --vh-sky: #38bdf8;
  --vh-blue: #2563eb;
  --vh-royal: #1d4ed8;
  --vh-ink: #0b1220;
  /* Brand type (matches SimpleFlex): Sora for display/headings, Inter for body.
     Unlayered :root override wins over Tailwind's @layer theme defaults. */
  --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
}

[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Backgrounds ---------- */
.vh-ink {
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 600px at 6% 12%, rgba(37,99,235,.18), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0a0f1d 100%);
}
.vh-grid {
  background-image:
    linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 30%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 30%, #000 55%, transparent 100%);
}
.vh-dots {
  background-image: radial-gradient(rgba(56,189,248,.18) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ---------- Type & accents ---------- */
.vh-gradient-text {
  background: linear-gradient(100deg, #7dd3fc 0%, #38bdf8 35%, #2563eb 75%, #1d4ed8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vh-eyebrow {
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600; font-size: .72rem;
}

/* ---------- Glass cards ---------- */
.vh-glass {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(148,163,184,.16);
  backdrop-filter: blur(10px);
}
.vh-glass-hover { transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s; }
.vh-glass-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(56,189,248,.45);
  box-shadow: 0 28px 60px -28px rgba(37,99,235,.55), 0 0 0 1px rgba(56,189,248,.12) inset;
}

/* Spotlight that follows the cursor (set --mx/--my in JS) */
.vh-spot { position: relative; }
.vh-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(56,189,248,.14), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.vh-spot:hover::before { opacity: 1; }

/* Gradient ring buttons / chips */
.vh-ring {
  position: relative; isolation: isolate;
}
.vh-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(125,211,252,.9), rgba(37,99,235,.5), rgba(125,211,252,.0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ---------- Buttons ---------- */
.vh-btn-primary {
  background: linear-gradient(120deg, #38bdf8, #2563eb 55%, #1d4ed8);
  box-shadow: 0 14px 30px -12px rgba(37,99,235,.7);
  transition: transform .2s, box-shadow .3s, filter .3s;
}
.vh-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 40px -12px rgba(37,99,235,.8); }
.vh-btn-ghost { transition: background .25s, border-color .25s, color .25s; }

/* ---------- The process-flow spine ---------- */
.vh-spine { position: relative; }
.vh-spine-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(56,189,248,.35) 8%, rgba(37,99,235,.5) 50%, rgba(56,189,248,.35) 92%, transparent);
}
.vh-spine-progress {
  position: absolute; left: 50%; top: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, #7dd3fc, #2563eb);
  box-shadow: 0 0 14px 1px rgba(56,189,248,.7);
  height: 0;
}
@media (max-width: 768px){
  .vh-spine-line, .vh-spine-progress { left: 22px; }
}

/* ---------- Animated SVG flows ---------- */
.vh-flow-path { stroke-dasharray: 7 9; animation: vh-dash 1.1s linear infinite; }
@keyframes vh-dash { to { stroke-dashoffset: -32; } }
.vh-pulse-dot { animation: vh-pulse 2.4s ease-in-out infinite; }
@keyframes vh-pulse { 0%,100% { opacity:.25; r:3; } 50% { opacity:1; r:5; } }

/* element traveling along a path (used with offset-path inline) */
.vh-travel { animation: vh-travel 4s linear infinite; }
@keyframes vh-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.vh-float { animation: vh-float 6s ease-in-out infinite; }
@keyframes vh-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* printed paper feeding out of a slot — only moves DOWN so the top stays tucked behind the slot */
.vh-paper { animation: vh-paper 3.6s ease-in-out infinite; }
@keyframes vh-paper { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.vh-blink { animation: vh-blink 1.6s steps(2,start) infinite; }
@keyframes vh-blink { 50% { opacity: .25; } }

/* invoice/doc field reveal */
.vh-field { opacity: 0; transform: translateX(6px); }
.vh-field.is-on { opacity: 1; transform: none; transition: opacity .4s, transform .4s; }

/* ---------- Scroll reveal ---------- */
.vh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.vh-reveal.is-in { opacity: 1; transform: none; }
.vh-reveal[data-delay="1"]{ transition-delay:.08s } .vh-reveal[data-delay="2"]{ transition-delay:.16s }
.vh-reveal[data-delay="3"]{ transition-delay:.24s } .vh-reveal[data-delay="4"]{ transition-delay:.32s }

/* marquee */
.vh-marquee { display: flex; gap: 3rem; width: max-content; animation: vh-marquee 26s linear infinite; }
@keyframes vh-marquee { to { transform: translateX(-50%); } }

/* counters */
.vh-stat { font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */
#vh-header { transition: background .3s, border-color .3s, backdrop-filter .3s; }
#vh-header.is-scrolled {
  background: rgba(8,13,24,.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(148,163,184,.16);
}

/* ---------- Animated chat demo (AI sales-agent) ---------- */
.chat-anim [data-step]:not(.is-on) { display: none !important; }
.chat-anim [data-step].is-on { animation: vh-msg-in .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes vh-msg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
[data-typing] { display: none; }
[data-typing].is-on { display: inline-flex; animation: vh-msg-in .3s ease both; }
.vh-typing-dots i { width: 5px; height: 5px; border-radius: 9999px; background: #94a3b8; display: inline-block; animation: vh-typing 1.1s infinite ease-in-out; }
.vh-typing-dots i:nth-child(2) { animation-delay: .15s; }
.vh-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes vh-typing { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---------- Stepped highlight loop (kiosk, picklist, checks) ---------- */
[data-stepitem] { transition: background-color .35s, box-shadow .35s; }
[data-stepitem].is-active { background-color: rgba(37,99,235,.16) !important; box-shadow: inset 0 0 0 1px rgba(56,189,248,.38); }
.vh-kstep-num { transition: background .35s, color .35s; }
[data-stepitem].is-active .vh-kstep-num { background: linear-gradient(120deg,#38bdf8,#2563eb); color: #fff; }

/* ---------- Sticky mobile CTA bar ---------- */
.vh-cta-bar { background: rgba(10,15,29,.9); backdrop-filter: blur(14px) saturate(140%); }
@media (max-width: 1023px) {
  body:not([data-page="contact"]) { padding-bottom: 4.9rem; }
}

/* ---------- Form status ---------- */
.vh-ok  { color: #34d399; }
.vh-err { color: #f87171; }
.vh-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.2);
  transition: border-color .2s, box-shadow .2s, background .2s;
  color-scheme: dark;   /* render the native <select> dropdown in dark mode */
}
/* Native <select> popup: opaque dark options (else white-on-white in some browsers). */
.vh-input option,
.vh-input optgroup {
  background-color: #0d1326;
  color: #f1f5f9;
}

/* Contact-form success panel: gentle fade + scale in once revealed. */
.vh-form-success { opacity: 0; transform: scale(.96); transition: opacity .4s ease, transform .4s ease; }
.vh-form-success.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vh-form-success { transition: none; }
}
.vh-input:focus {
  outline: none; background: rgba(255,255,255,.06);
  border-color: rgba(56,189,248,.6);
  box-shadow: 0 0 0 3px rgba(56,189,248,.16);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vh-reveal { opacity: 1; transform: none; }
}