/* Code Lab landing page (index.html). Colours from style.css (Sredify's dg-lite look) + the flask's teal.
   Motion: looping vector vignettes, CSS only. transform + opacity (and SVG stroke) only, no layout
   animation, nothing tied to scroll. Reduced motion = the finished frame of every loop, still. */
:root { --teal: #14b8a6; --teal-soft: #5eead4; --teal-bg: #f0fdfa; }
.wrap.wide { max-width: 1080px; }
.landing header .ghost { text-decoration: none; display: inline-block; }
.landing a.btn { display: inline-block; text-decoration: none; }
.text-link { color: var(--fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.text-link:hover { text-decoration-color: var(--fg); }
.text-link:focus-visible, .landing a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 24px 0 56px; }
.eyebrow { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 16px; }
.lead { font-size: 17px; color: #3f3f46; margin: 0 0 28px; max-width: 34em; }
.cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-art svg { width: 100%; height: auto; display: block; }

/* features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 16px 16px 22px; }
.feature .art { background: var(--bg); border-radius: 1rem; margin-bottom: 18px; }
.feature .art svg { width: 100%; height: auto; display: block; }
.feature h2 { font-size: 17px; margin: 0 6px 6px; }
.feature p { margin: 0 6px; color: var(--muted); font-size: 14px; }

/* what it can see */
.data { margin-top: 20px; padding: 28px 32px; }
.data h2 { font-size: 20px; margin: 0 0 14px; }
.data ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.data li { color: #3f3f46; padding-left: 22px; position: relative; }
.data li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.data li b { color: var(--fg); }

.lp-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; text-align: left; }
.lp-footer a { color: inherit; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 8px 0 36px; }
  .hero-art { max-width: 520px; }
  .features { grid-template-columns: 1fr; }
  .data { padding: 22px 20px; }
  .data ul { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lead { font-size: 16px; }
  .cta .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- shared vector parts ---------- */
.anim .panel { fill: var(--card); stroke: var(--border); stroke-width: 2; }
.anim .lane { stroke: var(--border); stroke-width: 4; stroke-linecap: round; }
.anim .c { fill: var(--primary); }
.anim .ev { fill: var(--card); stroke: var(--border); stroke-width: 2; }
.anim .ln { fill: #d4d4d8; }
.anim .ln.soft { fill: #e4e4e7; }
.anim .ok { fill: var(--teal); }
.anim .tick { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
.anim .card, .anim .tile, .anim .draft, .anim .bar, .anim .c, .anim .b, .anim .wave, .anim .liquid, .anim .count { transform-box: fill-box; }

/* ---------- hero: commits flow in, the flask works, confirmed evidence comes out ---------- */
.hero-svg .glass { fill: rgba(23, 23, 23, .035); }
.hero-svg .wave { fill: var(--teal-soft); }
.hero-svg .b { fill: #fff; opacity: .85; }
.hero-svg .flask { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hero-svg .commits .c1 { transform: translateX(14px); } .hero-svg .commits .c2 { transform: translateX(58px); } .hero-svg .commits .c3 { transform: translateX(102px); } .hero-svg .commits .c4 { opacity: 0; }
.hero-svg .card { --x: 340px; transform: translate(var(--x), var(--y)); }
.hero-svg .k1 { --y: 62px; }
.hero-svg .k2 { --y: 116px; }
.hero-svg .k3 { --y: 170px; }

/* ---------- team ---------- */
.team-svg .tile-bg { fill: var(--card); stroke: var(--border); stroke-width: 2; }
.team-svg .pill-bg { fill: var(--accent); }
.team-svg .dot-on { fill: #16a34a; }
.team-svg .dot-off { fill: #d4d4d8; }
.team-svg .t1 { } .team-svg .t2 { } .team-svg .t3 { }
.team-svg .tile { transform-origin: 50% 60%; }
.team-svg .count { transform-origin: 0 50%; }

/* ---------- fill ---------- */
.fill-svg .lbl { font: 600 11px ui-sans-serif, system-ui, sans-serif; fill: var(--muted); }
.fill-svg .track { fill: var(--accent); }
.fill-svg .bar { transform-origin: 0 50%; }
.fill-svg .pool { fill: #a1a1aa; transform: scaleX(0); }
.fill-svg .p1 { fill: var(--primary); transform: scaleX(.62); }
.fill-svg .p2 { fill: var(--teal); transform: scaleX(.38); }

/* ---------- evidence ---------- */
.ev-svg .draft .ev { fill: var(--teal-bg); stroke: var(--teal); stroke-dasharray: 600 0; }
.ev-svg .d1 { } .ev-svg .d2 { } .ev-svg .d3 { }

@media (prefers-reduced-motion: no-preference) {
  /* hero, 6 s */
  .hero-svg .commits .c { opacity: 0; animation: commit 3s cubic-bezier(.45, 0, .55, 1) infinite; }
  .hero-svg .c2 { animation-delay: .75s !important; } .hero-svg .c3 { animation-delay: 1.5s !important; } .hero-svg .c4 { animation-delay: 2.25s !important; }
  .hero-svg .wave { animation: wave 2.4s linear infinite; }
  .hero-svg .liquid { animation: level 3s ease-in-out infinite alternate; }
  .hero-svg .b { animation: bubble 2.6s ease-in infinite; }
  .hero-svg .b2 { animation-delay: .9s; } .hero-svg .b3 { animation-delay: 1.7s; }

  .hero-svg .card { animation: emerge1 6s cubic-bezier(.22, 1, .36, 1) infinite; }
  .hero-svg .k2 { animation-name: emerge2; } .hero-svg .k3 { animation-name: emerge3; }
  .hero-svg .k1 .ok { animation: ok1 6s ease infinite; } .hero-svg .k2 .ok { animation: ok2 6s ease infinite; } .hero-svg .k3 .ok { animation: ok3 6s ease infinite; }
  .hero-svg .k1 .tick { animation: tick1 6s ease infinite; } .hero-svg .k2 .tick { animation: tick2 6s ease infinite; } .hero-svg .k3 .tick { animation: tick3 6s ease infinite; }

  /* team, 5 s */
  .team-svg .t1 { animation: pop1 5s cubic-bezier(.22, 1, .36, 1) infinite; } .team-svg .t2 { animation: pop2 5s cubic-bezier(.22, 1, .36, 1) infinite; } .team-svg .t3 { animation: pop3 5s cubic-bezier(.22, 1, .36, 1) infinite; }
  .team-svg .t1 .dot-on { animation: blink1 5s ease infinite; } .team-svg .t2 .dot-on { animation: blink2 5s ease infinite; }
  .team-svg .count { animation: grow 5s cubic-bezier(.22, 1, .36, 1) infinite; }

  /* fill, 5 s: the grey pool drains into the people (.66 = .40 + .26) */
  .fill-svg .pool { animation: pool 5s cubic-bezier(.65, 0, .35, 1) infinite; }
  .fill-svg .p1 { animation: p1 5s cubic-bezier(.65, 0, .35, 1) infinite; }
  .fill-svg .p2 { animation: p2 5s cubic-bezier(.65, 0, .35, 1) infinite; }

  /* evidence, 6 s: dashed drafts arrive, a person confirms each one */
  .ev-svg .d1 { animation: draft1 6s cubic-bezier(.22, 1, .36, 1) infinite; } .ev-svg .d2 { animation: draft2 6s cubic-bezier(.22, 1, .36, 1) infinite; } .ev-svg .d3 { animation: draft3 6s cubic-bezier(.22, 1, .36, 1) infinite; }
  .ev-svg .d1 .ev { animation: solid1 6s ease infinite, march 1s linear infinite; } .ev-svg .d2 .ev { animation: solid2 6s ease infinite, march 1s linear infinite; } .ev-svg .d3 .ev { animation: solid3 6s ease infinite, march 1s linear infinite; }
  .ev-svg .d1 .ok { animation: okd1 6s ease infinite; } .ev-svg .d2 .ok { animation: okd2 6s ease infinite; } .ev-svg .d3 .ok { animation: okd3 6s ease infinite; }
  .ev-svg .d1 .tick { animation: tickd1 6s ease infinite; } .ev-svg .d2 .tick { animation: tickd2 6s ease infinite; } .ev-svg .d3 .tick { animation: tickd3 6s ease infinite; }
}

@keyframes commit { 0% { transform: translateX(0) scale(1); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; transform: translateX(150px) scale(1); } 100% { transform: translateX(176px) scale(.3); opacity: 0; } }
@keyframes wave { to { transform: translateX(-80px); } }
@keyframes level { from { transform: translateY(4px); } to { transform: translateY(-8px); } }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(-96px); opacity: 0; } }
@keyframes grow { 0%, 18% { transform: scaleX(0); } 40%, 84% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes pool { 0%, 16% { transform: scaleX(.66); } 60%, 86% { transform: scaleX(0); } 100% { transform: scaleX(.66); } }
@keyframes p1 { 0%, 16% { transform: scaleX(.22); } 60%, 86% { transform: scaleX(.62); } 100% { transform: scaleX(.22); } }
@keyframes p2 { 0%, 16% { transform: scaleX(.12); } 60%, 86% { transform: scaleX(.38); } 100% { transform: scaleX(.12); } }
@keyframes march { to { stroke-dashoffset: -22; } }
@keyframes emerge1 { 0% { transform: translate(212px, 44px) scale(.5); opacity: 0; } 5% { opacity: 1; } 20%, 88% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; } 96%, 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
@keyframes ok1 { 0%, 24% { fill: #e4e4e7; } 30%, 100% { fill: var(--teal); } }
@keyframes tick1 { 0%, 27% { stroke-dashoffset: 16; } 35%, 100% { stroke-dashoffset: 0; } }
@keyframes emerge2 { 0%, 8% { transform: translate(212px, 44px) scale(.5); opacity: 0; } 13% { opacity: 1; } 28%, 88% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; } 96%, 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
@keyframes ok2 { 0%, 32% { fill: #e4e4e7; } 38%, 100% { fill: var(--teal); } }
@keyframes tick2 { 0%, 35% { stroke-dashoffset: 16; } 43%, 100% { stroke-dashoffset: 0; } }
@keyframes emerge3 { 0%, 16% { transform: translate(212px, 44px) scale(.5); opacity: 0; } 21% { opacity: 1; } 36%, 88% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; } 96%, 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
@keyframes ok3 { 0%, 40% { fill: #e4e4e7; } 46%, 100% { fill: var(--teal); } }
@keyframes tick3 { 0%, 43% { stroke-dashoffset: 16; } 51%, 100% { stroke-dashoffset: 0; } }
@keyframes pop1 { 0% { transform: scale(.85); opacity: 0; } 14%, 86% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(.96); opacity: 0; } }
@keyframes blink1 { 0%, 22% { fill: #d4d4d8; } 28%, 100% { fill: #16a34a; } }
@keyframes pop2 { 0%, 4% { transform: scale(.85); opacity: 0; } 18%, 86% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(.96); opacity: 0; } }
@keyframes blink2 { 0%, 26% { fill: #d4d4d8; } 32%, 100% { fill: #16a34a; } }
@keyframes pop3 { 0%, 8% { transform: scale(.85); opacity: 0; } 22%, 86% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(.96); opacity: 0; } }
@keyframes blink3 { 0%, 30% { fill: #d4d4d8; } 36%, 100% { fill: #16a34a; } }
@keyframes draft1 { 0% { transform: translateX(18px); opacity: 0; } 10%, 86% { transform: translateX(0); opacity: 1; } 95%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes solid1 { 0%, 30% { fill: var(--card); stroke: #a1a1aa; stroke-dasharray: 6 5; } 38%, 100% { fill: var(--teal-bg); stroke: var(--teal); stroke-dasharray: 600 0; } }
@keyframes okd1 { 0%, 32% { fill: #e4e4e7; } 38%, 100% { fill: var(--teal); } }
@keyframes tickd1 { 0%, 35% { stroke-dashoffset: 16; } 44%, 100% { stroke-dashoffset: 0; } }
@keyframes draft2 { 0%, 8% { transform: translateX(18px); opacity: 0; } 18%, 86% { transform: translateX(0); opacity: 1; } 95%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes solid2 { 0%, 38% { fill: var(--card); stroke: #a1a1aa; stroke-dasharray: 6 5; } 46%, 100% { fill: var(--teal-bg); stroke: var(--teal); stroke-dasharray: 600 0; } }
@keyframes okd2 { 0%, 40% { fill: #e4e4e7; } 46%, 100% { fill: var(--teal); } }
@keyframes tickd2 { 0%, 43% { stroke-dashoffset: 16; } 52%, 100% { stroke-dashoffset: 0; } }
@keyframes draft3 { 0%, 16% { transform: translateX(18px); opacity: 0; } 26%, 86% { transform: translateX(0); opacity: 1; } 95%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes solid3 { 0%, 46% { fill: var(--card); stroke: #a1a1aa; stroke-dasharray: 6 5; } 54%, 100% { fill: var(--teal-bg); stroke: var(--teal); stroke-dasharray: 600 0; } }
@keyframes okd3 { 0%, 48% { fill: #e4e4e7; } 54%, 100% { fill: var(--teal); } }
@keyframes tickd3 { 0%, 51% { stroke-dashoffset: 16; } 60%, 100% { stroke-dashoffset: 0; } }