/* ==========================================================================
   Header buttons — before click (idle + hover) and after click are distinct.
   Start free trial: idle light sweep · hover lift, gradient shift, arrow
     glides · click press, ripple from the pointer, label lifts away, arrow
     launches, a check mark lands.
   Sign in: hover a border traces round the button and the icon slides in ·
     click press, ring pulse, icon steps "through the door".
   Loaded after site-nav.css on every page.
   ========================================================================== */
.site-header.qn .nav-end [data-qn-btn] { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 11px;
  font-weight: 650; -webkit-tap-highlight-color: transparent; transition: transform 240ms var(--qn-ease), box-shadow 300ms ease, background-position 600ms ease, color 240ms ease, border-color 240ms ease !important; }
.site-header.qn .nav-end [data-qn-btn] > * { position: relative; z-index: 1; }

.site-header.qn .nav-end [data-qn-btn]:active { transform: translateY(0) scale(.95); transition-duration: 90ms !important; }
.qn-ripple { position: absolute; z-index: 0 !important; left: var(--rx); top: var(--ry); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; background: rgb(255 255 255 / 55%); animation: qn-ripple 650ms var(--qn-ease) forwards; }
.qn-si .qn-ripple { background: color-mix(in srgb, var(--accent) 22%, transparent); }
@keyframes qn-ripple { to { transform: scale(36); opacity: 0; } }

/* Start free trial — a deep-ink button ringed by the four Quorel colours.
   Idle: the colour ring turns slowly and the arrow chip breathes.
   Hover: the button lifts and leans toward the pointer (JS sets --mx/--my),
   the ring speeds up and glows, the label shimmers, the chip slides.
   Click: press, four coloured rings burst out, the arrow launches, a tick lands. */
@property --qn-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.site-header.qn .nav-end .qn-cta { --mx: 0px; --my: 0px; gap: 10px !important; padding: 0 6px 0 16px !important; color: #fff !important; border: 1.5px solid transparent !important;
  background: linear-gradient(135deg, #0e1a3d, #121f4a) padding-box, conic-gradient(from var(--qn-turn), #007cfe, #5cb615, #ff8a00, #6a31ee, #007cfe) border-box !important;
  box-shadow: 0 4px 12px -8px rgb(14 26 61 / 60%) !important; transform: translate(var(--mx), var(--my));
  animation: qn-turn 8s linear infinite; }
@keyframes qn-turn { to { --qn-turn: 360deg; } }
.site-header.qn .nav-end .qn-cta > span:first-child { background: linear-gradient(90deg, #fff 0%, #fff 40%, #9cc4ff 50%, #fff 60%, #fff 100%); background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 900ms ease; }
.site-header.qn .nav-end .qn-cta svg { box-sizing: content-box; width: 14px !important; height: 14px !important; padding: 6px; border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, #2f78ff, #6a31ee); animation: qn-breathe 2.8s ease-in-out infinite; transition: transform 320ms var(--qn-ease) !important; }
@keyframes qn-breathe { 50% { filter: brightness(1.18); } }
/* hover */
.site-header.qn .nav-end .qn-cta:hover { animation-duration: 3s; transform: translate(var(--mx), calc(var(--my) - 2px));
  box-shadow: 0 6px 14px -8px rgb(14 26 61 / 65%) !important; }
.site-header.qn .nav-end .qn-cta:hover > span:first-child { background-position: 0% 0; }
.site-header.qn .nav-end .qn-cta:hover svg { transform: translateX(3px) rotate(-8deg); animation: none; }
/* click */
.site-header.qn .nav-end .qn-cta:active { transform: translate(var(--mx), var(--my)) scale(.94) !important; }
.qn-fill { position: absolute; z-index: 0 !important; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--rx) var(--ry), #6a31ee 0%, #2f78ff 55%, #1c5ff0 100%);
  clip-path: circle(0 at var(--rx) var(--ry)); animation: qn-fill 460ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes qn-fill { to { clip-path: circle(var(--r) at var(--rx) var(--ry)); } }
.qn-cta.is-go svg { animation: qn-launch 480ms cubic-bezier(.65, 0, .35, 1) 120ms forwards !important; }
@keyframes qn-launch { 0% { transform: translateX(0); } 30% { transform: translateX(-3px); } 100% { transform: translateX(50px) rotate(-20deg); opacity: 0; } }
.qn-cta.is-go > span:first-child { animation: qn-lift 420ms var(--qn-ease) 100ms forwards; }
@keyframes qn-lift { to { transform: translateY(-140%); opacity: 0; } }
.qn-cta::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 14px; height: 7px; margin: -6px 0 0 -7px; border: solid #fff; border-width: 0 0 2.6px 2.6px; transform: rotate(-45deg) scale(0); opacity: 0; }
.qn-cta.is-go::after { animation: qn-check 380ms cubic-bezier(.34, 1.56, .64, 1) 480ms forwards; }
/* While going, the ring stops turning and the button holds still under the fill. */
.site-header.qn .nav-end .qn-cta.is-go { animation-play-state: paused; transform: translate(var(--mx), var(--my)) !important; }
.site-header.qn .nav-end .qn-cta.is-go::after { z-index: 3; }
@keyframes qn-check { to { transform: rotate(-45deg) scale(1); opacity: 1; } }
.site-header.qn .nav-end .qn-cta::before { display: none; }

/* Sign in — idle */
@property --trace { syntax: '<number>'; inherits: false; initial-value: 0; }
.site-header.qn .nav-end .qn-si { padding-left: 12px; }
.qn-si-ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); transform: translateX(-3px); opacity: .55; transition: transform 320ms var(--qn-ease), opacity 240ms ease; }
.qn-si::before { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 0deg, #2f78ff 0 calc(var(--trace) * 1turn), transparent 0); opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 200ms ease; }
/* hover */
.site-header.qn .nav-end .qn-si:hover { transform: translateY(-2px); color: var(--accent-ink) !important; background: color-mix(in srgb, var(--accent) 5%, var(--surface)) !important; border-color: transparent !important; box-shadow: 0 10px 22px -14px rgb(28 95 240 / 55%); }
.qn-si:hover::before { opacity: 1; animation: qn-trace 600ms var(--qn-ease) forwards; }
@keyframes qn-trace { to { --trace: 1; } }
.qn-si:hover .qn-si-ico { transform: translateX(0); opacity: 1; }
/* click */
.qn-si.is-go { animation: qn-ring 650ms ease-out forwards; }
@keyframes qn-ring { from { box-shadow: 0 0 0 0 rgb(28 95 240 / 45%); } to { box-shadow: 0 0 0 10px rgb(28 95 240 / 0%); } }
.qn-si.is-go .qn-si-ico { animation: qn-door 520ms cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes qn-door { 0% { transform: translateX(0); } 40% { transform: translateX(-3px); } 100% { transform: translateX(12px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .site-header.qn .nav-end .qn-cta { transform: none !important; }
  .site-header.qn .nav-end [data-qn-btn], .site-header.qn .nav-end [data-qn-btn] *, .site-header.qn .nav-end [data-qn-btn]::before, .site-header.qn .nav-end [data-qn-btn]::after { animation: none !important; transition: none !important; }
}

/* Keep the header buttons hidden below the menu breakpoint (they live in the menu sheet there). */
@media (max-width: 900px) { .site-header.qn .nav-end .hide-sm, .site-header.qn .nav-end [data-qn-btn] { display: none !important; } }

/* Ripple and fill are children too; keep them absolutely placed at the press point. */
.site-header.qn .nav-end [data-qn-btn] > .qn-fill, .site-header.qn .nav-end [data-qn-btn] > .qn-ripple { position: absolute !important; }