/* Quayline website, "lively" preview (Liviu 2026-10-19): more motion and bolder cards, same light palette.
   Only loaded when the site is built with LIVELY=1 (body.q-lively). Uses the design tokens from app-*.css.
   Reveal states only apply when lively.js has set body.q-reveal-on, so without JS everything is visible. */

/* ---------- type: bigger, more confident headings ---------- */
.q-lively #top h1 { font-size: clamp(2.15rem, 1.2rem + 3.6vw, 3.7rem); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.q-lively #top h1::after { content: ""; display: block; width: 4.5rem; height: 4px; margin-top: 1.1rem; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-200)); transform-origin: left; animation: q-grow .9s .35s cubic-bezier(.2,.7,.2,1) both; }
.q-lively #overview h1 { letter-spacing: -.02em; text-wrap: balance; }
.q-lively main section h2 { font-size: clamp(1.7rem, 1.05rem + 2.3vw, 2.75rem); line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; }
.q-lively main section h2 + p { max-width: 44rem; }
/* eyebrow line next to each section label grows a little */
.q-lively main section p > span.h-px.w-6 { width: 2.25rem; height: 2px; border-radius: 2px; transition: width .7s cubic-bezier(.2,.7,.2,1); }
.q-lively main section .text-accent-700 > span.h-px.w-6 { background: var(--color-accent-500); }

/* ---------- section rhythm: alternate white / paper / light navy ---------- */
.q-lively #industries { background: #fff; border-top: 1px solid var(--color-navy-100); }
.q-lively #how-it-works { background: #fff; }
.q-lively #ai-agents, .q-lively #next-step { position: relative; overflow: hidden; }
.q-lively #ai-agents::before, .q-lively #next-step::before { content: ""; position: absolute; pointer-events: none; width: 46rem; height: 46rem; right: -14rem; top: -18rem;
  background: radial-gradient(closest-side, rgba(53,183,176,.20), rgba(53,183,176,0)); animation: q-drift 18s ease-in-out infinite alternate; }
.q-lively #ai-agents > div, .q-lively #next-step > div { position: relative; }

/* ---------- hero: soft moving light, drifting grid, floating screen ---------- */
.q-lively #top::before, .q-lively #top::after, .q-lively #overview::before { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(10px); }
.q-lively #top::before { width: 40rem; height: 40rem; left: -12rem; top: -16rem; background: radial-gradient(closest-side, rgba(14,156,150,.16), rgba(14,156,150,0)); animation: q-drift 16s ease-in-out infinite alternate; }
.q-lively #top::after { width: 36rem; height: 36rem; right: -10rem; bottom: -14rem; background: radial-gradient(closest-side, rgba(53,96,133,.12), rgba(53,96,133,0)); animation: q-drift 20s ease-in-out -6s infinite alternate-reverse; }
.q-lively #overview::before { width: 34rem; height: 34rem; right: -10rem; top: -14rem; background: radial-gradient(closest-side, rgba(14,156,150,.13), rgba(14,156,150,0)); animation: q-drift 18s ease-in-out infinite alternate; }
.q-lively #top .bg-chartgrid, .q-lively #overview .bg-chartgrid { animation: q-grid 60s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%); }
.q-lively #top .animate-rise > * { animation: q-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.q-lively #top .animate-rise > :nth-child(2) { animation-delay: .08s; }
.q-lively #top .animate-rise > :nth-child(3) { animation-delay: .18s; }
.q-lively #top .animate-rise > :nth-child(4) { animation-delay: .28s; }
.q-lively #top .animate-rise > :nth-child(5) { animation-delay: .38s; }
.q-lively #top .animate-rise > p:first-child > span:first-child { position: relative; }
.q-lively #top .animate-rise > p:first-child > span:first-child::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-accent-500); animation: q-ping 2.4s ease-out infinite; }
.q-lively #top .lg\:pl-2 { animation: q-rise .9s .2s cubic-bezier(.2,.7,.2,1) both; }
.q-lively #top .shadow-raised { box-shadow: 0 2px 4px #0b1f330d, 0 30px 60px -28px #0b1f3359, 0 0 0 1px #ffffff; animation: q-float 7s ease-in-out 1.2s infinite; }
.q-lively #top .shadow-raised ul.divide-y > li { animation: q-row .6s cubic-bezier(.2,.7,.2,1) both; }
.q-lively #top .shadow-raised ul.divide-y > li:nth-child(1) { animation-delay: .55s; }
.q-lively #top .shadow-raised ul.divide-y > li:nth-child(2) { animation-delay: .7s; }
.q-lively #top .shadow-raised ul.divide-y > li:nth-child(3) { animation-delay: .85s; }
.q-lively #top .shadow-raised ul.divide-y > li:nth-child(4) { animation-delay: 1s; }
.q-lively #top .shadow-raised ul.divide-y > li:nth-child(5) { animation-delay: 1.15s; }
.q-lively #top .shadow-raised ul.divide-y > li:first-child { background: linear-gradient(90deg, var(--color-accent-50), transparent 70%); margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; border-radius: .5rem; }
.q-lively #top .shadow-raised ul.divide-y > li:first-child .bg-accent-500 { animation: q-blink 1.8s ease-in-out infinite; }

/* ---------- buttons ---------- */
.q-lively a.bg-accent-600 { transition: background-color .15s, transform .18s, box-shadow .18s; }
.q-lively a.bg-accent-600 svg, .q-lively a.text-accent-700 svg { transition: transform .2s; }
@media (hover: hover) {
  .q-lively a.bg-accent-600:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(14,156,150,.65); }
  .q-lively a.bg-accent-600:hover svg, .q-lively a.text-accent-700:hover svg { transform: translateX(4px); }
  .q-lively a.border-navy-200.bg-white { transition: background-color .15s, border-color .15s, transform .18s; }
  .q-lively a.border-navy-200.bg-white:hover { transform: translateY(-2px); border-color: var(--color-accent-400); }
}

/* ---------- cards: accent bar, hover lift, icon chip lights up ---------- */
.q-lively main li.rounded-card, .q-lively #how-it-works ol > li, .q-lively main [role="img"].rounded-card,
.q-lively #about .rounded-card, .q-lively #contact .rounded-card, .q-lively #ai-agents .rounded-card, .q-lively main section .rounded-card.shadow-card {
  position: relative; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s, background-color .25s; }
.q-lively main li.rounded-card { overflow: hidden; }
.q-lively main li.rounded-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-400) 60%, var(--color-accent-200)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
/* accent used with intent: always on for the current focus (maritime) and for working prototypes */
.q-lively #industries li.v2-focus::before, .q-lively #solutions li.rounded-card:has(> span.border-accent-200:first-child)::before { transform: scaleX(1); }
.q-lively #industries li.v2-focus { box-shadow: 0 1px 2px #0b1f330a, 0 18px 36px -20px rgba(14,156,150,.45); }
.q-lively #contact .shadow-card.self-start { border-top: 3px solid var(--color-accent-500); }
.q-lively main li.rounded-card > span.rounded-lg:first-child { transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
@media (hover: hover) {
  .q-lively main li.rounded-card:hover { transform: translateY(-5px); border-color: var(--color-accent-200); box-shadow: 0 2px 4px #0b1f330d, 0 24px 44px -22px #0b1f3352; }
  .q-lively main li.rounded-card:hover::before { transform: scaleX(1); }
  .q-lively main li.rounded-card:hover > span.rounded-lg:first-child { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; transform: rotate(-4deg) scale(1.05); }
  .q-lively #ai-agents .rounded-card:hover { border-color: rgba(53,183,176,.55); transform: translateY(-3px); }
  .q-lively main [role="img"].rounded-card:hover { border-color: var(--color-accent-200); }
}
/* the "from request to report" diagram: steps light up one after another */
.q-lively main [role="img"] .rounded-xl { transition: border-color .4s, background-color .4s, box-shadow .4s; }
.q-lively main [role="img"] .md\:flex-1:nth-child(1) .rounded-xl { transition-delay: .1s; }
.q-lively main [role="img"] .md\:flex-1:nth-child(2) .rounded-xl { transition-delay: .35s; }
.q-lively main [role="img"] .md\:flex-1:nth-child(3) .rounded-xl { transition-delay: .6s; }
.q-lively main [role="img"] .md\:flex-1:nth-child(4) .rounded-xl { transition-delay: .85s; }
.q-lively main [role="img"] .md\:flex-1:nth-child(5) .rounded-xl { transition-delay: 1.1s; }
.q-lively main .in [role="img"] .rounded-xl, .q-lively:not(.q-reveal-on) main [role="img"] .rounded-xl { border-color: var(--color-accent-200); background: #fff; box-shadow: 0 6px 18px -12px rgba(14,156,150,.5); }

/* ---------- numbered steps: a line connects them, numbers fill with the accent ---------- */
.q-lively #how-it-works ol, .q-lively #start ol, .q-lively #workflow ol, .q-lively #how-we-start ol { position: relative; }
.q-lively main ol span.rounded-full.bg-accent-50.font-mono { transition: background-color .4s, color .4s, border-color .4s, transform .4s; position: relative; z-index: 1; }
.q-lively main ol > li.in span.rounded-full.bg-accent-50.font-mono, .q-lively:not(.q-reveal-on) main ol span.rounded-full.bg-accent-50.font-mono { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.q-lively #how-it-works ol::before { content: ""; position: absolute; pointer-events: none; background: linear-gradient(90deg, var(--color-accent-400), var(--color-navy-200)); transform-origin: left top; transition: transform 1.4s .2s cubic-bezier(.2,.7,.2,1); }
@media (min-width: 1024px) { .q-lively #how-it-works ol::before { left: 18px; right: 10%; top: 17px; height: 2px; } }
@media (max-width: 639px) { .q-lively #how-it-works ol::before { left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--color-accent-400), var(--color-navy-200)); } }
@media (min-width: 640px) and (max-width: 1023px) { .q-lively #how-it-works ol::before { display: none; } }
.q-reveal-on #how-it-works ol::before { transform: scale(0); }
.q-reveal-on #how-it-works ol.in::before { transform: none; }

/* ---------- scroll reveal (set up by lively.js) ---------- */
.q-reveal-on [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--q-d, 0s); }
.q-reveal-on [data-reveal].in { opacity: 1; transform: none; }
/* after the reveal the card's own transitions (hover lift) take over again */
.q-reveal-on li.rounded-card[data-reveal].in.q-done { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s, background-color .25s; transition-delay: 0s; }
.q-reveal-on main section p > span.h-px.w-6 { width: .75rem; }
.q-reveal-on main section .in p > span.h-px.w-6, .q-reveal-on main section p.in > span.h-px.w-6 { width: 2.25rem; }

/* ---------- header: thin progress line + shadow once the page scrolls ---------- */
.q-lively header.sticky { transition: box-shadow .25s, background-color .25s; }
.q-lively header.sticky.q-scrolled { box-shadow: 0 6px 24px -14px #0b1f3340; background-color: #fffffff0; }
.q-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-400)); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- phone ---------- */
@media (max-width: 639px) {
  .q-lively #top::before { width: 26rem; height: 26rem; left: -10rem; top: -10rem; }
  .q-lively #top::after { width: 22rem; height: 22rem; right: -8rem; bottom: -8rem; }
  .q-lively #top h1::after { width: 3.5rem; height: 3px; margin-top: .9rem; }
  .q-lively #top .shadow-raised { animation: none; }
  /* swipe cards: show the accent bar on the card that is snapped into view */
  .q-lively main li.rounded-card::before { transform: scaleX(.18); }
  .q-swipe-hint { animation: q-nudge 2.6s ease-in-out 1.5s infinite; }
}

@keyframes q-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes q-row { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes q-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes q-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes q-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5rem, 3rem, 0) scale(1.12); } }
@keyframes q-grid { from { background-position: 0 0; } to { background-position: 320px 320px; } }
@keyframes q-ping { 0% { transform: scale(.6); opacity: .8; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes q-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes q-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(6px); } 90% { transform: translateX(0); } }

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

/* small layout fixes visible in the preview: badges keep their natural width; swipe cards snap with the page margin */
.q-lively #solutions li.rounded-card > span.rounded-full:first-child { align-self: flex-start; }
@media (max-width: 639px) {
  .q-lively #what-we-build ul.grid, .q-lively #flows ul.grid, .q-lively #industries > div > ul.grid:first-of-type, .q-lively #solutions ul.grid.lg\:grid-cols-3 { scroll-padding-left: 20px; }
}