/* Reset-ish */
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
:root{
  --bg:#0f0b14;
  --card:#141018;
  --ring: #2b2033;
  --ink:#e8d6f4;
  --glow: #ffccff;
  --muted:#cdb6e0;
  --pill-bg: rgba(255,204,255,0.12);
  --pill-border: rgba(255,204,255,0.28);
}

/* Page */
body{ background: radial-gradient(1000px 500px at 50% -200px, #201428, var(--bg) 60%); color:var(--ink); font-family:'Cormorant Garamond', serif; }
.page{ max-width:1200px; margin:0 auto; padding:32px 20px 80px; }
.hero{ text-align:center; margin-bottom:14px; }
h1{ font-weight:600; font-size:48px; letter-spacing:.5px; text-shadow:0 0 20px rgba(255,204,255,.25); margin:6px 0 16px; }
.intro{ max-width:820px; margin:0 auto 10px; font-size:20px; color:var(--muted); }

/* Filters */
.controls{ display:flex; justify-content:center; margin:10px 0 24px; }
.filters{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.chip{ border:1px solid var(--pill-border); background:var(--pill-bg); color:var(--ink); padding:.45rem 1rem; border-radius:999px; font-size:14px; cursor:pointer; }
.chip.is-active{ box-shadow:0 0 18px rgba(255,204,255,.25); }
.chip-count{ margin-left:.25rem; padding:.45rem .9rem; border-radius:999px; border:1px dashed var(--pill-border); color:var(--ink); }

/* Grid */
.robot-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(240px,1fr));
  gap:24px;
}
@media (max-width:1050px){ .robot-grid{ grid-template-columns: repeat(3, minmax(240px,1fr)); } }
@media (max-width:760px){ .robot-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width:520px){ .robot-grid{ grid-template-columns: 1fr; } }

/* Cards (anchor as the card) */
.robot-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; color:inherit; background:var(--card);
  border-radius:18px; padding:24px 18px;
  border:1px solid var(--ring);
  box-shadow: 0 0 0 1px rgba(255,204,255,.04) inset, 0 0 28px rgba(231,187,255,.06);
  min-height: 300px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.robot-card:hover{ transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255,204,255,.06) inset, 0 0 28px rgba(231,187,255,.20); }

/* Icon + SVG look */
.icon{ margin-top:4px; margin-bottom:12px; }
.icon svg{ width:42px; height:42px; }
.icon svg *{ stroke: var(--glow); }
.icon svg .fill{ fill: var(--glow); stroke: none; }

h2{ margin:6px 0 8px; font-size:22px; font-weight:600; letter-spacing:.2px; }
p{ margin:8px 0 0; max-width: 26ch; color:var(--muted); font-size:18px; line-height:1.5; }

/* Uniform badge bubbles */
.badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  list-style:none; padding:0; margin:-.1rem 0 .6rem;
}
.badges li{
  width:108px; /* exact same width everywhere; change this if you want */
  display:inline-flex; justify-content:center; align-items:center;
  white-space:nowrap; text-align:center;
  padding:.3rem 0; border-radius:999px;
  background:var(--pill-bg); border:1px solid var(--pill-border);
  color:var(--ink); text-shadow:0 0 6px rgba(170,68,221,.6);
  box-shadow: inset 0 0 10px rgba(200,100,255,.18);
}
@media (max-width:480px){ .badges li{ width:96px; } }

/* Hide cards via [hidden] (for filtering) */
.robot-card[hidden]{ display:none !important; }

/* make every card the same height without losing text */
.robot-card{display:flex;flex-direction:column}

/* reserve equal space for each section */
.icon{
  height:56px;               /* same icon zone */
  display:flex;align-items:center;justify-content:center;
  margin:6px 0 12px;
}
.robot-card h2{
  min-height:2.6em;          /* ~2 title lines */
  display:flex;align-items:center;justify-content:center;
  margin:6px 0 8px;
}
.badges{min-height:42px}     /* pill row always same height */

/* show up to N lines of blurb, but reserve that space on all cards */
.robot-card p{
  --lines:6;                 /* change to 5/7/etc if you want */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--lines);
  line-clamp:var(--lines);
  overflow:hidden;text-overflow:ellipsis;
  min-height:calc(1.55em * var(--lines));
}

/* on small screens, let blurbs flow naturally */
@media (max-width:520px){
  .badges{min-height:auto}
  .robot-card p{-webkit-line-clamp:unset;line-clamp:unset;min-height:0}
}

/* prettier, glassy chips */
.badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  list-style:none; padding:0; margin:-.1rem 0 .6rem;
  min-height:84px;                 /* room for 2 rows: tags + title/year */
}

/* existing category chips stay uniform width */
.badges li{
  width:108px;
  display:inline-flex; justify-content:center; align-items:center;
  white-space:nowrap; text-align:center;
  padding:.30rem 0; border-radius:999px;
  position:relative; isolation:isolate;
  background: radial-gradient(140% 120% at 10% -30%, rgba(255,204,255,.18), rgba(0,0,0,0))
              , rgba(255,204,255,.10);
  border:1px solid rgba(255,204,255,.28);
  color:#ecd9ff; text-shadow:0 0 6px rgba(170,68,221,.55);
  box-shadow: inset 0 0 10px rgba(200,100,255,.18), 0 1px 0 rgba(255,255,255,.03);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.badges li:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 0 14px rgba(200,100,255,.24), 0 0 16px rgba(220,160,255,.15);
}

/* NEW: long “source” pill (Title · Year) – spans its own row, flexes in width */
.badges .source{
  width:auto; max-width:92%;
  flex-basis:100%;                 /* puts it on a new row under the tags */
  padding:.35rem .9rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,204,255,.16), rgba(120,70,200,.16)) ,
              rgba(255,204,255,.08);
  border:1px solid rgba(255,204,255,.35);
  box-shadow: inset 0 0 14px rgba(200,100,255,.22), 0 0 18px rgba(210,150,255,.12);
  color:#f1e6ff;
  text-align:center; white-space:nowrap;
}
.badges .source .ico{ opacity:.9; font-size:.95em; line-height:1; }

/* keep the equal-height behavior you liked */
.icon{ height:56px; display:flex; align-items:center; justify-content:center; margin:6px 0 12px; }
.robot-card h2{ min-height:2.6em; display:flex; align-items:center; justify-content:center; margin:6px 0 8px; }
.robot-card p{
  --lines:6;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--lines);
  line-clamp:var(--lines); overflow:hidden; text-overflow:ellipsis;
  min-height:calc(1.55em * var(--lines));
}
@media (max-width:520px){
  .badges{ min-height:auto; }
  .robot-card p{ -webkit-line-clamp:unset; line-clamp:unset; min-height:0; }
}

.badges .source{
  white-space: normal;          /* allow wrapping */
  overflow-wrap: anywhere;      /* break long words if needed */
  max-width: 100%;              /* use full row width */
  padding: .45rem 1rem;         /* a touch more room looks nicer */
}

/* Tighter, nicer typography inside the Title·(Year) capsule */
.badges .source{
  line-height: 1.15;
  padding: .40rem .9rem;       /* a touch more breathing room */
}
.badges .source .ico{
  font-size: .9em;             /* icon a hair smaller */
  margin-right: .35rem;        /* tiny spacing before text */
}

/* On phones, show Title·(Year) above the tags for better flow */
@media (max-width: 520px){
  .badges .source{
    order: -1;                 /* move to the top row */
    width: 100%;
    max-width: 100%;
  }
}

/* === ambient aurora background === */
body::after{
  content:"";
  position:fixed; inset:-30% -10% -10% -10%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(700px 360px at 12% 10%, rgba(255,170,255,.06), transparent 60%),
    radial-gradient(520px 300px at 85% 15%, rgba(120,180,255,.06), transparent 60%),
    radial-gradient(600px 360px at 55% 70%, rgba(160,110,255,.07), transparent 60%);
  filter: blur(42px) saturate(1.08);
  animation: aurora-drift 28s linear infinite;
}
@keyframes aurora-drift {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(18px) rotate(.6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* keep content above the aurora */
.page{ position:relative; z-index:1; }

/* === scroll-reveal (cards fade/slide in) === */
.reveal{ opacity:0; transform:translateY(10px) scale(.985); filter:blur(1px);
  transition:opacity .6s cubic-bezier(.2,.65,.2,1),
             transform .6s cubic-bezier(.2,.65,.2,1),
             filter .6s cubic-bezier(.2,.65,.2,1);
}
.reveal.reveal--in{ opacity:1; transform:none; filter:none; }

/* === badge shine on hover === */
.badges li{ position:relative; overflow:hidden; }
.badges li::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s;
}
.badges li:hover::after{ transform: translateX(120%); }

/* === SVG line-draw when hovering a card === */
.robot-card .icon svg *{ stroke-dasharray:140; stroke-dashoffset:0; }
.robot-card:hover .icon svg *{ animation: draw .9s ease forwards; }
@keyframes draw { from{ stroke-dashoffset:140 } to{ stroke-dashoffset:0 } }

/* === counter pop when filter changes === */
.chip-count{ transition: transform .2s; }
.chip-count.pop{ animation: pop .35s ease; }
@keyframes pop { 30%{ transform: translateY(-2px) scale(1.06) } 100%{ transform:none } }

/* === nicer focus ring for keyboard users === */
.robot-card:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; border-radius:20px; }

/* === honor reduced motion === */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  body::after{ display:none; }
}

/* --- NAV PILLS --- */
.site-nav{ display:flex; justify-content:center; gap:.6rem; margin:16px 0 28px; }
.site-nav--top{ position:sticky; top:10px; z-index:6; }
.nav-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.0rem; border-radius:999px; text-decoration:none; color:#f2e7ff;
  background:linear-gradient(180deg, rgba(255,204,255,.16), rgba(120,70,200,.14));
  border:1px solid rgba(255,204,255,.35);
  box-shadow:inset 0 0 12px rgba(200,100,255,.22), 0 0 18px rgba(210,150,255,.12);
  transition:transform .18s, box-shadow .18s;
}
.nav-pill:hover{ transform:translateY(-1px); box-shadow:inset 0 0 16px rgba(200,100,255,.28), 0 0 22px rgba(210,150,255,.18); }

/* --- SPICY: conic halo behind the hero title --- */
.hero{ position:relative; }
.hero::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:-30px; width:min(80vw, 780px); height:160px; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255,204,255,.22), transparent 70%),
    conic-gradient(from 0deg at 50% 55%, rgba(255,204,255,.18), rgba(120,180,255,.12), rgba(160,110,255,.18), rgba(255,204,255,.18));
  filter:blur(28px) saturate(1.15);
  opacity:.6; animation: halo-spin 18s linear infinite;
}
@keyframes halo-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* --- SPICY: neon hover for cards --- */
.robot-card{
  background:linear-gradient(180deg, rgba(24,18,32,1), rgba(18,14,26,1));
  border:1px solid #2b2033;
  box-shadow:0 0 0 1px rgba(255,204,255,.05) inset, 0 0 26px rgba(231,187,255,.08);
}
.robot-card:hover{
  box-shadow:
    0 0 0 1px rgba(255,204,255,.10) inset,
    0 0 34px rgba(231,187,255,.25),
    0 0 80px rgba(180,120,255,.12);
}

/* --- keep earlier motion respect --- */
@media (prefers-reduced-motion: reduce){
  .hero::after{ display:none; }
}

.badges .source{
  background: linear-gradient(180deg, rgba(255,204,255,.16), rgba(120,70,200,.16)), rgba(255,204,255,.10);
  box-shadow: inset 0 0 14px rgba(200,100,255,.22), 0 0 18px rgba(210,150,255,.12);
}
.badges .source:hover{
  background: linear-gradient(180deg, rgba(255,230,255,.24), rgba(140,90,220,.18));
  box-shadow: inset 0 0 18px rgba(200,100,255,.30), 0 0 24px rgba(220,160,255,.18);
}

/* === Soft Neon Dream: subtle shimmer, neon tilt, slower halo === */
:root{ --accentA:#ffc8ff; --accentB:#a98bff; --accentC:#7ed2ff; }

/* slower, dreamier halo */
.hero::after{ opacity:.70; animation: halo-spin 32s linear infinite, halo-hue 56s linear infinite; }

/* pill shimmer */
@keyframes pill-shimmer { to { background-position: 200% 0; } }
.nav-pill, .badges li, .badges .source{
  background-image:
    linear-gradient(180deg, rgba(255,204,255,.18), rgba(120,70,200,.14)),
    linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.22) 30%, rgba(255,255,255,.08) 60%);
  background-size: auto, 200% 100%;
  background-position: 0 0, -200% 0;
}
.nav-pill:hover, .badges li:hover, .badges .source:hover{ animation: pill-shimmer 1.2s linear both; }

/* card neon + gentle parallax tilt (driven by JS below) */
.robot-card{
  --rx:0deg; --ry:0deg;
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s ease, box-shadow .2s ease;
  background:linear-gradient(180deg, rgb(24 18 32), rgb(18 14 26));
  border:1px solid #2b2033;
  box-shadow: 0 0 0 1px rgba(255,204,255,.05) inset, 0 0 26px rgba(231,187,255,.08);
}
.robot-card:hover{
  box-shadow:
    0 0 0 1px rgba(255,204,255,.12) inset,
    0 6px 26px rgba(231,187,255,.25),
    0 0 120px rgba(160,100,255,.18);
}
.robot-card:focus-visible{
  outline:2px solid #ffccff; outline-offset:3px; border-radius:20px;
  box-shadow:0 0 40px rgba(226,180,255,.18);
}

/* footer sparkle */
.footer-brand .spark{ animation: twink 3.2s ease-in-out infinite alternate; }
@keyframes twink{
  from{ opacity:.45; filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  to  { opacity:.95; filter:drop-shadow(0 0 8px rgba(255,255,255,.8)); }
}

/* motion preferences */
@media (prefers-reduced-motion: reduce){
  .robot-card{ transform:none !important; }
  .nav-pill, .badges li, .badges .source{ animation:none !important; }
}


/* Hero title soft pulse */
.hero h1{
  animation: hero-breathe 10s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(226,180,255,.18);
}
@keyframes hero-breathe{
  0%,100%{ filter:hue-rotate(0deg);   text-shadow:0 0 10px rgba(226,180,255,.18); }
  50%   { filter:hue-rotate(12deg);  text-shadow:0 0 24px rgba(200,140,255,.35); }
}

/* Floating sound toggle (top-right) */
.sound-toggle{
  position:fixed; right:14px; top:14px; z-index:7;
  padding:.5rem .7rem; border-radius:999px; border:1px solid rgba(255,204,255,.35);
  color:#f5eaff; background:linear-gradient(180deg, rgba(255,204,255,.18), rgba(120,70,200,.14));
  box-shadow:inset 0 0 12px rgba(200,100,255,.22), 0 0 18px rgba(210,150,255,.12);
  cursor:pointer; font-size:15px; line-height:1; transition:transform .15s, box-shadow .15s;
}
.sound-toggle:hover{ transform:translateY(-1px); box-shadow:inset 0 0 16px rgba(200,100,255,.28), 0 0 22px rgba(210,150,255,.18); }
.sound-toggle:focus-visible{ outline:2px solid #ffccff; outline-offset:2px; }

/* respect motion prefs */
@media (prefers-reduced-motion: reduce){
  .hero h1{ animation:none; }
}