/* Public "Our Work" page — Katalyst brand, dark. Mobile first: base styles are
   the phone layout, min-width queries add columns as the screen grows. */

:root {
  --brand: #3B6EF5;
  --brand-deep: #1E4FD8;
  --brand-2: #6B96F8;
  --brand-3: #93B4FA;
  --dark: #04060F;
  --dark-panel: #0A0E1A;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.20);
  --text: #FFFFFF;
  --text-80: rgba(255, 255, 255, 0.80);
  --text-75: rgba(255, 255, 255, 0.75);
  --text-60: rgba(255, 255, 255, 0.62);
  --text-55: rgba(255, 255, 255, 0.55);
  --radius-sm: 10px;
  --radius: 16px;
  --pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);
  --font: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--dark); color: var(--text); overflow-x: clip; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
em, i { font-style: normal; }
:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; flex: none; }

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding-inline: var(--gutter); }

/* --------------------------------------------------------------- backdrop */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(60px); }
.glow-a {
  width: 760px; height: 560px; top: -260px; right: -160px;
  background: radial-gradient(circle, rgba(59, 110, 245, 0.30), transparent 65%);
}
.glow-b {
  width: 620px; height: 520px; top: 38%; left: -320px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 62%);
}
.dots {
  position: absolute; top: 0; bottom: 0; width: 220px;
  background-image: radial-gradient(rgba(147, 180, 250, 0.32) 1px, transparent 1.4px);
  background-size: 9px 9px;
}
.dots-l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); opacity: 0.55; }
.dots-r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent 85%); mask-image: linear-gradient(270deg, #000, transparent 85%); opacity: 0.4; }

/* ----------------------------------------------------------------- header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 0; background: none; pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }

/* ===== Site nav + footer — matched to katalyst-crm.com (inner page) ===== */
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:24px; position:relative; }
.brand { display:inline-flex; align-items:center; gap:10px; flex:none; }
.brand img { height:24px; width:auto; display:block; }
.nav-links { display:flex; gap:36px; }
.nav-links a { color:var(--text-75); font-size:17px; transition:color .2s, transform .2s; display:inline-flex; align-items:center; gap:4px; }
.nav-links a:hover { color:#fff; transform:translateY(-1px); }
.nav-links a.is-current { color:#fff; }
.nav-cta { display:flex; align-items:center; gap:8px; }
.nav-login { font-size:14px; color:var(--text-80); font-weight:500; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; transition:color .2s, background .2s; }
.nav-login:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-contact { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:14px; padding:10px 22px; min-height:0; box-shadow:none; }
.nav-contact:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); transform:translateY(-2px); box-shadow:none; }
#nav-burger { display:none; flex-direction:column; gap:5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:9px; cursor:pointer; }
#nav-burger span { width:18px; height:2px; background:#fff; border-radius:2px; display:block; }
#mobile-menu { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:rgba(4,6,15,.96); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-top:1px solid var(--line); padding:20px; gap:2px; z-index:100; }
#mobile-menu a { color:var(--text-80); padding:13px 16px; border-radius:8px; font-size:17px; font-weight:500; display:block; }
#mobile-menu a:hover { background:rgba(255,255,255,.06); }
#mobile-menu.is-open { display:flex; }

.site-footer { position:relative; z-index:5; width:100%; margin-top:40px; background:rgba(8,5,22,.25); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); border-top:1px solid rgba(255,255,255,.07); padding:60px 0 30px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; align-items:flex-start; }
.foot-brand img { height:28px; width:auto; display:block; }
.foot-brand p { color:var(--text-55); font-size:14px; line-height:1.65; margin:14px 0 0; max-width:280px; }
.foot-brand p + p { margin-top:8px; }
.social { display:flex; gap:10px; margin-top:18px; }
.social a { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:grid; place-items:center; color:var(--text-55); transition:all .2s; }
.social a:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.foot-col h4 { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-55); margin:0 0 14px; font-weight:700; }
.foot-col ul { display:flex; flex-direction:column; gap:9px; }
.foot-col a { color:var(--text-60); font-size:13px; transition:color .2s; display:inline-flex; align-items:center; gap:6px; }
.foot-col a:hover { color:#fff; }
.foot-bottom { padding-top:28px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:0; font-size:12px; }
.foot-bottom .copy { display:block; margin-bottom:10px; color:var(--text-55); }
.foot-bottom .links { display:flex; flex-wrap:wrap; }
.foot-bottom .links a { color:var(--text-60); font-size:12px; transition:color .2s; }
.foot-bottom .links a:hover { color:#fff; }
.foot-bottom .links a:not(:last-child)::after { content:"|"; margin:0 10px; color:rgba(255,255,255,.22); pointer-events:none; }
.foot-bottom .ccpa { display:block; margin:10px 0 0; color:var(--text-60); font-size:12px; cursor:pointer; }
.foot-bottom .disclaimer { margin:10px 0 0; max-width:720px; font-size:12px; line-height:1.55; color:var(--text-55); }

/* All six links need ~1150px on one line; below that they move into the menu. */
@media (max-width:1180px){
  .nav-links { display:none; }
  #nav-burger { display:flex; }
}
@media (max-width:980px){
  .foot-grid { grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:768px){
  .foot-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .foot-bottom .links { flex-direction:column; }
  .foot-bottom .links a { padding:3px 0; }
  .foot-bottom .links a:not(:last-child)::after { content:none; margin:0; }
}
@media (max-width:640px){
  .nav-login { display:none; } /* both stay in the menu */
}
@media (max-width:560px){
  .foot-grid { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:480px){
  .nav-cta .nav-contact { display:none; }
  .brand img { height:20px; }
}
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 11px 22px;
  border-radius: var(--pill); border: 0;
  font: 600 14.5px/1.3 var(--font); text-align: center;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(30, 79, 216, 0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(59, 110, 245, 0.4), 0 14px 30px -8px rgba(30, 79, 216, 0.65); }
.btn-primary .icon-sm { transition: transform 200ms var(--ease); }
.btn-primary:hover .icon-sm { transform: translateX(3px); }
.btn-outline { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); color: #fff; }
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); }

/* Homepage button system: spinning gradient border ring on hover */
.btn::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0%, #a78bfa 25%, #60a5fa 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 250ms var(--ease); z-index: 2; pointer-events: none;
}
.btn:hover::after { opacity: 1; animation: spin-border 1.8s linear infinite; }
@keyframes spin-border { to { --angle: 360deg; } }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* Homepage hero CTA variants */
.btn-white { background: #fff; color: #0a0818; font-weight: 600; box-shadow: 0 8px 28px rgba(255, 255, 255, 0.2); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(255, 255, 255, 0.3); }
.btn-glass { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-weight: 500; }
.btn-glass:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); }
.btn-cta { padding: 14px 32px; font-size: 15px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 560px){ .hero-cta .btn { width: 100%; } }

/* ------------------------------------------------------------------- hero */
/* The earth sits on the right and fades into the page on its left and bottom
   edges, so the headline always reads against plain dark. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-art {
  position: absolute; z-index: 0; inset: 0;
  width: 100%; height: 100%;
  opacity: 1;
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,6,15,0.92) 0%, rgba(4,6,15,0.72) 42%, rgba(4,6,15,0.32) 100%),
    linear-gradient(0deg, var(--dark) 0%, rgba(4,6,15,0) 40%);
}
.hero-inner { position: relative; z-index: 1; padding-top: 104px; padding-bottom: 40px; }
.eyebrow {
  display: inline-block; margin-bottom: 22px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
/* Always one line: sized from the space available (the default headline is
   ~12.7em wide). showcase.js shrinks it further if an edited headline is longer. */
.title {
  white-space: nowrap;
  font-size: min(67.2px, calc((min(100vw, 1400px) - 2 * var(--gutter)) / 13.2 * 0.7));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #fff;
}
/* Each coloured part stays on one line ("to life", "with AI"). */
.title [class^="tone-"] { white-space: nowrap; color: #FFFFFF; }
.caret {
  display: inline-block; vertical-align: -0.08em;
  width: 3px; height: 0.82em; margin-left: 0.08em;
  background: #fff;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.intro { margin-top: 22px; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--text-80); }

/* ---------------------------------------------------------------- toolbar */
.work { padding-bottom: 72px; }
.toolbar { display: grid; gap: 14px; margin-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 44px; padding: 0 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-80);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.chip:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.chip[aria-pressed="true"] {
  border-color: var(--brand-2);
  background: rgba(59, 110, 245, 0.16);
  color: #DCE6FF;
  box-shadow: 0 0 0 1px var(--brand-2) inset, 0 0 24px -6px rgba(59, 110, 245, 0.6);
}
/* Phones: search is a full-width field under the chips. From 700px it's a small
   round button at the end of the chip row, so the categories keep the room; it
   opens leftwards (over the chips) while in use or holding a search. */
.search { position: relative; }
.search .icon-sm { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-55); pointer-events: none; z-index: 2; }
.search input {
  width: 100%; min-height: 44px; padding: 0 18px 0 46px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px; color: #fff;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), width 250ms var(--ease);
}
.search input::placeholder { color: var(--text-55); }
.search input:hover { border-color: var(--line-2); }
.search input:focus { outline: none; border-color: var(--brand-2); background: rgba(59, 110, 245, 0.08); }

/* ------------------------------------------------------------------ cards */
/* Cards in a row share row tracks (subgrid), so the header, image, title,
   results, description and tags each start at the same height in every card,
   even when one card has no results or a longer title. Row gap is 0 because a
   card spans six tracks; cards are spaced with margin-bottom instead. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; row-gap: 0; }
.card {
  position: relative;
  display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0;
  margin-bottom: 20px;
  min-width: 0;
  padding: 14px 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
.card:hover { border-color: rgba(107, 150, 248, 0.38); box-shadow: 0 30px 60px -30px rgba(30, 79, 216, 0.45); }
.card-head { grid-row: 1; display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 4px 10px; }
.card-num { font-size: 17px; font-weight: 400; color: var(--text-80); font-variant-numeric: tabular-nums; }
.card-type { font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-55); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-live {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 2px;
  font-size: 15px; color: var(--text-80);
  transition: color 200ms var(--ease);
}
.view-live:hover { color: #fff; }
.view-live .icon-sm { transition: transform 200ms var(--ease); }
.view-live:hover .icon-sm { transform: translateX(3px); }

.shot {
  grid-row: 2; align-self: start;
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  border-radius: 12px; overflow: hidden;
  background: var(--dark-panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 300ms var(--ease), transform 600ms var(--ease);
}
.shot img.is-loaded { opacity: 1; }
.card:hover .shot img { transform: scale(1.025); }
.shot-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 15px; color: var(--text-55); letter-spacing: 0.04em;
}
.shot img.is-loaded + .shot-fallback { display: none; }

.card-body { display: contents; }
.card-text { grid-row: 3; padding: 18px 4px 0; }
.stats { grid-row: 4; align-self: start; margin: 16px 4px 0; }
.card-desc { grid-row: 5; align-self: start; margin: 16px 4px 0; }
.tags { grid-row: 6; align-self: start; }
.card-title { font-size: clamp(21px, 2vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.card-sub { margin-top: 4px; font-size: 16px; color: var(--text-80); }
.card-desc { font-size: 14.5px; line-height: 1.6; color: var(--text-60); max-width: 40em; }

.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 14px 0; border-block: 1px solid rgba(255, 255, 255, 0.07);
}
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; } /* value on top, labels hang below */
.stat dd { font-size: clamp(20px, 2vw, 22px); font-weight: 500; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.stat dt { font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-55); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 4px 0; }
.tags li {
  display: inline-flex; align-items: center;
  min-height: 30px; padding: 0 13px;
  border-radius: var(--pill); border: 1px solid var(--line-2);
  font-size: 13px; color: var(--text-80);
}

/* ------------------------------------------------------------------ pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.pager-next { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pager-num { font-size: 17px; color: var(--text-80); font-variant-numeric: tabular-nums; }
.pager-line { width: 44px; height: 1px; background: var(--line-2); flex: none; }
.pager-label { font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-55); }
.pager-arrows { display: flex; gap: 12px; }
.arrow {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: #fff; cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.arrow:hover:not(:disabled) { border-color: var(--brand-2); background: rgba(59, 110, 245, 0.16); }
.arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.no-match { text-align: center; padding: 64px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.no-match h2 { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.no-match p { color: var(--text-75); margin-bottom: 20px; }

/* ------------------------------------------------------- larger screens */
@media (min-width: 640px) {
  .card { padding: 16px 18px 22px; }
}

@media (min-width: 700px) {
  .toolbar { display: flex; align-items: flex-start; gap: 16px; }
  .chips { flex: 1; min-width: 0; }
  .search { flex: none; width: 44px; height: 44px; margin-left: auto; }
  .search .icon-sm { left: auto; right: 13px; }
  .search input {
    position: absolute; top: 0; right: 0; z-index: 1;
    width: 44px; padding: 0 0 0 44px; cursor: pointer;
    border-color: var(--line-2); background: rgba(255, 255, 255, 0.02);
  }
  .search input::placeholder { color: transparent; }
  .search input::-webkit-search-cancel-button { display: none; }
  .search input:hover { border-color: rgba(255, 255, 255, 0.4); }
  .search input:focus, .search input:not(:placeholder-shown) {
    width: min(300px, calc(100vw - 2 * var(--gutter))); padding: 0 44px 0 20px; cursor: text;
    background: var(--dark-panel);
  }
  .search input:focus::placeholder { color: var(--text-55); }
  .search input:not(:placeholder-shown) { border-color: var(--brand-2); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
  .card { margin-bottom: 22px; }
}

@media (min-width: 768px) {
  .hero-inner { padding-top: 116px; padding-bottom: 72px; }
  .hero-art { width: 100%; }
  .intro { font-size: 18px; }
}

@media (min-width: 1024px) {
  .hero-inner { padding-top: 132px; padding-bottom: 96px; }
  .hero-art { width: 100%; }
}

/* Three projects per row. */
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ------------------------------------------- floating chat orb (bottom right) */
.orb {
  position: fixed;
  right: clamp(16px, 4vw, 34px);
  bottom: clamp(16px, 4vw, 34px);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; flex: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.orb.is-chat-open { opacity: 0; visibility: hidden; }
.orb { transition: opacity .2s, visibility .2s; }
.orb-art { width: 76px; height: 76px; flex: none; display: block; }
.orb svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* "Ask me anything" label sitting beside the orb */
.orb-label {
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  border-radius: var(--pill);
  background: rgba(10, 14, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 600 14px/1 var(--font);
  color: #fff; white-space: nowrap;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.75);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
  animation: orbLabelIn .6s var(--ease) .9s both;
}
.orb:hover .orb-label, .orb:focus-visible .orb-label {
  background: rgba(18, 12, 28, 0.88); border-color: rgba(255, 127, 196, 0.55);
}
@keyframes orbLabelIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

/* each transform lives on its own layer so they compose instead of overriding */
.orb-spin { transform-origin: 100px 100px; }
.orb-pop  { transform-origin: 100px 100px; transform: scale(1);
            transition: transform .5s cubic-bezier(.34,1.7,.5,1); }
.orb-shape {
  transform-origin: 100px 100px;
  animation: orbIdle 7s ease-in-out infinite, orbFloat 3.6s ease-in-out infinite;
  transition: filter .45s ease;
}
.orb-aura {
  transform-origin: 100px 100px; opacity: .8;
  animation: orbAura 4.2s ease-in-out infinite;
  transition: opacity .45s ease;
}

/* facial expressions — one group per mood, cross-faded */
.face { transition: opacity .16s ease; }
.face-idle  { animation: faceOpen 4.6s ease-in-out infinite; }
.face-blink { opacity: 0; animation: faceShut 4.6s ease-in-out infinite; }
.face-wow, .face-happy { opacity: 0; }
@keyframes faceOpen { 0%, 90%, 100% { opacity: 1; } 93%, 96.5% { opacity: 0; } }
@keyframes faceShut { 0%, 90%, 100% { opacity: 0; } 93%, 96.5% { opacity: 1; } }

@keyframes orbIdle {
  0%, 100% { transform: rotate(0deg) scale(1, 1); }
  25%      { transform: rotate(4deg) scale(1.04, .96); }
  50%      { transform: rotate(0deg) scale(.96, 1.04); }
  75%      { transform: rotate(-4deg) scale(1.03, .97); }
}
@keyframes orbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes orbAura  { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

/* two turns on hover: starts slow, winds up fast, then settles */
@keyframes orbSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }
/* rounds off into a ball while it spins fast, then springs back to the squircle */
@keyframes orbRound {
  0%        { d: path("M 97 18 C 141 15 180 44 183 88 C 186 134 158 180 110 185 C 63 190 23 160 17 115 C 11 68 44 24 97 18 Z"); }
  32%, 72%  { d: path("M 100 20 C 144 20 180 56 180 100 C 180 144 144 180 100 180 C 56 180 20 144 20 100 C 20 56 56 20 100 20 Z"); }
  100%      { d: path("M 97 18 C 141 15 180 44 183 88 C 186 134 158 180 110 185 C 63 190 23 160 17 115 C 11 68 44 24 97 18 Z"); }
}

.orb:hover .orb-spin,  .orb:focus-visible .orb-spin  { animation: orbSpin 1.45s cubic-bezier(.88,0,.28,1); }
.orb:hover .orb-path,  .orb:focus-visible .orb-path  { animation: orbRound 1.45s cubic-bezier(.45,0,.25,1); }
.orb:hover .orb-pop,   .orb:focus-visible .orb-pop   { transform: scale(1.14); }
.orb:hover .orb-shape, .orb:focus-visible .orb-shape { filter: saturate(1.3) brightness(1.1); animation-duration: 3.2s, 1.4s; }
.orb:hover .orb-aura,  .orb:focus-visible .orb-aura  { opacity: 1; animation-duration: 1.5s; }

/* hover → wide-awake face */
.orb:hover .face-idle, .orb:hover .face-blink,
.orb:focus-visible .face-idle, .orb:focus-visible .face-blink { animation: none; opacity: 0; }
.orb:hover .face-wow, .orb:focus-visible .face-wow { opacity: 1; }
/* click → smiling eyes */
.orb:active .face-wow { opacity: 0; }
.orb:active .face-happy { opacity: 1; }
.orb:active .orb-pop { transform: scale(.94); transition-duration: .12s; }

.orb:focus-visible { outline: 2px solid #FF7FC4; outline-offset: 10px; border-radius: 999px; }

@media (max-width: 480px) { .orb-art { width: 62px; height: 62px; } .orb-label { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover .shot img { transform: none; }
  .orb-shape, .orb-aura, .orb-spin, .orb-path, .face-idle, .face-blink { animation: none !important; }
  .face-blink { opacity: 0 !important; }
}