/* Skiper #18 — Mouse logo reveal effect for the about-us tribe section.
   The reveal area now wraps the team section, the spacer, and the
   #JoinTheTribe section, so spawned icons can scatter across all three
   instead of being clipped to one. A handful of scatter icons also bleed
   just past the bottom edge so they read into the footer-cta band. */

.mouse-reveal-area {
  position: relative;
  width: 100%;
  isolation: isolate;
  /* visible so persistent scatter icons can spill ~80px below the wrapper
     into the footer-cta divider area, matching the cross-section feel the
     design wants. The combined wrapper still defines the spawn region. */
  overflow: visible;
}

/* Inner Webflow sections must release their own overflow:hidden so the
   icons we absolutely-position into the wrapper render across the
   spacer/section boundary instead of being clipped. We deliberately do
   NOT set z-index here — pinning these to a value creates a new stacking
   context that would trap the inner heading + handle z-indexes, leaving
   them stranded below the icon layer. */
.mouse-reveal-area .mouse-reveal-spacer,
.mouse-reveal-area .mouse-reveal-section {
  overflow: visible;
  position: relative;
}

/* The #JoinTheTribe heading itself must sit above the icon layer (icons
   are z-index 1). `.st-font` ships as `position: static`, which kills any
   z-index, so we have to flip it to relative. */
.mouse-reveal-area .mouse-reveal-section > h2.st-font,
.mouse-reveal-area .mouse-reveal-section > .st-font {
  position: relative;
  z-index: 3;
}

/* Centered handle text inside the JoinTheTribe section. The min-height
   keeps the section feeling deliberate without pushing the heading out of
   view (the previous 60vh was hiding the @handle below the fold). */
.mouse-reveal-area .mouse-reveal-handle-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 36vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mouse-reveal-area .mouse-reveal-handle-wrap .insta-handle-link {
  position: relative;
  text-decoration: none;
  display: inline-block;
}

.mouse-reveal-area .mouse-reveal-handle-wrap .instagram-handle {
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.mouse-reveal-icon {
  position: absolute;
  width: clamp(72px, 9vw, 132px);
  height: clamp(72px, 9vw, 132px);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) rotate(-12deg);
  will-change: transform, opacity;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms ease-out;
}

.mouse-reveal-icon.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.mouse-reveal-icon.is-persistent {
  opacity: 0;
}

.mouse-reveal-icon.is-persistent.is-active {
  opacity: 0.92;
}

.mouse-reveal-icon.is-leaving {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(18deg);
  transition:
    transform 700ms cubic-bezier(0.55, 0.06, 0.68, 0.19),
    opacity 700ms ease-in;
}

@media (max-width: 991px) {
  .mouse-reveal-area .mouse-reveal-handle-wrap {
    min-height: 32vh;
  }
}

@media (max-width: 767px) {
  .mouse-reveal-area .mouse-reveal-handle-wrap {
    min-height: 28vh;
  }
  .mouse-reveal-icon {
    width: clamp(54px, 14vw, 96px);
    height: clamp(54px, 14vw, 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mouse-reveal-icon,
  .mouse-reveal-icon.is-active,
  .mouse-reveal-icon.is-leaving {
    transition: none;
  }
}