/*
 * Motion layer shared by the homepage, Venues and FAQ (hiibiza.com reference):
 * 1. A moving background: soft colour spots drift slowly behind the page.
 * 2. Section words: a wide gap between sections; while you scroll through it
 *    the huge word fades in, held in the middle of the screen, and the next
 *    section slides up over it.
 * 3. Cards rise gently into place as they enter the screen.
 * Everything is driven by js/hi-motion.js, which adds html.hi-motion. Without
 * the script, or with reduced motion, the page stays static and readable.
 */

/* ---------- 1. Moving background ---------- */
/* The spots sit between the page colour (on html) and the content, so the
   body itself must not paint a background over them. */
html.hi-has-spots body {
  background: transparent;
}
.hi-spots {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hi-spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: var(--o);
  transform: translate(-50%, -50%);
  animation: hi-spot-float var(--d) ease-in-out var(--delay) infinite alternate;
  will-change: transform;
}
@keyframes hi-spot-float {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) translate(22vw, -16vh) scale(1.12);
  }
  50% {
    transform: translate(-50%, -50%) translate(-18vw, 24vh) scale(0.92);
  }
  75% {
    transform: translate(-50%, -50%) translate(-26vw, -12vh) scale(1.16);
  }
  100% {
    transform: translate(-50%, -50%) translate(16vw, 20vh) scale(1);
  }
}

/* Sections paint above the floating words; the words above the background. */
.hi-motion main > section,
.hi-motion main > .hi-faq,
.hi-motion main > section > :not(.hi-reveal) {
  position: relative;
  z-index: 2;
}

/* ---------- 2. Section words between sections ---------- */
.hi-motion .hi-reveal {
  position: relative;
  z-index: 1;
  height: 2px;
  margin: 34vh auto;
}
.hi-motion .hi-reveal__word.hi-reveal__word {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 16px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}
.hi-motion .hi-reveal.is-past .hi-reveal__word,
.hi-motion .hi-reveal:not(.is-near) .hi-reveal__word {
  visibility: hidden;
}

/* ---------- 3. Cards rise into place ---------- */
.hi-motion [data-rise] {
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(0.98);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rise-delay, 0ms);
}
.hi-motion [data-rise].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hi-spot {
    animation: none;
  }
}

/* ---------- FAQ motion ---------- */
.faq-teaser details,
.hi-faq__list details {
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}
.faq-teaser details:hover,
.hi-faq__list details:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -24px rgba(20, 20, 40, 0.45);
}
.faq-teaser summary::after,
.hi-faq__list summary::after {
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .faq-teaser details,
  .hi-faq__list details,
  .faq-teaser summary::after,
  .hi-faq__list summary::after {
    transition: none;
  }
  .faq-teaser details:hover,
  .hi-faq__list details:hover {
    transform: none;
  }
}

/* ---------- Section words: sticky inside their own gap (round 8) ----------
 * Fixed words could sit over other sections while scrolling, which looked
 * broken. Now each word only lives inside its gap. */
.hi-motion .hi-reveal {
  position: relative;
  z-index: 1;
  height: 78vh;
  margin: 0 auto;
}
.hi-motion .hi-reveal__word.hi-reveal__word {
  position: sticky;
  inset: auto;
  top: calc(50vh - 0.5em);
  display: block;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}
.hi-motion .hi-reveal.is-past .hi-reveal__word,
.hi-motion .hi-reveal:not(.is-near) .hi-reveal__word {
  visibility: visible;
}

/* Calmer colour (owner, 2026-10-17: "too fruity"). */
.hi-spots {
  opacity: 0.7;
  filter: saturate(0.38);
}