/* ============================================================
   UTILITIES · reveal animations, CTA button, consent bar
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0s);
}
.panel.is-active .reveal,
.view.is-active .reveal{
  opacity:1;
  transform:none;
}

/* ---------- CTA BLOCK ---------- */
.cta{
  margin-top:clamp(3.5rem,9vh,6rem);
  padding:clamp(2.5rem,6vw,4.25rem) clamp(1.5rem,4vw,3rem);
  border:1px solid rgba(255,43,214,.3);
  background:radial-gradient(circle at 50% 0%,rgba(255,43,214,.08),transparent 70%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.85rem;
  box-shadow:0 0 40px rgba(255,43,214,.15), inset 0 0 40px rgba(255,43,214,.04);
}

.cta__text{
  font-size:clamp(1.1rem,2vw,1.55rem);
  font-weight:300;
  color:#fff;
  letter-spacing:.02em;
  max-width:26ch;
  line-height:1.35;
  text-shadow:0 0 22px rgba(255,43,214,.35);
}

.cta__btn{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:1.05rem 2.4rem;
  border:1px solid var(--neon);
  background:rgba(255,43,214,.06);
  color:#fff;
  font-family:inherit;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  animation:neonFlickerText 6.5s infinite;
  text-shadow:0 0 2px #fff, 0 0 8px rgba(255,255,255,.85), 0 0 16px var(--neon);
  box-shadow:0 0 18px rgba(255,43,214,.55), inset 0 0 14px rgba(255,43,214,.12);
  transition:box-shadow .4s var(--ease), background .4s var(--ease), transform .3s var(--ease);
}
.cta__btn:hover{
  background:rgba(255,43,214,.12);
  box-shadow:0 0 30px rgba(255,43,214,.85), inset 0 0 22px rgba(255,43,214,.22);
  transform:translateY(-2px);
}
.cta__btn::after{
  content:'→';
  font-size:1rem;
  letter-spacing:0;
  text-shadow:0 0 12px var(--neon);
}

/* ---------- COOKIE CONSENT BAR ---------- */
.consent-bar{
  position:fixed;
  left:50%;
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:120;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  padding:.9rem 1.2rem;
  background:rgba(8,8,12,.96);
  border:1px solid rgba(255,43,214,.4);
  box-shadow:0 0 24px rgba(255,43,214,.35);
  color:#eaf6ff;
  font-size:.75rem;
  letter-spacing:.06em;
  max-width:min(620px, 92vw);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.consent-bar p{
  flex:1;
  line-height:1.5;
  color:rgba(244,244,246,.85);
  margin:0;
}
.consent-bar__actions{
  display:flex;
  gap:.5rem;
  flex-shrink:0;
}
.consent-bar button{
  padding:.5rem .9rem;
  border:1px solid var(--neon);
  background:rgba(255,43,214,.1);
  color:#fff;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s var(--ease);
}
.consent-bar button:hover{
  background:rgba(255,43,214,.25);
}
.consent-bar button[data-consent="declined"]{
  border-color:rgba(255,255,255,.25);
  background:transparent;
  color:var(--muted);
}

/* ---------- Mobile: disable reveal animations ---------- */
@media (max-width: 900px){
  .reveal,
  .reveal.reveal,
  .panel.is-active .reveal,
  .view.is-active .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
    pointer-events:auto !important;
  }
}

/* ============================================================
   POINTER EVENTS · content interactive, overlays transparent
   NOTE: We scope by the real content containers (.become, .about,
   .join, .events, .scroller) rather than a blanket `.view *` —
   that blanket rule was overriding the .page-bg overlay and
   contributed to layout stacking issues.
   ============================================================ */

.scroller,
.become, .become *,
.about,  .about *,
.join,   .join *,
.events, .events *{
  pointer-events:auto;
}

/* Fixed decorative overlays must NEVER intercept clicks */
.grain,
.cursor-glow,
.page-bg,
.page-bg__photo,
.page-bg__veil,
.page-bg__spot,
.hero__glow,
.about__hero-glow{
  pointer-events:none !important;
}

/* The scroller must always accept touch */
.scroller{
  pointer-events:auto !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch;
}

/* ============================================================
   BACKGROUND LAYER · ensure it sits BEHIND page content
   ============================================================ */

.view .scroller,
.view .scroller--snap,
.view .scroller--free{
  position:relative;
  z-index:1;
  background:transparent;
}

.become,
.about,
.join,
.events{
  background:transparent;
}