/* Trackbirds · public home (from design/home/home.css). Needs base.css. */

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(2rem, 6vw, 4.5rem);
}

.hero-copy { position: relative; z-index: 1; }

.hero h1 { max-width: 12ch; margin-bottom: 1.75rem; }

.lede {
  max-width: 34rem;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
}

.say {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--ink);
  background: var(--rose-soft);
  padding: .05em .4em;
  border-radius: 4px;
  white-space: nowrap;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.hero .fine { margin-top: 1rem; }

.wires {
  position: relative;
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  overflow-x: clip; /* the flight comes in from above, over the empty right side of the hero */
}
.wires-svg {
  width: 100%;
  min-width: 760px;
  flex-shrink: 0;
  height: auto;
  overflow: visible;
}

.hours line { stroke: var(--sky-200); stroke-width: 1; stroke-dasharray: 2 6; }
.hours text {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--ink-soft);
  text-anchor: middle;
}

.block {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.b1 { stroke: var(--sky-400); }
.b2 { stroke: var(--sky-300); }
.b3 { stroke: var(--sky-500); }

.trail {
  fill: none;
  stroke: var(--sky-400);
  stroke-width: 1.6;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}

/* little hops on the wire */
.hop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hop 9s ease-in-out infinite;
}
.h1 { animation-delay: 1.2s; }
.h2 { animation-delay: 4.1s; animation-duration: 11s; }
.h3 { animation-name: peck; animation-delay: 2.6s; animation-duration: 7s; }
.h4 { animation-delay: 6.3s; animation-duration: 10s; }
.h5 { animation-name: peck; animation-delay: 5s; animation-duration: 12s; }
.h6 { animation-delay: 7.5s; animation-duration: 8s; }

@keyframes hop {
  0%, 86%, 100% { transform: translate(0, 0) scale(1, 1); }
  88% { transform: translate(0, 0) scale(1.04, .94); }
  91% { transform: translate(4px, -9px) scale(.97, 1.04); }
  94% { transform: translate(8px, 0) scale(1.04, .95); }
  96% { transform: translate(8px, 0) scale(1, 1); }
  98% { transform: translate(4px, 0); }
}

@keyframes peck {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(14deg); }
  88% { transform: rotate(2deg); }
  91% { transform: rotate(12deg); }
  95% { transform: rotate(0); }
}

/* ---------- problem ---------- */

.problem {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  padding-block: clamp(4rem, 10vw, 8rem);
  align-items: start;
}
.problem-text { font-size: 1.15rem; color: var(--ink-soft); max-width: 36rem; }
.problem-text strong { color: var(--ink); font-weight: 600; background: linear-gradient(transparent 62%, var(--rose-soft) 62%); }

/* ---------- how it works ---------- */

.how {
  background: var(--paper-2);
  padding-block: clamp(4rem, 9vw, 7rem);
}
.how h2 { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --gap: clamp(1.5rem, 4vw, 3.5rem);
  gap: var(--gap);
  position: relative;
}

/* the wire joining the three stops: one span per step */
.step::before {
  content: "";
  position: absolute;
  left: calc(var(--gap) / -2);
  right: calc(var(--gap) / -2);
  top: 2.2rem;
  height: 22px;
  background: var(--ink);
  opacity: .65;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q150 30 300 2' fill='none' stroke='%23000' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q150 30 300 2' fill='none' stroke='%23000' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.step:first-child::before { left: calc(-1 * var(--gutter)); }
.step:last-child::before { right: calc(-1 * var(--gutter)); }
.step { position: relative; padding-top: 5.25rem; }
/* feet (y=32 of 33) right on the lowest point of the span (2.2rem + 16px) */
.step-bird {
  position: absolute;
  width: 3.2rem;
  height: auto;
  left: calc(50% - 1.6rem);
  top: calc(2.2rem + 16px - 3.2rem * 32 / 40);
}
.step-n {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--sky-500);
  margin: 0 0 .5rem;
}
.step h3 { margin-bottom: .6rem; }
.step p { color: var(--ink-soft); }

.prompt {
  font-family: var(--font-mono);
  font-size: .95rem;
  background: var(--night);
  color: var(--on-night) !important;
  padding: .55rem .8rem;
  border-radius: 6px;
  display: inline-block;
}
.prompt span { color: var(--rose); margin-right: .35rem; }

/* ---------- your day ---------- */

.day-section { padding-block: clamp(4rem, 10vw, 8rem); }

.day-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.day-intro h2 { margin-bottom: 1.25rem; }
.day-intro p { color: var(--ink-soft); }

.day-card figcaption { margin: 1rem 0 0; font-size: .78rem; }

/* lanes "draw" themselves on scroll (no JS; browsers without
   animation-timeline show them complete) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .day-card .seg {
      animation: seg-grow linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 35%;
    }
    .day-card .lane:nth-child(3) .seg { animation-range: entry 35% cover 40%; }
    .day-card .lane:nth-child(4) .seg { animation-range: entry 50% cover 45%; }
    .day-card .lane-bird {
      animation: bird-land linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 48%;
    }
  }
}

/* ---------- privacy ---------- */

.privacy {
  background: var(--night);
  color: var(--on-night);
  padding-block: clamp(4rem, 10vw, 7.5rem);
}
.privacy .section-kicker { color: var(--night-accent); }
.privacy h2 { margin-bottom: 1rem; }
.privacy-lede { max-width: 36rem; font-size: 1.15rem; color: var(--on-night-soft); margin-bottom: 3rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}
.side {
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
}
.side h3 { font-size: 1.2rem; margin-bottom: .9rem; }
.side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.side li { padding-left: 1.3rem; position: relative; }
.side li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
}
.side-local {
  border: 1.5px dashed var(--night-line);
  color: var(--on-night);
}
.side-local li::before { border: 1.5px solid var(--night-accent); }
.side-sent {
  background: var(--night-card);
  color: var(--night-card-ink);
}
.side-sent li::before { background: var(--bird-breast); }

.carrier svg { width: 100%; height: auto; overflow: visible; }
.carrier-bird .f-wing { animation-duration: .5s; }
.carrier-trail { fill: none; stroke: var(--night-accent); stroke-width: 1.4; stroke-dasharray: 1 6; stroke-linecap: round; }
.carrier-bird { animation: glide 3.2s ease-in-out infinite alternate; }
.carrier .f-tail, .carrier .f-body, .carrier .f-breast, .carrier .f-beak, .carrier .f-wing, .note, .note-line { stroke: var(--bird-line-deep); }
.note { fill: var(--note-paper); stroke-width: 1.2; }
.note-line { fill: none; stroke: var(--bird-wing); stroke-width: 1.2; stroke-linecap: round; }

@keyframes glide {
  from { transform: translate(96px, 44px); }
  to { transform: translate(96px, 38px); }
}

.privacy-note {
  margin: 3rem 0 0;
  max-width: 44rem;
  color: var(--on-night-soft);
  font-size: 1rem;
  border-left: 2px solid var(--rose);
  padding-left: 1rem;
}

/* ---------- faq ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  padding-block: clamp(4rem, 10vw, 7.5rem);
}
.faq-list { border-top: 1px solid var(--sky-200); }
.faq details { border-bottom: 1px solid var(--sky-200); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2rem 1.1rem 0;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .3rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-right: 1.5px solid var(--sky-500);
  border-bottom: 1.5px solid var(--sky-500);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--ink-soft); margin: 0 0 1.2rem; max-width: 40rem; }

/* ---------- pricing ---------- */

.pricing {
  background: var(--sky-100);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.pricing-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.pricing h2 { margin-bottom: 1rem; }
.pricing .soon { font-style: italic; color: var(--sky-500); }
.pricing p { color: var(--ink-soft); margin: 0; }
.pricing-cta { display: flex; align-items: center; gap: 1.5rem; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .problem, .day-grid, .faq { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .step { padding-top: 0; padding-left: 4.4rem; }
  .step::before { display: none; }
  .step-bird { left: 0; top: 0; width: 3.2rem; border-bottom: 1.3px solid var(--ink); }
  .split { grid-template-columns: 1fr; gap: .5rem; }
  .carrier { width: 10rem; margin-inline: auto; }
  /* on mobile: show the right-hand side of the wire (where the bird lands) */
  .wires { justify-content: flex-end; overflow: clip; margin-top: 2rem; }
  .wires-svg { min-width: 900px; }
  .hours text { font-size: 19px; }
}