/* AAM Catalog - DataSeeds.AI design system, aligned to production www.dataseeds.ai
   (see DataSeeds.AI/design-system) */
:root{
  --purple:#744ADC; --purple-soft:#8A68E2; --purple-deep:#5B34C0;   /* primary action */
  --blue:#4D8AF2;   --green:#22C784; --green-deep:#1AA870;          /* accents */
  --ink:#0A0A0A; --body:#474747; --muted:#6B6B6B;                   /* text */
  --white:#FFFFFF; --off-white:#FBFBFB; --grey:#F5F5F5; --line:#EAEAEA; --line-2:#E0E0E0;
  --dark:#0A0A0A; --on-dark:#FBFBFB; --on-dark-muted:#9A9A9A;
  --tint-blue-2:#C7D6FF;
  --gutter:clamp(28px,5.5vw,88px);  /* page side margin - header and main share it */
  --page:1440px;                    /* container width - same on every page */
  --hdr:57px;                       /* header height: 14 + 28 logo + 14 + 1 border */
  --pad-top:clamp(42px,5.6vw,90px); /* gap under the top bar */
  --content-top:calc(var(--hdr) + var(--pad-top));
  --faint:#B3B3B3;                                                  /* rail idle / placeholder */
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sh-sm:0 1px 3px rgba(10,10,10,.06);
  --sh-md:0 8px 24px rgba(10,10,10,.08);
  --sh-lg:0 18px 40px rgba(10,10,10,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--grey);color:var(--body);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img{-webkit-user-drag:none}
a{color:inherit}
::selection{background:var(--purple);color:#fff}
:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--purple);border-radius:8px}

header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--white) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:14px 0;transition:transform .3s var(--ease)}
header.up{transform:translateY(-100%)}
/* same container as main, so the logo and the page content share a left edge */
header .hd{max-width:var(--page);margin:0 auto;padding:0 var(--gutter);width:100%;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header .brand{display:flex;align-items:center;text-decoration:none}
header .brand-tag{font:600 15px/1 var(--font);color:var(--muted);letter-spacing:-.01em;
  display:flex;align-items:center;align-self:stretch;
  /* optical centering: the wordmark's midline sits ~2px below the image midline */
  transform:translateY(2px)}
header .brand img{height:28px;display:block}
/* breadcrumb: sits in the content column below the top bar, not inside it */
main .crumb{display:flex;align-items:center;gap:9px;min-width:0;margin:0 0 20px;
  font:600 14px/1 var(--font);letter-spacing:-.005em}
main .crumb a{color:var(--muted);text-decoration:none;flex:none;
  -webkit-tap-highlight-color:transparent;transition:color .18s}
main .crumb a:hover{color:var(--ink)}
main .crumb .sep{color:var(--line-2);flex:none}
main .crumb .here{color:var(--body);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

main{max-width:var(--page);margin:0 auto;padding:var(--pad-top) var(--gutter) 120px}

/* DataSeeds type scale (design-tokens.json): h1 42/700, h2 30/700, h3 20/700,
   body 16, caption 13/600, eyebrow 11/700 .14em upper */
.hero{margin:0 0 clamp(32px,5vw,52px);max-width:660px}
.hero h1{font-family:var(--font);font-weight:700;font-size:clamp(30px,5.5vw,42px);line-height:1.1;
  letter-spacing:-.01em;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .sub{font:700 11px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin-top:12px}
.hero p{color:var(--body);font-size:16px;line-height:1.6;margin-top:14px}
/* public sample download - a quiet text link, not a button */
.hero .dl{display:inline-flex;align-items:center;gap:8px;margin-top:20px;text-decoration:none;
  color:var(--muted);font:600 14px/1 var(--font);letter-spacing:-.005em;
  -webkit-tap-highlight-color:transparent;transition:color .18s}
.hero .dl:hover{color:var(--ink)}
.hero .dl svg{display:block;flex:none;opacity:.85}
.hero .dl .dl-meta{color:var(--faint);font-weight:600}

/* ——— cards: static first frame, animate on hover (tap on mobile) ——— */
.card .frame{position:relative;background:var(--grey);border-radius:14px;overflow:hidden;
  -webkit-tap-highlight-color:transparent;cursor:pointer}
.card .frame img,.card .frame video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.card .frame .anim{opacity:0;transition:opacity .2s ease;pointer-events:none}
.card .frame .anim.ready{opacity:1}
.card .badge{position:absolute;top:10px;right:10px;z-index:2;
  background:rgba(10,10,10,.72);color:#fff;border-radius:9999px;padding:5px 10px;
  font:700 9px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;gap:5px;pointer-events:none;transition:opacity .2s}
.card .badge svg{display:block}
.card.loading .badge{animation:pulse .9s ease-in-out infinite}
.card.playing .badge{opacity:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* audio cards - waveform thumb, click to play, played bars stay solid */
.card .frame .aprog{position:absolute;top:0;bottom:0;right:0;left:var(--p,0%);z-index:1;
  background:rgba(245,245,245,.62);opacity:0;transition:opacity .2s;pointer-events:none}
.card.playing .frame .aprog{opacity:1}
.card.playing .frame.aud .badge{opacity:1}
.card button.badge{border:0;cursor:pointer;pointer-events:auto}
.card button.badge:hover{background:rgba(10,10,10,.88)}
.card .frame .alabel{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;font:600 12px/1.35 var(--font);color:var(--muted)}
.card .frame .alabel b{font-weight:800;font-size:18px;color:var(--ink)}

/* ——— before/after stage (pair types) ———
   The base plate fills the frame; the target layers (poster + video) sit on top
   and are clipped away left of --x, so dragging the divider wipes between the
   two states. pan-y keeps the page scrollable on touch while we own horizontal. */
.frame.cmp{--x:50%;position:relative;overflow:hidden;background:var(--grey);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:col-resize}
.frame.cmp img,.frame.cmp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.frame.cmp .b{clip-path:inset(0 0 0 var(--x))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;z-index:2;
  background:#fff;box-shadow:0 0 6px rgba(0,0,0,.45);pointer-events:none}
.cmp-line span{position:absolute;bottom:12px;font:700 9px/1 var(--font);letter-spacing:.12em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap}
.cmp-line span:first-child{right:10px} .cmp-line span:nth-child(2){left:10px}
.cmp-knob{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center}
.cmp-knob svg{display:block}
/* 16:9 pairs need the width: two columns instead of three */
@media(min-width:700px){.grid.pairs{grid-template-columns:repeat(2,1fr)}}
/* in the lightbox the stage sizes itself from its aspect ratio (--ar set inline) */
#lb .stage .cmp{width:min(96vw,calc(82vh * var(--ar,16/9)));background:#000;border-radius:14px;box-shadow:var(--sh-lg)}
/* the generic lightbox media rules above are id-scoped and would win: re-assert the fill */
#lb .stage .cmp img,#lb .stage .cmp video{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none}

/* ——— groups (homepage): title styled like the inner-page H1 + description ——— */
/* scroll-margin == the rail's sticky top, so a jumped-to title lands level
   with the top of the index, exactly like the first title at rest */
.group{margin:0 0 clamp(120px,16vw,264px);scroll-margin-top:var(--content-top)}
/* Short grey rule between projects, hung on the content's left edge. It is drawn
   INTO the previous section's margin rather than as padding on this one, so the
   section box starts at its title - otherwise anchoring to a section (click or
   #hash) lands the padding at the top and pushes the title far down the page. */
.group+.group{position:relative}
.group+.group::before{content:"";position:absolute;left:0;
  top:calc(-1 * clamp(60px,8vw,132px));
  width:72px;height:1px;background:var(--line-2)}
.group-title{font-family:var(--font);font-weight:700;font-size:clamp(30px,5.5vw,42px);
  line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px}
.group-desc{color:var(--body);font-size:16px;line-height:1.6;max-width:760px;margin:0 0 28px}

/* pending (no samples yet) — placeholder frame + muted label */
.frame.ph{position:relative;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px dashed var(--line-2);border-radius:14px}
.tile.pending .frame.ph{cursor:default}
.frame.ph .soon{font:700 10.5px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tile.pending .meta h2{color:var(--muted)}
.pending-note{display:block}
.pending-note .ph{aspect-ratio:auto;padding:56px 24px;border-radius:18px}

/* ——— home: one tile per edit type ——— */
.home-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.home-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.tile{background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:12px 12px 16px;box-shadow:var(--sh-sm)}
@media(min-width:700px){.tile{padding:14px 14px 18px}}
.home-grid .frame{aspect-ratio:3/4}
.home-grid .meta{display:block;margin:14px 4px 0;text-decoration:none}
.home-grid .meta h2{font-family:var(--font);font-weight:700;font-size:16px;line-height:1.3;color:var(--ink)}
.home-grid .meta .arw{color:var(--purple);white-space:nowrap}
.home-grid .meta:hover h2{color:var(--purple)}

/* ——— category page: row-major grid of example cards ——— */
.grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:20px}}

.grid .card{background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:12px;box-shadow:var(--sh-sm)}
@media(hover:hover){.grid .frame{cursor:zoom-in}.grid .frame.cmp{cursor:col-resize}.grid .frame.aud{cursor:pointer}}
.card .cap{font:600 13px/1.5 var(--font);font-variant-numeric:tabular-nums;color:var(--body);
  margin-top:11px;padding:0 4px;display:flex;justify-content:space-between;gap:8px}
.card .cap .sz{flex:none;color:var(--muted)}

/* ——— inner pages ———
   One centred content column, everything inside it flush left: the block sits in
   the middle of the page while crumb, title, copy, download and cards all share
   a single left edge. */
body.inner main .crumb,
body.inner .hero,
body.inner .grid,
body.inner .othernav{max-width:1080px;margin-left:auto;margin-right:auto}
body.inner main .crumb{justify-content:flex-start}
body.inner .hero{text-align:left}
/* the column is wide for the grid's sake; keep prose to a readable measure */
body.inner .hero p{max-width:760px}
body.inner .othernav{text-align:left}

.othernav{margin-top:100px;border-top:1px solid var(--line-2);padding-top:30px}
.othernav .lbl{font:700 11px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px}
.othernav .chips{display:flex;flex-wrap:wrap;gap:10px}
.othernav a{text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:9px 16px;font:700 13px/1 var(--font);color:var(--ink);box-shadow:var(--sh-sm);
  transition:border-color .18s,color .18s,box-shadow .18s;-webkit-tap-highlight-color:transparent}
.othernav a:hover{border-color:var(--purple);color:var(--purple-deep);box-shadow:var(--sh-md)}

/* ——— lightbox (desktop, category page) ——— */
#lb{position:fixed;inset:0;background:rgba(10,10,10,.94);display:none;z-index:100;
  flex-direction:column;align-items:center;justify-content:center;touch-action:none}
#lb.on{display:flex}
#lb .stage{display:flex;align-items:center;justify-content:center;max-width:96vw;max-height:82vh}
#lb .stage img,#lb .stage video{max-width:96vw;max-height:82vh;width:auto;height:auto;
  border-radius:14px;box-shadow:var(--sh-lg);display:block}
#lb .cap{color:var(--on-dark-muted);font:600 12px/1.4 var(--font);letter-spacing:.1em;text-transform:uppercase;
  margin-top:16px;text-align:center;padding:0 60px}
#lb .cap b{color:#fff;font-weight:700}
#lb .hint{color:rgba(154,154,154,.7);font:600 10px/1.5 var(--font);letter-spacing:.12em;
  text-transform:uppercase;margin-top:10px;text-align:center;padding:0 60px}
#lb button{position:absolute;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:#fff;font:300 22px/1 var(--font);width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  transition:background .2s,border-color .2s}
#lb button:hover{background:var(--purple);border-color:var(--purple)}
#lb .x{top:14px;right:14px;font-size:17px}
#lb .pv{left:10px;top:50%;transform:translateY(-50%)}
#lb .nx{right:10px;top:50%;transform:translateY(-50%)}

footer{text-align:center;color:var(--muted);font:600 11px/1.5 var(--font);letter-spacing:.12em;
  text-transform:uppercase;padding:0 20px 64px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(max-width:700px){
  header{padding:12px 0}
  header .hd{gap:10px}
}
/* on phones the tag would wrap the back button onto a second line */
@media(max-width:620px){
  header .brand-tag{display:none}
  main .crumb{font-size:13px;gap:7px}
}

/* ——— homepage: sticky animated section index (left rail) ——— */
.home-layout{display:block}
.rail{display:none}

@media(min-width:1000px){
  .home-layout{display:grid;grid-template-columns:236px minmax(0,1fr);
    gap:clamp(36px,5vw,72px);align-items:start}
  /* sticky offset == the rail's own resting position, so it never shifts */
  .rail{display:block;position:sticky;top:var(--content-top);padding-left:18px}
}

.rail-list{position:relative}
.rail-list ul{list-style:none}

/* the sliding indicator: 1px track + purple thumb that glides to the active item */
.rail-track{position:absolute;left:-18px;top:0;bottom:0;width:1px;background:var(--line-2)}
.rail-thumb{position:absolute;left:-1px;top:0;width:3px;height:0;border-radius:3px;
  background:var(--purple);opacity:0;
  transition:transform .55s var(--ease),height .55s var(--ease),opacity .3s ease}

.rail-link{display:flex;align-items:center;text-decoration:none;padding:7px 0;
  color:var(--faint);font:700 15px/1.35 var(--font);letter-spacing:-.005em;
  -webkit-tap-highlight-color:transparent;transition:color .4s var(--ease)}
.rail-link:hover{color:var(--body)}
.rail-link.on{color:var(--ink)}

.rail-txt{display:block}


/* ——— scroll-scrubbed reveal ———
   No transition on purpose: opacity/transform are written straight from the
   scroll position each frame, so the effect runs forwards AND backwards with
   the scrollbar instead of firing once. Visible by default - if the script
   never runs, nothing is hidden. */
.reveal{will-change:opacity,transform}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
}

/* rail items get a one-off entrance (they are sticky, so scrubbing them is moot).
   The stagger reads --i off the markup, so it scales to any number of sections. */
@keyframes railIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rail-list li{animation:railIn .55s var(--ease) both;animation-delay:calc(var(--i,0)*70ms)}
.no-intro .rail-list li{animation:none}