/* Finishing touches used across the whole site: the flask logo's glow,
   gentler hover states, and sections that settle into place as you scroll. */

/* The flask is the logo, shown in full colour with its own glow. */
.brand-logo.brand-flask, .footer-logo.brand-flask {
  border-radius: 0;
  filter: drop-shadow(0 0 7px rgb(var(--c-neon) / .75)) drop-shadow(0 0 16px rgb(var(--c-accent) / .45));
  transition: filter .4s ease, transform .4s ease;
}
.brand:hover .brand-flask, .brand:focus-visible .brand-flask {
  filter: drop-shadow(0 0 10px rgb(var(--c-neon))) drop-shadow(0 0 24px rgb(var(--c-accent) / .7));
  transform: rotate(-4deg) scale(1.04);
}

/* Buttons lift a little and catch the light. */
.btn, .btn-primary, .btn-secondary, .button-primary, .button-secondary {
  transition: transform .25s ease, box-shadow .3s ease, background .3s ease, color .2s ease, border-color .3s ease;
}
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(var(--c-white) / .28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s ease;
  pointer-events: none;
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(120%); }
.btn-secondary:hover, .button-secondary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgb(var(--c-ink) / .12), 0 0 14px rgb(var(--c-neon) / .25); }

/* Test cards across the site: lift, glow and a slow zoom on the flask art. */
.home-tests .test-card-link, .moonlit-public .test-card, .moonlit-public .info-card {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease !important;
}
.home-tests .test-card-link:hover, .home-tests .test-card-link:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgb(var(--c-night) / .3), 0 0 0 1px rgb(var(--c-neon) / .6), 0 0 28px rgb(var(--c-neon) / .35) !important;
}
.home-tests .home-test-card-image, .moonlit-public .test-card img { transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease; }
.home-tests .test-card-link:hover .home-test-card-image, .moonlit-public .test-card:hover img { transform: scale(1.05); filter: brightness(1.12) saturate(1.1); }
.moonlit-public .test-card:hover, .moonlit-public .info-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 4px rgb(var(--c-surface) / .33), 0 14px 30px rgb(var(--c-ink) / .14), 0 0 24px rgb(var(--c-neon) / .22) !important;
}

/* The specimen portals on the homepage glow when you point at them. */
.haven-triad .haven-path { transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease; }
.haven-triad .haven-path:hover, .haven-triad .haven-path:focus-visible { transform: translateY(-6px); filter: drop-shadow(0 0 22px rgb(var(--c-neon) / .5)); }

/* Menu links get a thin glowing underline. */
.main-nav > a:not(.nav-order):not(.nav-cart) { position: relative; }
.main-nav > a:not(.nav-order):not(.nav-cart)::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: .15rem;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--c-neon));
  box-shadow: 0 0 8px rgb(var(--c-neon));
  transition: left .3s ease, right .3s ease;
}
.main-nav > a:not(.nav-order):not(.nav-cart):hover::after,
.main-nav > a[aria-current='page']:not(.nav-order):not(.nav-cart)::after { left: .7rem; right: .7rem; }

/* Sections settle into place as they scroll into view. site.js only turns
   this on when sparkles are on, so nothing is ever hidden without it. */
html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
html.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
  .home-tests .test-card-link:hover, .moonlit-public .test-card:hover, .moonlit-public .info-card:hover, .haven-triad .haven-path:hover { transform: none; }
  .home-tests .test-card-link:hover .home-test-card-image, .moonlit-public .test-card:hover img { transform: none; }
}
@media print { html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* My Lab Bench */
.dashboard-eyebrow { margin: 0 0 .2rem; color: var(--lh-accent); font: 700 .78rem/1.2 var(--lh-sans); letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.dashboard-logo-mark img.brand-flask { filter: drop-shadow(0 0 10px rgb(var(--c-neon) / .7)); }

/* Test cards line their buttons up along the bottom, however long the text. */
.moonlit-public .test-card > .view-pill { margin-top: auto; }
.tests-coming-note { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px dashed var(--lh-border); border-radius: 10px; color: var(--lh-muted); background: rgb(var(--c-surface-soft) / .6); }
.tests-coming-note a { font-weight: 700; }

/* "What your result means" notes on the gene test pages. */
.result-meaning-note { margin-top: 1rem; padding: .9rem 1.1rem; border-left: 4px solid rgb(var(--c-accent)); border-radius: 0 12px 12px 0; background: rgb(var(--c-surface-deep) / .45); }
.result-meaning-note h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.result-meaning-note ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.result-meaning-note li { margin-bottom: .3rem; }
.result-meaning-note p { margin: 0; }

/* The "specimen escaped" page. */
.lost-page { text-align: center; }
.lost-flask { position: relative; width: 140px; height: 140px; margin: 0 auto .6rem; display: grid; place-items: center; }
.lost-flask img { transform: rotate(-18deg); filter: drop-shadow(0 0 14px rgb(var(--c-neon) / .8)); animation: lost-wobble 4s ease-in-out infinite; }
.lost-spark { position: absolute; color: rgb(var(--c-accent)); font-size: 1.1rem; animation: lost-drift 3.6s ease-in-out infinite; }
.lost-spark-a { top: 6%; right: 8%; }
.lost-spark-b { top: 30%; right: -4%; animation-delay: -1.2s; }
.lost-spark-c { top: -4%; right: 34%; animation-delay: -2.4s; }
@keyframes lost-wobble { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-10deg) translateY(-4px); } }
@keyframes lost-drift { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -18px); } }
.lost-lead { max-width: 34rem; margin: .4rem auto 1.3rem; }
.lost-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 40rem; margin: 0 auto; }
.lost-link { display: grid; gap: .15rem; padding: 1rem 1.1rem; border: 1px solid var(--lh-border); border-radius: 14px; background: var(--lh-surface-soft); color: var(--lh-ink) !important; text-decoration: none; text-align: left; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lost-link strong { font: 600 1.3rem/1.2 var(--lh-serif); font-size-adjust: 0.46; }
.lost-link span { color: var(--lh-muted); font-size: .92rem; }
.lost-link:hover, .lost-link:focus-visible { transform: translateY(-3px); border-color: rgb(var(--c-accent)); box-shadow: 0 10px 24px rgb(var(--c-ink) / .1), 0 0 20px rgb(var(--c-neon) / .25); }
.lost-home { margin: 1.2rem 0 0; font-weight: 700; }
@media (max-width: 560px) { .lost-links { grid-template-columns: 1fr; } }
html[data-sparkles='off'] :is(.lost-flask img, .lost-spark) { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-sparkles='on']) :is(.lost-flask img, .lost-spark) { animation: none; } }

/* Pages crossfade into each other instead of blinking (browsers that
   support cross-page view transitions; others simply load as before).
   The header stays put while the page underneath changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }
html[data-sparkles='off']::view-transition-old(root),
html[data-sparkles='off']::view-transition-new(root) { animation: none; }

/* "Brewing…": the button that sent a form, while the next page loads
   (see site.js). The flask bubbles unless sparkles are off. */
.is-brewing { display: inline-flex; align-items: center; justify-content: center; gap: .45em; cursor: progress !important; opacity: .92; }
button.is-brewing:disabled, input.is-brewing:disabled { cursor: progress !important; opacity: .92; filter: none; }
.brew-flask { flex: 0 0 auto; width: 1.15em; height: 1.15em; overflow: visible; }
.brew-glass { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.brew-potion { fill: rgb(var(--c-neon)); opacity: .9; }
.brew-bubble { fill: currentColor; opacity: 0; transform-box: fill-box; animation: brew-bubble 1.5s ease-in infinite; }
.brew-bubble:nth-of-type(2) { animation-delay: .5s; }
.brew-bubble:nth-of-type(3) { animation-delay: 1s; }
@keyframes brew-bubble { 0% { opacity: 0; transform: translateY(2px); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-7px); } }
html[data-sparkles='off'] .brew-bubble { animation: none; opacity: .8; }
@media (prefers-reduced-motion: reduce) { html:not([data-sparkles='on']) .brew-bubble { animation: none; opacity: .8; } }