/* Hero, intro, sheet deck. */

.at-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--white); text-align: center;
  overflow: hidden;
}
.at-hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  will-change: clip-path;
}
.at-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 72% 50% at 50% 46%, rgb(7 5 3 / .5), transparent 72%),
    linear-gradient(to bottom, rgb(7 5 3 / .2), rgb(7 5 3 / .28) 42%, rgb(7 5 3 / .58));
}
.at-hero__copy { position: relative; z-index: 2; padding: 4rem var(--gutter) 2rem; margin-top: -6vh; }
.at-hero h1 { text-shadow: 0 2px 24px rgb(7 5 3 / .25); }
.at-hero__sub { margin-top: 1.2rem; font-size: 1.15rem; }
.at-hero__tick {
  margin-top: 0.85rem; min-height: 1.4em;
  font: 400 var(--micro)/1.4 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.03em; opacity: .82;
}
.at-hero__cta { position: relative; z-index: 2; margin: 2.2rem 0 3rem; }

.at-intro {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 10rem var(--gutter) 6rem;
}
.at-intro__mark { width: 48px; height: 48px; margin-bottom: 2rem; }
.at-intro h2 { max-width: 16ch; }

/* Deck: no-js / reduced-motion = stacked sections.
   js = tall pin wrapper; sheets are sticky stages. */
.at-deck { position: relative; }
.at-sheet {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  padding: 2rem var(--gutter) 4rem;
}
.at-sheet__media {
  border-radius: var(--r-sheet);
  overflow: hidden;
  background: var(--stone);
  aspect-ratio: 16 / 10;
}
.at-sheet__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
}
.at-sheet__cap { max-width: 28rem; }
.at-sheet__cap p { margin-top: 0.6rem; color: var(--quiet); }

html.js .at-deck { height: 450vh; }
html.js .at-sheet {
  position: sticky; top: 0;
  height: 100svh; min-height: 100svh;
  display: block;
  padding: 0;
  background: transparent;
}
html.js .at-sheet:nth-child(1) { z-index: 1; }
html.js .at-sheet:nth-child(2) { z-index: 2; }
html.js .at-sheet:nth-child(3) { z-index: 3; }
html.js .at-sheet__media {
  position: absolute;
  left: 50%; top: 50%;
  width: min(72vw, 860px);
  height: min(64svh, 620px);
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  aspect-ratio: auto;
  box-shadow: 0 24px 80px rgb(26 22 19 / .12);
  will-change: transform;
}
html.js .at-sheet__cap {
  position: absolute; top: 50%;
  left: var(--gutter); width: min(22rem, 28vw);
  transform: translateY(-50%);
}
html.js .at-sheet:nth-child(even) .at-sheet__cap {
  left: auto; right: var(--gutter);
}

@media (max-width: 800px) {
  html.js .at-sheet,
  html.js .at-sheet:nth-child(even) {
    grid-template-columns: 1fr;
    align-content: center;
  }
  html.js .at-sheet:nth-child(even) .at-sheet__cap { order: 0; }
  html.js .at-sheet__media { height: 42svh; }
}