/* Nestle888 launch: highlighted "new" row that jumps to the Nestle888 link,
   and the banner under it. A new file rather than an edit to style.css,
   because /assets/css/* is cached (see _headers). */

.n8-new .w7 {
  border-width: 2px;
  border-color: #F6B800;
  background: linear-gradient(90deg, #FFF6D6 0%, #FFFFFF 100%);
  box-shadow: 0 0 12px rgba(246, 184, 0, 0.55);
}
.n8-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 4px 7px 3px;   /* uneven on purpose: centres the capitals, measured */
  border-radius: 999px;
  background: #E00000;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
  white-space: nowrap;
}
#nestle888 { scroll-margin-top: 20px; }

.n8-banner-row { display: flex; justify-content: center; }
.n8-banner {
  display: block;
  width: 85%;
  max-width: 280px;
  border: 2px solid #0013FF;
  border-radius: 15px;
  overflow: hidden;
}
.n8-banner img { display: block; width: 100%; height: auto; }

/* "GRAND OPENING" tag on the NEW row, which also gets a glow pulse, a gold light sweep and a
   bouncing arrow. Opacity/transform only (no reflow, no layout shift); stops under
   prefers-reduced-motion. Change the tag back to "NEW" once the launch period is over. */
.n8-new .w7 {
  position: relative;
  overflow: hidden;
}
.n8-new .w7::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 16px rgba(246, 184, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: n8-glow 1.6s ease-in-out infinite alternate;
}
.n8-new .w7::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  z-index: 4;
  width: 25%;
  background: linear-gradient(100deg, rgba(255, 196, 0, 0) 0%, rgba(255, 196, 0, 0.5) 50%, rgba(255, 196, 0, 0) 100%);
  transform: translateX(0) skewX(-20deg);
  pointer-events: none;
  animation: n8-sweep 4.5s ease-in-out 1s infinite;
}
.n8-strip__arrow {
  display: inline-block;
  animation: n8-bounce 1.1s ease-in-out infinite;
}
@keyframes n8-glow { to { opacity: 1; } }
@keyframes n8-sweep { 0% { transform: translateX(0) skewX(-20deg); } 35%, 100% { transform: translateX(620%) skewX(-20deg); } }
@keyframes n8-bounce { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .n8-new .w7::before, .n8-new .w7::after, .n8-strip__arrow { animation: none; }
  .n8-new .w7::after { display: none; }
}