/* =========================================================
   Pave Dynamics — Coming Soon
   Faithful static build of the Claude Design handoff.
   Palette: bg #F7F7F4 · greens #1C3A29 / #2F6B45 / #5E8F73
            / #8FBC9C / #94A38F-ish accents
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #F7F7F4;
}

a {
  color: #2F6B45;
  text-decoration: none;
}
a:hover {
  color: #1C3A29;
}

/* Paving lanes drift left; one shared period keeps every lane seamless. */
@keyframes pd-drift {
  to { transform: translateX(-200px); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-move { animation: none !important; }
}

/* Hide the native cursor only when the custom one is active on fine pointers. */
@media (pointer: fine) {
  html.pd-cursor-on,
  html.pd-cursor-on * { cursor: none !important; }
}

/* ---------- Stage ---------- */
.pd-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F7F4;
  overflow: hidden;
  font-family: 'Archivo', system-ui, sans-serif;
}

/* ---------- Custom cursor ---------- */
.pd-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid #5E8F73;
  border-radius: 50%;
  transform: translate(-100px, -100px);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity .22s ease, border-color .18s ease;
  will-change: transform;
}
.pd-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #1C3A29;
  border-radius: 50%;
  transform: translate(-100px, -100px);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .22s ease;
  will-change: transform;
}

/* ---------- Animated background lanes ---------- */
.pd-lanes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: skewX(-16deg) scale(1.15);
  transform-origin: center;
  pointer-events: none;
}

.pd-lane {
  position: absolute;
  left: -25%;
  right: -25%;
  overflow: hidden;
}

.pd-mover {
  position: absolute;
  top: 0;
  left: 0;
  width: 260%;
  height: 100%;
  will-change: transform;
  animation: pd-drift linear infinite;
}

/* Lane geometry + drift speed (from the handoff's lane definitions). */
.pd-lane--1 { top: 5%;  height: 22px; }
.pd-lane--2 { top: 17%; height: 40px; }
.pd-lane--3 { top: 30%; height: 16px; }
.pd-lane--4 { top: 44%; height: 30px; }
.pd-lane--5 { top: 59%; height: 20px; }
.pd-lane--6 { top: 73%; height: 44px; }
.pd-lane--7 { top: 87%; height: 18px; }

.pd-mover--1 {
  animation-duration: 34s;
  background-image: repeating-linear-gradient(to right,
    rgba(143,188,156,0.200) 0, rgba(143,188,156,0.200) 60px,
    transparent 60px, transparent 200px);
}
.pd-mover--2 {
  animation-duration: 48s;
  background-image: repeating-linear-gradient(to right,
    rgba(47,107,69,0.100) 0, rgba(47,107,69,0.100) 92px,
    transparent 92px, transparent 200px);
}
.pd-mover--3 {
  animation-duration: 26s;
  background-image: repeating-linear-gradient(to right,
    rgba(28,58,41,0.110) 0, rgba(28,58,41,0.110) 46px,
    transparent 46px, transparent 200px);
}
.pd-mover--4 {
  animation-duration: 40s;
  background-image: repeating-linear-gradient(to right,
    rgba(94,143,115,0.130) 0, rgba(94,143,115,0.130) 74px,
    transparent 74px, transparent 200px);
}
.pd-mover--5 {
  animation-duration: 30s;
  background-image: repeating-linear-gradient(to right,
    rgba(143,188,156,0.170) 0, rgba(143,188,156,0.170) 56px,
    transparent 56px, transparent 200px);
}
.pd-mover--6 {
  animation-duration: 54s;
  background-image: repeating-linear-gradient(to right,
    rgba(47,107,69,0.090) 0, rgba(47,107,69,0.090) 104px,
    transparent 104px, transparent 200px);
}
.pd-mover--7 {
  animation-duration: 22s;
  background-image: repeating-linear-gradient(to right,
    rgba(28,58,41,0.120) 0, rgba(28,58,41,0.120) 50px,
    transparent 50px, transparent 200px);
}

/* ---------- Fade overlay ---------- */
.pd-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(247,247,244,0.55) 0%,
    rgba(247,247,244,0)   30%,
    rgba(247,247,244,0)   70%,
    rgba(247,247,244,0.65) 100%);
}

/* ---------- Content ---------- */
.pd-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding: 40px;
  text-align: center;
}

.pd-logo {
  width: min(540px, 80vw);
  height: auto;
  display: block;
}

.pd-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.pd-divider {
  width: 44px;
  height: 2px;
  background: #8FBC9C;
}

.pd-email,
.pd-email:hover {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #111111; /* matches handoff: email keeps its ink color on hover */
}