/* Contact — copy, the swinging badge, socials; the clock centred beneath. */
.contact {
  width: 1205px;
  max-width: calc(100vw - 96px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}
.contact-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 6.6vw, 100px);
}
.contact-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 35px; }
.contact-title {
  max-width: 280px;
  font-size: var(--text-title);
  line-height: var(--text-title-lh);
  font-weight: 400;
  letter-spacing: -0.16px;
}
.contact-sub { max-width: 306px; font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--muted); }
.contact-side { min-width: 0; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 40px; }
.credit { font-size: 15px; line-height: 1.6; color: var(--muted); }
.contact > .clock { width: 100%; padding-bottom: 90px; text-align: center; font-size: 15px; }

/* -------------------------------------------------------------- the badge
   Two layers of the same object. The CSS badge below paints first and is the
   fallback (no WebGL, reduced motion, weak device). js/lanyard3d.js loads in
   the background and crossfades a real 3D scene over it.
   Geometry in cqw of the frame width, shared with the 3D scene:
   strap → ring at 62 · hole at 98 · card 88 × 136.4 from 91.4 · frame 235. */
.ticket {
  position: relative;
  width: clamp(220px, 23vw, 340px);
  aspect-ratio: 100 / 235;
  container-type: inline-size;
  /* Clip the top only: the strap comes out from under the process tray. */
  clip-path: inset(0 -100vw -100vw -100vw);
  perspective: 1400px;
  transition: opacity 0.6s ease;
}
.ticket.is-3d { opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }

.ticket-shadow {
  position: absolute;
  left: 9cqw; top: 97cqw;
  width: 88cqw; height: 136cqw;
  border-radius: 6cqw;
  background: rgba(10, 10, 10, 0.16);
  filter: blur(18px);
  will-change: transform;
}

.swing {
  position: absolute; inset: 0;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Woven webbing: fine warp and weft, a rounded shade across, stitched edges. No print. */
.strap {
  position: absolute;
  left: 50%; top: -60cqw;
  width: 16cqw; height: 120cqw;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 2.5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, rgba(0,0,0,0.3) 1px 2px),
    linear-gradient(90deg, #060606 0%, #1a1a1a 20%, #222 50%, #181818 80%, #060606 100%);
  overflow: hidden;
}
.strap::before, .strap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.14);
}
.strap::before { left: 1.4cqw; }
.strap::after  { right: 1.4cqw; }
.grommet {
  position: absolute; left: 50%; top: 47cqw;
  width: 6.4cqw; height: 6.4cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--bg) 0 36%, #4a4a4a 38%, #e6e6e6 48%, #8a8a8a 60%, #f2f2f2 66%, #3a3a3a 74%, rgba(0,0,0,0) 77%);
}
.hardware {
  position: absolute; left: 50%; top: 57.4cqw;
  width: 28.6cqw; height: 45.7cqw;
  transform: translateX(-50%) translateZ(2px);
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}

.card3d {
  position: absolute;
  left: 6cqw; top: 91.4cqw;
  width: 88cqw; height: 136.4cqw;
  transform-style: preserve-3d;
}
.badge-edge {
  position: absolute; inset: 0;
  border-radius: 5cqw;
  background: #cfcfcc;
}
.badge-edge.e1 { transform: translateZ(-1.5px); background: #d9d9d6; }
.badge-edge.e2 { transform: translateZ(-3px); }

.badge {
  position: absolute; inset: 0;
  border-radius: 5cqw;
  padding: 9cqw 8cqw 8cqw;
  background: linear-gradient(160deg, #fcfcfb 0%, #ececea 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 0 0 1px rgba(10,10,10,0.05);
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--ink);
}
/* Grain, then a sheen that slides with the swing angle (--sheen from JS). */
.badge::before {
  content: ""; position: absolute; inset: 0;
  background: url("../../assets/grain.svg");
  opacity: 0.22; mix-blend-mode: multiply;
  pointer-events: none;
}
.badge::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(calc(var(--sheen, 0) * 1%));
  pointer-events: none;
}
.badge-hole {
  position: absolute; left: 50%; top: 3.6cqw;
  width: 6cqw; height: 6cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 1px 2px rgba(10,10,10,0.3), 0 0 0 1px rgba(10,10,10,0.06);
  z-index: 1;
}
.badge-k {
  position: absolute; right: 7cqw; top: 12cqw;
  width: 26cqw; height: auto;
  fill: var(--ink);
}
.badge-name {
  position: relative;
  margin-top: auto;
  font-size: 13.5cqw; font-weight: 500; line-height: 0.98;
  letter-spacing: -0.045em;
}
.badge-role {
  position: relative;
  margin-top: 6cqw;
  font-size: 4.6cqw; line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(10,10,10,0.78);
}

/* The card is the handle; the strap isn't. */
.grab {
  position: absolute;
  left: 6cqw; top: 91.4cqw;
  width: 88cqw; height: 136.4cqw;
  border-radius: 5cqw;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(4px);
}
.grab.dragging { cursor: grabbing; }

/* ---------------------------------------------------------- the 3D stage
   Full-bleed band from the top of the contact block. The canvas ignores the
   pointer; a hit box that follows the card on screen takes it instead. */
.contact { position: relative; }
.lanyard-stage {
  position: absolute;
  top: 0; left: 50%;
  width: 100vw; margin-left: -50vw;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.lanyard-stage.ready { opacity: 1; }
.lanyard-stage canvas { display: block; width: 100%; height: 100%; }
.lanyard-hit {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.lanyard-hit.dragging { cursor: grabbing; }
.contact-copy, .contact-side { position: relative; z-index: 2; }

@media (max-width: 1100px) {
  .contact { width: 904px; max-width: calc(100vw - 120px); }
  .credit, .contact > .clock { font-size: 14px; }
  .contact > .clock { padding-bottom: 70px; }
}

@media (max-width: 640px) {
  .contact {
    width: 100%; max-width: none;
    padding: 0 25px 60px;
    margin-top: 0;
    display: grid;
    grid-template-areas: "ticket" "copy" "bar";
    gap: 56px;
  }
  .contact-row { display: contents; }
  .ticket { grid-area: ticket; justify-self: center; width: min(230px, 58vw); }
  .contact-copy { grid-area: copy; align-items: center; text-align: center; gap: 28px; }
  .contact-title { max-width: none; font-size: 22px; }
  .contact-copy .cta { align-self: center; }
  .contact-side {
    grid-area: bar; width: 100%;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  }
  .contact-side .socials { grid-column: 2; justify-self: end; }
  .contact-side .credit { order: -1; grid-column: 1; justify-self: start; }
  .contact > .clock { grid-area: bar; justify-self: center; align-self: center; width: auto; padding: 0; }
  .credit, .contact > .clock { font-size: 13px; }
}