/* DSQ Partners — motion & interaction layer.
   Progressive enhancement: everything here is gated on motion.js adding `html.js`,
   so the pages read fully without JavaScript, and on `prefers-reduced-motion`. */

:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --dur: .7s; }
html { scroll-padding-top: 84px; }

/* ---- reveal on scroll ---------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms));
  will-change: opacity, transform;
}
html.js [data-reveal="left"]  { transform: translateX(-28px); }
html.js [data-reveal="right"] { transform: translateX(28px); }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal="fade"]  { transform: none; }
html.js [data-reveal].is-in   { opacity: 1; transform: none; }

/* word-by-word (elements marked data-words are split by motion.js) */
html.js .words .w {
  display: inline-block; opacity: 0; transform: translateY(.35em);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i) * 45ms);
}
html.js .words.is-in .w { opacity: 1; transform: none; }

/* ---- reading progress + sticky bar --------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 60;
  background: var(--dsq-muted-gold); transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); pointer-events: none;
}
.topbar { transition: box-shadow .3s ease, background .3s ease; }
.topbar.is-scrolled { box-shadow: 0 6px 24px var(--dsq-shadow); }

.nav-links a { position: relative; padding-bottom: 4px; transition: opacity .2s ease; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--dsq-muted-gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a.is-active { opacity: 1; }

/* ---- buttons ------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn-gold::before, .btn-navy::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-gold:hover::before, .btn-navy:hover::before { left: 120%; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-link { overflow: visible; }
.btn-link::after { display: inline-block; transition: transform .25s var(--ease-out); }
.btn-link:hover::after { transform: translateX(5px); }

.btn.is-busy { pointer-events: none; opacity: .8; }
.btn.is-busy::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}

/* ---- cards --------------------------------------------------------------- */
.card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px var(--dsq-shadow-lg); border-color: var(--dsq-muted-gold); }
[data-tilt] { transform-style: preserve-3d; transition: transform .4s var(--ease-out); }
[data-tilt].is-tilting { transition: transform .08s linear; }

/* ---- FAQ accordion ------------------------------------------------------- */
.faq-body { overflow: hidden; }
.faq summary::after { transition: transform .3s var(--ease-out); display: inline-block; }
.faq details[open] summary::after { transform: rotate(180deg); }

/* ---- demo form ----------------------------------------------------------- */
.form select.is-flash, .form input.is-flash { box-shadow: 0 0 0 3px rgba(200, 154, 75, .55); transition: box-shadow .3s ease; }
.form-done {
  display: grid; gap: 8px; padding: 28px; text-align: center;
  border: 1px dashed var(--dsq-muted-gold); border-radius: 8px;
  animation: pop .5s var(--ease-out) both;
}
.form-done b { font-family: var(--font-head); font-size: 20px; }
.form-done small { font-size: 14px; opacity: .8; }
.form-done .btn-link { justify-self: center; font-size: 14px; margin-top: 6px; }

/* ---- small shared effects ------------------------------------------------ */
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dsq-muted-gold); position: relative; margin-right: 10px; vertical-align: middle; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--dsq-muted-gold); animation: ring 1.8s ease-out infinite; }

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pop     { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ring    { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes rise    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drift   { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fill    { from { width: 0; } to { width: 100%; } }

/* ---- reduced motion: show everything, animate nothing -------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .words .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .progress { display: none; }
  .btn::before { display: none; }
  .card, [data-tilt], .btn-link::after, .topbar { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}