/* Prototype extras — sticky scrolled nav, page transitions, pin polish. */

.pyrra-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.pyrra-nav.is-scrolled {
  background: rgba(247, 242, 234, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--border-subtle);
}

.pyrra-page {
  opacity: 0;
  transform: translateY(6px);
  animation: pyrra-page-in 360ms var(--ease-out) forwards;
}
@keyframes pyrra-page-in {
  to { opacity: 1; transform: translateY(0); }
}
.pyrra-page.is-fading {
  animation: none;
  opacity: 0;
  transform: translateY(6px);
}

/* Pin polish: subtle hover transform */
.pyrra-pin {
  transition: box-shadow 200ms var(--ease-out), transform 180ms var(--ease-out);
}
.pyrra-pin:hover { transform: translate(-50%, -100%) translateY(-9px); }
.pyrra-pin.is-selected .pyrra-pin__dot {
  box-shadow: 0 0 0 0 currentColor;
  animation: pyrra-pin-pulse 1.6s ease-out infinite;
  color: var(--fire-700);
}
@keyframes pyrra-pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(215,53,2,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(215,53,2,0); }
  100% { box-shadow: 0 0 0 0 rgba(215,53,2,0); }
}

/* Leaflet pin wrapper reset — we position via the inner .pyrra-pin's transform */
.pyrra-pin-icon { background: none !important; border: 0 !important; overflow: visible !important; }
.pyrra-pin-icon .pyrra-pin { position: relative; }

/* Live-nodes status overlay top-right */
.pyrra-network__status {
  position: absolute; top: 12px; right: 12px; z-index: 600;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 14px;
  display: flex; align-items: baseline; gap: 8px;
  box-shadow: 0 4px 14px -6px rgba(14,13,12,0.18);
  font-family: var(--font-body);
  pointer-events: none;
}
.pyrra-network__status strong {
  font-family: var(--font-display); font-weight: 600; font-size: 72px;
  color: var(--fire-600); line-height: 1;
}
.pyrra-network__status span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2);
}

/* On the home page the network sidebar is hidden — let the map span full width */
.pyrra-network.pyrra-network--solo {
  grid-template-columns: 1fr;
  padding-right: 22px;
}

/* CTAs that span row need spacing tweak */
.pyrra-nodecard__val ul { list-style: disc; }

/* Waitlist "submitted" state */
.pyrra-waitlist__success {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 48px 40px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
}
.pyrra-waitlist__success-mark {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--fire-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -8px rgba(215,53,2,0.5);
}
.pyrra-waitlist__success h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 32px; margin: 6px 0 0;
}
.pyrra-waitlist__success p { color: var(--fg-2); font-size: 14.5px; line-height: 1.6; max-width: 460px; margin: 0; }
.pyrra-waitlist__success-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: 18px; width: 100%; max-width: 480px;
  font-family: var(--font-body); font-size: 13px;
}
.pyrra-waitlist__success-meta div {
  background: var(--cream);
  border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 12px 14px; text-align: left;
}
.pyrra-waitlist__success-meta strong { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }

/* Hovering env card images */
.pyrra-env__image { transition: transform 500ms var(--ease-out); }
.pyrra-env:hover .pyrra-env__image { transform: scale(1.03); }
.pyrra-env { overflow: hidden; }

/* Feature card subtle hover */
.pyrra-feature { transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.pyrra-feature:hover { border-color: var(--ink-300); }

/* Subtle press for nodecard image */
.pyrra-nodecard__image { transition: transform 500ms var(--ease-out); }
.pyrra-nodecard:hover .pyrra-nodecard__image { transform: scale(1.02); }
.pyrra-nodecard { overflow: hidden; }

/* Disabled / pending button state for primary submit */
.pyrra-btn[disabled] {
  background: var(--ink-300) !important;
  color: rgba(255,255,255,0.85) !important;
  cursor: not-allowed;
}

/* nav scroll padding so anchor scroll lands below the sticky header */
html { scroll-padding-top: 96px; }

/* Hide tap highlight on mobile */
* { -webkit-tap-highlight-color: transparent; }