/* ===================================================
   VAULT — 3D Golf Ball Scroll Animation
   =================================================== */

/* ── Wrapper: the element JS positions ───────────── */
#vault-ball-wrap {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;              /* hero: above page content  */
  filter:
    drop-shadow(0 4px 18px rgba(0,0,0,0.70))
    drop-shadow(0 1px 4px  rgba(0,0,0,0.45));
  /* Opacity transition covers both the intro fade-in and bg-phase changes */
  transition: opacity 0.75s ease, filter 0.35s ease;
  will-change: left, top, width, height;
}

/* Hidden until title animation is done — JS adds .ball-ready */
#vault-ball-wrap:not(.ball-ready) {
  opacity: 0 !important;
}

/* Background phase: behind main content (z-index 2) */
#vault-ball-wrap.ball-ready.bg-phase {
  z-index: 1;
  opacity: 0.88;
  filter:
    drop-shadow(0 10px 40px rgba(0,0,0,0.85))
    drop-shadow(0 2px  8px  rgba(0,0,0,0.55));
}

/* Video has started — ball permanently invisible */
#vault-ball-wrap.hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── Three.js canvas: fills wrapper ─────────────── */
#vault-ball-canvas {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  width: 100% !important;
  height: 100% !important;
}

/* ── Vault promo video (inside .bg-layer) ─────────── */
.bg-vault-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 1.3s ease;
  z-index: 2;                    /* above .bg-video in bg-layer */
  filter: grayscale(100%);       /* black & white to match site aesthetic */
}
.bg-vault-video.active { opacity: 1; }

/* Fade metal layers when vault video activates */
.bg-layer.vault-active .bg-metal,
.bg-layer.vault-active .bg-stripes,
.bg-layer.vault-active .bg-metal-overlay {
  opacity: 0;
  transition: opacity 1.3s ease;
}

/* Vignette stays on top of vault video (readable text) */
.bg-vignette { z-index: 4; }

/* Original BG video fade */
.bg-video { transition: opacity 1.3s ease; }
.bg-video.fading { opacity: 0; }

/* ── Period suppression in CLUB. ─────────────────── */
.club-row .st-char:last-child {
  opacity: 0 !important;
  transition: none !important;
}
.club-row.ball-failed .st-char:last-child {
  opacity: 1 !important;
  transition: opacity 0.4s ease !important;
}

/* ── Accessibility ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .club-row .st-char:last-child { opacity: 1 !important; }
  #vault-ball-wrap   { display: none !important; }
  .bg-vault-video    { display: none !important; }
}