/* Home page only. Shared components live in styles.css. */

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; min-height: clamp(640px, 100vh, 1100px); min-height: clamp(640px, 100svh, 1100px); display: grid; align-items: center; overflow: hidden; }
/* the hero fades into the page: no hard edge where the photo and the flyer glow stop */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(180deg, rgba(7,6,8,0), var(--bg) 92%); z-index: -1; pointer-events: none; }
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0a0607; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(.64) contrast(1.06); transform: scale(1.08); }
.js .hero-bg img { transition: transform 9s cubic-bezier(.2,.6,.2,1); }
.js.ready .hero-bg img { transform: scale(1.02); }
/* the scrims that keep copy above 4.5:1 (the photo itself is graded in assets/photos) */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,6,8,.97) 0%, rgba(7,6,8,.9) 36%, rgba(7,6,8,.5) 60%, rgba(7,6,8,.28) 80%, rgba(7,6,8,.55) 100%),
    linear-gradient(180deg, rgba(7,6,8,.75) 0%, rgba(7,6,8,.15) 22%, rgba(7,6,8,.1) 62%, var(--bg) 100%);
}
.hero-in { width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--nav-h) + 48px) var(--gut) 72px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: center; }
.hero-copy { max-width: 760px; }
.hero h1 { font-size: clamp(52px, 5.6vw, 84px); }
@media (min-width: 901px) { .hero h1 .ln { white-space: nowrap; } }
.hero-sub { margin-top: 28px; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--tx2); text-wrap: pretty; }
.hero-cta { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-foot { margin-top: 44px; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--tx2); }
.hero-foot .link-arrow { margin-left: 4px; }

.hero-stage { position: relative; display: grid; place-items: center; min-height: 700px; }
.hero-halo { position: absolute; width: 104%; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; filter: blur(70px) saturate(1.5); opacity: .5; transform: translateY(6%) scale(.9); z-index: -1; pointer-events: none; }
.hero-phone { margin: 0; }
.hero-phone[data-preview] { cursor: pointer; }
.hero-stage .iphone { --w: 330; }
.js .hero-phone { opacity: 0; transform: perspective(1400px) translateY(60px) rotateX(14deg); }
.js.ready .hero-phone { opacity: 1; transform: none; transition: opacity 1.2s var(--out) .25s, transform 1.6s var(--out) .25s; }

.hero-msg { top: 20px; left: -66px; }
.hero-msg .float-txt span { white-space: nowrap; }
.msg-icon { background: linear-gradient(180deg, #5cf777, #0fbd2c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
/* below the phone's Apple Pay button, never over it */
.hero-wallet { right: -60px; bottom: -30px; }
/* laptops: keep the card inside the screen */
@media (max-width: 1440px) { .hero-wallet { right: -16px; } }
.hero-wallet .secs { display: inline; font-variant-numeric: tabular-nums; color: var(--tx); font-weight: 600; }
.js .hero-msg, .js .hero-wallet { opacity: 0; transform: translateY(16px) scale(.96); }
.js.ready .hero-msg { opacity: 1; transform: none; transition: opacity .8s var(--out) 1.05s, transform 1s var(--bounce) 1.05s; }
.js.ready .hero-wallet { opacity: 1; transform: none; transition: opacity .8s var(--out) 1.35s, transform 1s var(--bounce) 1.35s; }

/* ---------- every ticket comes with ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 380px 340px; gap: 16px; }
.bento .tile { display: flex; flex-direction: column; }
.bento .b-verified { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
.b-chat { grid-row: 1 / span 2; padding-bottom: 0; }
/* the chat phone hangs --over px below the tile and fades out before the edge */
.b-chat .iphone {
  --w: 300; --over: 138px;
  position: absolute; left: 50%; bottom: calc(var(--over) * -1); transform: translateX(-50%); transition: transform .8s var(--expo);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--over) - 96px), transparent calc(100% - var(--over)));
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--over) - 96px), transparent calc(100% - var(--over)));
}
.b-chat:hover .iphone { transform: translate(-50%, -10px); }
.b-price, .b-refund { justify-content: flex-end; }
.b-refund { padding-top: 60px; }
.b-price h3, .b-refund h3 { margin-top: 24px; }
.b-verified { grid-column: 2 / span 2; }
.b-verified-copy { max-width: 25em; }

.price-pair { margin-bottom: auto; display: grid; gap: 8px; }
.price-row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-radius: var(--r-card); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-size: 15px; }
.price-row b { margin-left: auto; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-row + .price-row { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(244,241,234,.5); }
.price-src { min-width: 0; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a plain card chip, the same size as the GA label: not the Apple Pay mark */
.price-ap { display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 34px; padding: 0 8px; border-radius: 6px; background: #fff; color: #000; }
.price-ap svg { width: 14px; height: 14px; }

.note-card { margin-bottom: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 14px 14px; border-radius: 22px; background: rgba(255,255,255,.07); font-family: var(--ios); }
.note-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #0b0a0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.note-icon svg { width: 22px; height: 22px; }
.note-card .float-txt span { margin-top: 2px; }

.verify-card { flex: none; width: 340px; display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-panel); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--sh-float); }
.verify-face { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; background: #1d1a17; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ok); }
.verify-face img { width: 100%; height: 100%; object-fit: cover; }
.verify-txt { min-width: 0; flex: 1; }
.verify-txt b { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.verify-txt b svg { width: 18px; height: 18px; }
.verify-rows { margin-top: 10px; display: grid; gap: 6px; }
.verify-rows span { display: flex; justify-content: space-between; font-size: 14px; color: var(--tx2); }
.verify-rows i { font-style: normal; color: var(--ok); font-weight: 500; }

/* ---------- public parties: a discovery rail ----------
   The town picker sits inside the H2, so the heading reads "Public parties near Blacksburg". js/home.js runs the
   picker and the search; main.js runs the arrows (.rail-head). */
.disc { padding-top: 120px; padding-bottom: 120px; }
.town-pick { position: relative; display: inline-flex; align-items: baseline; white-space: nowrap; color: var(--gold); }
.town-pick select {
  appearance: none; -webkit-appearance: none; field-sizing: content;
  margin: 0; padding: 0 .52em 0 0; border: 0; border-radius: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit;
  border-bottom: 2px solid rgba(217,186,124,.42); transition: border-color .2s var(--ease);
}
.town-pick select:hover { border-bottom-color: var(--gold); }
.town-pick select:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 6px; }
.town-pick option { font-size: 17px; letter-spacing: normal; color: var(--tx); background: #141516; }
.town-chev { position: absolute; right: 0; top: 50%; width: .4em; height: .4em; margin-top: -.12em; pointer-events: none; }

.disc-find { position: relative; z-index: 20; margin-bottom: 12px; }
.search-pill {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; height: 48px; padding: 0 18px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: var(--tx2); cursor: text; transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-pill:hover { background: rgba(255,255,255,.09); }
.search-pill:focus-within { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(244,241,234,.55); color: var(--tx); }
.search-pill svg { width: 18px; height: 18px; flex: none; }
.search-pill input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; appearance: none; color: var(--tx); font: 500 16px/1 var(--font); letter-spacing: -0.01em; }
.search-pill input::placeholder { color: var(--tx3); }
.search-pill input:focus { outline: none; }
.search-pill input::-webkit-search-cancel-button { -webkit-appearance: none; }

.disc-results {
  position: absolute; left: 0; top: calc(100% + 8px); width: min(560px, 100%); max-height: 420px; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: var(--r-panel);
  background: rgba(18,17,20,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), var(--sh-float);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  animation: disc-in .28s var(--out);
}
@keyframes disc-in { from { opacity: 0; transform: translateY(-6px); } }
.disc-results ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.disc-row { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px; border-radius: var(--r-card); text-align: left; transition: background-color .15s var(--ease); }
.disc-row:hover, .disc-row:focus-visible { background: rgba(255,255,255,.07); }
.disc-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.disc-date { width: 56px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,.06); line-height: 1; }
.disc-date span { font-size: 12px; color: var(--tx2); }
.disc-date b { margin: 3px 0 2px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.disc-date i { font-style: normal; font-size: 12px; color: var(--tx3); }
.disc-name { display: block; font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-line { margin-top: 5px; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; color: var(--tx2); white-space: nowrap; }
.disc-line > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.disc-price { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: var(--tx); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.disc-price::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.disc-none { padding: 16px 12px; font-size: 15px; color: var(--tx2); }

/* the rail: 4 cards a view on a laptop, 3 on a tablet, about 2.3 below that, a swipe row on phones.
   It starts flush with the H2 and keeps a gutter of space after the last card. */
.disc-rail { gap: 16px; padding: 14px var(--gut) 28px; }
.disc-rail > li { flex: 0 0 calc((100% - 48px) / 4); }
.disc-rail::after { content: ""; flex: 0 0 1px; margin-left: -1px; }
.disc-rail .flyer-card-art { transition: transform .5s var(--expo), box-shadow .5s var(--expo); }
.disc-rail .flyer-card:hover .flyer-card-art, .disc-rail .flyer-card:focus-visible .flyer-card-art { transform: translateY(-4px); box-shadow: 0 28px 48px -22px rgba(0,0,0,.9); }

/* ---------- hosting band ---------- */
.hosting { padding-top: 0; }
.hosting-grid { display: grid; gap: 48px; }
.hosting-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; }
.hosting-copy .h2, .hosting-copy .lede { grid-column: 1; }
.hosting-cta { grid-column: 2; grid-row: 1 / span 2; }
.hosting-copy .lede { max-width: 30em; }
.hosting-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 6px; }
.photo-band-bg { object-position: 50% 40%; }
/* the three facts are type on the photo, not boxes inside a box */
.hosting .facts > div { padding: 20px 0 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--hair2); }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) 380px; }
  .hero-stage .iphone { --w: 300; }
  .hero-msg { left: -40px; }
  .hero-wallet { right: -24px; bottom: -26px; }
  .bento { grid-template-rows: auto auto; }
  .bento .tile { min-height: 360px; }
  .bento .b-verified { flex-direction: column; align-items: stretch; gap: 28px; }
  .verify-card { width: 100%; max-width: 400px; }
  .price-row { padding: 0 14px; gap: 10px; font-size: 14px; }
  .price-row b { font-size: 18px; }
  .disc-rail > li { flex-basis: calc((100% - 32px) / 3); }
}
/* short laptop windows: the whole phone and the Wallet card stay above the fold */
@media (min-width: 901px) and (max-height: 880px) {
  .hero-in { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; }
  .hero-stage { min-height: 0; }
  .hero-stage .iphone { --w: 290; }
  .hero-wallet { bottom: -40px; }
}
@media (min-width: 901px) and (max-height: 760px) { .hero-stage .iphone { --w: 262; } }
@media (min-width: 901px) and (max-height: 680px) {
  .hero { align-items: start; }
  .hero-in { padding-top: calc(var(--nav-h) + 8px); padding-bottom: 32px; }
  .hero-stage .iphone { --w: 232; }
  .hero-wallet { bottom: -44px; }
}
/* the nowrap line "from the group chat." needs a smaller size in the narrow two-column range */
@media (min-width: 901px) and (max-width: 999px) { .hero h1.display { font-size: 5.05vw; } }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .hero { min-height: 0; display: block; }
  .hero-bg img { object-position: 50% 70%; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(7,6,8,.86) 0%, rgba(7,6,8,.8) 38%, rgba(7,6,8,.5) 62%, rgba(7,6,8,.7) 84%, var(--bg) 100%); }
  .hero-in { grid-template-columns: 1fr; gap: 36px; padding: calc(var(--nav-h) + 36px) var(--gut) 24px; }
  .hero-sub { margin-top: 20px; font-size: 18px; }
  .hero-cta { margin-top: 28px; }
  .hero-foot { margin-top: 24px; }
  .hero-stage { min-height: 0; padding: 8px 0 44px; }
  .hero-stage .iphone { --w: 280; }
  .hero-msg { top: 18px; left: -4px; }
  .hero-wallet { right: -4px; bottom: 2px; }
  .bento { display: flex; flex-direction: column; gap: 12px; }
  .bento .tile { min-height: 300px; }
  .b-chat { height: 600px; }
  .b-chat .iphone { --w: 264; --over: 187px; }
  .bento .b-verified { flex-direction: column; align-items: stretch; }
  .verify-card { width: 100%; }
  .price-pair, .note-card { margin-bottom: 32px; }
  .b-refund { padding-top: 28px; }
  .disc { padding-top: 80px; padding-bottom: 80px; }
  .disc::before {
    -webkit-mask: radial-gradient(120% 60% at 50% 55%, #000 0%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 20%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask: radial-gradient(120% 60% at 50% 55%, #000 0%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 20%, #000 70%, transparent 100%);
            mask-composite: intersect;
  }
  .disc-rail { gap: 12px; }
  .disc-rail > li { flex-basis: calc((100% - 24px) / 2.3); }
  .hosting-copy { display: block; }
  .hosting .facts { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
  .hosting .facts > div { padding: 18px 0; }
  .hosting-copy .lede { margin-top: 16px; }
  .hosting-cta { margin-top: 28px; gap: 18px; }
}
@media (max-width: 600px) {
  /* two lines on a phone: the lines wrap on their own ("Party tickets from / the group chat.") and the whole title fades in */
  .hero h1 { font-size: clamp(38px, 11.5vw, 60px); }
  .hero h1 .ln, .hero h1 .ln > span { display: inline; overflow: visible; padding: 0; margin: 0; }
  .js .hero h1 .ln > span { transform: none; }
  .js .hero h1 { opacity: 0; transform: translateY(16px); }
  .js.ready .hero h1 { opacity: 1; transform: none; transition: opacity .9s var(--out), transform 1s var(--out); }
  .hero-stage .iphone { --w: 270; }
  .hero-msg { padding: 10px 12px 10px 10px; gap: 10px; }
  .hero-msg .float-txt span { font-size: 13.5px; }
  .hero-msg .float-thumb { width: 34px; height: 42px; }
  .hero-wallet { padding: 10px 14px 10px 10px; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-cta .btn, .hosting-cta .btn { width: 100%; }
  .disc-rail > li { flex-basis: min(72%, 260px); }
  .search-pill { max-width: none; }
  /* phones swipe the rail: the arrows would squeeze the title to three lines */
  .disc .rail-head { grid-template-columns: minmax(0, 1fr); }
  .disc .rail-btns { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-phone, .js .hero-msg, .js .hero-wallet, .js .hero h1 { opacity: 1; transform: none; }
  .js .hero-bg img { transform: none; }
}