@import url("fonts/fonts.css");

:root{
  --ink: #f4f1ea;
  --ink-dim: rgba(244,241,234,.62);
  --ink-faint: rgba(244,241,234,.34);
  --bg: #07070b;
  --line: rgba(244,241,234,.14);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.loading{ overflow: hidden; height: 100vh; }

::selection{ background: rgba(255,214,150,.85); color:#0a0a0e; }

/* ---------- canvas + scrim ---------- */

#scene{
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  display: block;
  z-index: 0;
}

/* keeps type legible over the bright centre of the stone */
#scrim{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 38%, rgba(7,7,11,.5) 78%, rgba(7,7,11,.86) 100%),
    linear-gradient(to bottom, rgba(7,7,11,.55), transparent 22%, transparent 76%, rgba(7,7,11,.7));
}

/* ---------- loader ---------- */

#loader{
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .9s var(--ease), visibility .9s;
}
#loader.done{ opacity: 0; visibility: hidden; }

.loader-word{
  display:flex; gap:.36em;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 4.25rem);
  line-height: 1;
}
.loader-word span{
  display:block;
  opacity: 0;
  transform: translateY(.5em);
  animation: rise .9s var(--ease) forwards;
}
.loader-word span:nth-child(1){ animation-delay: .05s }
.loader-word span:nth-child(2){ animation-delay: .12s }
.loader-word span:nth-child(3){ animation-delay: .19s }
.loader-word span:nth-child(4){ animation-delay: .26s }
.loader-word span:nth-child(5){ animation-delay: .33s }
@keyframes rise{ to{ opacity:1; transform:none } }

.loader-bar{
  margin: 1.6rem auto 0;
  width: min(220px, 40vw); height: 1px;
  background: rgba(244,241,234,.16);
  overflow: hidden;
}
.loader-bar i{
  display:block; height:100%; width:0%;
  background: var(--ink);
  transition: width .3s linear;
}

/* ---------- fixed chrome ---------- */

.chrome{
  position: fixed;
  z-index: 5;
  left: var(--gutter); right: var(--gutter);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  mix-blend-mode: difference;
}
header.chrome{ top: clamp(1.1rem, 2.6vw, 2rem); }

.mark{
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}
.mark .dot{ margin-left:.25em; opacity:.55 }

.tagline, .foot p{
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* the footer shares .chrome's typography but not its fixed positioning —
   reset the inset or it sits one gutter past the right edge */
footer.foot{
  position: relative;
  left: auto; right: auto;
  width: 100%;
  z-index: 5;
  mix-blend-mode: normal;
  padding: 0 var(--gutter) clamp(1.1rem, 2.6vw, 2rem);
}
footer.foot p{ color: var(--ink-faint) }

/* ---------- chapter rail ---------- */

.rail{
  position: fixed;
  right: var(--gutter);
  top: 50%; transform: translateY(-50%);
  z-index: 5;
}
.rail ol{ list-style:none; display:grid; gap:1.15rem; }
.rail a{
  display:flex; align-items:center; gap:.7rem;
  justify-content: flex-end;
  text-decoration:none;
  color: var(--ink-faint);
  transition: color .5s var(--ease);
}
.rail em{
  font-family: var(--serif);
  font-style: normal;
  font-size: .8rem;
  order: 2;
  width: 1.9rem; text-align: right;
  letter-spacing: .05em;
}
.rail span{
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(.4rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rail a:hover, .rail a.on{ color: var(--ink); }
.rail a:hover span{ opacity:1; transform:none; }

/* ---------- panels ---------- */

main{ position: relative; z-index: 4; }

.panel{
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 8rem var(--gutter);
}
.panel[data-align="left"]{ justify-items: start }
/* keep right-aligned copy clear of the fixed chapter rail */
.panel[data-align="right"]{ justify-items: end; padding-right: calc(var(--gutter) + 10rem) }

.copy, .hero-copy, .outro-copy{ max-width: 34ch; position: relative; }

/* a soft wash of dark behind every text block, so the copy stays readable
   no matter how bright the stone gets behind it */
.copy::before, .hero-copy::before, .outro-copy::before{
  content: "";
  position: absolute;
  inset: -26% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(5,5,10,.74), rgba(5,5,10,.34) 58%, transparent 78%);
}
.panel[data-align="right"] .copy{ text-align: right }
.panel[data-align="right"] .note{ border-left: 0; border-right: 1px solid var(--line); padding: 0 1rem 0 0 }

.eyebrow, .num{
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.4rem;
}

h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 9.5vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.015em;
}
h1 em{ font-style: italic; color: #ffe6bd; }

h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: 1.5rem;
}

.hero{ align-content: center; justify-items: start; }
.hero-copy{ max-width: 32ch; }
.hero .eyebrow{ white-space: nowrap; }
.lede{
  margin-top: 1.8rem;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-dim);
}

.copy p{
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.75;
  color: var(--ink-dim);
}
.copy p em{ font-family: var(--serif); font-size: 1.15em; color: var(--ink); font-style: italic; }

.note{
  margin-top: 1.9rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
  font-size: .8rem !important;
  line-height: 1.7 !important;
  color: var(--ink-dim) !important;
}
.note span{
  display:block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #ffe6bd;
  margin-bottom: .35rem;
  letter-spacing: .01em;
}

/* ---------- scroll hint ---------- */

.scroll-hint{
  position: absolute;
  bottom: clamp(2rem, 6vh, 4rem);
  left: var(--gutter);
  align-items: flex-start !important;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-hint i{
  display:block; width:1px; height:44px;
  background: linear-gradient(to bottom, transparent, var(--ink-faint));
  animation: drip 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drip{
  0%{ transform: scaleY(0); opacity:0 }
  35%{ transform: scaleY(1); opacity:1 }
  75%{ transform: scaleY(1); opacity:1 }
  100%{ transform: scaleY(1) translateY(44px); opacity:0 }
}

/* ---------- outro ---------- */

.outro{ justify-items: center; text-align: center; align-items: end; padding-bottom: 12vh; }
.outro-copy{ max-width: 30ch }
.outro-copy::before{ background: radial-gradient(52% 52% at 50% 46%, rgba(5,5,10,.82), rgba(5,5,10,.4) 58%, transparent 78%) }
.outro p{ color: var(--ink-dim); line-height:1.7 }
.keys{
  margin-top: 2.4rem;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  flex-wrap: wrap;
  font-size: .6rem; letter-spacing:.2em; text-transform: uppercase; color: var(--ink-faint);
}
.keys kbd{
  font-family: var(--sans); font-size:.6rem; letter-spacing:.16em;
  border: 1px solid var(--line); border-radius: 100px;
  padding: .4rem .8rem; color: var(--ink-dim);
}
.keys span + kbd{ margin-left: .8rem }

/* ---------- reveals ---------- */

.reveal{
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.in .reveal{ opacity:1; transform:none }
.in .reveal:nth-child(2){ transition-delay: .09s }
.in .reveal:nth-child(3){ transition-delay: .18s }
.in .reveal:nth-child(4){ transition-delay: .27s }

/* ---------- custom cursor ---------- */

#cursor{
  position: fixed; top:0; left:0; z-index: 80;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
#cursor i{
  display:block;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
#cursor.on{ opacity: 1 }
#cursor.press i{ transform: scale(.55) }

@media (pointer:coarse), (hover:none){ #cursor{ display:none } }

/* ---------- touch drag surface ---------- */

/* Sits over the stone on the closing panel only, above main so it wins the
   touch. touch-action:none stops the browser turning the drag into a scroll;
   everything below 48vh stays scrollable so you can still get back up. */
#grab{
  position: fixed;
  left: 0; right: 0;
  top: 5vh; height: 43vh;
  z-index: 6;
  pointer-events: none;
  touch-action: none;
}
body.can-grab #grab{ pointer-events: auto; }

/* desktop drags never scroll the page, so the surface is only needed here */
@media (min-width: 861px){ #grab{ display: none } }

/* ---------- responsive ---------- */

@media (max-width: 860px){
  :root{ --gutter: 1.35rem }
  .rail{ display:none }
  /* stone takes the top of the frame, copy sits in the lower half */
  .panel{ align-items: end; padding: 46vh var(--gutter) 5rem; min-height: 100svh }
  .panel[data-align="right"]{ justify-items: start; padding-right: var(--gutter) }
  .panel[data-align="right"] .copy{ text-align: left }
  .panel[data-align="right"] .note{ border-right:0; border-left:1px solid var(--line); padding: 0 0 0 1rem }
  .copy, .hero-copy, .outro-copy{ max-width: none }
  .outro{ justify-items: start; text-align: left; padding-bottom: 5rem }
  .keys{ justify-content: flex-start }
  h1{ font-size: clamp(2.9rem, 15vw, 4.6rem) }
  h2{ font-size: clamp(2.1rem, 11vw, 3.2rem) }

  /* the copy needs a real floor of shadow under it at this size */
  #scrim{
    background: linear-gradient(to bottom,
      rgba(7,7,11,.55) 0%, transparent 20%, transparent 40%,
      rgba(7,7,11,.72) 62%, rgba(7,7,11,.94) 82%);
  }
  .copy::before, .hero-copy::before, .outro-copy::before{ display: none }

  header.chrome{ flex-direction: column; gap:.3rem; align-items: flex-start }
  footer.foot{ flex-direction: column; gap:.35rem; align-items: flex-start }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  .reveal{ transition-duration: .01ms }
  .scroll-hint i{ animation: none }
  .loader-word span{ animation-duration: .01ms }
}