/* =========================================================
   SPOTS — Floating phones (no background) + 3D overflow
   - no “box” behind phones
   - phones can overflow the container
   - shine aligned (no offset)
   - mobile: keep fan, tap focus brings one closer to center
   ========================================================= */

/* section base */
.spots {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.spots__fx {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
}

/* FX orbs */
.spots__orb {
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 999px;
  filter: blur(46px);
  opacity: .55;
  transform: translate3d(0, 0, 0);
}

.spots__orb--a {
  top: -260px;
  left: -280px;
  background:
    radial-gradient(circle at 28% 30%, rgba(86, 170, 255, .55), transparent 62%),
    radial-gradient(circle at 70% 60%, rgba(255, 140, 190, .32), transparent 58%);
}

.spots__orb--b {
  bottom: -280px;
  right: -300px;
  background:
    radial-gradient(circle at 35% 35%, rgba(120, 255, 221, .40), transparent 62%),
    radial-gradient(circle at 60% 70%, rgba(160, 150, 255, .32), transparent 58%);
}

.spots__noise {
  position: absolute;
  inset: 0;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("assets/noise.png");
  background-size: 180px 180px;
}

.spots__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%,
      rgba(255, 255, 255, 0),
      rgba(245, 249, 255, .85) 64%,
      rgba(245, 249, 255, 1) 78%);
}

/* content */
.spots__wrap {
  position: relative;
  z-index: 1;
}

.spots__head {
  max-width: 86ch;
}

.spots__kicker {
  display: inline-flex;
  align-items: center;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(11, 18, 32, .62);
}

.spots__title {
  margin-top: 10px;
  letter-spacing: -.02em;
}

.spots__lead {
  margin-top: 10px;
}

.spots__quick {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spots__pill {
  font-weight: 950;
  font-size: .85rem;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, .10);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(11, 18, 32, .74);
}

/* layout */
.spotsShow {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* left */
.spotsShow__left {
  position: relative;
  z-index: 0;
  /* text stays readable if overlap */
}

/* cards */
.spotsCard {
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(11, 18, 32, .10);
  background: rgba(255, 255, 255, .64);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 22px 60px rgba(11, 18, 32, .10),
    inset 0 1px 0 rgba(255, 255, 255, .62);
  overflow: hidden;
}

.spotsCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 260px at 20% 0%, rgba(255, 255, 255, .65), transparent 58%);
  opacity: .6;
}

.spotsCard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 0;
}

.spotsTag {
  display: inline-flex;
  align-items: center;
  font-weight: 1000;
  font-size: .85rem;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(11, 18, 32, .10);
  color: rgba(11, 18, 32, .78);
}

.spotsTag--soft {
  background: rgba(255, 255, 255, .62);
  color: rgba(11, 18, 32, .68);
  font-weight: 950;
}

.spotsHint {
  font-weight: 900;
  font-size: .86rem;
  color: rgba(11, 18, 32, .56);
}

.spotsCard--feature {
  padding-bottom: 16px;
}

.spotsCard__title {
  padding: 10px 16px 0;
  margin: 0;
  font-size: clamp(1.05rem, 1.2vw + .9rem, 1.35rem);
  font-weight: 1050;
  letter-spacing: -.02em;
  color: rgba(11, 18, 32, .92);
}

.spotsCard__desc {
  padding: 10px 16px 0;
  margin: 0;
  color: rgba(11, 18, 32, .70);
  font-weight: 850;
  line-height: 1.6;
}

.spotsMetrics {
  margin-top: 14px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.spotsMetric {
  border-radius: 18px;
  border: 1px solid rgba(11, 18, 32, .10);
  background: rgba(255, 255, 255, .58);
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.spotsMetric__k {
  font-weight: 1000;
  display: block;
}

.spotsMetric__v {
  font-weight: 1050;
  display: block;
  margin-top: 4px;
}

.spotsMetric__t {
  font-weight: 900;
  color: rgba(11, 18, 32, .56);
  font-size: .86rem;
  display: block;
  margin-top: 2px;
}

.spotsRow {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.spotsCard--mini {
  padding-bottom: 14px;
}

.spotsCard__miniTitle {
  margin: 10px 16px 0;
  font-weight: 1050;
  letter-spacing: -.02em;
  font-size: 1.02rem;
}

.spotsCard__miniDesc {
  margin: 8px 16px 0;
  color: rgba(11, 18, 32, .70);
  font-weight: 850;
  line-height: 1.6;
}

/* RIGHT — floating stage (NO BOX) */
.spotsShow__right {
  position: relative;
  z-index: 1;
  min-height: 560px;
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* 3D */
  perspective: 1100px;
  perspective-origin: 50% 45%;
}

/* inner transform (controlled by JS vars) */
.stageInner {
  position: absolute;
  inset: 0;
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;

  transform:
    translate3d(calc(var(--sx, 0px) + var(--px, 0px)),
      calc(var(--sy, 0px) + var(--py, 0px)),
      0) rotate(calc(var(--sr, 0deg) + var(--pr, 0deg)));
}

/* stack wrapper */
.phoneStack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  transform-style: preserve-3d;
}

/* remove background elements behind phones */
.phoneStack__shadow,
.phoneStack__dock {
  display: none !important;
}

/* phone */
.phone {
  --r: 18px;
  width: clamp(230px, 26vw, 360px);
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--r) + 12px);
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: auto;
  will-change: transform;
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 30px 70px rgba(11, 18, 32, .18));
}

.phone__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .34));
  border: 1px solid rgba(11, 18, 32, .12);
  box-shadow:
    0 34px 90px rgba(11, 18, 32, .18),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.phone__screen {
  position: absolute;
  inset: 10px;
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* shine aligned (no translate offset) */
.phone__shine {
  position: absolute;
  inset: 10px;
  border-radius: var(--r);
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 62%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  opacity: 0;
  transition:
    opacity .55s cubic-bezier(.2, .8, .2, 1),
    background-position .75s cubic-bezier(.2, .8, .2, 1);
}

@media (hover:hover) {
  .phone:hover .phone__shine {
    opacity: .65;
    background-position: 100% 0%;
  }
}

/* desktop fan */
.phone--a {
  left: -6%;
  top: -10%;
  z-index: 2;
  transform: translateZ(30px) rotate(-10deg) scale(.96);
}

.phone--b {
  left: 22%;
  top: -18%;
  z-index: 3;
  transform: translateZ(70px) rotate(3deg) scale(1.02);
}

.phone--c {
  left: 52%;
  top: -2%;
  z-index: 1;
  opacity: .98;
  transform: translateZ(40px) rotate(12deg) scale(.94);
}

/* focus (desktop hover OR mobile tap) */
.phone.is-focus {
  z-index: 9 !important;
  transform: translate3d(0, -18px, 90px) rotate(0deg) scale(1.06) !important;
}

.phone.is-focus .phone__frame {
  border-color: rgba(74, 160, 255, .26);
  box-shadow:
    0 50px 140px rgba(11, 18, 32, .22),
    inset 0 1px 0 rgba(255, 255, 255, .62);
}

/* when a phone is focused, keep others visible (subtle push back) */
.phoneStack.is-focused .phone:not(.is-focus) {
  opacity: .92;
  filter: drop-shadow(0 22px 55px rgba(11, 18, 32, .14));
}

/* reveal */
[data-reveal] {
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform .7s cubic-bezier(.2, .8, .2, 1),
    opacity .7s cubic-bezier(.2, .8, .2, 1);
}

.is-inview {
  transform: translateY(0);
  opacity: 1;
}

/* carousel hidden (we keep your HTML but not used) */
.spotsCarousel {
  display: none !important;
}

/* responsive */
@media (max-width: 1060px) {
  .spotsShow {
    grid-template-columns: 1fr;
  }

  .spotsShow__right {
    min-height: 620px;
  }

  .phone--a {
    left: -2%;
    top: -8%;
  }

  .phone--b {
    left: 26%;
    top: -14%;
  }

  .phone--c {
    left: 56%;
    top: 0%;
  }
}

/* MOBILE — back to “before” (fan with left/top), but better focus */
@media (max-width: 740px) {
  .spotsMetrics {
    grid-template-columns: 1fr;
  }

  .spotsRow {
    grid-template-columns: 1fr;
  }

  .spotsShow__right {
    min-height: 560px;
    overflow: visible;
  }

  .stageInner {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .phone {
    width: min(250px, 74vw);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s cubic-bezier(.2, .8, .2, 1);
  }

  /* fan positions (tweakable) — slightly more centered than your screenshot */
  .phone--a {
    left: -12%;
    top: 18%;
    transform: translateZ(18px) rotate(-10deg) scale(.92);
    z-index: 2;
  }

  .phone--b {
    left: 16%;
    top: 6%;
    transform: translateZ(48px) rotate(2deg) scale(1);
    z-index: 3;
  }

  .phone--c {
    left: 46%;
    top: 20%;
    transform: translateZ(24px) rotate(12deg) scale(.90);
    z-index: 1;
  }

  /* mobile focus: bring closer to center WITHOUT teleporting to 50/50 */
  .phone--a.is-focus {
    transform: translate3d(22vw, -10px, 90px) rotate(0deg) scale(1.05) !important;
  }

  .phone--b.is-focus {
    transform: translate3d(0vw, -14px, 90px) rotate(0deg) scale(1.05) !important;
  }

  .phone--c.is-focus {
    transform: translate3d(-22vw, -10px, 90px) rotate(0deg) scale(1.05) !important;
  }

  /* keep others visible on focus */
  .phoneStack.is-focused .phone:not(.is-focus) {
    opacity: .95;
  }

  /* no shine on mobile */
  .phone__shine {
    display: none !important;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {

  [data-reveal],
  .phone,
  .phone__shine,
  .stageInner {
    transition: none !important;
  }

  .stageInner {
    transform: none !important;
  }
}

/* anti horizontal scroll */
html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {

  html,
  body {
    overflow-x: hidden;
  }
}