/* The intro (assets/intro.js): "Coffee at 6" written by hand on
   paper, word by word, then the paper lifts onto the site. Once per
   visit; any tap or key skips it. */

/* Until intro.js mounts, cover the page so it doesn't flash first. If the
   script never arrives, the cover lifts on its own. */
html.c6-intro::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483646; background: var(--paper, #f7f5f2);
  animation: c6-cover-out 0.4s ease 2.5s forwards;
}
@keyframes c6-cover-out { to { opacity: 0; visibility: hidden; } }
html.c6-intro-on { overflow: hidden; }

.c6i {
  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center; cursor: pointer;
  background: var(--paper, #f7f5f2); color: #1d1c22;
  -webkit-tap-highlight-color: transparent;
}
.c6i.is-leaving { animation: c6i-lift 0.7s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
@keyframes c6i-lift { to { opacity: 0; transform: translateY(-3vh); } }

/* The pen writes where --pen is: ink up to it, a short wet edge, then
   nothing. intro.js moves it at a hand's pace, pausing between words. */
.c6i-name {
  --pen: 0px;
  margin: 0; padding: 0.32em 0.3em 0.38em; translate: 0 -3vh;
  font: 400 clamp(64px, 15vw, 132px)/1 "Rustic Roadway", "Archivo", system-ui, sans-serif;
  letter-spacing: -0.02em; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--pen) - 0.12em), transparent var(--pen));
  mask-image: linear-gradient(90deg, #000 calc(var(--pen) - 0.12em), transparent var(--pen));
}

.c6i-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  padding: 10px 16px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.05); color: #55545c;
  font: 650 14px/1 "Archivo", system-ui, sans-serif; cursor: pointer; opacity: 0; animation: c6i-in 0.4s 0.9s forwards;
}
.c6i-skip:hover { background: rgba(0, 0, 0, 0.09); }
@keyframes c6i-in { to { opacity: 1; } }

/* Reduced motion: the name, already written, then a fade. */
@media (prefers-reduced-motion: reduce) {
  .c6i-name { -webkit-mask-image: none; mask-image: none; }
  .c6i-skip { animation: none; opacity: 1; }
  .c6i.is-leaving { animation: c6i-fade 0.4s ease forwards; }
  @keyframes c6i-fade { to { opacity: 0; } }
}