/* Song promotion page — a 3D scroll scene layered over the shared style.css. */
.contact-page { min-height:100svh; }
.nav-home { font-size:12px; color:var(--dim); min-height:44px; display:flex; align-items:center; }
.contact-page.is-scene-hover { cursor:pointer; }

/* ---------- 3D backdrop ---------- */
#scene {
  position:fixed; inset:0; z-index:0;
  display:block; width:100%; height:100vh; height:100lvh;
  pointer-events:none;
}
html.no-webgl #scene { display:none; }
/* Darkens the screen edges so copy stays readable over the scene. */
.scene-shade {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(7,7,13,.75), rgba(7,7,13,0) 40%),
    linear-gradient(to bottom, rgba(7,7,13,.55), rgba(7,7,13,0) 18%);
}
html.no-webgl .scene-shade {
  background:
    radial-gradient(circle at 88% -5%, rgba(255,45,32,.22), transparent 42%),
    radial-gradient(circle at 0% 105%, rgba(192,57,43,.12), transparent 40%);
}

/* ---------- Chapters ---------- */
.contact-main { position:relative; z-index:1; }
.chapter {
  position:relative; width:100%; max-width:1164px;
  min-height:100vh; min-height:100svh;
  margin:0 auto; padding:120px 32px 104px;
}
/* Extra scroll room per chapter so the camera moves play out more slowly. */
@media (min-width:761px) {
  .contact-results, .contact-brief { min-height:130vh; }
}
html.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d, 0s); }
html.js .reveal.in { opacity:1; transform:none; }

.contact-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-content:center; }
.contact-intro h1 {
  margin:22px 0 24px;
  font-size:clamp(56px,8vw,124px); font-weight:600; line-height:.94; letter-spacing:-.068em;
  text-shadow:0 6px 60px rgba(7,7,13,.55);
}
.contact-intro h1 span { color:var(--red); }
.contact-copy { color:#a3a4b0; font-size:15px; line-height:1.8; max-width:430px; }
.contact-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; margin-top:32px; padding:14px 20px;
  background:var(--red); color:white; border:1px solid var(--red); border-radius:8px;
  font-size:14px; font-weight:600;
  box-shadow:0 14px 44px -14px rgba(255,45,32,.75);
  transition:background .2s, border-color .2s, box-shadow .3s;
}
.contact-cta > span { margin-left:20px; font-size:18px; }
.contact-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; margin-top:32px; padding:14px 20px; border-radius:8px;
  border:1px solid rgba(244,245,247,.18); background:rgba(12,12,19,.45);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:14px; font-weight:600; transition:border-color .2s, background .2s;
}
.contact-ghost > span { color:var(--red); font-size:17px; }
.contact-handle { margin-top:14px; color:var(--dim); font-family:var(--mono); font-size:10px; letter-spacing:.015em; }
.contact-handle span { margin:0 7px; color:var(--red); }

.contact-results { display:flex; flex-direction:column; justify-content:center; }
.promo-number {
  margin-top:18px;
  font-size:clamp(96px,14vw,220px); font-weight:600; line-height:.9; letter-spacing:-.08em; white-space:nowrap;
  text-shadow:0 6px 60px rgba(7,7,13,.55);
}
.promo-number span { color:var(--red); }
.promo-number .promo-number-value {
  display:inline-block; width:calc(3ch - .225em); text-align:right;
  color:var(--white); font-variant-numeric:tabular-nums;
}
.promo-number-caption { margin-top:14px; font-size:15px; color:#c7c8d1; }
.promo-result-note { margin-top:28px; padding-top:22px; max-width:420px; border-top:1px solid rgba(244,245,247,.12); }
.promo-result-note p { color:var(--dim); font-size:13px; line-height:1.8; }

.contact-brief { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.contact-brief h2 {
  margin-top:18px;
  font-size:clamp(52px,7.6vw,120px); font-weight:600; line-height:.94; letter-spacing:-.065em;
  text-shadow:0 6px 60px rgba(7,7,13,.55);
}
.contact-brief h2 span { color:var(--red); }
.contact-brief > p { margin-top:22px; max-width:440px; color:var(--dim); font-size:15px; line-height:1.8; }
.contact-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

.contact-footer {
  position:relative; z-index:1;
  width:100%; max-width:1164px; margin:0 auto; padding:0 32px 30px;
  display:flex; justify-content:space-between; gap:24px;
  font-family:var(--mono); font-size:10px; color:var(--dim);
}
.contact-footer > span { color:var(--red); }

@media (hover:hover) and (pointer:fine) {
  .contact-cta:hover { background:#df2318; border-color:#df2318; box-shadow:0 18px 56px -14px rgba(255,45,32,.95); }
  .contact-ghost:hover { border-color:rgba(255,45,32,.55); background:rgba(255,45,32,.08); }
  .nav-home:hover, .contact-footer a:hover { color:var(--white); }
}

@media (max-width:760px) {
  .chapter { padding:120px 24px 96px; }
  .contact-hero { grid-template-columns:1fr; align-content:end; }
  .contact-results { justify-content:flex-end; }
  .contact-brief { justify-content:flex-end; }
  .promo-number { font-size:clamp(88px,27vw,150px); }
  .contact-footer { padding:0 24px 26px; }
}
@media (max-width:480px) {
  .site-nav { gap:14px; }
  .chapter { padding:110px 20px 92px; }
  .contact-copy { font-size:14px; }
  .contact-handle { font-size:9px; }
  .contact-cta, .contact-ghost { width:100%; }
  .contact-cta > span { margin-left:auto; }
  .contact-actions { flex-direction:column; align-items:stretch; width:100%; }
  .desktop-break { display:none; }
  .contact-footer { padding:0 20px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
}