/* ==========================================================================
   Home — page-specific styling for the homepage only. Shared components
   (buttons, cards, callout, pathway, steps, reasons) live in components.css;
   this file is the hero and the few layout details unique to this page.
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-9);
  }
}

.hero__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.hero__content {
  /* Grid items default to min-width: auto, which lets intrinsic content
     (here, the nowrap typewriter headline) demand its full unwrapped width
     and starve the second column to 0. min-width: 0 lets this column
     actually shrink to its 1.1fr share. */
  min-width: 0;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-7);
  }
}

.hero__kicker {
  /* The hero's info badge is glass, not the flat kicker-pill used
     elsewhere — it's the one spot glassmorphism earns its place: floating
     over the thread/clock artwork's negative space. */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  animation: fade-up var(--duration-slow) var(--ease-standard) 0.1s forwards;
}

.hero__headline {
  margin-bottom: var(--space-4);
}

.hero__headline-inner {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: reveal-clip 0.9s var(--ease-standard) 0.7s forwards;
}

.hero__subhead {
  font-size: var(--font-size-md);
  max-width: 46ch;
  opacity: 0;
  animation: fade-up var(--duration-slow) var(--ease-standard) 2.1s forwards;
}

.hero__visual {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hero__visual {
    max-width: none;
  }
}

.hero__mark {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- Hero mark: a thread curls, tightens into a clock, and its minute
   hand crossfades into a sewing needle. One continuous drawn path (the
   tail + spiral together) instead of separate disconnected shapes — the
   spiral's final turn holds a constant radius, so it reads as "becoming"
   the clock rim rather than a second, unrelated element appearing. ---- */
.hero__thread {
  fill: none;
  stroke: var(--green-fresh);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-stroke 1.8s var(--ease-standard) 0.1s forwards;
}

.hero__clock-tick {
  /* A quiet aqua instead of neutral grey — the one place aqua gets real
     presence, small enough to stay a detail rather than a third accent
     competing for attention. */
  stroke: var(--aqua);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: fade-in var(--duration-slow) var(--ease-standard) 1.7s forwards;
}

.hero__clock-dot {
  fill: var(--green-fresh);
  opacity: 0;
  animation: fade-in var(--duration-base) var(--ease-standard) 1.85s forwards;
}

.hero__clock-hour {
  stroke: var(--green-fresh);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 460px 240px;
  transform: rotate(-18deg);
  opacity: 0;
  animation: fade-in var(--duration-fast) linear 1.85s forwards,
    settle-hand 0.6s var(--ease-standard) 1.85s forwards;
}

.hero__clock-minute {
  stroke: var(--green-fresh);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 460px 240px;
  transform: rotate(38deg);
  opacity: 0;
  animation: fade-in var(--duration-fast) linear 1.95s forwards,
    settle-minute 0.6s var(--ease-standard) 1.95s forwards,
    crossfade-out 0.6s var(--ease-standard) 2.6s forwards;
}

.hero__needle {
  transform: rotate(60deg);
  transform-origin: 460px 240px;
  opacity: 0;
  animation: crossfade-in var(--duration-slow) var(--ease-standard) 2.7s forwards;
}

.hero__needle-shaft {
  stroke: var(--green-fresh);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.hero__needle-eye {
  fill: none;
  stroke: var(--green-fresh);
  stroke-width: 2;
}

.hero__scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  opacity: 0;
  animation: fade-up var(--duration-slow) var(--ease-standard) 3.1s forwards,
    bob 2s ease-in-out 3.6s infinite;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes draw-stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes settle-hand {
  to {
    transform: rotate(0deg);
  }
}

@keyframes settle-minute {
  to {
    transform: rotate(60deg);
  }
}

@keyframes crossfade-out {
  to {
    opacity: 0;
  }
}

@keyframes crossfade-in {
  to {
    opacity: 1;
  }
}

@keyframes reveal-clip {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__headline-inner {
    animation: none;
    clip-path: none;
  }

  .hero__scroll-cue {
    animation: none;
    opacity: 1;
  }

  .hero__clock-minute {
    animation: none;
    opacity: 0;
    transform: rotate(60deg);
  }

  .hero__needle {
    animation: none;
    opacity: 1;
  }
}

/* ---- Opening Question — large, quiet, conversational lead text ---- */
.lead-block p {
  font-size: var(--font-size-md);
  max-width: 62ch;
}

.lead-block p:first-child {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  max-width: 34ch;
}

/* ---- Founder note (Why Choose section) ---- */
.founder-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}