/* ===== "Go deeper": the dive from 70% Water into 30% Acid (js/dive.js) ===== */

/* the fork under the contact form: day (the form above) or night (this button) */
.fork{max-width:900px;margin-top:2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap;
  padding:clamp(20px,3vw,40px);border-radius:18px;border:1px solid transparent;
  background:linear-gradient(#08080c,#08080c) padding-box,linear-gradient(100deg,rgba(171,90,251,.7),rgba(66,149,253,.5),rgba(46,224,191,.7)) border-box}
.fork__text .h3{margin:0}
.fork__text .lead{margin:.6rem 0 0!important;color:var(--muted)}
.fork__btn{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;border-color:rgba(171,90,251,.6);box-shadow:0 0 0 0 rgba(171,90,251,.45);animation:forkPulse 2.8s ease-out infinite}
.fork__btn svg{width:18px;height:auto;flex:none}
.fork__btn span{display:inline-block;transition:transform .3s}
.fork__btn:hover span{transform:translateY(3px)}
@keyframes forkPulse{0%{box-shadow:0 0 0 0 rgba(171,90,251,.45)}70%,100%{box-shadow:0 0 0 14px rgba(171,90,251,0)}}
@media (max-width:600px){.fork__btn{width:100%;justify-content:center}}
/* landing on the fork from the "after dark" button: the card lights up once */
.fork{scroll-margin-top:120px}
.fork.is-lit{animation:forkLit 1.6s ease-out}
@keyframes forkLit{0%{box-shadow:0 0 0 0 rgba(171,90,251,.55)}100%{box-shadow:0 0 0 28px rgba(171,90,251,0)}}

/* the anchor in the live-shows section that jumps down to the fork */
.after-dark{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-top:4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.after-dark p{margin:0;color:var(--muted)}
.after-dark__btn{border-color:rgba(171,90,251,.6)}
.after-dark__btn span{display:inline-block;transition:transform .3s}
.after-dark__btn:hover span{transform:translateY(3px)}
@media (prefers-reduced-motion:reduce){.fork__btn{animation:none}}

.dive{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;overflow:hidden}
.dive[hidden]{display:none}
.dive__sea{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% -10%,#3aa7d8 0%,#14628f 35%,#0a2f4a 70%,#050507 100%)}
.dive__dark{position:absolute;inset:0;background:#050507;opacity:0}
.dive__rays{position:absolute;inset:-20% -10% 30%;background:
  linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 34%,transparent 38%),
  linear-gradient(80deg,transparent 52%,rgba(255,255,255,.10) 55%,transparent 59%),
  linear-gradient(95deg,transparent 64%,rgba(255,255,255,.08) 66%,transparent 70%);
  filter:blur(6px);mix-blend-mode:screen}
.dive__bubbles{position:absolute;inset:0;width:100%;height:100%}
.dive__glass{position:absolute;left:50%;top:50%;width:min(150px,30vw);height:auto;overflow:visible;transform-origin:center}
.dive__glass .w-wave{animation:diveDrift 6s linear infinite}
.dive__glass .a-wave{animation:diveDrift 2.4s linear infinite}
@keyframes diveDrift{to{transform:translateX(-80px)}}
.dive__name{position:absolute;left:0;right:0;top:calc(50% + min(150px,30vw) * .85);text-align:center;color:var(--fg);opacity:0;letter-spacing:.4em}
html.diving{overflow:hidden}
@media (prefers-reduced-motion:reduce){.dive__glass .w-wave,.dive__glass .a-wave{animation:none}}