/* The landing page on a phone. See the note at the top of index.html for why this
   exists and what it replaces. Paths are relative to the site root. */
@font-face{font-family:Anton;src:url('/peak_to_particle/assets/fonts/Anton-Regular.woff2') format('woff2');
           font-weight:400;font-display:swap}
@font-face{font-family:MontserratVar;src:url('/peak_to_particle/assets/fonts/Montserrat-Variable.woff2') format('woff2');
           font-weight:100 900;font-display:swap}

:root{
  --ink:#0b0d0e;
  --paper:#edf0f2;
  --display:Anton,Impact,sans-serif;
  --type:MontserratVar,Montserrat,Arial,sans-serif;
  --rail:22px;
  --header:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--type);
  overflow-x:hidden;
}

/* ---------------------------------------------------------------- the frames */

/* One picture, one line, one screen. Nothing is fixed or transformed on scroll, because a
   phone scrolls a page of ordinary blocks better than it scrolls anything clever. */
.fr{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--header) var(--rail) clamp(56px,9svh,88px);
  overflow:hidden;
  isolation:isolate;
}
.fr img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* The type sits on the lower third of every frame, so the wash only has to darken the
   part it actually sits on. The picture keeps its top two thirds clean. */
.fr::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(237,240,242,0) 34%,
    rgba(237,240,242,.62) 58%,
    rgba(237,240,242,.94) 78%,
    rgb(237,240,242) 100%);
}

.fr h1,.fr h2{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,8.6vw,42px);
  line-height:1.04;
  letter-spacing:0;
  text-wrap:balance;
}
.fr p{
  margin:14px 0 0;
  max-width:31em;
  font-size:16px;
  font-weight:450;
  line-height:1.55;
}

/* The reveal. Opacity and a 14px lift, nothing else: a phone composites those on the GPU
   without touching layout. Driven by an IntersectionObserver, so there is no scroll
   handler running on the main thread. */
.rise{opacity:0;transform:translateY(14px);
      transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.is-in .rise{opacity:1;transform:none}
.is-in .rise:nth-child(2){transition-delay:.10s}
.is-in .rise:nth-child(3){transition-delay:.18s}

/* ---------------------------------------------------------------- the rail */

/* The descent, read as a number. Fixed, hairline, and the only ornament on the page. */
.alt{
  position:fixed;
  left:var(--rail);
  top:0;
  bottom:0;
  width:1px;
  z-index:6;
  background:linear-gradient(180deg,
    rgba(11,13,14,0) 0,
    rgba(11,13,14,.20) 16%,
    rgba(11,13,14,.20) 84%,
    rgba(11,13,14,0) 100%);
  pointer-events:none;
}
.alt__dot{
  position:absolute;
  left:-2px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--ink);
  transform:translateY(-50%);
  transition:top .45s cubic-bezier(.22,.61,.36,1);
}
.alt__read{
  position:fixed;
  left:calc(var(--rail) + 12px);
  z-index:6;
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.16em;
  color:var(--ink);
  opacity:.62;
  white-space:nowrap;
  pointer-events:none;
  transform:translateY(-50%);
  transition:top .45s cubic-bezier(.22,.61,.36,1),opacity .35s ease;
}

/* ---------------------------------------------------------------- the close */

.close{
  padding:clamp(64px,10svh,96px) var(--rail) clamp(48px,7svh,72px);
  background:var(--paper);
}
.close h2{
  margin:0 0 20px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,8.6vw,42px);
  line-height:1.04;
  text-wrap:balance;
}
.close p{
  margin:0 0 16px;
  font-size:16px;
  font-weight:450;
  line-height:1.6;
}
.close p:last-of-type{margin-bottom:0}
.close a{color:inherit;text-decoration:underline;text-underline-offset:3px;
         text-decoration-color:rgba(11,13,14,.34)}
.close em{font-style:italic}

/* The five applications. A list, because that is what five equal things are. The chip grid
   this replaces was two columns with a fifth chip stranded alone on the last row. */
.apps{
  margin:clamp(30px,5svh,44px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(11,13,14,.16);
}
.apps a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:60px;
  padding:4px 0;
  border-bottom:1px solid rgba(11,13,14,.16);
  font-family:var(--display);
  font-size:23px;
  font-weight:400;
  text-decoration:none;
  color:var(--ink);
}
.apps span{
  font-family:var(--type);
  font-size:11px;
  font-weight:650;
  letter-spacing:.14em;
  opacity:.5;
}

.cue{
  margin-top:26px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.18em;
  opacity:.55;
}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .alt__dot,.alt__read{transition:none}
}