/* Engage (#engage): views + likes band, and the like-burst particles (.eg-fx, appended to <body> by engage.js). */
#engage { padding: 96px 0; }
#engage .eg-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 48px; align-items: center;
  padding: 44px 48px; border-radius: var(--rad-lg); border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--rra-tint) 90%, transparent) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--bridge-fill) 85%, transparent) 0%, transparent 60%),
    var(--bg);
}
#engage .eg-copy .eyebrow { margin-bottom: 14px; }
#engage .eg-copy h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 560; letter-spacing: -.028em; line-height: 1.1; }
#engage .eg-copy h2 span { color: var(--rra); }
#engage .eg-sub { margin: 16px 0 0; color: var(--ink-2); max-width: 520px; font-size: 16px; }
#engage .eg-panel { display: flex; align-items: center; justify-content: flex-end; gap: 28px; flex-wrap: wrap; }
#engage .eg-stats { display: flex; gap: 26px; }
#engage .eg-stat { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
#engage .eg-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--panel); color: var(--ink-2); }
#engage .eg-ic svg { width: 20px; height: 20px; }
#engage .eg-stat-likes .eg-ic { background: color-mix(in srgb, #E8486B 14%, transparent); color: #E04366; }
#engage .eg-n { font-size: 30px; font-weight: 560; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2ch; }
#engage .eg-n.bump { animation: eg-bump .4s var(--ease-out); }
#engage .eg-l { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
#engage .eg-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #E04366; }
#engage .eg-live i { width: 6px; height: 6px; border-radius: 50%; background: #E8486B; animation: eg-live 1.6s var(--ease) infinite; }
#engage .eg-action { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#engage .eg-like {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 32% 28%, #FF7A97 0%, #E8486B 46%, #C92E54 100%);
  box-shadow: 0 14px 30px -12px rgba(201, 46, 84, .7), inset 0 -4px 10px rgba(120, 10, 40, .25);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
#engage .eg-like:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 36px -12px rgba(201, 46, 84, .75), inset 0 -4px 10px rgba(120, 10, 40, .25); }
#engage .eg-like:active { transform: scale(.94); }
#engage .eg-like.tap { animation: eg-tap .38s var(--ease-out); }
#engage .eg-like-ic { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px rgba(120, 10, 40, .25)); }
#engage .eg-like-t { font-size: 12.5px; font-weight: 650; letter-spacing: .02em; }
#engage .eg-like-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid color-mix(in srgb, #E8486B 55%, transparent); opacity: 0; pointer-events: none; }
#engage .eg-like.tap .eg-like-ring { animation: eg-ringout .6s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  #engage .eg-like:not(.used) { animation: eg-beat 2.4s var(--ease) 1.2s infinite; }
}
#engage .eg-combo {
  position: absolute; top: -14px; right: -26px; z-index: 2; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB547, #FF6B6B); color: #fff; font-family: var(--mono); font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 18px -8px rgba(255, 107, 107, .8); opacity: 0; transform: scale(.6) rotate(-8deg); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease-out);
}
#engage .eg-combo.on { opacity: 1; transform: scale(1) rotate(-8deg); }
#engage .eg-combo.bump { animation: eg-combo .32s var(--ease-out); }
#engage .eg-you { margin: 0; min-height: 1.4em; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* particles live in a fixed overlay so they can rise above the band */
.eg-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.eg-p {
  position: absolute; left: var(--x); top: var(--y); width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  will-change: transform, opacity; animation: eg-rise var(--d) cubic-bezier(.2, .7, .3, 1) forwards;
}
.eg-p > span { display: block; width: 100%; height: 100%; animation: eg-sway calc(var(--d) * .5) ease-in-out infinite alternate; }
.eg-p svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .12)); }
.eg-p.burst { animation-name: eg-burst; }
.eg-p.big { animation-name: eg-big; }
.eg-p.remote { animation-duration: calc(var(--d) * 1.1); }
.eg-plus {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  font-family: var(--mono); font-weight: 700; font-size: 14px; color: #E04366; animation: eg-plus .9s var(--ease-out) forwards;
}
.eg-banner {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg, #FFB547, #FF6B6B 55%, #E8486B); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: .01em; box-shadow: 0 14px 30px -12px rgba(232, 72, 107, .8);
  animation: eg-banner 1.6s var(--ease-out) forwards;
}
@keyframes eg-rise {
  0% { transform: translate(0, 0) scale(.2) rotate(0deg); opacity: 0; }
  12% { transform: translate(calc(var(--dx) * .1), calc(var(--dy) * .08)) scale(var(--s)) rotate(calc(var(--r) * .2)); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(calc(var(--s) * .85)) rotate(var(--r)); opacity: 0; }
}
@keyframes eg-burst {
  0% { transform: translate(0, 0) scale(.2); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--r)); opacity: 0; }
}
@keyframes eg-big {
  0% { transform: translate(0, 0) scale(.2); opacity: 0; }
  25% { transform: translate(0, -40px) scale(var(--s)); opacity: 1; }
  70% { transform: translate(0, -120px) scale(calc(var(--s) * 1.08)); opacity: 1; }
  100% { transform: translate(0, -200px) scale(calc(var(--s) * 1.2)); opacity: 0; }
}
@keyframes eg-sway { from { transform: translateX(calc(var(--w) * -1)); } to { transform: translateX(var(--w)); } }
@keyframes eg-plus { 0% { opacity: 0; transform: translate(-50%, -30%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -180%); } }
@keyframes eg-banner { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -70%) scale(1.08); } 30% { transform: translate(-50%, -80%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(.96); } }
@keyframes eg-tap { 0% { transform: scale(1); } 35% { transform: scale(.86); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes eg-ringout { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes eg-beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.07); } 86% { transform: scale(.98); } 92% { transform: scale(1.04); } }
@keyframes eg-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes eg-combo { 0% { transform: scale(1) rotate(-8deg); } 45% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1) rotate(-8deg); } }
@keyframes eg-live { 0% { box-shadow: 0 0 0 0 rgba(232, 72, 107, .6); } 100% { box-shadow: 0 0 0 6px rgba(232, 72, 107, 0); } }
@media (prefers-reduced-motion: reduce) {
  .eg-p, .eg-p > span, .eg-plus, .eg-banner { animation-duration: 1.2s !important; }
  .eg-p { animation-name: eg-fade !important; }
  @keyframes eg-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
}

@media (max-width: 980px) {
  #engage .eg-card { grid-template-columns: 1fr; padding: 36px 32px; }
  #engage .eg-panel { justify-content: space-between; }
}
@media (max-width: 560px) {
  #engage { padding: 72px 0; }
  #engage .eg-card { padding: 28px 22px; gap: 24px; }
  #engage .eg-panel { gap: 20px; }
  #engage .eg-stats { gap: 18px; }
  #engage .eg-n { font-size: 26px; }
  #engage .eg-like { width: 80px; height: 80px; }
  #engage .eg-combo { right: -14px; }
}
@media print { .eg-fx, #engage .eg-panel { display: none !important; } }