/* CONTACT PAGE DEPTH: parallax layers behind the page (stars, a glowing planet with a ring,
   floating glass panes, a light beam) that move at different speeds with scroll and cursor,
   plus a 3D tilt and moving glass shine on the form. Script: assets/js/contact-depth.js */
.talk-page .contact::before{display:none}
.cd-depth{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.talk-page .contact>.container{position:relative;z-index:1}
.cd-layer{position:absolute;inset:-12%;will-change:transform}

/* stars: two depths */
.cd-stars-far{background-image:radial-gradient(1px 1px at 12% 18%,#cfe6ff 50%,transparent 51%),radial-gradient(1px 1px at 32% 72%,#9fcaff 50%,transparent 51%),radial-gradient(1px 1px at 58% 22%,#ffffff 50%,transparent 51%),radial-gradient(1px 1px at 76% 64%,#bcdcff 50%,transparent 51%),radial-gradient(1px 1px at 88% 12%,#ffffff 50%,transparent 51%),radial-gradient(1px 1px at 44% 46%,#8fc2ff 50%,transparent 51%);background-size:420px 420px;opacity:.55}
.cd-stars-near{background-image:radial-gradient(1.6px 1.6px at 20% 30%,#ffffff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 70% 80%,#a9d4ff 50%,transparent 52%),radial-gradient(2px 2px at 85% 40%,#e6f3ff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 40% 90%,#cbe4ff 50%,transparent 52%);background-size:620px 620px;opacity:.7;animation:cdTwinkle 6s ease-in-out infinite}
@keyframes cdTwinkle{50%{opacity:.4}}

/* the big glowing planet with a tilted ring, low on the right */
.cd-planet{inset:auto;right:-20vw;top:62vh;width:52vw;max-width:820px;aspect-ratio:1}
.cd-planet i{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#2a6fd0 0%,#0d2c5c 38%,#051226 70%);
  box-shadow:inset -40px -60px 120px #01060f,inset 20px 30px 80px #3f8fff40,0 0 120px #1f7fff40,0 0 260px #1561e025}
.cd-planet i::after{content:'';position:absolute;inset:-1px;border-radius:50%;border-top:2px solid #8fd0ff;filter:blur(1px);opacity:.75;transform:rotate(-28deg)}
.cd-planet b{position:absolute;left:-30%;right:-30%;top:41%;height:18%;border-radius:50%;border:2px solid #5fb6ff88;box-shadow:0 0 30px #2f8fff55,inset 0 0 30px #2f8fff33;transform:rotate(-14deg)}

/* the orbit ring on the left (replaces the old flat ring) */
.cd-ring{inset:auto;left:-380px;top:160px;width:660px;height:660px;border-radius:50%;border:1px solid #64baff55;box-shadow:0 0 0 26px #2f8fff07,0 0 0 74px #2f8fff05,0 0 120px #177aff2a}
.cd-ring::after{content:'';position:absolute;right:6%;top:24%;width:9px;height:9px;border-radius:50%;background:#bfe4ff;box-shadow:0 0 14px 4px #4fb0ff}

/* a soft diagonal light beam */
.cd-beam{inset:auto;left:30%;top:-20%;width:24vw;height:140%;background:linear-gradient(180deg,#5fb3ff2a,transparent 70%);transform:rotate(24deg);filter:blur(30px);opacity:.7}

/* floating glass panes */
.cd-pane{inset:auto;width:var(--w);height:var(--h);left:var(--x);top:var(--y);border-radius:16px;
  background:linear-gradient(140deg,#8ccaff26,#0b1d3a40 60%);border:1px solid #9fd2ff40;box-shadow:inset 0 1px 0 #ffffff30,0 20px 40px #0006,0 0 30px #2f8fff22;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cd-pane::before{content:'';position:absolute;left:14%;right:14%;top:22%;height:7%;border-radius:4px;background:#8cc8ff40}
.cd-pane::after{content:'';position:absolute;left:14%;right:38%;top:40%;height:5%;border-radius:4px;background:#8cc8ff26}

/* ---------- the form card: 3D tilt and a glass shine that follows the cursor ---------- */
.talk-page .contact-card>div:last-child.cd-tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;transform-style:preserve-3d;isolation:isolate;overflow:hidden}
.cd-tilt::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),#7cc4ff2e,transparent 60%)}
.cd-tilt.cd-on::after{opacity:1}
.cd-tilt.cd-on{box-shadow:inset 0 0 0 6px #8acbff08,inset 0 1px #bfe5ff55,0 40px 90px #0007,0 0 70px #2088ed30}
.cd-tilt::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:conic-gradient(from var(--ga,0deg),transparent 0 70%,#8fd3ff 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cdEdge 7s linear infinite;opacity:.8}
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes cdEdge{to{--ga:360deg}}
.talk-page #submitBtn{position:relative;overflow:hidden}
.talk-page #submitBtn::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);animation:cdShine 3.6s ease-in-out infinite}
@keyframes cdShine{0%,60%{left:-60%}100%{left:130%}}

/* contact chips lift towards you */
.talk-page .contact-links a,.talk-page .loc{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,box-shadow .35s}
.talk-page .contact-links a:hover{transform:translateY(-3px) translateZ(0);box-shadow:0 14px 30px #0006,0 0 24px #2f8fff30}

/* headline arrives with depth */
.talk-page h1{animation:cdRise 1.1s cubic-bezier(.2,.8,.2,1) both}
.talk-page .lede{animation:cdRise 1.1s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes cdRise{from{opacity:0;transform:translateY(26px) scale(.98);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

@media(max-width:950px){.cd-planet{width:90vw;right:-35vw;bottom:-30vw}.cd-pane{display:none}.cd-ring{left:-460px}}
@media(prefers-reduced-motion:reduce){.cd-stars-near,.cd-tilt::before,.talk-page #submitBtn::after,.talk-page h1,.talk-page .lede{animation:none}}