/* The marketplace home (js/pages/home.js): a featured carousel from edge to edge on the tint, the Founders mint, how
   it works in three pictures, rails of drop cards and every drop. No color but the art's. */

/* What the site is, in one line, over the carousel, with the way to every drop. */
.home-page .home-intro { text-align: center; padding: var(--page-top) 0 48px; }
.home-page .home-intro h1 { margin: 0 0 14px; font-size: var(--display); line-height: 1.05; letter-spacing: -.045em; }
.home-page .home-intro p { max-width: 36rem; margin: 0 auto 28px; color: var(--muted); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.4; text-wrap: pretty; }

/* The carousel: a grey band as wide as the screen (home.js sets its width and margin) and about as high, slides
   stacked in one cell that fade into each other, and under them the controls. On a desktop the art is a square
   as high as the band allows, beside the words; --art is its side. A narrow screen held upright gets a lower band,
   so the art, held back by the width, doesn't float in grey. */
.home-page .hero { --hero-h: max(560px, min(76vh, 720px, calc(46vw + 200px))); --art: min(calc(var(--hero-h) - 136px), 46vw, 640px);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: var(--hero-h); background: var(--tint); overflow: hidden; }
.home-page .hero-slides { display: grid; min-height: 0; touch-action: pan-y; }
.home-page .hero-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--art); align-items: center; gap: 64px; width: 100%; max-width: 1120px; min-height: 0; margin: 0 auto;
  padding: 48px max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left));
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
.home-page .hero-slide.on { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; }
.home-page .hero.single .hero-slide { padding-bottom: 48px; }   /* one slide: no controls, the same room above and below */
.home-page .hero-art { width: var(--art); height: var(--art); display: grid; place-items: center; background: #fff; border-radius: var(--radius); overflow: hidden; transform: scale(.985); transition: transform 1.2s cubic-bezier(.32, .72, 0, 1); }
.home-page .hero-slide.on .hero-art { transform: none; }
.home-page .hero-art canvas { display: block; image-rendering: pixelated; }
.home-page .hero-text { min-width: 0; }
.home-page .hero-eyebrow { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.home-page .hero-eyebrow:empty { display: none; }
.home-page .hero-name { margin: 0; font-size: var(--display); line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
.home-page .hero-sub { margin: 10px 0 0; font-size: clamp(17px, 1.8vw, 21px); color: var(--muted); }
.home-page .hero-sub:empty { display: none; }
.home-page .hero-price { margin: 32px 0 0; font-size: var(--t-l); color: var(--muted); font-variant-numeric: tabular-nums; }
.home-page .hero-price b { margin-right: 2px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.home-page .hero-price span { white-space: nowrap; }
.home-page .hero-price span:first-child { font-size: 28px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); } /* ETH alone, with no dollar rate */
/* How many of the 100 are minted: a thin bar with the count beside it. */
.home-page .hero-progress { display: flex; align-items: center; gap: 14px; max-width: 360px; margin-top: 14px; }
.home-page .hero-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.home-page .hero-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ink); transition: width .8s ease; }
.home-page .hero-count { font-size: var(--t-m); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-page .hero-cta { margin: 32px 0 0; }

/* Under the slides: previous, the dots, next, pause. White on the grey, the open dot a pill that fills while it waits. */
.home-page .hero-nav { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 24px 22px 28px; }
.home-page .hero-nav > button { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink); }
.home-page .hero-nav > button:hover { background: var(--tint-2); }
.home-page .hero-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-page .hero-pause svg { width: 16px; height: 16px; stroke-width: 2.2; }
.home-page .hero-pause svg path[d^="M8.5"] { fill: currentColor; stroke-width: 1.4; }
.home-page .hero-dots { display: flex; align-items: center; min-width: 0; height: 36px; padding: 0 8px; border-radius: var(--pill); background: var(--bg); }
.home-page .hero-dot { display: grid; place-items: center; height: 36px; padding: 0 5px; background: none; border-radius: var(--pill); }
.home-page .hero-dot:hover { background: none; }
.home-page .hero-dot span { position: relative; display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .22); overflow: hidden; transition: width .4s cubic-bezier(.32, .72, 0, 1), background .15s; }
.home-page .hero-dot:hover span { background: rgba(0, 0, 0, .4); }
.home-page .hero-dot[aria-current=true] span { width: 32px; background: rgba(0, 0, 0, .22); }
.home-page .hero-dot i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; opacity: 0; }
.home-page .hero-dot[aria-current=true] i { opacity: 1; }
.home-page .hero-dot:focus-visible { outline-offset: -2px; }

/* While the drops load, and when they can't be read. */
.home-page .hero-skel .hero-text b { display: block; width: 34%; height: 18px; margin-top: 18px; border-radius: 9px; background: var(--tint-2); animation: pulse 1.2s ease-in-out infinite; }
.home-page .hero-skel .hero-text b:nth-child(2) { width: 82%; height: 64px; border-radius: 16px; }
.home-page .hero-skel .hero-text b:nth-child(4) { width: 120px; height: 48px; margin-top: 40px; border-radius: var(--pill); }
.home-page .hero-skel .hero-art { background: var(--tint-2); transform: none; animation: pulse 1.2s ease-in-out infinite; }
.home-page .hero-msg { grid-template-columns: minmax(0, 1fr); text-align: center; color: var(--muted); }
.home-page .rail.home-skel h2 { width: 180px; height: 30px; border-radius: 8px; background: var(--tint-2); animation: pulse 1.2s ease-in-out infinite; }
.home-page .rail.home-skel .rail-arrows { display: none; }

.home-page .home-note .notice { margin: 40px 0 0; }
.home-page .home-founders p { text-wrap: balance; }
.home-page .home-founders .cta { margin-top: 32px; }

/* How it works: three headings, each over its picture on white in a grey card, the pictures lined up at the foot. */
.home-page .how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.home-page .how-steps li { display: flex; flex-direction: column; background: var(--tint); border-radius: var(--radius); padding: 28px 10px 10px; }
.home-page .how-steps h3 { flex: 1; margin: 0 14px 24px; font-size: clamp(21px, 2.1vw, 24px); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.home-page .how-art { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: var(--radius-s); overflow: hidden; }
.home-page .how-art canvas { display: block; image-rendering: pixelated; }
/* A picture too big for one screen pixel per art pixel (home.js fitMosaic) is scaled down smoothly. */
.home-page canvas.soft { image-rendering: auto; }

/* A phone: the art on top, three across and two down, the words under it; the band is as high as they are. */
@media (max-width: 640px) {
  .home-page .hero { height: auto; }
  .home-page .hero-slide { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 20px; padding: 16px 16px 0; }
  .home-page .hero-art { order: -1; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 18px; }
  .home-page .hero-eyebrow { margin-bottom: 6px; font-size: var(--t-m); }
  .home-page .hero-name { font-size: clamp(2rem, 9.6vw, 2.6rem); }
  .home-page .hero-sub { margin-top: 6px; font-size: 17px; }
  .home-page .hero-price { margin-top: 18px; font-size: var(--t-m); }
  .home-page .hero-price b { font-size: 24px; }
  .home-page .hero-price span:first-child { font-size: 24px; }
  .home-page .hero-progress { margin-top: 10px; }
  .home-page .hero-cta { margin-top: 22px; }
  .home-page .hero-nav { padding: 24px 16px; }
  .home-page .hero.single .hero-slide { padding-bottom: 32px; }
  .home-page .hero-skel .hero-text b:nth-child(2) { height: 44px; }
  .home-page .hero-msg { padding-block: 64px; }
  /* The three steps in a row that scrolls sideways, like the rails, running to the screen's edges. */
  .home-page .how-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .home-page .how-steps::-webkit-scrollbar { display: none; }
  .home-page .how-steps li { scroll-snap-align: start; border-radius: 18px; padding: 22px 8px 8px; }
  .home-page .how-steps h3 { margin: 0 10px 18px; font-size: var(--t-xl); }
}
/* Fingers: the dots are as wide and as high as a fingertip (44 points), so they stand further apart; a swipe and
   the dots do what previous and next do. Pause and See all reach further than they show. On a screen under 314 px
   (a big zoom) the dots give up some width, so the controls still fit. */
@media (pointer: coarse) {
  .home-page .hero-nav > .hero-prev, .home-page .hero-nav > .hero-next { display: none; }
  .home-page .hero-dot { position: relative; width: 44px; min-width: 0; }
  .home-page .hero-dot::after { content: ""; position: absolute; inset: -4px 0; }
  .home-page .hero-pause { position: relative; }
  .home-page .hero-pause::after { content: ""; position: absolute; inset: -4px; }
  .home-page .rail .rail-all { padding: 11px 8px; margin: -11px -8px -11px auto; }
}
@media (prefers-reduced-motion: reduce) { .home-page .hero-art { transform: none; } }