/* V39: four-second brand loading animation inspired by the supplied reference. */
html.trend-loading,
html.trend-loading body { overflow: hidden; }

.trend-loader {
  --loader-orange: #f5a623;
  --loader-orange-dark: #d8870d;
  --loader-green: #487049;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 24px;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity .42s ease, visibility .42s ease;
}

.trend-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.trend-loader__mark {
  position: relative;
  width: 116px;
  height: 116px;
}

.trend-loader__module,
.trend-loader__ring {
  position: absolute;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
}

.trend-loader__module {
  border: 5px solid var(--loader-green);
  border-radius: 10px;
  opacity: 0;
  transform: scale(.35) rotate(-16deg);
  animation: trend-module-cycle 3.4s cubic-bezier(.65,0,.35,1) infinite;
}

.trend-loader__module i {
  position: absolute;
  inset: 8px;
  border-radius: 5px;
  background: var(--loader-orange);
  box-shadow: 0 4px 10px #f5a6232b;
}

.trend-loader__module--one { left: 10px; top: 10px; animation-delay: 0s; }
.trend-loader__module--two { right: 10px; top: 10px; animation-delay: .12s; }
.trend-loader__module--three { left: 10px; bottom: 10px; animation-delay: .24s; }

.trend-loader__ring {
  right: 10px;
  bottom: 10px;
  border: 5px solid var(--loader-orange);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.25) translate(-54px,-54px);
  animation: trend-ring-cycle 3.4s cubic-bezier(.65,0,.35,1) infinite;
}

.trend-loader p {
  margin: 0;
  color: #172033;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(8px);
  animation: trend-loader-copy 3.4s ease infinite;
}

.trend-loader p small {
  display: block;
  margin-top: 4px;
  color: var(--loader-green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

@keyframes trend-module-cycle {
  0%,8% { opacity: 0; transform: scale(.35) rotate(-16deg); }
  18%,58% { opacity: 1; transform: scale(1) rotate(0); }
  70% { opacity: 1; transform: scale(.82) translate(10px,10px); }
  82%,100% { opacity: 0; transform: scale(.25) translate(30px,30px) rotate(18deg); }
}

@keyframes trend-ring-cycle {
  0%,12% { opacity: 0; transform: scale(.25) translate(-54px,-54px); }
  25%,58% { opacity: 1; transform: scale(1) translate(0,0); }
  68% { opacity: 1; transform: scale(1.12) translate(-52px,-52px); }
  82%,100% { opacity: 0; transform: scale(.38) translate(-70px,-70px); }
}

@keyframes trend-loader-copy {
  0%,20%,88%,100% { opacity: 0; transform: translateY(8px); }
  30%,75% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .trend-loader__mark { transform: scale(.9); }
  .trend-loader { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .trend-loader__module,
  .trend-loader__ring,
  .trend-loader p { animation-duration: 3.4s; }
}