/* 3d-home-contact.css: #experiments (the quiet hallway) and #contact (the door) in the 3D design.
   Objects live in home-contact.js: the door is a ui anchor on .contact-stage, the sketches are an anchor on #experiments.
   Copy and markup are untouched; this file only sets spacing, type and the room the 3D needs. */

/* ------------------------------------------------------------------ experiments: sketches in the open */

#experiments {
  --scrim: 0.36;
  --scrim-x0: 0.28;
  --scrim-x1: 0.62;
  padding: 84px 0 80px;
  min-height: 340px;
}
#experiments .wrap > * { max-width: min(560px, 100%); }
#experiments .lede { max-width: 46ch; }
#experiments .hero-actions .btn { background: rgba(var(--bg-rgb), 0.5); }

@media (max-width: 800px) {
  /* the sketches drift in a band under the copy on phones */
  #experiments { padding: 72px 0 236px; min-height: 0; }
}

/* ------------------------------------------------------------------ contact: one door */

#contact {
  --scrim: 0.3;
  --scrim-x0: 0.2;
  --scrim-x1: 0.62;
  padding: 28px 0 40px;
}
#contact .wrap { z-index: 2; }
#contact .sec-label { margin-bottom: 18px; }

#contact h2 {
  margin: 0 0 28px;
  font-size: clamp(58px, 8.4vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.048em;
  text-wrap: balance;
  text-shadow: 0 0 46px rgba(var(--bg-rgb), 0.9);
}
#contact h2 .w:last-child { padding-right: 0.14em; margin-right: -0.14em; }
#contact h2 .w:last-child .wi { font-style: italic; color: var(--paper); }

#contact .lede { max-width: 46ch; font-size: 18px; line-height: 1.5; }
#contact .lede + .lede { margin-top: 10px; }

/* quiet buttons: hairline pills, lime only on the one that opens the door */
#contact .hero-actions { gap: 12px; align-items: center; }
#contact .btn { padding: 14px 20px; letter-spacing: 0.1em; }
#contact .btn:not(.btn-solid) {
  background: rgba(var(--bg-rgb), 0.28);
  border-color: rgba(var(--ink-rgb), 0.18);
  color: var(--ink);
}
#contact .btn:not(.btn-solid):hover, #contact .btn:not(.btn-solid):focus-visible {
  border-color: rgba(var(--accent-rgb), 0.75);
  background: rgba(var(--accent-rgb), 0.05);
}
#contact .btn-solid { padding: 14px 24px; }

/* the mail chip: mono, bone on dark, a hairline of lime, one soft ring when it appears */
#contact .mail-slot { gap: 12px 14px; }
#contact .mail-addr {
  padding: 13px 22px;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-color: rgba(var(--accent-rgb), 0.85);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.03));
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5), 0 0 34px rgba(var(--accent-rgb), 0.14);
  animation: csg-chip-in 1.1s var(--ease) backwards;
  cursor: copy;
}
#contact .mail-addr .at { margin: 0 1px; }
#contact .mail-note { flex-basis: 100%; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); }
@keyframes csg-chip-in {
  0%   { opacity: 0; transform: translateY(8px); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55), 0 0 0 rgba(var(--accent-rgb), 0); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 22px rgba(var(--accent-rgb), 0), 0 0 34px rgba(var(--accent-rgb), 0.14); }
}
html[data-calm] #contact .mail-addr { animation-duration: 0.01s; }
@media (prefers-reduced-motion: reduce) { #contact .mail-addr { animation-duration: 0.01s; } }

/* the door is the only thing that answers a click on the stage */
#contact .contact-stage { cursor: pointer; }
html.no-webgl #contact .contact-stage { display: none; }

/* desktop: copy left, door right; the section is one screen between the header and the footer */
@media (min-width: 981px) {
  #contact {
    display: grid;
    grid-template-columns: minmax(24px, 1fr) minmax(0, 590px) minmax(24px, 40px) minmax(0, 550px) minmax(24px, 1fr);   /* 590 + 40 + 550 = the 1180 of .wrap: the copy starts where every other section does */
    align-items: center;
    min-height: calc(100vh - var(--header) - 74px);
    min-height: calc(100svh - var(--header) - 74px);
    padding: 36px 0;
  }
  /* the copy hangs from a fixed top so the mail reveal grows downward instead of re-centring the block */
  #contact > .wrap { grid-column: 2; grid-row: 1; width: auto; margin: 0; align-self: start; padding-top: clamp(28px, 8vh, 96px); }
  #contact > .contact-stage {
    grid-column: 4; grid-row: 1;
    width: auto; margin: 0;
    height: clamp(440px, 66vh, 620px);
  }
  html.no-webgl #contact { display: block; padding: 92px 0 120px; min-height: 0; }
  html.no-webgl #contact > .wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
}

/* tablet and phone: the door above the copy */
@media (max-width: 980px) {
  #contact { padding: 40px 0 76px; }
  #contact .contact-stage { width: calc(100% - 40px); height: clamp(280px, 46vh, 400px); margin: 0 auto 14px; }
  #contact h2 { font-size: clamp(52px, 13vw, 104px); }
}
@media (max-width: 640px) {
  #contact { padding: 24px 0 64px; }
  #contact .contact-stage { height: clamp(220px, 32vh, 290px); }
  #contact h2 { font-size: clamp(50px, 15.4vw, 80px); margin-bottom: 22px; }
  #contact .lede { font-size: 17px; }
  #contact .hero-actions { gap: 10px; }
  #contact .mail-slot { flex: 1 1 100%; }
  #contact .mail-slot > .btn-solid { flex: 1 1 100%; justify-content: center; padding: 16px 18px; }
  #contact .mail-addr { font-size: 14px; padding: 12px 18px; flex: 1 1 100%; text-align: center; overflow-wrap: anywhere; }
  #contact .hero-actions > a.btn { flex: 1 1 0; justify-content: center; padding: 14px 8px; letter-spacing: 0.06em; }
}