/* GLOBAL TYPOGRAPHY RESET — single modern grotesk system (Inter), no italic, no skew */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  font-family: var(--font-sans);
  font-style: normal;
  font-variant: normal;
}

:root {
  --bg:        #fdf0f3;
  --bg2:       #fae6eb;
  --bg3:       #f5dce3;
  --border:    rgba(200,120,145,0.18);
  --border-strong: rgba(200,120,145,0.38);
  --text:      #2d1a22;
  --muted:     rgba(45,26,34,0.45);
  --accent:    #d4607a;
  --accent2:   #e88fa2;
  --violet:    #9d6bd4;
  --sidebar-w: 72px;
  --sidebar-w-open: 232px;
  --topbar-bg: rgba(253,240,243,0.82);
  --model-side-bg: #fae6eb;

  /* ── DESIGN SYSTEM ── */
  /* Type system: one modern geometric-grotesk family (Inter) drives UI + body,
     Space Grotesk handles display/brand, and prices use lining tabular figures
     so values never jump width when the currency or billing cycle changes. */
  --font-sans:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Figtree', sans-serif;
  --font-num:     'Figtree', sans-serif;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 50px;
  --shadow-1: 0 1px 2px rgba(20,5,10,.06), 0 8px 24px -10px rgba(20,5,10,.10);
  --shadow-2: 0 2px 4px rgba(20,5,10,.08), 0 20px 48px -16px rgba(20,5,10,.18);
  --surface-sheen: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 42%);
  --ring-inset: inset 0 0 0 1px rgba(255,255,255,.35);

  /* ── MOTION SYSTEM ── */
  --ease-premium:     cubic-bezier(.22, .68, .26, 1);
  --ease-soft-out:    cubic-bezier(.25, .46, .45, .94);
  --ease-bounce-soft: cubic-bezier(.34, 1.45, .64, 1);
  --duration-fast:    .18s;
  --duration-normal:  .32s;
  --duration-slow:    .6s;
  --hover-lift:       -4px;
  --glow-soft:        0 8px 28px rgba(212,96,122,.22);
  --glow-strong:      0 14px 44px rgba(212,96,122,.34), 0 0 26px rgba(157,107,212,.22);
  --ambient-opacity:  .55;

  /* ── SUBSCRIPTION TIER PALETTE ── */
  --tier-free:      #9a8a90;   /* muted dusty mauve — lowest hierarchy */
  --tier-premium:   #e0719a;   /* pastel rose / pink */
  --tier-elite:     #9d6bd4;   /* pastel violet / purple */
  --tier-ultra:     #b264c8;   /* exclusive violet base */
  --tier-ultra-ice: #5fb6e6;   /* ice accent woven into Ultra */
}

/* ── DARK MODE (brand default) — soft charcoal with a violet cast ── */
html.dark {
  --bg:        #0a090e;
  --bg2:       #121017;
  --bg3:       #1a1721;
  --border:    rgba(240,180,200,0.10);
  --border-strong: rgba(240,168,187,0.26);
  --text:      #f6f1f4;
  --muted:     rgba(246,241,244,0.44);
  --accent:    #f0a8bb;
  --accent2:   #f8cdd8;
  --violet:    #a87fe0;
  --topbar-bg: rgba(12,10,16,0.72);
  --model-side-bg: #14121a;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px -10px rgba(0,0,0,.50);
  --shadow-2: 0 2px 6px rgba(0,0,0,.40), 0 24px 56px -16px rgba(0,0,0,.62);
  --surface-sheen: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%);
  --ring-inset: inset 0 0 0 1px rgba(255,255,255,.04);
  --glow-soft:   0 8px 30px rgba(240,168,187,.16);
  --glow-strong: 0 14px 48px rgba(240,168,187,.26), 0 0 30px rgba(157,107,212,.20);
  --ambient-opacity: .45;

  /* ── SUBSCRIPTION TIER PALETTE (dark) ── */
  --tier-free:      #8a7d86;
  --tier-premium:   #f0a8bb;
  --tier-elite:     #b48ce8;
  --tier-ultra:     #cf9be8;
  --tier-ultra-ice: #8fd0f0;
}

/* Smooth theme transition */
*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;            /* stop Safari inflating text in landscape */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;  /* no grey flash on iOS taps */
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-style: normal;
  /* cv11 = single-storey 'a' (cleaner, more geometric modern-SaaS texture),
     cv05 = disambiguated 'l'; plus optical sizing, antialiasing and a hair of
     negative tracking for premium polish. Prices add tabular figures locally. */
  font-feature-settings: 'cv11', 'cv05';
  font-optical-sizing: auto;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;        /* dynamic viewport height — fixes iOS Safari toolbar gap */
  display: flex;
  cursor: none;
  overflow-x: hidden;
  position: relative;
}
.main { position: relative; z-index: 1; }
.sidebar { z-index: 201; }

/* ── CUSTOM CURSOR ── */
#cur {
  position: fixed; z-index: 99999;
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .3s, height .3s, border-radius .3s, background .2s;
}
#cur-ring {
  position: fixed; z-index: 99998;
  width: 36px; height: 36px;
  border: 1px solid rgba(180,80,110,0.4);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .4s cubic-bezier(.25,.46,.45,.94),
              height .4s cubic-bezier(.25,.46,.45,.94),
              border-color .3s;
}
body.cur-card #cur       { width:72px; height:72px; border-radius:50%; background:rgba(180,80,110,0.1); }
body.cur-card #cur-ring  { width:80px; height:80px; border-color:rgba(180,80,110,0.45); }
body.cur-btn  #cur       { width:56px; height:56px; border-radius:28px; background:rgba(180,80,110,0.12); }

/* ── LEFT SIDEBAR — premium product shell ── */
.sidebar {
  position: fixed; left:0; top:0; bottom:0;
  width: var(--sidebar-w);
  background:
    linear-gradient(180deg, rgba(240,168,187,.045) 0%, rgba(157,107,212,.025) 30%, transparent 60%),
    var(--bg2);
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 40px -24px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 20px 0;
  z-index: 200;
  transition: width .3s cubic-bezier(.25,.46,.45,.94);
  overflow: hidden;
}
.sidebar:hover {
  width: var(--sidebar-w-open);
}
.sidebar:hover .sb-label { opacity:1; }
.sidebar:hover .sb-logo-text { opacity:1; max-width:120px; }

.sb-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; margin-bottom: 32px; width: 100%;
  text-decoration: none; flex-shrink: 0;
}

/* ── LOGO IMAGE — no wrapper, no background, no box ── */
.sb-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
  /* Crisp on all DPI — image is 1254px so downsampling is smooth */
  image-rendering: auto;
  transition:
    transform .4s cubic-bezier(.34, 1.56, .64, 1),
    filter    .35s ease;
}
.sb-logo:hover .sb-logo-img {
  transform: scale(1.12) translateY(-2px);
  filter:
    drop-shadow(0 0 8px  rgba(240, 168, 187, 0.65))
    drop-shadow(0 0 22px rgba(180,  80, 110, 0.30));
}
/* Dark mode — slightly brighter glow */
html.dark .sb-logo:hover .sb-logo-img {
  filter:
    drop-shadow(0 0 10px rgba(240, 168, 187, 0.80))
    drop-shadow(0 0 28px rgba(200, 100, 140, 0.45));
}
.sb-logo-text {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: .12em;
  opacity: 0; max-width: 0; overflow:hidden;
  transition: opacity .25s, max-width .3s;
  white-space: nowrap;
}

.sb-nav { display:flex; flex-direction:column; gap:2px; width:100%; padding: 0 10px; flex:1; }

.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 10px;
  text-decoration: none; color: var(--muted);
  cursor: none; transition: background .15s, color .15s;
  white-space: nowrap;
}
.sb-item:hover  { background: rgba(240,168,187,0.08); color: var(--text); }
.sb-item.active {
  background: linear-gradient(90deg, rgba(240,168,187,.16) 0%, rgba(157,107,212,.07) 100%);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(240,168,187,.14);
}
.sb-item.active .sb-icon path,
.sb-item.active .sb-icon circle,
.sb-item.active .sb-icon rect { stroke: var(--accent); }

.sb-icon { width:20px; height:20px; flex-shrink:0; }
.sb-label {
  font-size: 13px; font-weight: 400;
  opacity: 0;
  transition: opacity .2s;
}

.sb-divider { width:calc(100% - 20px); height:1px; background: var(--border); margin: 12px 10px; flex-shrink:0; }

.sb-bottom { padding: 0 10px; width:100%; }

/* Dark mode — keep images visible, subtle bottom gradient only */
html.dark .model-overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,.38)  0%,
    rgba(0,0,0,.04)  40%,
    transparent      58%);
  opacity: 0.80;
}
html.dark .model-side-bg {
  background: radial-gradient(ellipse at center, #2a2a32 0%, #111116 60%, #0a0a0d 100%);
}
html.dark .model-img {
  mix-blend-mode: multiply;
  filter: brightness(1.15) contrast(1.05);
}
html.dark .model-side::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(60,55,80,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 70% 30%, rgba(40,40,60,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 100% 40% at 50% 85%, rgba(0,0,0,0.55) 0%, transparent 70%);
  pointer-events: none;
}
html.dark .model-overlay { z-index: 3; }
/* Dark mode card overlays — replace heavy pink with lighter black gradient */
html.dark .card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.52) 0%, rgba(0,0,0,.06) 42%, transparent 65%);
}
html.dark .card:hover .card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 52%, transparent 70%);
}
/* ── THEME TOGGLE — ayushmxxn "crossing icons" pill, recoloured to VORSA ──
   Two icon-knobs swap sides when html.dark flips: the filled "thumb" carries the
   active icon (amber Sun on the right in light, rose→violet Moon on the left in
   dark) while the muted counterpart crosses behind it. Driven purely by the
   html.dark class so it stays in sync with toggleTheme(). */
.sb-theme-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}
.sb-theme-toggle:hover { background: rgba(212,96,122,0.08); }

.theme-switch {
  --ts-w: 46px; --ts-h: 24px; --ts-pad: 3px; --ts-knob: 18px;
  /* full cross distance = inner content width − knob (−2px for the 1px borders) */
  --ts-shift: calc(var(--ts-w) - var(--ts-pad) * 2 - var(--ts-knob) - 2px);
  position: relative; flex-shrink: 0; box-sizing: border-box;
  width: var(--ts-w); height: var(--ts-h); padding: var(--ts-pad);
  border-radius: 50px;
  background: #fff; border: 1px solid rgba(0,0,0,.10);
  transition: background .35s var(--ease-premium), border-color .35s var(--ease-premium);
}
html.dark .theme-switch { background: var(--bg3); border-color: rgba(240,168,187,0.22); }

.ts-row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; }
.ts-knob {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--ts-knob); height: var(--ts-knob); border-radius: 50%;
  transition: transform .4s var(--ease-bounce-soft), background .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
.ts-knob svg { width: 11px; height: 11px; display: block; }
.ts-knob .ts-moon, .ts-knob .ts-sun { display: none; }

/* Knob A — the filled thumb (kept above its sibling during the cross) */
.ts-knob-a {
  z-index: 2;
  transform: translateX(var(--ts-shift));
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 1px 5px rgba(245, 158, 11, .45);
}
.ts-knob-a .ts-sun { display: block; color: #fff; }
html.dark .ts-knob-a {
  transform: translateX(0);
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 1px 7px rgba(212, 96, 122, .55);
}
html.dark .ts-knob-a .ts-sun { display: none; }
html.dark .ts-knob-a .ts-moon { display: block; color: #fff; }

/* Knob B — the muted counterpart */
.ts-knob-b { z-index: 1; transform: translateX(calc(var(--ts-shift) * -1)); background: transparent; }
.ts-knob-b .ts-moon { display: block; color: var(--muted); }
html.dark .ts-knob-b { transform: translateX(0); }
html.dark .ts-knob-b .ts-moon { display: none; }
html.dark .ts-knob-b .ts-sun { display: block; color: var(--muted); }

.theme-toggle-label {
  font-size: 13px; font-weight: 400;
  color: var(--muted);
  opacity: 0; transition: opacity .2s;
  white-space: nowrap;
}
.sidebar:hover .theme-toggle-label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ts-knob { transition: background .2s, box-shadow .2s; }
}

/* ── TOPBAR MOBILE LOGO ── */
.topbar-logo-mobile {
  display: none;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  cursor: none;
  transition: filter .3s ease;
}
.topbar-logo-mobile:hover {
  filter:
    drop-shadow(0 0 8px rgba(240,168,187,0.6))
    drop-shadow(0 0 18px rgba(180,80,110,0.3));
}
.topbar-logo-img {
  width: 36px; height: 36px;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.topbar-logo-mobile:hover .topbar-logo-img {
  transform: scale(1.1) translateY(-1px);
}

/* ── MAIN CONTENT ── */

/* #section-main is a flex child of body — it must grow to fill all available width */
#section-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* ── TOP BAR — glass strip with gradient hairline ── */
.topbar {
  position: sticky; top:0; z-index:100;
  display: flex; align-items: center;
  padding: 0 28px;
  height: 64px;
  background: var(--topbar-bg);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  gap: 14px;
}
.topbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(240,168,187,.35) 18%, rgba(157,107,212,.25) 50%, transparent 85%);
  pointer-events: none;
}
.topbar-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
}

/* ── PROMO WIDGET ── */
.promo-widget {
  display: flex; align-items: center; gap: 9px;
  margin-left: auto;
  padding: 5px 14px 5px 6px;
  border-radius: 50px;
  background: var(--bg3);
  border: 1px solid rgba(212,96,122,0.22);
  white-space: nowrap;
  min-width: 0; flex-shrink: 1;
  overflow: hidden;
}
.promo-video {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.promo-text {
  font-size: 12.5px; font-weight: 500;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: promo-shimmer 4s linear infinite;
  overflow: hidden; text-overflow: ellipsis;
}
@keyframes promo-shimmer {
  to { background-position: 200% center; }
}

/* "All Models" reuses the .catalog-chip component verbatim (see below).
   Only the anchor reset is kept here so it matches the chip <div>s exactly. */
.cat-tab { text-decoration: none; }

/* ── UPGRADE BUTTON ── */
.update-plan-btn {
  position: relative;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 13px; font-weight: 600;
  font-family: 'Figtree', sans-serif;
  cursor: none;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #c2486a 0%, #d4607a 45%, #9d6bd4 100%);
  box-shadow: 0 4px 16px rgba(212,96,122,0.28);
  transition: transform .2s, box-shadow .2s, filter .2s;
  flex-shrink: 0;
}
.update-plan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(157,107,212,0.4);
  filter: brightness(1.05);
}
.update-plan-btn:active { transform: translateY(0); filter: brightness(.97); }

/* ── AUTH BUTTONS (Sign Up / Login) ── */
.auth-btn {
  height: 36px; padding: 0 18px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  font-family: 'Figtree', sans-serif;
  cursor: none; white-space: nowrap;
  transition: all .2s var(--ease-premium);
  flex-shrink: 0;
}
.auth-btn-signup {
  border: 1px solid rgba(255,255,255,.14); color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 4px 16px rgba(212,96,122,.25), var(--ring-inset);
}
html.dark .auth-btn-signup { color: #1d1016; }
.auth-btn-signup:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,96,122,.4);
}
.auth-btn-login {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong);
}
.auth-btn-login:hover { border-color: var(--accent); color: var(--text); background: rgba(240,168,187,.06); }

/* ── MODEL HERO ── */
.model-hero {
  margin: 20px 28px 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 420px;
  position: relative;
}

/* Половина */
.model-side {
  position: relative;
  overflow: hidden;
  cursor: none;
}
.model-side:hover .model-select-btn { opacity: 1; transform: translateY(0); }
.model-side:hover .model-img        { transform: scale(1.04); }
.model-side:hover .model-overlay    { opacity: 1; }

/* Изображение — показываем чётко на светлом фоне */
.model-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
  background: transparent;
}

/* Тёмный фон за каждой половиной */
.model-side-bg {
  position: absolute; inset: 0;
  background: var(--model-side-bg);
  z-index: 0;
}
.model-side .model-img { position: absolute; inset: 0; z-index: 1; }

/* Тонкий градиент снизу */
.model-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top,
    rgba(180,80,110,.55)  0%,
    rgba(180,80,110,.05)  35%,
    transparent     60%);
  opacity: 0.5;
  transition: opacity .3s;
}

/* Разделитель по центру */
.model-hero-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(240,168,187,0.2);
  z-index: 10;
  pointer-events: none;
}

/* Лейбл типа (Real / Anime) */
.model-type-tag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 5;
  font-size: 11px; font-weight: 500;
  color: #fff;
  background: rgba(180,80,110,.5);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  padding: 4px 12px;
  border-radius: 50px;
}

/* Имя модели */
.model-name-tag {
  position: absolute;
  bottom: 60px; left: 0; right: 0;
  z-index: 5;
  text-align: center;
  font-size: 18px; font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: all .3s;
}
.model-side:hover .model-name-tag { opacity: 1; transform: translateY(0); }

/* Кнопка Select */
.model-select-btn {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 5;
  opacity: 0;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  padding: 10px 28px;
  border-radius: 50px;
  font-size: 14px; font-weight: 500;
  cursor: none;
  font-family: 'Figtree', sans-serif;
  white-space: nowrap;
}
.model-select-btn:hover { background: var(--accent2); }

/* Активная половина — подсветка рамки */
.model-side.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.model-side.selected .model-type-tag {
  background: rgba(240,168,187,.2);
  border-color: rgba(240,168,187,.4);
  color: var(--accent);
}
/* Чекмарк у выбранной */
.model-check {
  position: absolute;
  top: 16px; right: 16px; z-index: 5;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #1a1a1a;
  display: none; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.model-side.selected .model-check { display: flex; }

/* ── CATALOG HEADER ── */
/* ── FILTER BAR ──
   Premium discovery filter: a primary status segment + advanced selectors
   (Tags multi-select popover, Sort menu) + a removable selected-filters row.
   See the filter engine in js/components.js (applyModelFilters). */
.catalog-head {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px;
  padding: 18px 28px 14px;
  /* Pins just under the sticky topbar (height measured into --topbar-h so it
     stays correct when the topbar wraps on mobile); glass so cards never bleed
     through. A shadow/hairline fades in via .is-stuck (set by initStickyFilters). */
  position: sticky; top: var(--topbar-h, 64px); z-index: 90;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.catalog-head.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
}
#filterSentinel { height: 1px; margin: 0; pointer-events: none; }
.filter-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}

/* Primary status segment (single-select) */
.seg {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--bg2);
  border: 1px solid var(--border);
  max-width: 100%;
}
.seg-btn {
  height: 32px; padding: 0 15px; border: none; background: transparent;
  border-radius: var(--radius-pill);
  font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: none; white-space: nowrap;
  transition: color .2s var(--ease-premium), background .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 4px 14px rgba(212,96,122,.32), var(--ring-inset);
}

/* Type/gender segments (Real/Anime · Female/Male/Trans) live in the free
   space between the primary segment and the selector cluster: this auto
   margin and .filter-controls' one split the leftover, so the pair sits
   centered without moving either edge. */
#segType { margin-left: auto; }

/* Advanced selector cluster (Tags + Sort) */
.filter-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fdd { position: relative; }
.fdd-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--bg2);
  border: 1px solid var(--border);
  font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: none; white-space: nowrap;
  transition: all .18s var(--ease-premium);
}
.fdd-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg3); }
.fdd.open .fdd-btn,
.fdd.has-sel .fdd-btn { border-color: rgba(240,168,187,.45); color: var(--text); }
.fdd-ico { opacity: .7; flex-shrink: 0; }
.fdd-count { color: var(--accent); font-weight: 700; }
.fdd .dd-caret { opacity: .5; flex-shrink: 0; transition: transform .2s var(--ease-premium); }
.fdd.open .dd-caret { transform: rotate(180deg); }

/* Popover + menu surfaces */
.fdd-panel, .fdd-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.34), var(--ring-inset);
  z-index: 70;
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s var(--ease-premium), transform .18s var(--ease-premium);
}
.fdd.open .fdd-panel, .fdd.open .fdd-menu {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.fdd-panel { width: 326px; max-width: calc(100vw - 40px); overflow: hidden; }
.fdd-panel-scroll { max-height: 360px; overflow-y: auto; padding: 14px 14px 2px; }

/* Tag groups inside the popover */
.ftg-group { margin-bottom: 13px; }
.ftg-group-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.ftg-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ftg-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--bg3); border: 1px solid var(--border);
  font-family: 'Figtree', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--muted);
  cursor: none; white-space: nowrap;
  transition: all .16s var(--ease-premium);
}
.ftg-chip:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.ftg-chip .ftg-check {
  width: 0; opacity: 0; overflow: hidden;
  transition: width .16s var(--ease-premium), opacity .16s var(--ease-premium), margin .16s var(--ease-premium);
}
.ftg-chip.selected {
  background: linear-gradient(135deg, rgba(240,168,187,.20), rgba(157,107,212,.12));
  border-color: rgba(240,168,187,.5); color: var(--text);
}
.ftg-chip.selected .ftg-check { width: 13px; opacity: 1; margin-right: 5px; color: var(--accent); }

/* Popover footer */
.fdd-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 14px; border-top: 1px solid var(--border);
}
.fdd-foot-clear {
  background: none; border: none; color: var(--muted);
  font-family: 'Figtree', sans-serif; font-size: 12.5px; font-weight: 600; cursor: none;
  transition: color .16s;
}
.fdd-foot-clear:hover { color: var(--accent); }
.fdd-foot-done {
  padding: 7px 18px; border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  font-family: 'Figtree', sans-serif; font-size: 12.5px; font-weight: 600; cursor: none;
  transition: filter .16s, transform .16s;
}
.fdd-foot-done:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Sort menu */
.fdd-menu { min-width: 196px; padding: 6px; }
.fdd-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: none; background: none; border-radius: 9px;
  font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: none; text-align: left;
  transition: background .15s, color .15s;
}
.fdd-opt:hover { background: rgba(240,168,187,.08); color: var(--text); }
.fdd-opt .fdd-check { margin-left: auto; opacity: 0; color: var(--accent); transition: opacity .15s; }
.fdd-opt.selected { color: var(--text); }
.fdd-opt.selected .fdd-check { opacity: 1; }

/* Selected-filters summary row */
.filter-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--bg2);
  border: 1px solid var(--border);
  animation: filter-summary-in .26s var(--ease-premium);
}
.filter-summary[hidden] { display: none; }
.filter-summary-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.filter-summary-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(240,168,187,.16), rgba(157,107,212,.10));
  border: 1px solid rgba(240,168,187,.4); color: var(--text);
  font-family: 'Figtree', sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: none; white-space: nowrap;
  animation: fchip-in .2s var(--ease-premium);
  transition: filter .15s, transform .15s;
}
.fchip:hover { filter: brightness(1.08); transform: translateY(-1px); }
.fchip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,.18); color: var(--text);
}
.filter-clear {
  margin-left: auto; background: none; border: none;
  color: var(--accent); font-family: 'Figtree', sans-serif; font-size: 12.5px; font-weight: 700;
  cursor: none; transition: filter .15s;
}
.filter-clear:hover { filter: brightness(1.12); text-decoration: underline; }

/* Empty state (no card matches the active filters) */
.grid-empty {
  grid-column: 1 / -1; text-align: center; padding: 56px 20px;
  animation: fchip-in .26s var(--ease-premium);
}
.grid-empty-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.grid-empty-sub { font-size: 13px; color: var(--muted); }

@keyframes filter-summary-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fchip-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes grid-fade { from { opacity: .45; } to { opacity: 1; } }
.grid.grid-refresh { animation: grid-fade .28s var(--ease-premium); }
.card.is-hidden { display: none !important; }

/* ── MODEL GRID ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  padding: 4px 28px 48px;
}

/* MODEL CARD */
.card {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  position: relative; cursor: none;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94),
              border-color .3s, box-shadow .3s;
  aspect-ratio: 3/4;
  display: flex; flex-direction: column;
}
.card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(240,168,187,0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(240,168,187,0.1);
}
.card-img {
  position: absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.card:hover .card-img { transform: scale(1.06); }

.card-overlay {
  position: absolute; inset:0;
  background: linear-gradient(to top, rgba(140,50,75,0.75) 0%, rgba(140,50,75,0.15) 40%, transparent 65%);
}
.card:hover .card-overlay {
  background: linear-gradient(to top, rgba(140,50,75,0.85) 0%, rgba(140,50,75,0.25) 50%, transparent 70%);
}

.card-badges {
  position: absolute; top:12px; left:12px;
  display: flex; flex-direction:column; gap:5px;
}
.badge {
  font-size: 10px; font-weight: 500;
  padding: 3px 9px; border-radius: 50px;
  backdrop-filter: blur(6px);
}
.badge-new  { background: rgba(240,168,187,0.85); color:#1a1a1a; }
.badge-hot  { background: rgba(220,60,60,0.8);    color:#fff; }
.badge-excl { background: rgba(255,255,255,0.12); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.15); }

.card-fav {
  position: absolute; top:12px; right:12px;
  width:34px; height:34px; border-radius:50%;
  background: rgba(10,8,12,0.45); backdrop-filter:blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items:center; justify-content:center;
  cursor: none; transition: background .2s;
  opacity:0; transition: opacity .2s, background .2s;
}
.card:hover .card-fav { opacity:1; }
.card-fav:hover { background: rgba(240,168,187,0.3); }

.card-info {
  position: absolute; bottom:0; left:0; right:0;
  padding: 14px 15px 14px;
}
.card-name {
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 600; letter-spacing: .01em;
  color: #fff; line-height: 1.2; margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* Swap zone: the tag chips (resting) and the Chat button (hover/CTA) share one
   grid cell so they overlap and cross-fade. The cell sizes to the taller of the
   two, so the name above never shifts — no layout jump between states. */
.card-swap { display: grid; }
.card-swap > .card-tags,
.card-swap > .card-actions {
  grid-column: 1; grid-row: 1;   /* stack in the same cell */
  align-self: end;               /* bottom-aligned so the button lands where the tags sat */
}
/* ── Card tag chips (persona / vibe under the model name) ──
   Replaces the old "Editorial · AI Anime" meta line. Glassy dark pills with a
   soft border; the age chip gets a subtle rose accent. See cardTagChips() in
   js/components.js for the data. */
.card-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 48px; overflow: hidden;   /* safety net — never spill past ~2 rows */
  transition: opacity .25s var(--ease-premium), transform .25s var(--ease-premium);
}
/* on hover the Chat CTA takes over the swap zone — tags slide up and fade out */
.card:hover .card-tags {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
}
.card-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 50px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.25;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.card-chip-more {
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}

.card-actions {
  display: flex; gap:6px;
  transform: translateY(8px);
  opacity:0;
  pointer-events: none;
  transition: opacity .25s var(--ease-premium), transform .25s var(--ease-premium);
}
.card:hover .card-actions { opacity:1; transform:translateY(0); pointer-events:auto; }

.card-btn {
  flex:1; padding:9px 0; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; cursor:none;
  border: none; transition: all .18s;
}
.card-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#1d1016;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), var(--ring-inset);
}
.card-btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(240,168,187,.35), var(--ring-inset);
}
.card-btn-primary:active { transform: scale(.98); }

/* ── FOOTER — integrated strip with gradient hairline ── */
.page-footer {
  position: relative;
  margin: 16px 28px 28px;
  padding: 26px 28px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(240,168,187,.05) 0%, transparent 70%),
    var(--bg2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: space-between;
  overflow: hidden;
}
.page-footer::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,168,187,.4), rgba(157,107,212,.3), transparent);
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: .14em;
  color: var(--text);
}
.footer-links { display:flex; gap:20px; }
.footer-links a {
  font-size:13px; color:var(--muted); text-decoration:none; cursor:none;
  padding: 4px 2px; border-radius: 6px;
  transition: color .15s;
}
.footer-links a:hover { color:var(--accent); }
.footer-copy { font-size:12px; color:var(--muted); }

/* ── ACCESSIBILITY / INTERACTION POLISH ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ═══════════════════════════════════════════
   GLOBAL MOTION SYSTEM — VORSA 2026
   Transform/opacity only; honours reduced motion.
   ═══════════════════════════════════════════ */

/* ── Ambient background orbs (rose / violet drift) ── */
body::before,
body::after {
  content: '';
  position: fixed;
  width: 56vmax; height: 56vmax;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: var(--ambient-opacity);
  filter: blur(60px);
  will-change: transform;
}
body::before {
  top: -28vmax; left: -18vmax;
  background: radial-gradient(circle at 35% 35%, rgba(212,96,122,.16) 0%, rgba(212,96,122,.05) 45%, transparent 70%);
  animation: orb-drift-a 52s var(--ease-soft-out) infinite alternate;
}
body::after {
  bottom: -30vmax; right: -20vmax;
  background: radial-gradient(circle at 60% 60%, rgba(157,107,212,.13) 0%, rgba(157,107,212,.04) 45%, transparent 70%);
  animation: orb-drift-b 64s var(--ease-soft-out) infinite alternate;
}
@keyframes orb-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vmax, 5vmax, 0) scale(1.12); }
}
@keyframes orb-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-6vmax, -5vmax, 0) scale(.96); }
}

/* Reusable ambient glow for containers */
.ambient-glow { position: relative; }
.ambient-glow::before {
  content: '';
  position: absolute; inset: -10%;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,96,122,.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Reveal system (IntersectionObserver adds .is-visible) ── */
.reveal,
.reveal-up,
.reveal-scale,
.reveal-blur {
  opacity: 0;
  transition:
    opacity   var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium),
    filter    var(--duration-slow) var(--ease-premium);
}
.reveal-up    { transform: translateY(20px); }
.reveal-scale { transform: scale(.96); }
.reveal-blur  { transform: translateY(10px); filter: blur(8px); }
.is-visible   { opacity: 1; transform: none; filter: none; }
/* never strand content invisible if the observer can't run */
.no-js .reveal, .no-js .reveal-up, .no-js .reveal-scale, .no-js .reveal-blur { opacity: 1; transform: none; filter: none; }

/* ── Button motion utilities ── */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -140%;
  width: 55%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left var(--duration-slow) var(--ease-premium);
  pointer-events: none;
}
.btn-shine:hover::after { left: 170%; }
.btn-glow { transition: box-shadow var(--duration-normal) var(--ease-premium), transform var(--duration-normal) var(--ease-premium); }
.btn-glow:hover { box-shadow: var(--glow-strong); }
.btn-soft-press:active { transform: scale(.97) !important; }
.card-lift { transition: transform var(--duration-normal) var(--ease-premium), box-shadow var(--duration-normal) var(--ease-premium); }
.card-lift:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--glow-soft); }

/* ── First-load choreography (body.app-ready added by initMotion) ── */
.sidebar       { opacity: 0; transform: translateX(-14px); }
.topbar        { opacity: 0; transform: translateY(-12px); }
.catalog-head  { opacity: 0; transform: translateY(12px); }
body.app-ready .sidebar,
body.app-ready .topbar,
body.app-ready .catalog-head {
  opacity: 1; transform: none;
  transition:
    opacity   var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium),
    width     .3s cubic-bezier(.25,.46,.45,.94),
    background-color .3s ease, border-color .3s ease;
}
body.app-ready .topbar       { transition-delay: .08s; }
body.app-ready .catalog-head { transition-delay: .16s; }

/* Card entrance (class removed on animationend so hover stays snappy) */
.card-enter {
  opacity: 0;
  animation: card-in var(--duration-slow) var(--ease-premium) both;
  animation-delay: var(--d, 0ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Sidebar nav motion ── */
.sb-item {
  position: relative;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-premium);
}
.sb-item::before {
  content: '';
  position: absolute; left: -10px; top: 50%;
  width: 3px; height: 60%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transform: translateY(-50%) scaleY(0);
  transition: transform var(--duration-normal) var(--ease-bounce-soft);
}
.sb-item.active::before { transform: translateY(-50%) scaleY(1); }
.sb-item:hover { transform: translateX(3px); }
.sb-icon { transition: transform var(--duration-normal) var(--ease-bounce-soft), stroke var(--duration-fast) ease; }
.sb-item:hover .sb-icon { transform: scale(1.1); }
.sb-label { transform: translateX(-6px); transition: opacity .2s, transform var(--duration-normal) var(--ease-premium); }
.sidebar:hover .sb-label { transform: none; }

/* ── Topbar chips / filters ── */
@keyframes chip-pop {
  0%   { transform: scale(.94); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.catalog-chip.active, .cat-tab.active { animation: chip-pop var(--duration-normal) var(--ease-bounce-soft); }
.catalog-chip:hover { transform: translateY(-1px); }
.catalog-chip { transition: all .18s, transform var(--duration-fast) var(--ease-premium); }
.dd-menu { transform-origin: top right; animation: dd-open var(--duration-fast) var(--ease-premium); }
@keyframes dd-open {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Model card hover: glow + parallax-ready image ── */
.card { will-change: transform; }
.card:hover {
  border-color: rgba(240,168,187,0.45);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(240,168,187,0.18), 0 0 34px rgba(212,96,122,.14);
}
.card > img {
  transition: transform var(--duration-slow) var(--ease-premium);
  will-change: transform;
}
.card-overlay { transition: background var(--duration-normal) ease; }
.card-fav { transition: opacity .2s, background .2s, transform var(--duration-fast) var(--ease-bounce-soft); }
@keyframes fav-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.card-fav.fav-pop { animation: fav-pop .35s var(--ease-bounce-soft); }
.card-btn { transition: all var(--duration-fast) var(--ease-premium); }
.card-btn-primary:hover { box-shadow: 0 6px 18px rgba(240,168,187,.45); }

/* ── Footer: gradient underline links ── */
.footer-links a { position: relative; }
.footer-links a::after {
  content: '';
  position: absolute; left: 2px; right: 100%; bottom: -1px;
  height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: right var(--duration-normal) var(--ease-premium);
}
.footer-links a:hover::after { right: 2px; }

/* ── Reduced motion: kill ambience + tilt extras (global rule below also applies) ── */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .reveal, .reveal-up, .reveal-scale, .reveal-blur { opacity: 1; transform: none; filter: none; }
  .sidebar, .topbar, .catalog-head { opacity: 1; transform: none; }
  .card-enter { opacity: 1; animation: none; }
}

/* ── Mobile: lighter ambience, no drift ── */
@media (max-width: 768px) {
  body::before, body::after { animation: none; filter: blur(40px); }
}