/* Peptigen Labs 1.3.0: the lab look.
   Loaded after shop.css and extras.css. Replaces the 1.0 game-shop touches (notched item-slot corners, element
   sigils, the diamond flourish) with laboratory drawings, adds the living background (soft light, a faint dot
   grid and a slow molecular network drawn by ambient.js), and styles the new checkout, invoice and
   back-in-stock parts. Everything that moves rests under prefers-reduced-motion. CSP: no inline styles. */

:root {
  --amb-a: rgba(0, 200, 83, .16);
  --amb-b: rgba(6, 77, 46, .12);
  --amb-c: rgba(120, 220, 170, .14);
  --amb-dot: rgba(6, 77, 46, .10);
  --glass: rgba(255, 255, 255, .78);
  --glass-line: rgba(6, 77, 46, .12);
  --band: #053F26;
  --band-ink: #FFFFFF;
  --band-muted: #C9E3D3;
  --lift: 0 1px 2px rgba(10, 10, 10, .04), 0 12px 32px -16px rgba(6, 77, 46, .28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --amb-a: rgba(0, 200, 83, .12);
    --amb-b: rgba(0, 120, 60, .14);
    --amb-c: rgba(60, 200, 130, .08);
    --amb-dot: rgba(0, 200, 83, .09);
    --glass: rgba(15, 21, 18, .78);
    --glass-line: rgba(0, 200, 83, .18);
    --band: #04170D;
    --band-muted: #A7C9B4;
    --lift: 0 0 0 1px rgba(0, 200, 83, .08), 0 18px 40px -20px rgba(0, 0, 0, .9);
  }
}

/* ---------- The living background ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.amb-glow { position: absolute; border-radius: 50%; will-change: transform; }
.amb-glow.g1 { width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, var(--amb-a), transparent 72%); animation: amb-drift-1 46s ease-in-out infinite alternate; }
.amb-glow.g2 { width: 60vmax; height: 60vmax; right: -24vmax; top: 18vh; background: radial-gradient(closest-side, var(--amb-b), transparent 70%); animation: amb-drift-2 58s ease-in-out infinite alternate; }
.amb-glow.g3 { width: 54vmax; height: 54vmax; left: 18vw; bottom: -34vmax; background: radial-gradient(closest-side, var(--amb-c), transparent 70%); animation: amb-drift-3 52s ease-in-out infinite alternate; }
.amb-grid { position: absolute; inset: -40px; background-image: radial-gradient(var(--amb-dot) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 10%, transparent 75%); }
.amb-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.amb-net.on { opacity: 1; }
@keyframes amb-drift-1 { to { transform: translate3d(10vw, 8vh, 0) scale(1.08); } }
@keyframes amb-drift-2 { to { transform: translate3d(-12vw, 10vh, 0) scale(.94); } }
@keyframes amb-drift-3 { to { transform: translate3d(8vw, -12vh, 0) scale(1.1); } }
body.motion-off .amb-glow { animation-play-state: paused; }

/* Let the background through the alternate bands; cards and panels stay solid. */
.block.alt { background: color-mix(in srgb, var(--surface) 66%, transparent); border-block-color: color-mix(in srgb, var(--line) 70%, transparent); }
.site-footer { background: color-mix(in srgb, var(--surface) 82%, transparent); }

.motion-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--s-200); padding: 0; font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.motion-toggle:hover { color: var(--ink); text-decoration-color: currentColor; }
.motion-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- Game touches removed ---------- */
.shot::before, .shot::after, .sigil::before, .sigil::after { content: none; display: none; }
.shot { background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--tone, var(--accent)) 16%, var(--surface)), var(--surface) 70%); }
.sigil { border-radius: var(--r-xl); }
.sigil svg { width: 24px; height: 24px; }
.flourish { width: 96px; height: 12px; color: var(--green-ink); opacity: .9; }
.card.prod { box-shadow: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease); }
a.card.prod:hover { box-shadow: var(--lift); }

/* ---------- Home: hero with the lab photograph ---------- */
.hero-lab { padding: var(--s-700) 0 var(--s-800); }
.hero-lab .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: var(--s-700); }
.hero-visual { position: relative; padding: 0 0 var(--s-400) var(--s-500); }
.lab-photo { margin: 0; position: relative; aspect-ratio: 817 / 768; border-radius: 28px; overflow: hidden; background: var(--well); box-shadow: 0 30px 80px -40px rgba(6, 77, 46, .55); }
.lab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: transform 1.2s var(--ease); }
.hero-visual:hover .lab-photo img { transform: scale(1.025); }
.lab-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); pointer-events: none; }
.hero-vial { position: absolute; left: -8px; bottom: -6px; width: 34%; max-width: 210px; height: auto; filter: drop-shadow(0 24px 30px rgba(6, 77, 46, .35)); animation: vial-float 7s ease-in-out infinite; }
@keyframes vial-float { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.hero-chip { position: absolute; top: var(--s-300); right: calc(var(--s-200) * -1); display: flex; align-items: center; gap: var(--s-100); padding: var(--s-100) var(--s-200) var(--s-100) var(--s-100);
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-2xl); box-shadow: var(--lift); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 290px; }
.hero-chip strong { display: block; font-family: var(--display); font-size: .875rem; line-height: 1.25rem; }
.hero-chip span span { display: block; font-size: .75rem; line-height: 1rem; color: var(--muted); }
.chip-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-xl); background: var(--brand-dark); color: #fff; }
.chip-ic .ic { width: 22px; height: 22px; }
@media (prefers-color-scheme: dark) { .chip-ic { background: var(--brand-emerald); color: #02150A; } }

/* ---------- Home: research areas ---------- */
.cats { padding-top: var(--s-200); }
.area-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-200); }
.area { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-200); height: 100%; min-height: 168px; padding: var(--s-300); text-decoration: none; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3xl); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease); }
.area .sigil { width: 52px; height: 52px; }
.area .sigil svg { width: 28px; height: 28px; transition: transform .6s var(--ease); }
.area-name { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.4rem; }
.area-count { display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; color: var(--muted); }
.area-count .ic { width: 18px; height: 18px; color: var(--green-ink); transform: translateX(-4px); opacity: 0; transition: transform .45s var(--ease), opacity .3s var(--ease); }
a.area:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--lift); }
a.area:hover .sigil svg { transform: scale(1.08) rotate(-4deg); }
a.area:hover .area-count .ic { transform: none; opacity: 1; }
a.area:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.area-grid li:last-child:nth-child(4n + 3) { grid-column: span 2; }

/* ---------- Home: brand band with the peptide chain ---------- */
.band-lab { position: relative; overflow: hidden; background: var(--band); color: var(--band-ink); }
.band-lab::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 30%, rgba(0, 200, 83, .22), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(0, 200, 83, .12), transparent 70%); pointer-events: none; }
.band-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-600); align-items: center; }
.band-lab h2 { color: var(--band-ink); font-size: 2.25rem; line-height: 2.625rem; margin: 0 0 var(--s-400); max-width: 520px; }
.band-lab .eyebrow { color: var(--band-muted); }
.band-lab .eyebrow .ic { color: var(--brand-emerald); }
.trace-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-300); }
.trace-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-200); align-items: start; }
.trace-list strong { display: block; font-family: var(--display); font-size: 1.0625rem; color: var(--band-ink); margin-bottom: 2px; }
.trace-list span span, .trace-list li > span:last-child { color: var(--band-muted); }
.trace-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-xl); background: rgba(0, 200, 83, .14); border: 1px solid rgba(0, 200, 83, .3); color: var(--brand-emerald); }
.trace-ic .ic { width: 22px; height: 22px; }
.chain-art { position: relative; }
.chain-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chain-bonds path { fill: none; stroke: rgba(201, 227, 211, .45); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chain-rings path { fill: rgba(0, 200, 83, .06); stroke: rgba(0, 200, 83, .75); stroke-width: 2.5; stroke-linejoin: round; }
.chain-nodes circle { fill: var(--band); stroke: var(--brand-emerald); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: node-breathe 6s ease-in-out infinite; }
.chain-nodes circle:nth-child(2n) { animation-delay: -2s; }
.chain-nodes circle:nth-child(3n) { animation-delay: -4s; }
.chain-pulse circle { fill: var(--brand-emerald); filter: drop-shadow(0 0 6px rgba(0, 200, 83, .9)); }
@keyframes node-breathe { 50% { transform: scale(1.12); } }
.chain-rings { animation: ring-float 10s ease-in-out infinite; }
@keyframes ring-float { 50% { transform: translateY(-6px); } }

/* ---------- Home: four ordering steps ---------- */
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-200); }
.steps li { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.steps .ic-well { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--green-ink); }

/* ---------- Product: back-in-stock ---------- */
.notify-panel { margin: var(--s-400) 0 0; padding: var(--s-300); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3xl); scroll-margin-top: 110px; }
.notify-head { display: flex; gap: var(--s-200); align-items: flex-start; margin-bottom: var(--s-200); }
.notify-head h2 { margin: 0 0 2px; font-size: 1.25rem; line-height: 1.75rem; }
.notify-head p { margin: 0; }
.notify-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--green-ink); }
.notify-ic .ic { width: 22px; height: 22px; }
.notify-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-200); align-items: end; }
.notify-form > label { min-width: 0; }
.notify-form input:not([type="checkbox"]), .notify-form select { width: 100%; min-width: 0; }
.notify-form .notify-consent { grid-column: 1 / 3; align-self: center; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-100); align-items: start; }
.notify-form .notify-consent input { margin-top: 3px; }
.notify-form .btn { justify-self: stretch; }
.notify-panel.flash { animation: notify-flash 1.4s var(--ease); }
@keyframes notify-flash { 30% { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } }
.stock-link { margin-left: 6px; font-weight: 600; color: var(--green-ink); }

/* ---------- Checkout: research use and acknowledgment ---------- */
.step-lede { margin: calc(var(--s-100) * -1) 0 var(--s-200); max-width: 640px; }
.ack-list { display: grid; gap: var(--s-75); margin: 0 0 var(--s-300); padding: 0; border: 0; }
.ack-list .opt.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-100); align-items: start; padding: var(--s-100) var(--s-200); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.ack-list .opt.check input { margin-top: 3px; }
.ack-list .opt.check:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.sign { padding: var(--s-200); border: 1px dashed var(--line-strong); border-radius: var(--r-xl); background: var(--bg); }
.sign p { margin: var(--s-75) 0 0; }
.sign-input { font-family: var(--display); font-size: 1.25rem; font-style: italic; letter-spacing: .01em; }
.count-out { display: block; margin-top: 4px; font-size: .75rem; color: var(--muted); }
.count-out.short { color: var(--alert-ink); }

/* ---------- Order page: invoice row ---------- */
.doc-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s-200); align-items: center; margin: var(--s-300) 0; padding: var(--s-200) var(--s-300); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); }
.doc-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--green-ink); }
.doc-ic .ic { width: 24px; height: 24px; }
.doc-title { margin: 0; font-family: var(--display); font-weight: 700; }
.doc-row p.caption-2 { margin: 2px 0 0; }
.doc-actions { display: flex; align-items: center; gap: var(--s-200); flex-wrap: wrap; }

/* ---------- Page heads: a quiet lab line under every title ---------- */
.page-head h1 { position: relative; }
.page-head .wrap { position: relative; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .area-grid li:last-child:nth-child(4n + 3) { grid-column: auto; }
  .area-grid li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-lab .hero-grid, .band-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-500); }
  .hero-visual { padding: 0 0 var(--s-300) var(--s-300); max-width: 620px; }
  .hero-chip { right: 0; }
  .notify-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .notify-form .notify-consent { grid-column: 1 / -1; }
  .chain-art { max-width: 480px; }
}
@media (max-width: 640px) {
  .hero-lab { padding: var(--s-400) 0 var(--s-600); }
  .hero-visual { padding: 0 0 var(--s-200) 0; }
  .lab-photo { aspect-ratio: 4 / 3; border-radius: var(--r-3xl); }
  .hero-vial { width: 30%; left: -4px; bottom: -10px; }
  .hero-chip { top: auto; bottom: var(--s-300); right: var(--s-100); max-width: 62%; padding: 8px 12px 8px 8px; }
  .chip-ic { width: 34px; height: 34px; }
  .area-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-100); }
  .area { min-height: 0; padding: var(--s-200); gap: var(--s-100); }
  .area .sigil { width: 44px; height: 44px; }
  .area-grid li:last-child:nth-child(3n + 1) { grid-column: auto; }
  .area-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .band-lab h2 { font-size: 1.75rem; line-height: 2.125rem; }
  .notify-form { grid-template-columns: minmax(0, 1fr); }
  .doc-row { grid-template-columns: 44px minmax(0, 1fr); }
  .doc-actions { grid-column: 1 / -1; }
  .doc-actions .btn { width: 100%; }
}

/* ---------- Reduced motion: everything rests ---------- */
@media (prefers-reduced-motion: reduce) {
  .amb-glow, .hero-vial, .chain-nodes circle, .chain-rings, .notify-panel.flash { animation: none !important; }
  .chain-pulse { display: none; }
  .lab-photo img, .area, .area .sigil svg, .area-count .ic { transition: none !important; }
  .hero-visual:hover .lab-photo img, a.area:hover, a.area:hover .sigil svg { transform: none; }
}
body.motion-off .hero-vial, body.motion-off .chain-nodes circle, body.motion-off .chain-rings { animation-play-state: paused; }
body.motion-off .chain-pulse { display: none; }