/* Reviews scatter: overlapping quote cards with gentle drift.
   Drift lives on the outer card; hover scale lives on .review-card-face
   so unhover never restarts the animation mid-cycle. */

.reviews-section {
  padding: 4rem 0 5rem;
  position: relative;
  z-index: 1;
}

.reviews-section .section-sticky-head {
  /* Above resting cards; hovered cards jump above this (see .review-card:hover) */
  z-index: 25;
}

/* 1px sentinel above the sticky head — used to detect when the header pins */
.reviews-sticky-sentinel {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}

.reviews-stage {
  /* No isolation / z-index here — resting cards stay under the sticky head,
     but a hovered card's z-index can rise above it. */
  position: relative;
  width: 100%;
  min-height: 78vh;
  margin: 0.5rem auto 0;
}

.review-card {
  --x: 0px;
  --y: 0px;
  --ox: var(--x);
  --oy: var(--y);
  --rot: 0deg;
  --z: 1;
  --drift-x: 12px;
  --drift-y: 10px;
  --dox: var(--drift-x);
  --doy: var(--drift-y);
  --drift-rot: 1.4deg;
  --dur: 14s;
  --delay: 0s;
  --enter-delay: 0s;
  --rest-scale: 0.92;

  position: absolute;
  left: 50%;
  top: 50%;
  width: min(300px, 72vw);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-white);
  z-index: var(--z);
  cursor: default;
  outline: none;
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  /* Park at home position until reveal starts the drift animation */
  transform:
    translate(-50%, -50%)
    translate(var(--ox), var(--oy))
    rotate(var(--rot));
  /* No drift until the section reveals (sticky header pinned) */
  animation: none;
  will-change: transform, opacity;
}

.review-card--featured {
  --rest-scale: 1.06;
  width: min(390px, 86vw);
}

/* Staggered pop-in order once .is-revealed is set */
.review-card:nth-child(1) { --enter-delay: 0s; }
.review-card:nth-child(2) { --enter-delay: 0.07s; }
.review-card:nth-child(3) { --enter-delay: 0.14s; }
.review-card:nth-child(4) { --enter-delay: 0.21s; }
.review-card:nth-child(5) { --enter-delay: 0.28s; }
.review-card:nth-child(6) { --enter-delay: 0.35s; }
.review-card:nth-child(7) { --enter-delay: 0.42s; }
.review-card:nth-child(8) { --enter-delay: 0.49s; }
.review-card:nth-child(9) { --enter-delay: 0.56s; }
.review-card:nth-child(10) { --enter-delay: 0.63s; }
.review-card:nth-child(11) { --enter-delay: 0.70s; }
.review-card:nth-child(12) { --enter-delay: 0.77s; }
.review-card:nth-child(13) { --enter-delay: 0.84s; }
.review-card:nth-child(14) { --enter-delay: 0.91s; }
.review-card:nth-child(15) { --enter-delay: 0.98s; }
.review-card:nth-child(16) { --enter-delay: 1.05s; }
.review-card:nth-child(17) { --enter-delay: 1.12s; }

.review-card-face {
  padding: 1.15rem 1.2rem 1.05rem;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(28, 28, 48, 0.97) 0%, rgba(16, 16, 32, 0.98) 100%);
  border: 1px solid rgba(241, 198, 113, 0.22);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transform: scale(0.28);
  transform-origin: center center;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.reviews-section.is-revealed .review-card {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease var(--enter-delay);
  animation: review-drift-move var(--dur) ease-in-out infinite alternate;
  animation-delay: calc(var(--enter-delay) + 0.5s + var(--delay));
}

.reviews-section.is-revealed .review-card-face {
  transform: scale(var(--rest-scale));
  transition:
    transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) var(--enter-delay),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

/* After the staggered entrance finishes, hover/leave should be immediate */
.reviews-section.is-revealed.is-settled .review-card-face {
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.review-card--featured .review-card-face {
  padding: 1.35rem 1.4rem 1.2rem;
  border-color: rgba(241, 198, 113, 0.45);
  background: linear-gradient(165deg, rgba(36, 32, 22, 0.98) 0%, rgba(20, 18, 28, 0.98) 100%);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(241, 198, 113, 0.12);
}

.review-card:hover,
.review-card:focus-visible {
  z-index: 40;
  animation-play-state: paused;
}

.review-card:hover .review-card-face,
.review-card:focus-visible .review-card-face {
  border-color: rgba(241, 198, 113, 0.55);
  box-shadow:
    0 28px 55px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(241, 198, 113, 0.14);
  /* Enlarge and ease toward upright without touching the outer drift transform */
  transform: scale(1.16) rotate(calc(var(--rot) * -0.75));
}

.review-card--featured:hover .review-card-face,
.review-card--featured:focus-visible .review-card-face {
  transform: scale(1.18) rotate(calc(var(--rot) * -0.8));
}

.review-stars {
  display: flex;
  gap: 0.18rem;
  margin: 0 0 0.65rem;
  color: var(--primary-accent);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

.review-card blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.review-card blockquote p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-white-80);
}

.review-card--featured blockquote p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-white);
}

.review-card footer {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  line-height: 1.35;
}

.review-card footer strong {
  display: block;
  color: #f7dfae;
  font-weight: 700;
  font-size: 0.82rem;
}

.review-card footer span {
  color: var(--text-white-60);
  font-size: 0.72rem;
}

@keyframes review-drift-move {
  0% {
    transform:
      translate(-50%, -50%)
      translate(var(--ox), var(--oy))
      rotate(var(--rot));
  }
  100% {
    transform:
      translate(-50%, -50%)
      translate(calc(var(--ox) + var(--dox)), calc(var(--oy) + var(--doy)))
      rotate(calc(var(--rot) + var(--drift-rot)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-card {
    opacity: 1;
    pointer-events: auto;
    animation: none !important;
    transform:
      translate(-50%, -50%)
      translate(var(--ox), var(--oy))
      rotate(var(--rot));
    transition: none;
  }

  .review-card-face {
    transform: scale(var(--rest-scale));
    transition: none;
  }

  .reviews-section.is-revealed .review-card,
  .reviews-section.is-revealed .review-card-face {
    transition: none;
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .reviews-stage {
    min-height: 68vh;
    overflow: hidden;
  }

  .review-card {
    --ox: calc(var(--x) * 0.42);
    --oy: calc(var(--y) * 0.48);
    --dox: calc(var(--drift-x) * 0.45);
    --doy: calc(var(--drift-y) * 0.45);
    width: min(240px, 58vw);
  }

  .review-card--featured {
    width: min(300px, 82vw);
  }
}

@media (max-width: 700px) {
  .reviews-section {
    padding: 3rem 0 3.5rem;
  }

  .reviews-section .container-85 {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Clip cards to the stage only — never on the section, or sticky headers break */
  .reviews-stage {
    min-height: 70vh;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .review-card {
    --ox: calc(var(--x) * 0.22);
    --oy: calc(var(--y) * 0.26);
    --dox: calc(var(--drift-x) * 0.3);
    --doy: calc(var(--drift-y) * 0.3);
    width: min(168px, 42vw);
  }

  .review-card--featured {
    width: min(260px, 78vw);
    --ox: 0px;
    --oy: 0px;
  }

  .review-card:not(.review-card--featured) .review-card-face {
    padding: 0.75rem 0.8rem 0.7rem;
  }

  .review-card:not(.review-card--featured) blockquote p {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .review-card:not(.review-card--featured) footer {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
  }

  .review-card.review-card--edge {
    display: none;
  }
}