/* ============================================================
   PAGE BACKGROUND · model photo + drifting neon spotlights
   Used on pages 2–5 (Become, About, Join, Events).
   Each photo is set via JS from src/images/<page>.jpg
   ============================================================ */

.page-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  isolation:isolate;
  background:#050507;
}

/* ---------- LAYER 1 · PHOTO (bottom) ---------- */
.page-bg__photo{
  position:absolute;
  inset:0;
  z-index:1;
  background-repeat:no-repeat;

  /* ── Position of the photo ──────────────────────────────
       center center  → perfectly centered
       center 25%     → focus on the model's face (default)
       center 30%     → slightly lower
       center left    → photo on left side
       center right   → photo on right side
     ─────────────────────────────────────────────────────── */
  background-position:center 25%;

  background-size:cover;
  opacity:.55;
  mix-blend-mode:normal;

  -webkit-mask-image:
    radial-gradient(140% 120% at 50% 50%, #000 0%, #000 62%, transparent 100%);
  mask-image:
    radial-gradient(140% 120% at 50% 50%, #000 0%, #000 62%, transparent 100%);

  filter:contrast(1.05) saturate(1.05) brightness(1);
}

/* ---------- LAYER 2 · VEIL (middle) ---------- */
.page-bg__veil{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(120% 100% at 28% 45%,
      rgba(5,5,7,.72) 0%,
      rgba(5,5,7,.50) 45%,
      rgba(5,5,7,.28) 100%),
    linear-gradient(180deg,
      rgba(5,5,7,.30) 0%,
      rgba(5,5,7,.50) 55%,
      rgba(5,5,7,.75) 100%);
}

/* ---------- LAYER 3 · NEON SPOTS (top) ---------- */
.page-bg__spot{
  position:absolute;
  z-index:3;
  width:36rem;
  height:36rem;
  margin:-18rem 0 0 -18rem;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(48px);
  opacity:1;
}
.page-bg__spot--1{
  background:radial-gradient(circle,
    rgba(255,43,214,.85) 0%,
    rgba(255,43,214,.35) 35%,
    transparent 68%);
  animation:spotA 17s ease-in-out infinite alternate;
}
.page-bg__spot--2{
  background:radial-gradient(circle,
    rgba(0,229,255,.80) 0%,
    rgba(0,229,255,.30) 35%,
    transparent 68%);
  animation:spotB 21s ease-in-out infinite alternate;
}
.page-bg__spot--3{
  background:radial-gradient(circle,
    rgba(255,43,214,.65) 0%,
    rgba(255,43,214,.25) 40%,
    transparent 70%);
  animation:spotC 25s ease-in-out infinite alternate;
}

@keyframes spotA{
  0%  {transform:translate(10%, 12%) scale(1)}
  25% {transform:translate(70%, 8%) scale(1.15)}
  50% {transform:translate(80%, 70%) scale(1.05)}
  75% {transform:translate(30%, 82%) scale(1.2)}
  100%{transform:translate(6%, 34%) scale(1)}
}
@keyframes spotB{
  0%  {transform:translate(78%, 22%) scale(1.1)}
  30% {transform:translate(22%, 16%) scale(.95)}
  55% {transform:translate(12%, 74%) scale(1.2)}
  80% {transform:translate(64%, 82%) scale(1.05)}
  100%{transform:translate(72%, 30%) scale(1.15)}
}
@keyframes spotC{
  0%  {transform:translate(48%, 88%) scale(.9)}
  35% {transform:translate(88%, 46%) scale(1.1)}
  65% {transform:translate(44%, 12%) scale(1.15)}
  100%{transform:translate(18%, 60%) scale(.95)}
}

/* ============================================================
   FIX · ensure the background layer is visible behind content
   on every inner page (Become · About · Join · Events)
   ============================================================ */

/* The scroller must sit ABOVE the background */
.view .scroller,
.view .scroller--snap,
.view .scroller--free{
  position:relative;
  z-index:1;
  background:transparent;
}

/* Content wrappers must NOT paint an opaque background */
.become,
.about,
.join,
.events{
  background:transparent;
}

/* Redundant safety — pin the background layer */
.view .page-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}