/* DYNOVO marketing site — global styles & utilities */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Scroll-reveal ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d-1 { transition-delay: 80ms; }
.reveal-d-2 { transition-delay: 160ms; }
.reveal-d-3 { transition-delay: 240ms; }
.reveal-d-4 { transition-delay: 320ms; }
.reveal-d-5 { transition-delay: 400ms; }

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,146,55,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(243,146,55,0); }
}
.pulse-dot { animation: pulse 2.2s ease infinite; }

@keyframes drift {
  from { transform: translate(0,0); }
  to   { transform: translate(-40px,-30px); }
}
@keyframes float-slow {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-12px); }
}
.float-slow { animation: float-slow 6s ease-in-out infinite; }

@keyframes wave {
  0% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.35); }
}
.wave-bar {
  display: inline-block;
  width: 3px;
  background: currentColor;
  border-radius: 999px;
  animation: wave 1.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor-blink { animation: blink 1s steps(1) infinite; }

@keyframes ringPulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* ── Page background mesh + grain ──────────────────────── */
.bg-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--grad-mesh);
  z-index: 0;
}
[data-theme="dark"] .bg-mesh {
  background:
    radial-gradient(at 20% 20%, rgba(46,107,214,.28) 0, transparent 50%),
    radial-gradient(at 80% 0%,  rgba(63,169,224,.18) 0, transparent 50%),
    radial-gradient(at 60% 90%, rgba(243,146,55,.10) 0, transparent 50%);
}

/* ── Layout helpers ────────────────────────────────────── */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
section { position: relative; }

/* ── Pill nav scrollbar hide ───────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Selection ─────────────────────────────────────────── */
::selection { background: rgba(46,107,214,.25); color: var(--text-primary); }
[data-theme="dark"] ::selection { background: rgba(63,169,224,.35); color: #fff; }

/* ── Accent dotted divider ────────────────────────────── */
.dot-divider {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--color-primary);
}
.dot-divider::before, .dot-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── Range input ──────────────────────────────────────── */
input[type="range"].dynovo-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
input[type="range"].dynovo-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grad-primary);
  border: 3px solid var(--bg-elev);
  box-shadow: var(--shadow-brand);
  cursor: grab;
  transition: transform 120ms var(--ease);
}
input[type="range"].dynovo-range::-webkit-slider-thumb:active {
  transform: scale(1.15);
  cursor: grabbing;
}
input[type="range"].dynovo-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--bg-elev);
  box-shadow: var(--shadow-brand);
  cursor: grab;
}

/* ── Underline link ──────────────────────────────────── */
.u-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size 240ms var(--ease);
}
.u-link:hover { background-size: 100% 1px; }