/* Landing — a primed wall, a name, and permission to make a mess. */

.page-landing { background: var(--primer); }
.page-landing .nav { margin-left: auto; }

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px var(--gutter) clamp(28px, 6vh, 64px);
  overflow: hidden;
  isolation: isolate;
}

.mess {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 18px clamp(24px, 4vw, 64px);
  pointer-events: none;
}
.hero a, .hero button { pointer-events: auto; }

.hero__mark {
  grid-row: 1 / span 2;
  font-size: min(30vw, 42vh);
  margin-left: -.03em;
}
.hero__mark .wm__paige { margin-top: .02em; }

.hero__copy { align-self: end; max-width: 26rem; padding-bottom: .4em; }
.hero__line {
  font-family: var(--text);
  font-weight: 750;
  font-size: clamp(1.6rem, 1rem + 2.1vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.hero__sub { margin-top: .8em; color: var(--ink-soft); max-width: 22rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 1.4em; }

.mess-ui {
  position: absolute;
  z-index: 3;
  top: 96px;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.mess-ui__buttons { display: flex; gap: 12px; }
.mess-ui__hint { max-width: 19rem; font-size: 1.05rem; text-align: right; transform: rotate(2deg); color: var(--ink); transition: color .3s; }
.mess-ui__hint.is-yours { color: var(--red-deep); }

.mess-ui__direct {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: 104px;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 650;
  font-size: var(--fs-small);
}

/* letters arrive on swung beats (a late fallback runs if the script never does) */
.js .hero__mark .l { animation: slap-late .62s var(--ease-pop) 2.4s both; }
.fonts-in .hero__mark .l { animation: slap .62s var(--ease-pop) var(--d, 0ms) both; }
@keyframes slap {
  0%   { opacity: 0; transform: translateY(-.22em) scale(1.45) rotate(var(--sr, -7deg)); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes slap-late {
  0%   { opacity: 0; transform: translateY(-.22em) scale(1.45) rotate(var(--sr, -7deg)); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.fonts-in .hero__mark .l.jump { animation: jump .52s var(--ease-pop) both; }
@keyframes jump {
  0%   { transform: none; }
  35%  { transform: translateY(-.16em) rotate(var(--jr, 5deg)) scale(1.06); }
  100% { transform: none; }
}

.js .hero__copy > * { animation: rise-late .6s var(--ease-pop) 2.6s both; }
.fonts-in .hero__copy > * { animation: rise .6s var(--ease-pop) both; }
.fonts-in .hero__copy > :nth-child(1) { animation-delay: 820ms; }
.fonts-in .hero__copy > :nth-child(2) { animation-delay: 1100ms; }
.fonts-in .hero__copy > :nth-child(3) { animation-delay: 1250ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise-late { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero__mark { grid-row: auto; font-size: min(36vw, 28vh); margin-left: 0; }
  .hero__copy { padding-bottom: 0; }
  .mess-ui { top: auto; bottom: clamp(20px, 3vh, 40px); right: var(--gutter); }
  .mess-ui__hint { display: none; }
  .stage { padding-bottom: calc(clamp(20px, 3vh, 40px) + 64px); }
  .mess-ui__direct { top: 92px; }
}
@media (max-height: 560px) and (min-width: 861px) {
  .hero__mark { font-size: min(24vw, 52vh); }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__mark .l, .js .hero__copy > *,
  .fonts-in .hero__mark .l, .fonts-in .hero__copy > * { animation: none !important; opacity: 1; transform: none; }
}