/* The holding page. It sits on top of main.css and only adds what that page
   needs: a slow moving background, a headline that changes a word, a
   countdown, a ticker, and blocks that arrive as you scroll.

   Everything that moves is off when the reader has asked for less movement. */

body.curtain { display: block; }
.curtain #main, .curtain .cu-top, .curtain .site-footer {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
  position: relative; z-index: 1;
}

/* ---------- the background ---------- */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .30;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 65%);
  animation: drift 34s ease-in-out infinite;
}
.aurora span:nth-child(1) { width: 46rem; height: 46rem; top: -16rem; left: -12rem; }
.aurora span:nth-child(2) { width: 34rem; height: 34rem; top: 18rem; right: -14rem; animation-duration: 46s; animation-direction: reverse; opacity: .20; }
.aurora span:nth-child(3) { width: 30rem; height: 30rem; top: 62rem; left: 20%; animation-duration: 58s; opacity: .14; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
  66%      { transform: translate3d(-4rem, 7rem, 0) scale(.94); }
}

/* ---------- the top line ---------- */
.cu-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; }
.cu-top .brand { font-size: 1.125rem; }
.cu-top .brand-mark { width: 1.75rem; height: 1.75rem; }
.cu-top-note { margin: 0; color: var(--muted-fg); font-size: .875rem; }

/* ---------- the hero ----------
   The top of the page is the only part most people will ever look at, so it
   carries the whole argument: the headline and the countdown on the left, and
   on the right a shop of somebody's own, running. Nothing here is a
   photograph; it is drawn, so it costs nothing and never looks stale. */
.cu-hero {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 1rem 3rem; align-items: center; padding: 2.5rem 0 3rem;
}
.cu-hero-say { max-width: 34rem; }
.cu-hero h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em;
  font-weight: 800; margin: 0 0 1.125rem;
}
/* One word in the headline changes every few seconds. The block is as wide as
   the longest word so the line below never jumps. */
.cu-swap { display: inline-grid; vertical-align: bottom; color: var(--accent); justify-items: start; }
.cu-swap > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(.45em);
  animation: swap 15s cubic-bezier(.2,.7,.2,1) infinite;
}
.cu-swap > span:nth-child(1) { animation-delay: 0s; }
.cu-swap > span:nth-child(2) { animation-delay: 3s; }
.cu-swap > span:nth-child(3) { animation-delay: 6s; }
.cu-swap > span:nth-child(4) { animation-delay: 9s; }
.cu-swap > span:nth-child(5) { animation-delay: 12s; }
@keyframes swap {
  0%    { opacity: 0; transform: translateY(.45em); }
  3%,18% { opacity: 1; transform: translateY(0); }
  21%,100% { opacity: 0; transform: translateY(-.45em); }
}
.cu-hero .lede { font-size: 1.0625rem; color: var(--muted-fg); margin: 0 0 1.75rem; }
.cu-hero .actions { margin-top: 1.75rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- the shop on the right ---------- */
.cu-show { position: relative; }
.cu-win {
  background: var(--panel); border-radius: var(--panel-radius); box-shadow: var(--shadow-panel);
  overflow: hidden; animation: float 9s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.55rem); } }
.cu-bar { display: flex; align-items: center; gap: .375rem; padding: .75rem .875rem; background: var(--well); }
.cu-bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--border); }
.cu-url {
  margin: 0 0 0 .625rem; padding: .1875rem .625rem; border-radius: 999px; background: var(--panel);
  color: var(--muted-fg); font-size: .75rem;
}
.cu-shop { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.125rem; padding: 1.125rem; align-items: center; }
.cu-thumb {
  aspect-ratio: 1; border-radius: var(--radius); display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent-container), var(--well));
}
.cu-thumb svg { width: 68%; fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.cu-name { margin: 0 0 .25rem; font-weight: 600; font-size: 1rem; color: var(--fg); }
.cu-price { margin: 0 0 .375rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fg); }
.cu-note { margin: 0 0 .875rem; font-size: .8125rem; color: var(--muted-fg); }
.cu-buy {
  display: inline-block; padding: .5rem 1rem; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .875rem;
}

/* The day going on around the shop: one card at a time, on a loop. */
.cu-toasts { position: relative; height: 4.5rem; margin-top: 1rem; }
.cu-toast {
  position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateX(1.5rem);
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-panel);
  padding: .75rem .875rem; animation: toast 13.5s cubic-bezier(.2,.7,.2,1) infinite;
}
.cu-toast:nth-child(1) { animation-delay: .6s; }
.cu-toast:nth-child(2) { animation-delay: 5.1s; }
.cu-toast:nth-child(3) { animation-delay: 9.6s; }
.cu-toast strong { display: block; font-size: .9375rem; }
.cu-toast span { display: block; font-size: .8125rem; color: var(--muted-fg); }
@keyframes toast {
  0%              { opacity: 0; transform: translateX(1.5rem); }
  4%, 29%         { opacity: 1; transform: translateX(0); }
  33%, 100%       { opacity: 0; transform: translateX(-1rem); }
}

/* ---------- the countdown ---------- */
.cu-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; max-width: 34rem; }
.cu-cell {
  background: var(--panel); border-radius: var(--panel-radius); box-shadow: var(--shadow-panel);
  padding: 1rem .5rem; text-align: center;
}
.cu-cell strong {
  display: block; font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cu-cell span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-fg); }
.cu-cell.tick strong { animation: tick .45s ease-out; }
@keyframes tick { from { transform: translateY(-.22em); opacity: .35; } to { transform: none; opacity: 1; } }
.cu-count-say { color: var(--muted-fg); margin: .875rem 0 0; max-width: 34rem; font-size: .9375rem; }
.cu-count-say strong { color: var(--fg); }

/* ---------- the ticker ---------- */
.cu-ticker { overflow: hidden; border-block: 1px solid var(--border); padding: .875rem 0; margin: 1rem 0 3rem; position: relative; z-index: 1; }
.cu-ticker-run { display: flex; gap: 1.5rem; width: max-content; animation: run 64s linear infinite; }
.cu-ticker-run span { color: var(--muted-fg); font-size: .9375rem; white-space: nowrap; }
.cu-ticker-run span:nth-child(2n) { color: var(--accent); }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- the numbers ---------- */
.cu-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem; }
.cu-number strong {
  display: block; font-size: clamp(2.5rem, 7vw, 3.75rem); font-weight: 800; letter-spacing: -0.03em;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1;
}
.cu-number span { display: block; color: var(--muted-fg); margin-top: .375rem; }

/* ---------- the cards ---------- */
.cu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }
.cu-grid .panel h3, .cu-two .panel h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 .5rem; }
.cu-grid .panel p, .cu-two .panel p { color: var(--muted-fg); margin: 0; }
.cu-grid .panel { transition: transform .25s ease, box-shadow .25s ease; }
.cu-grid .panel:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 28px 52px -26px rgba(0,0,0,.95); }

.cu-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; max-width: 44rem; }
.cu-price { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--fg) !important; margin: 0 0 .25rem !important; }

.cu-beta .panel { max-width: 44rem; }
.cu-beta .section-title { margin-top: .25rem; }

/* the switch on the form */
.notify-beta { margin: 0 0 1.125rem; align-items: flex-start; }
.notify-beta > span:last-child { color: var(--muted-fg); }

/* ---------- arriving as you scroll ---------- */
.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.seen { opacity: 1; transform: none; }
.no-js .reveal, .reveal.seen { opacity: 1; transform: none; }

.curtain .section { padding: 2.5rem 0; }
.curtain .site-footer { padding-top: 2rem; }

@media (max-width: 980px) {
  .cu-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .cu-hero-say { max-width: none; }
  .cu-show { max-width: 30rem; }
}
@media (max-width: 560px) {
  .cu-count { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-top-note { display: none; }
  .cu-shop { grid-template-columns: 6.5rem 1fr; gap: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span, .cu-ticker-run, .cu-win { animation: none !important; }
  .cu-toast { animation: none !important; opacity: 0; }
  .cu-toast:first-child { opacity: 1; transform: none; }
  .cu-swap > span { animation: none !important; opacity: 0; }
  .cu-swap > span:first-child { opacity: 1; transform: none; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cu-cell.tick strong { animation: none !important; }
  .cu-grid .panel:hover { transform: none; }
}