/* ============================================================
   "Under development" page — shared by Contact + Music.
   Accent theming via CSS custom properties:
     default = Contact (gold rings / vermilion action)
     body.theme-music = Music (magenta throughout)
   ============================================================ */

.soon{
  --soon-accent: var(--gold);          /* ring border + badge text */
  --soon-action: var(--vermilion);     /* pulse + primary CTA */
  --soon-ring-a: .3;
  --soon-ring-b: .15;
  --soon-glow-from: rgba(176,141,63,.14);
  --soon-glow-to: rgba(176,141,63,0);

  position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px var(--pad) 80px;
  background:radial-gradient(120% 90% at 50% 40%, #FAF7F0 0%, var(--vellum) 48%, var(--vellum-deep) 100%);
}
body.theme-music .soon{
  --soon-accent: var(--magenta);
  --soon-action: var(--magenta);
  --soon-ring-a: .22;
  --soon-ring-b: .12;
  --soon-glow-from: rgba(255,61,129,.12);
  --soon-glow-to: rgba(255,61,129,0);
}

/* breathing rings */
.soon .ring{
  position:absolute; top:46%; left:50%; border-radius:50%;
  border:1px solid var(--soon-accent); transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  animation:sring var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate;
}
.soon .ring.a{ width:min(58vw,420px); aspect-ratio:1; opacity:var(--soon-ring-a); }
.soon .ring.b{ width:min(78vw,580px); aspect-ratio:1; opacity:var(--soon-ring-b); animation-delay:.2s; }
@keyframes sring{ from{ transform:translate(-50%,-50%) scale(.86); opacity:.05; } to{ transform:translate(-50%,-50%) scale(1.04); } }
.soon::before{
  content:''; position:absolute; top:46%; left:50%; transform:translate(-50%,-50%);
  width:min(70vw,640px); aspect-ratio:1; border-radius:50%; z-index:0;
  background:radial-gradient(circle, var(--soon-glow-from) 0%, var(--soon-glow-to) 62%);
  animation:sglow var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate;
}
@keyframes sglow{ from{ transform:translate(-50%,-50%) scale(.82); opacity:.5; } to{ transform:translate(-50%,-50%) scale(1.06); opacity:.95; } }

.soon .inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.soon .badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mo); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--soon-accent); margin-bottom:30px;
}
.soon .badge .pulse{
  width:8px; height:8px; border-radius:50%; background:var(--soon-action);
  animation:pulse var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate;
}
@keyframes pulse{ from{ transform:scale(.5); opacity:.4; } to{ transform:scale(1.4); opacity:.95; } }
.soon h1{
  font-family:var(--eg); font-style:italic; font-weight:500;
  font-size:clamp(40px,8vw,96px); line-height:1.04; color:var(--ink); letter-spacing:.004em;
}
.soon .my-mark{ font-family:var(--pd); font-size:clamp(22px,4vw,34px); color:var(--gold); margin-top:18px; opacity:.85; }
.soon p{
  font-family:var(--in); font-size:clamp(15px,1.6vw,18px); line-height:1.75;
  max-width:46ch; margin-top:26px; opacity:.82; text-wrap:pretty;
}
.soon p .em{ font-family:var(--eg); font-style:italic; color:var(--vermilion); }
.soon .cta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:40px;
}
.soon .cta a{
  font-family:var(--mo); font-size:12px; letter-spacing:.04em;
  padding:12px 22px; border-radius:999px; border:1px solid var(--hair);
  transition:border-color .25s, color .25s, background .25s;
}
.soon .cta a.primary{ border-color:var(--soon-action); color:var(--soon-action); }
.soon .cta a.primary:hover{ background:var(--soon-action); color:#fff; }
.soon .cta a.ghost:hover{ border-color:var(--ink); }
.soon .foot-note{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--mo); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.4;
}