/* ==========================================================================
   MOTION LAYER
   Scroll reveal, section-title cut reveal, button micro-interactions, the FAQ
   sliding indicator, the first-visit curtain, and the two-row mobile roster.
   Loaded after styles.css / sections.css so it can override them.
   Everything here is gated on html.js-motion, which an inline head script
   adds, so content is never hidden when JavaScript is unavailable.
   ========================================================================== */

/* ---------- 0. scroll reveal ---------- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 1. section-title cut reveal ---------- */
.js-motion [data-reveal-text] .rv-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0;
  margin: -0.14em 0;
}

.js-motion [data-reveal-text] .rv-word__in {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--rv-delay, 0ms);
}

.js-motion [data-reveal-text].is-revealed .rv-word__in {
  transform: none;
}

/* ---------- 2. shimmer on Register Now ---------- */
@property --shimmer-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pill-btn.glowing-pill {
  position: relative;
  isolation: isolate;
}

.pill-btn.glowing-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--shimmer-angle),
    transparent 0deg 296deg,
    rgba(255, 255, 255, 0.95) 326deg,
    transparent 352deg 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: shimmerSpin 3.4s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes shimmerSpin {
  to {
    --shimmer-angle: 360deg;
  }
}

/* the hero's Register Now uses the same perimeter light */
.cta-secondary {
  position: relative;
  isolation: isolate;
}

.cta-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--shimmer-angle),
    transparent 0deg 296deg,
    rgba(255, 255, 255, 0.95) 326deg,
    transparent 352deg 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: shimmerSpin 3.4s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* ---------- 3. magnetic + hover fill on frosted pills ---------- */
/* the transform reads the custom properties motion.js sets on fine pointers;
   touch devices never set them, so the pill stays still */
.pill-btn.frosted-pill {
  background-image: linear-gradient(
    90deg,
    rgba(185, 242, 39, 0.28),
    rgba(185, 242, 39, 0.06)
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition:
    background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pill-btn.frosted-pill:hover {
  background-image: linear-gradient(
    90deg,
    rgba(185, 242, 39, 0.28),
    rgba(185, 242, 39, 0.06)
  );
  background-size: 100% 100%;
  transform: translate3d(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 1px), 0);
}

/* ---------- 4. FAQ sliding indicator ---------- */
.faq-wrap-box,
.faq-split .faq-wrap-box {
  position: relative;
  padding-left: 18px;
}

.faq-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 999px;
  background: rgba(243, 241, 231, 0.08);
  pointer-events: none;
}

.faq-rail__pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent-lime, #b9f227);
  box-shadow: 0 0 12px rgba(185, 242, 39, 0.55);
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.faq-rail__pill[data-hidden="true"] {
  opacity: 0;
}

/* ---------- 5. first-visit curtain ---------- */
.motion-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #080c0a;
  color: #f3f1e7;
  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}

.motion-curtain[data-done="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.motion-curtain__inner {
  text-align: center;
}

.motion-curtain__count {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--accent-lime, #b9f227);
  font-variant-numeric: tabular-nums;
}

.motion-curtain__label {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 241, 231, 0.6);
}

.motion-curtain__bar {
  width: 160px;
  height: 2px;
  margin: 18px auto 0;
  background: rgba(243, 241, 231, 0.12);
  overflow: hidden;
}

.motion-curtain__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-lime, #b9f227);
}

/* ---------- 6. two-row mobile roster ---------- */
@keyframes rosterScrollX {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* the two-row structure is built by motion.js and only shown on phones */
.roster__rows {
  display: none;
}

@media (max-width: 640px) {
  .roster__stage[data-mobile-rows="true"] {
    display: block;
    height: auto;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 5%,
      #000 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 5%,
      #000 95%,
      transparent 100%
    );
  }

  .roster__stage[data-mobile-rows="true"] > .roster__col {
    display: none;
  }

  .roster__stage[data-mobile-rows="true"] .roster__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .roster__row {
    overflow: hidden;
  }

  .roster__row .roster__track {
    display: flex;
    flex-direction: row;
    animation: rosterScrollX var(--roster-dur, 44s) linear infinite;
  }

  .roster__row--b .roster__track {
    --roster-dur: 48s;
    animation-direction: reverse;
  }

  .roster__row .roster__group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0 10px 0 0;
  }

  .roster__row .roster__group[aria-hidden="true"] {
    display: flex;
  }

  .roster__row .roster-card {
    width: 148px;
    height: 196px;
    flex: 0 0 auto;
  }

  .roster__stage[data-mobile-rows="true"] .roster__pause {
    display: inline-flex;
  }

  /* the Pause button lives in the intro column, outside the stage */
  body:has(.roster__stage[data-mobile-rows="true"]) .roster__pause {
    display: inline-flex;
  }

  .roster__stage[data-mobile-rows="true"] .roster__row:hover .roster__track,
  .roster__stage[data-mobile-rows="true"] .roster__row[data-paused="true"] .roster__track {
    animation-play-state: paused;
  }
}

/* ---------- 7. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion [data-reveal-text] .rv-word__in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pill-btn.glowing-pill::after,
  .cta-secondary::after {
    animation: none;
    opacity: 0;
  }

  .motion-curtain {
    display: none;
  }

  .faq-rail__pill {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .roster__stage[data-mobile-rows="true"] .roster__row {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .roster__stage[data-mobile-rows="true"] .roster__row::-webkit-scrollbar {
    display: none;
  }

  .roster__stage[data-mobile-rows="true"] .roster__group[aria-hidden="true"] {
    display: none;
  }
}