/* =========================================================
   NAGHAM PERFUME — Brands: light, compact marquee band
   A slim, quiet strip between hero and products: soft cream
   band, two counter-scrolling rails of small white plaques.
   No drama — just movement and gold detail.
   ========================================================= */

.brands-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.4rem, 6vw, 5.5rem);
  background: #fff;
}

/* ---------- Ornamental divider (hero → brands) ---------- */
.band-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  inline-size: min(620px, 82%);
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
}
.band-divider__line {
  flex: 1;
  block-size: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 85%, transparent));
}
.band-divider__line:last-child { transform: scaleX(-1); }
.band-divider__gem {
  inline-size: 10px;
  aspect-ratio: 1;
  rotate: 45deg;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--gold) 55%, transparent);
}

/* ---------- Compact heading ---------- */
.band-head {
  position: relative;
  z-index: 2;
  inline-size: min(760px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  text-align: center;
}

.band-eyebrow {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  color: var(--gold-deep);
  font-family: var(--font-en);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.band-head h2 {
  margin-block-start: .55rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}
.band-head h2 em { font-style: normal; color: var(--gold); }

/* ---------- Rails ---------- */
.band-rails {
  position: relative;
  z-index: 2;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.4rem);
  direction: ltr;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.band-rail { overflow: hidden; }

.band-track {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  inline-size: max-content;
  padding-block: 5px;
  animation: band-scroll var(--speed, 48s) linear infinite;
}
.band-rail--reverse .band-track { animation-direction: reverse; }
.band-rail:hover .band-track { animation-play-state: paused; }

@keyframes band-scroll {
  to { transform: translateX(calc(-50% - clamp(.5rem, .8vw, .7rem))); }
}

/* ---------- Plaques (small + light) ---------- */
.band-plaque {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: clamp(194px, 16.5vw, 256px);
  block-size: clamp(98px, 8.6vw, 128px);
  padding: .95rem 1.3rem;
  border-radius: 17px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  box-shadow: 0 2px 6px rgba(23, 19, 16, .04), 0 8px 22px rgba(73, 55, 20, .07);
  transition: translate .35s var(--ease-out-expo), box-shadow .35s ease, border-color .3s ease;
}

.band-plaque::after {
  content: "";
  position: absolute;
  inset-inline: 28%;
  inset-block-end: 9px;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform .35s var(--ease-out-expo);
}

.band-plaque img {
  inline-size: min(100%, 194px);
  block-size: 80px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.25);
  opacity: 1;
  transition: filter .3s ease, opacity .3s ease, transform .35s var(--ease-out-expo);
}

.band-plaque:hover {
  translate: 0 -4px;
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  box-shadow: 0 4px 10px rgba(23, 19, 16, .05), 0 16px 36px rgba(73, 55, 20, .14);
}
.band-plaque:hover img { filter: contrast(1.1); transform: scale(1.06); }
.band-plaque:hover::after { transform: scaleX(1); }
.band-plaque:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .brands-band { padding-block: 2.8rem 3.2rem; }
  .band-eyebrow { font-size: .6rem; letter-spacing: .22em; }
  .band-track { --speed: 32s; }
  .band-plaque { inline-size: 168px; block-size: 90px; border-radius: 13px; }
  .band-plaque img { block-size: 60px; }
}

/* ---------- Reduced motion: static scrollable shelf ---------- */
@media (prefers-reduced-motion: reduce) {
  .band-track { animation: none; }
  .band-rail { overflow-x: auto; scrollbar-width: none; }
  .band-rail::-webkit-scrollbar { display: none; }
  .band-rails { mask-image: none; -webkit-mask-image: none; }
  .band-track > [data-dup] { display: none; }
}