/* ============================================================
   Vedika Bhasin — Contact page
   Contact game — blade & rising fruit. Built on the Vedika Bhasin
   tokens. Monochrome line-art fruit, a single burnt-sienna pop
   on the cut. Builds on colors_and_type.css + styles.css.
   ============================================================ */

.cg {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  background: var(--color-canvas);
}
/* faint floor glow — within the one-gradient allowance (subtle, not a hero blob) */
.cg::after {
  content: "";
  position: absolute; left: 50%; bottom: -22%;
  width: 120%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,0.045), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cg__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  display: block;
  touch-action: none;
}
.cg.is-playing { cursor: none; }

.cg__content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding-top: 104px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;            /* let swipes pass through to the canvas */
  gap: 28px;
}

.cg__head { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 60ch; }
.cg__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 124px);
  line-height: .96;
  letter-spacing: -1px;
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}
.cg__sub {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body);
}
.cg__sub b { color: var(--color-ink); font-weight: 500; }

/* ---- the reveal ------------------------------------------- */
.cg__reveal {
  margin-top: auto;            /* push the email toward the lower-middle where fruit peaks */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cg__email {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  font-family: var(--font-mono);
  font-weight: 500;
  /* scales down on small screens so all 22 characters stay on one line */
  font-size: clamp(15px, 5.1vw, 60px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-text-strong);
  text-decoration: none;
  user-select: none;
  transition: filter var(--dur-base) var(--ease);
}
.cg__char {
  position: relative;
  display: inline-block;
  width: 0.62em;
  text-align: center;
}
/* masked state: a quiet asterisk that sits low and muted */
.cg__char .mask {
  display: inline-block;
  color: var(--color-muted-soft);
  transform: translateY(0.06em);
  transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.cg__char .real {
  position: absolute;
  inset: 0;
  color: var(--color-text-strong);
  opacity: 0;
  transform: translateY(0.16em);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cg__char.is-on .mask { opacity: 0; }
.cg__char.is-on .real { opacity: 1; transform: translateY(0); }

.cg__email.is-live { cursor: pointer; }
.cg__email.is-live:hover { filter: none; }
.cg__email.is-live .cg__char .real { color: var(--color-text-strong); }

.cg__status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.cg__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); display: inline-block; }
.cg__status .sep { color: var(--color-muted-soft); }
.cg__count { color: var(--color-body); }

.cg__skip {
  pointer-events: auto;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.cg__skip:hover { color: var(--color-body); }
.cg__skip[hidden] { display: none; }

.cg__followup {
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center;
}
.cg__followup.is-on { opacity: 1; transform: translateY(0); }

@media (max-width: 720px) {
  .cg__content { padding-top: 84px; }
  .cg__reveal { margin-top: 56px; }
}