/* Shared by the pre-React and first-video splash: identical geometry prevents jumps. */
.trends-loading {
  position: absolute; inset: 0; overflow: hidden; background: #000;
  color: #eee; text-align: center; font-family: Arial, system-ui, sans-serif;
}
.trends-loading__tag {
  position: absolute; top: 19.5%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 64px); box-sizing: border-box;
  padding: 8px 32px; border: 1px solid #bbb; border-radius: 999px;
  font-size: clamp(13px, 3.65vw, 16px); line-height: 1.2;
  box-shadow: 0 0 15px #ffffff22, inset 0 0 10px #ffffff09;
}
.trends-loading__tag strong { display: block; font-weight: 600; }
.trends-loading__tag span { display: block; color: #aaa; }
.trends-loading__brand {
  position: absolute; top: calc(50% - 2px); left: 50%; transform: translate(-50%,-50%);
}
.trends-loading__logo {
  display: block; width: 64px; height: 64px; margin: 0 auto;
  background: linear-gradient(135deg,#888 2%,#eee 29%,#b9b9b9 49%,#fafafa 64%,#929292 92%);
  mask: var(--loading-logo) center / contain no-repeat;
  -webkit-mask: var(--loading-logo) center / contain no-repeat;
}
.trends-loading__name { margin-top: 7px; font-size: 28px; font-weight: 500; line-height: 1.15; }
.trends-loading__copy {
  position: absolute; top: 63.3%; left: 0; width: 100%; padding: 0 12px; box-sizing: border-box;
  font-size: clamp(19px, 5.6vw, 27px); line-height: 1.22; font-weight: 600;
}
.trends-loading__copy strong { display:block; font-size: 1.18em; margin-bottom: 5px; font-weight: 600; }
.trends-loading__line {
  position: absolute; left: 23%; width: 54%; height: 2px;
  background: linear-gradient(90deg,transparent,#8888 22%,#ddd9 50%,#8888 78%,transparent);
}
.trends-loading__line--top { top: 59.2%; }
.trends-loading__line--bottom { top: 74.2%; }
.trends-loading__line::after {
  content: ""; position: absolute; top:-1px; width: 30%; height: 3px;
  background: linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow: 0 0 9px #ffffff88; animation: trends-loading-glint 2.8s ease-in-out infinite;
}
.trends-loading__line--bottom::after { animation-delay: -1.4s; }
@keyframes trends-loading-glint {
  0%,100% { transform:translateX(0); opacity:.15; }
  50% { transform:translateX(230%); opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .trends-loading__line::after { animation:none; left:35%; }
}