:root {
  --qb-ease: cubic-bezier(.22, 1, .36, 1);
  --qb-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --qb-cyan: #A9E4FF;
  --qb-violet: #C4B5FD;
  --qb-magenta: #F0ABFC;
}

html { scroll-behavior: smooth; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: qbViewOut .35s var(--qb-ease-soft) both; }
::view-transition-new(root) { animation: qbViewIn .6s var(--qb-ease) both; }
@keyframes qbViewOut { to { opacity: 0; filter: blur(6px); transform: scale(.985); } }
@keyframes qbViewIn { from { opacity: 0; filter: blur(8px); transform: scale(1.012); } }

html.qb-js body { animation: qbPageIn .7s var(--qb-ease) both; }
@keyframes qbPageIn { from { opacity: 0; } to { opacity: 1; } }

html.qb-js .qb-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  filter: blur(6px);
  transition:
    opacity .9s var(--qb-ease) var(--qb-delay, 0ms),
    transform 1s var(--qb-ease) var(--qb-delay, 0ms),
    filter .9s var(--qb-ease) var(--qb-delay, 0ms);
  will-change: opacity, transform, filter;
}
html.qb-js .qb-reveal.qb-in { opacity: 1; transform: none; filter: none; }
html.qb-js .qb-reveal.qb-done { will-change: auto; }

#qb-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--qb-cyan), var(--qb-violet), var(--qb-magenta));
  box-shadow: 0 0 12px rgba(169, 228, 255, .55);
  pointer-events: none;
}

.qb-lift {
  transition: transform .5s var(--qb-ease), box-shadow .5s var(--qb-ease), border-color .5s var(--qb-ease);
}
.qb-lift:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 18px 50px -18px rgba(169, 228, 255, .35), 0 0 0 1px rgba(196, 181, 253, .18);
}
.qb-spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--qb-mx, 50%) var(--qb-my, 50%),
              rgba(169, 228, 255, .10), rgba(196, 181, 253, .06) 35%, transparent 60%);
  opacity: 0; transition: opacity .45s var(--qb-ease);
}
.qb-lift:hover > .qb-spot { opacity: 1; }

hr.section-divider { position: relative; overflow: visible; }
hr.section-divider::after {
  content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(169, 228, 255, .7), rgba(240, 171, 252, .5), transparent);
  filter: blur(1px);
  animation: qbSweep 7s var(--qb-ease-soft) infinite;
}
@keyframes qbSweep {
  0% { transform: translateX(-30%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(480%); opacity: 0; }
}

a, button { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: .35s; transition-timing-function: var(--qb-ease); }
button:active, .btn:active { transform: scale(.98); }

@keyframes qbFadeIn { from { opacity: 0; } }
@keyframes qbFadeOut { to { opacity: 0; } }

/* Reduced motion: keep the polish, drop the movement. Fades, glow, the
   spotlight and the progress line stay; slides, zoom, blur, lift and the
   continuous divider sweep go. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root) { animation: qbFadeOut .2s ease both; }
  ::view-transition-new(root) { animation: qbFadeIn .3s ease both; }
  html.qb-js body { animation-duration: .35s; }
  html.qb-js .qb-reveal {
    transform: none; filter: none;
    transition: opacity .6s ease var(--qb-delay, 0ms);
  }
  .qb-lift:hover { transform: none; }
  hr.section-divider::after { animation: none; display: none; }
}