.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
}

body {
  font-family: 'Work Sans', sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Ticker ─────────────────────────────────── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  animation: marquee 15s linear infinite;
  white-space: nowrap;
}

.animate-marquee span {
  padding-right: 3rem;
}

/* ── Safe area for mobile bottom nav ────────── */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

/* ── Mobile bottom nav spacing ──────────────── */
@media (max-width: 767px) {
  main { padding-bottom: 4rem; }
  footer { padding-bottom: 4rem; }
}

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3c6d1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* ── Line clamp ─────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Fade-in-up animation ───────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-up {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Article card hover lift ────────────────── */
.article-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 0.75rem;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

/* ── Page fade-in ───────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
main { animation: fadeIn 0.3s ease-out; }

/* ── Search results highlight ───────────────── */
.search-highlight {
  background: rgba(182, 23, 30, 0.12);
  padding: 1px 3px;
  border-radius: 2px;
}

/* ── Social card hover glow ─────────────────── */
.social-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.social-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* ── Tetris Loader ───────────────────────────── */
#global-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#global-loader { background-color: #ffffff; }

:root.dark #global-loader { background-color: #020617; }

#global-loader.hidden-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tetris-grid {
  width: 120px;
  height: 120px;
  position: relative;
}

.tetromino-box {
  width: 30px;
  height: 30px;
  position: absolute;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
  border-radius: 2px;
  background: var(--tetris-bg, #1a1c1c); /* Dark in light mode */
  transition: top 0.3s ease, left 0.3s ease;
}

:root.dark .tetromino-box {
  background: var(--tetris-bg, #ffffff); /* White in dark mode */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);
}

.tetromino-box.box1 { animation: shift-box1 4s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.tetromino-box.box2 { animation: shift-box2 4s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.tetromino-box.box3 { animation: shift-box3 4s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.tetromino-box.box4 { animation: shift-box4 4s infinite cubic-bezier(0.4, 0, 0.2, 1); }

/* Proper shapes morphing without crazy rotation */
/* 0% O-block, 25% I-block, 50% L-block, 75% T-block, 100% O-block */

@keyframes shift-box1 {
   0%, 20%  { top: 30px; left: 30px; }
   25%, 45% { top: 0px;  left: 45px; }
   50%, 70% { top: 15px; left: 30px; }
   75%, 95% { top: 30px; left: 45px; }
  100%      { top: 30px; left: 30px; }
}
@keyframes shift-box2 {
   0%, 20%  { top: 30px; left: 60px; } 
   25%, 45% { top: 30px; left: 45px; } 
   50%, 70% { top: 45px; left: 30px; } 
   75%, 95% { top: 60px; left: 15px; } 
  100%      { top: 30px; left: 60px; }
}
@keyframes shift-box3 {
   0%, 20%  { top: 60px; left: 30px; } 
   25%, 45% { top: 60px; left: 45px; } 
   50%, 70% { top: 75px; left: 30px; } 
   75%, 95% { top: 60px; left: 45px; } 
  100%      { top: 60px; left: 30px; }
}
@keyframes shift-box4 {
   0%, 20%  { top: 60px; left: 60px; } 
   25%, 45% { top: 90px; left: 45px; } 
   50%, 70% { top: 75px; left: 60px; } 
   75%, 95% { top: 60px; left: 75px; } 
  100%      { top: 60px; left: 60px; }
}