/* ============================================================
   ClimbSync — hero: "we should climb again sometime"
   The strike lands, then a concrete date stamps in. Scoped to
   .hero-j / .hj-* so nothing else on the wall is touched.
   ============================================================ */

.hero-j {
  position: relative;
  display: grid;
  align-content: center;
  /* fill the first screen: viewport minus the sticky nav (72px desktop) */
  min-height: calc(100svh - 73px);
  /* room for the visible half of the pocket fan below the copy */
  --fan-w: min(46vw, 720px);
  padding-bottom: calc(var(--fan-w) * 0.62);
}
/* copy sits above the route on the wall */
.hero-j .hj-inner {
  position: relative;
  z-index: 2;
}
.hero-j .hj-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: calc(var(--module) * 1.4) var(--half-module) calc(var(--module) * 1.5);
  display: grid;
  justify-items: center;
  text-align: center;
}
.hj-quote {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
  font-size: clamp(46px, 7.2vw, 108px);
  max-width: 16ch;
  /* even out the line lengths so the quote doesn't wrap raggedly —
     matters most in the longer-worded locales (de/fr) */
  text-wrap: balance;
  /* the brand misprint shadow — same signature as .display headers */
  text-shadow: 0.045em 0.05em 0 var(--misprint);
}
/* desktop: bias the centered copy DOWN toward the pocket fan — on tall
   viewports the block would otherwise float high above the phones */
@media (min-width: 901px) {
  .hero-j {
    padding-top: clamp(24px, 14vh, 170px);
  }
}
.hj-accent {
  color: var(--accent);
}
.hj-some {
  position: relative;
  display: inline-block;
  color: var(--text-muted);
  white-space: nowrap;
}
.hj-some::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 54%;
  height: 0.09em;
  background: var(--accent);
  rotate: -2.4deg;
  transform-origin: left center;
}
/* the badge — real hardware, screwed to the wall at both ends.
   Screws are real elements here (not ::before/::after) so each one
   can unscrew on its own when the date gets re-set. */
.hj-set {
  margin-top: 18px;
  rotate: -2.5deg;
  position: relative;
  z-index: 3;
}
.hj-set .tag {
  transform: none;
  font-size: clamp(13px, 1.4vw, 17px);
  gap: 0.6em;
  padding: 0.55em 0.8em;
  box-shadow: 3px 4px 0 var(--hard-ink);
  white-space: nowrap;
  cursor: pointer;
}
.hj-set .tag::before,
.hj-set .tag::after {
  content: none;
}
.hj-set .tag .grade {
  font-size: 1em;
}
.hj-screw {
  width: 0.68em;
  height: 0.68em;
  border-radius: 50%;
  background-image: var(--torx-uri);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  flex: none;
}

/* --- click: unscrew, drop, remount with a new time --- */
.hj-screw.out {
  animation: hj-unscrew 0.85s linear both;
}
.hj-set .tag.falling {
  animation: hj-fall 0.65s cubic-bezier(0.45, 0, 0.9, 0.55) both;
}
.hj-set .tag.mounting {
  animation: hj-mount 0.4s cubic-bezier(0.34, 1.45, 0.4, 1) both;
}
.hj-set .tag.mounting .hj-screw {
  animation: hj-screw-in 0.45s ease-out 0.3s both;
}
@keyframes hj-unscrew {
  0% {
    rotate: 0deg;
    translate: 0 0;
    opacity: 1;
  }
  55% {
    rotate: -600deg;
    translate: 0 -0.2em;
    opacity: 1;
    animation-timing-function: ease-in;
  }
  70% {
    rotate: -660deg;
    translate: 0 0.1em;
    opacity: 1;
    animation-timing-function: ease-in;
  }
  100% {
    rotate: -740deg;
    translate: 0 3.4em;
    opacity: 0;
  }
}
@keyframes hj-fall {
  0% {
    translate: 0 0;
    rotate: 0deg;
    opacity: 1;
  }
  25% {
    rotate: 7deg;
  }
  100% {
    translate: 0 320px;
    rotate: 26deg;
    opacity: 0;
  }
}
@keyframes hj-mount {
  from {
    opacity: 0;
    scale: 1.5;
    rotate: 4deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
@keyframes hj-screw-in {
  from {
    rotate: -560deg;
    scale: 1.35;
    opacity: 0;
  }
  to {
    rotate: 0deg;
    scale: 1;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-j .hj-some::after {
    scale: 0 1;
  }
  .hero-j .hj-set {
    opacity: 0;
    scale: 1.7;
    rotate: 4deg;
  }
  .hero-j .play .hj-some::after {
    animation: hj-strike 0.4s ease-out 0.5s both;
  }
  .hero-j .play .hj-set {
    animation: hj-stamp 0.45s cubic-bezier(0.34, 1.45, 0.4, 1) 0.95s both;
  }
}
@keyframes hj-strike {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}
@keyframes hj-stamp {
  from {
    opacity: 0;
    scale: 1.7;
    rotate: 4deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: -2.5deg;
  }
}
.hj-said {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
/* each clause stays on one line; the line breaks between clauses */
.hj-said-c {
  white-space: nowrap;
}
.hj-sub {
  margin-top: 14px;
  /* one supporting line now carries the middle, so give it more presence
     through size (not weight) — a confident subhead, not a caption */
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40ch;
  text-wrap: balance;
}
.hj-cta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ---------- the pocket fan ----------
   The calendar and the discover map rise half out of the fold, anchored
   to the panel's bottom edge and cut by it (the tnut section clips).
   The overlap says "one app, two views"; the cut says "keep scrolling". */
.hj-stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 45%;
  width: var(--fan-w);
  z-index: 1;
}
.hj-stage .hj-phone-back {
  position: absolute;
  width: 52%;
  left: 2%;
  top: 7%;
  rotate: -7deg;
  z-index: 1;
  filter: drop-shadow(0 -10px 22px rgba(0, 0, 0, 0.4));
}
.hj-stage .hj-phone-front {
  position: relative;
  width: 54%;
  margin-left: auto;
  margin-right: 4%;
  rotate: 3deg;
  z-index: 2;
  filter: drop-shadow(-14px -6px 26px rgba(0, 0, 0, 0.45));
}
/* hovering the fan eases the phones apart — a peek at the map behind
   (transition must keep opacity: the atomic-load fade uses it) */
.hj-stage .hj-phone-back,
.hj-stage .hj-phone-front {
  transition:
    opacity 0.28s ease,
    translate 0.5s cubic-bezier(0.3, 1.2, 0.4, 1),
    rotate 0.5s cubic-bezier(0.3, 1.2, 0.4, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hj-stage:hover .hj-phone-back {
    translate: -5% -2%;
    rotate: -9.5deg;
  }
  .hj-stage:hover .hj-phone-front {
    translate: 5% 1%;
    rotate: 4.5deg;
  }
}

@media (max-width: 600px) {
  .hero-j {
    min-height: calc(100svh - 63px);
    --fan-w: min(88vw, 400px);
    padding-bottom: calc(var(--fan-w) * 0.58);
  }
  .hero-j .hj-inner {
    padding-bottom: calc(var(--module) * 0.6);
  }
  .hj-quote {
    max-width: 13ch;
  }
  .hj-set {
    margin-top: 12px;
  }
  .hj-set .tag {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .hj-sub {
    font-size: 16.5px;
  }
  .hj-said {
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
}