/* ─── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: #0e0e0e; color: #fff; font-family: 'Manrope', sans-serif; overflow-x: hidden; }
img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }

/* ─── btn-press (active scale feedback) ────────────────────── */
.btn-press { cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; }
.btn-press:active { transform: scale(0.96); }

/* ─── card-lift (hover elevation) ──────────────────────────── */
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }

/* ─── Reveal animation ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─── color-flash on hero SVG mask ─────────────────────────── */
@keyframes color-flash {
  0%,100% { background-color: #cafd00; }
  50%      { background-color: #beee00; }
}

/* ─── Spin for identity gallery ring ───────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin 10s linear infinite; }

/* ─── Pulse (red dot in motion preview) ────────────────────── */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }

/* ─── Ticker strip ──────────────────────────────────────────── */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-track { animation: ticker 28s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }

/* ─── Mobile menu drawer ────────────────────────────────────── */
#mobile-menu { display: none; }
#mobile-menu.open { display: flex; }

/* ─── Bento flex rows ───────────────────────────────────────── */
.bento-row { display: flex; gap: 2rem; }
.bento-row .bento-card {
  flex-grow: 1; flex-shrink: 1; flex-basis: 0;
  min-width: 0; overflow: hidden; border-radius: 0.75rem;
  transition: flex-grow 0.5s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}

/* ─── System filter sidebar ─────────────────────────────────── */
#system-sidebar { transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
#system-sidebar .sidebar-label-text {
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
  white-space: nowrap;
}
#system-sidebar:hover .sidebar-label-text { opacity: 1; }

/* ─── WP image alignment helpers ───────────────────────────── */
.fill-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ─── Selection colour ──────────────────────────────────────── */
::selection { background-color: #cafd00; color: #4a5e00; }

/* ─── Squircle — opt-in via .squircle class ─────────────────── */
@supports (corner-shape: squircle) {
  .squircle { corner-shape: squircle; }
}