/* =========================================================
   OUR BUSINESS PARTNERS (home page)
   Three rows of hotel logos drift across a tilted wall.
   Behaviour lives in js/partners-wall.js.
   ========================================================= */

.partners {
  --pw-ink: #170a13;
  --pw-pink: #c73689;
  --pw-pink-soft: #f28cc3;
  --pw-pink-40: rgba(199, 54, 137, .4);
  --pw-pink-grad: linear-gradient(110deg, #c73689 0%, #e85aa8 50%, #c73689 100%);
  --pw-pearl: #f7f0f4;
  --pw-pearl-14: rgba(247, 240, 244, .14);
  --pw-pearl-60: rgba(247, 240, 244, .62);
  --pw-ease: cubic-bezier(.2, .7, .2, 1);
  --pw-radius: 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 6vw, 96px) 0;
  background: var(--pw-ink);
  color: var(--pw-pearl);
}

/* film grain + two soft lights behind the wall */
.partners__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.partners__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.partners__glow--a {
  width: min(720px, 70vw);
  aspect-ratio: 1 / 1;
  left: -12%;
  bottom: -10%;
  background: radial-gradient(circle, rgba(199, 54, 137, .42), transparent 68%);
}

.partners__glow--b {
  width: min(560px, 60vw);
  aspect-ratio: 1 / 1;
  right: -8%;
  top: 8%;
  background: radial-gradient(circle, rgba(242, 140, 195, .22), transparent 68%);
}

/* ---------- heading ---------- */
.partners__head {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px 60px;
  flex-wrap: wrap;
}

.partners__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--hm-body-font);
  font-size: clamp(11px, 1vw, 12.5px);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pw-pink-soft);
}

.partners__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .8;
  flex: 0 0 auto;
}

.partners .partners__title {
  margin: 16px 0 0;
  font-family: var(--hm-heading-font);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.05;
  color: var(--pw-pearl);
}

.partners .partners__title span {
  font-style: italic;
  background: var(--pw-pink-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.partners__side {
  max-width: 48ch;
}

.partners .partners__side p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--pw-pearl-60);
}

/* ---------- the wall ---------- */
.partners__wall {
  position: relative;
  z-index: 1;
  margin-top: clamp(30px, 4vw, 56px);
  perspective: 1500px;
  perspective-origin: 50% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.partners__plane {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  padding-block: clamp(20px, 3vw, 44px);
  transform: rotateX(var(--wall-tilt, 18deg)) scale(1.04);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.partners__row {
  position: relative;
  width: 100%;
  touch-action: pan-y;
}

.partners__row:nth-child(1) { opacity: .72; }
.partners__row:nth-child(2) { opacity: .88; }

/* without the script the rows simply scroll sideways */
.partners__row:not(.is-live) {
  overflow-x: auto;
  scrollbar-width: none;
}

.partners__row:not(.is-live)::-webkit-scrollbar { display: none; }

.partners__row.is-live { cursor: grab; }
.partners__row.is-dragging { cursor: grabbing; }

.partners__track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

/* ---------- a logo card ---------- */
.partners .partner {
  position: relative;
  flex: 0 0 auto;
  width: clamp(170px, 17vw, 250px);
  aspect-ratio: 16 / 9.6;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--pw-radius);
  background: linear-gradient(150deg, rgba(247, 240, 244, .075), rgba(247, 240, 244, .02));
  border: 1px solid var(--pw-pearl-14);
  box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(247, 240, 244, .08);
  -webkit-user-select: none;
  user-select: none;
  transition: transform .65s var(--pw-ease), border-color .5s, box-shadow .65s var(--pw-ease);
}

/* white plate the full-colour logo sits on when hovered */
.partner__plate {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, #fffdfe, var(--pw-pearl));
  opacity: 0;
  transform: scale(.6);
  border-radius: inherit;
  transition: opacity .45s, transform .7s var(--pw-ease);
}

.partners .partner img {
  position: relative;
  grid-area: 1 / 1;
  width: 82%;
  height: 82%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .45s, transform .7s var(--pw-ease);
}

.partners .partner img[src*="skycity"] { width: 128%; height: 128%; }
.partners .partner img[src*="fairfield"],
.partners .partner img[src*="goldfinch"],
.partners .partner img[src*="dan-resorts"] { width: 92%; height: 92%; }

.partner__full { opacity: 0; }

/* pink light that sweeps across on hover */
.partners .partner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(242, 140, 195, .38) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 1s var(--pw-ease);
  pointer-events: none;
}

@media (hover: hover) {
  .partners .partner {
    transition: transform .65s var(--pw-ease), border-color .5s, box-shadow .65s var(--pw-ease), opacity .5s;
  }

  .partners__plane:hover .partner:not(:hover) { opacity: .55; }

  .partners .partner:hover {
    transform: translateY(-10px) translateZ(40px) scale(1.06);
    border-color: var(--pw-pink);
    box-shadow: 0 40px 70px -34px rgba(199, 54, 137, .75);
    z-index: 3;
  }

  .partners .partner:hover .partner__plate { opacity: 1; transform: none; }
  .partners .partner:hover .partner__light { opacity: 0; }
  .partners .partner:hover .partner__full { opacity: 1; transform: scale(1.06); }
  .partners .partner:hover::after { transform: translateX(130%); }
}

/* soft light that follows the pointer across the wall */
.partners__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(242, 140, 195, .16), transparent 62%);
  mix-blend-mode: screen;
}

.partners__wall:hover .partners__spot { opacity: 1; }

/* ---------- arrows + caption ---------- */
.partners__nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  margin-top: clamp(18px, 2.4vw, 30px);
}

.partners .partners__btn {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--pw-pink-40);
  background: rgba(23, 10, 19, .5);
  color: var(--pw-pink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .4s, color .4s, border-color .4s, transform .5s var(--pw-ease);
}

.partners .partners__btn:hover {
  background: var(--pw-pink-grad);
  border-color: transparent;
  color: #fff;
  transform: scale(1.08);
}

.partners .partners__btn:focus { outline: none; }

.partners .partners__btn:focus-visible {
  outline: 2px solid var(--pw-pink-soft);
  outline-offset: 3px;
}

.partners__now {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: min(340px, 52vw);
  text-align: center;
}

.partners__now-k {
  font-family: var(--hm-body-font);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pw-pink-soft);
}

.partners__now-v {
  font-family: var(--hm-heading-font);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--pw-pearl);
  transition: opacity .25s, transform .35s var(--pw-ease);
}

.partners__now-v.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

@media (min-width: 900px) {
  .partners__track { gap: 20px; }
}

@media (max-width: 900px) {
  .partners__plane { transform: rotateX(var(--wall-tilt, 12deg)) scale(1.02); }
}

@media (max-width: 640px) {
  .partners .partner { width: 44vw; }

  .partners__wall {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .partners .partners__btn { width: 46px; height: 46px; }
  .partners__now-k { letter-spacing: .16em; }
}