/*
  contact.css
  Styles for the whole Contact page: hero (headline, description, the
  contact visual) and the contact methods panel. That's the entire
  page now -- the waitlist is a Gmail-compose link on the navbar's
  global CTA (see context_processors.py's WAITLIST_EMAIL_HREF), not a
  section here at all.
*/

/* ---- Hero ---- */
.comrade-contact-hero__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.comrade-contact-hero__headline {
  margin-top: var(--comrade-space-sm);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--comrade-text);
}

.comrade-contact__highlight {
  color: var(--comrade-primary);
}

.comrade-contact-hero__description {
  margin-top: var(--comrade-space-md);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--comrade-text-muted);
}

/* The small personality line: quieter and smaller than the
   description so it reads as an aside, not a second sentence of the
   same statement. */
.comrade-contact-hero__note {
  margin-top: var(--comrade-space-sm);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--comrade-text-muted);
  opacity: 0.85;
}

.comrade-contact-hero__visual {
  display: flex;
  justify-content: center;
  margin-top: var(--comrade-space-xl);
}

/* ---- Contact visual (contact-visual.html) ---- */
.comrade-contact-visual {
  position: relative;
  width: 240px;
  aspect-ratio: 1 / 1;
}

.comrade-contact-visual__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.comrade-contact-visual__ring {
  fill: none;
  stroke: var(--comrade-primary);
  stroke-width: 1;
}

.comrade-contact-visual__ring--outer {
  opacity: 0.18;
}

.comrade-contact-visual__ring--mid {
  opacity: 0.22;
}

.comrade-contact-visual__ring--inner {
  opacity: 0.28;
}

/* Three nodes circling their own ring at different speeds and
   alternating directions -- plain CSS rotation on each wrapping
   group, not JS: a single node on a fixed-radius circle is exactly
   what `rotate()` already computes natively, no per-frame
   trigonometry earns its cost here (compare
   safety-orbit-animation.js, which genuinely needs it for multiple
   independently-positioned layers). transform-origin is the SVG
   viewBox's own center (200x200 → 100,100), so each rotation keeps
   its node exactly on the ring it started on -- there is no code
   path that could carry a node off its circle. */
.comrade-contact-visual__orbit--a {
  transform-origin: 100px 100px;
  animation: comrade-contact-orbit 22s linear infinite;
}

.comrade-contact-visual__orbit--b {
  transform-origin: 100px 100px;
  animation: comrade-contact-orbit-reverse 32s linear infinite;
}

.comrade-contact-visual__orbit--c {
  transform-origin: 100px 100px;
  animation: comrade-contact-orbit 26s linear infinite;
}

@keyframes comrade-contact-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes comrade-contact-orbit-reverse {
  to {
    transform: rotate(-360deg);
  }
}

.comrade-contact-visual__node {
  fill: var(--comrade-primary);
}

.comrade-contact-visual__node--soft {
  opacity: 0.55;
}

.comrade-contact-visual__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--comrade-surface-soft);
  border: 1px solid var(--comrade-border);
  color: var(--comrade-primary);
  box-shadow: var(--comrade-neumo-raised), 0 0 20px var(--comrade-primary-light);
  animation: comrade-contact-core-pulse 4s ease-in-out infinite;
}

.comrade-contact-visual__core svg {
  width: 42%;
  height: 42%;
}

@keyframes comrade-contact-core-pulse {
  0%,
  100% {
    box-shadow: var(--comrade-neumo-raised), 0 0 16px var(--comrade-primary-light);
  }
  50% {
    box-shadow: var(--comrade-neumo-raised), 0 0 26px var(--comrade-primary-light-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comrade-contact-visual__orbit--a,
  .comrade-contact-visual__orbit--b,
  .comrade-contact-visual__orbit--c,
  .comrade-contact-visual__core {
    animation: none;
  }
}

/* ---- Contact methods: one connected panel, two rows ----
   Sits on the "deep" alternating band -- the same token Values'/Why's/
   Philosophy's sections use, right after the hero's plain background. */
.comrade-contact-methods {
  background-color: var(--comrade-surface-deep);
}

.comrade-contact-methods__panel {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--comrade-space-sm) var(--comrade-space-lg);
  background-color: var(--comrade-surface-soft);
  border: 1px solid var(--comrade-border);
  border-radius: var(--comrade-radius-lg);
  box-shadow: 0 20px 40px var(--comrade-shadow-soft);
}

.comrade-contact-methods__heading {
  padding-top: var(--comrade-space-md);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--comrade-text-muted);
}

.comrade-contact-methods__row {
  display: flex;
  align-items: center;
  gap: var(--comrade-space-md);
  padding-block: var(--comrade-space-md);
  color: inherit;
}

.comrade-contact-methods__row + .comrade-contact-methods__row {
  border-top: 1px solid var(--comrade-border);
}

.comrade-contact-methods__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--comrade-surface);
  border: 1px solid var(--comrade-border);
  color: var(--comrade-primary);
  box-shadow: var(--comrade-neumo-raised);
  transition: box-shadow var(--comrade-transition-hover);
}

.comrade-contact-methods__row:hover .comrade-contact-methods__icon {
  box-shadow: var(--comrade-neumo-raised-hover);
}

.comrade-contact-methods__icon svg {
  width: 18px;
  height: 18px;
}

.comrade-contact-methods__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.comrade-contact-methods__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--comrade-text-muted);
}

/* Wraps instead of truncating: an ellipsis-cut email address (e.g.
   "comradessafety@…") reads as broken/incomplete, not just
   abbreviated, since there's no way to tell where it was headed. The
   panel's own width already gives each row plenty of room, but this
   still wraps rather than overflows at any width down to mobile. */
.comrade-contact-methods__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--comrade-text);
  overflow-wrap: break-word;
}

.comrade-contact-methods__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--comrade-primary);
  transition: transform var(--comrade-transition-hover);
}

.comrade-contact-methods__arrow svg {
  width: 100%;
  height: 100%;
}

.comrade-contact-methods__row:hover .comrade-contact-methods__arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 576px) {
  .comrade-contact-methods__panel {
    padding-inline: var(--comrade-space-md);
  }
}