/* ==========================================================================
   Praxis landing page
   --------------------------------------------------------------------------
   Theme lock ....... light is the default, the WHOLE page flips together via
                      prefers-color-scheme. No section inverts on its own. The
                      single deliberate exception is .closer, which is an ink
                      colour block in both modes (documented, once per page).
   Accent lock ...... one accent, --accent. Violet steps UP in dark mode rather
                      than inverting, because a saturated dark violet has almost
                      no luminance separation from a near-black canvas.
   Ramp ............. the violet/magenta/orange/amber refraction ramp is BRAND
                      IDENTITY ONLY. It appears in the mark and in the closer
                      beam. It is never a UI accent, never a button, never text.
   Radius system .... pill for interactive, 14px for cards and media, 10px for
                      inputs and small chips. Nothing else.
   ========================================================================== */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* surfaces */
  --paper: #fbfafc;
  --surface: #ffffff;
  --surface-2: #f4f3f6;
  --surface-3: #edecf1;

  /* ink */
  --ink: #14121a;
  --fg: #1c1a24;
  --fg-2: #56525f;
  /* --fg-3 is AA on --surface-2, which is the tightest surface it lands on
     (sprawl, integrations, stack shots). 4.66:1 there, 4.95:1 on paper. */
  --fg-3: #706b7b;

  /* lines */
  --line: #e5e3ea;
  --line-strong: #d3d0da;

  /* the one accent */
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-soft: #f4effe;
  --on-accent: #ffffff;

  /* refraction ramp: identity surfaces only */
  --ramp-deep: #5b21b6;
  --ramp-glow: #c026d3;
  --ramp-warm: #f97316;
  --ramp-hot: #fbbf24;

  /* radius system */
  --r-card: 14px;
  --r-input: 10px;
  --r-pill: 999px;

  /* rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(4.5rem, 9vw, 8rem);
  --maxw: 1200px;

  --shadow-card: 0 1px 2px rgb(20 18 26 / 0.04), 0 8px 24px -12px rgb(20 18 26 / 0.12);
  --shadow-lift: 0 2px 4px rgb(20 18 26 / 0.05), 0 24px 56px -20px rgb(20 18 26 / 0.22);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100e15;
    --surface: #17151d;
    --surface-2: #1e1b26;
    --surface-3: #262231;

    --ink: #0a090d;
    --fg: #f2f0f5;
    --fg-2: #a8a3b3;
    /* same rule in dark: AA against --surface-2 #1e1b26, not just the canvas */
    --fg-3: #8b8598;

    --line: #2a2634;
    --line-strong: #3b3648;

    /* steps UP, does not invert */
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --accent-soft: #221c33;
    --on-accent: #16121f;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.35), 0 24px 56px -20px rgb(0 0 0 / 0.65);

    color-scheme: dark;
  }
}

/* ---------- reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-input);
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- type ---------- */

/* Scale is planned around the headline LENGTH, not picked for drama. The hero
   line is 8 words, so it sits in the mid range. At 4.15rem it broke to three
   lines at 1440, which is a font-size error rather than a copy-length one. */
.display {
  font-size: clamp(2.2rem, 3.9vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 560;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 550;
  text-wrap: balance;
}

.h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 550;
}

.lede {
  font-size: clamp(1.06rem, 1.65vw, 1.24rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.body { color: var(--fg-2); max-width: 62ch; text-wrap: pretty; }

.eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

.accent-text { color: var(--accent); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  padding: 0.8rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.12s var(--ease), color 0.2s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--fg-3);
}

.btn-lg { padding: 0.95rem 1.85rem; font-size: 1rem; }

/* on the ink closer block */
.on-ink .btn-primary { background: #ffffff; color: #14121a; }
.on-ink .btn-primary:hover { background: #e9e6f0; }
.on-ink .btn-ghost { color: #f2f0f5; border-color: rgb(255 255 255 / 0.28); }
.on-ink .btn-ghost:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.5); }

/* ==========================================================================
   nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav[data-stuck='true'] { border-bottom-color: var(--line); }

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav-in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  margin-right: auto;
}

/* The mark sits on a tile, the way the product presents it on the sign-in
   screen. Bare on white the stem plus hollow prism reads as a flag rather than
   a P; the tile plus glow is what makes it resolve at nav size. */
.brand-tile {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background:
    radial-gradient(72% 82% at 76% 34%, color-mix(in srgb, var(--ramp-glow) 62%, transparent), transparent 72%),
    radial-gradient(56% 64% at 92% 66%, color-mix(in srgb, var(--ramp-warm) 46%, transparent), transparent 74%),
    var(--ink);
  display: grid;
  place-items: center;
}

.brand-tile svg {
  width: 19px;
  height: 19px;
  color: #fbfafc;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.925rem;
  color: var(--fg-2);
}

.nav-links a { transition: color 0.18s var(--ease); }
.nav-links a:hover { color: var(--fg); }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* ==========================================================================
   hero  (layout family: asymmetric split)
   ========================================================================== */

.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-grid {
    /* The copy column gets the larger share. The media bleeds past the right
       edge anyway, so narrowing it costs nothing and buys the headline the
       width it needs to hold two lines. */
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.hero-copy { max-width: 37rem; }

.hero h1 { margin-bottom: 1.15rem; }

.hero .lede { margin-bottom: 2rem; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* hero media: real screenshot, bleeds off the right edge on wide viewports */
.hero-media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  background: var(--surface);
}

.hero-media img { width: 100%; }

@media (min-width: 1000px) {
  .hero-media {
    margin-right: calc(-1 * clamp(2rem, 9vw, 9rem));
  }
}

/* the refraction wash sitting behind the hero, brand identity surface */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -22%;
  right: -8%;
  width: min(58rem, 92vw);
  aspect-ratio: 1.35;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 32% 46%, color-mix(in srgb, var(--ramp-deep) 26%, transparent), transparent 70%),
    radial-gradient(34% 38% at 56% 52%, color-mix(in srgb, var(--ramp-glow) 20%, transparent), transparent 72%),
    radial-gradient(30% 30% at 74% 60%, color-mix(in srgb, var(--ramp-warm) 15%, transparent), transparent 74%);
  filter: blur(52px);
  opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
  .hero::before { opacity: 0.62; }
}

/* ==========================================================================
   tool sprawl  (layout family: marquee)  -- the ONE marquee on this page
   ========================================================================== */

.sprawl {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-block: 1px solid var(--line);
  background: var(--surface-2);
}

.sprawl-head {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.sprawl-head p { color: var(--fg-2); margin-top: 0.6rem; }

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 3.25rem;
  animation: slide 42s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--fg-3);
  flex: none;
}

.marquee-item svg { width: 25px; height: 25px; fill: currentColor; }

.marquee-item span {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sprawl-foot {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 1.05rem;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   tour  (layout family: sticky stack)
   ========================================================================== */

.tour-head {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tour-head .h2 { margin-top: 0.85rem; margin-bottom: 1rem; }

.stack { position: relative; }

.stack-card {
  position: sticky;
  top: 92px;
  margin-bottom: 1.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  will-change: transform;
}

.stack-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 900px) {
  .stack-inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}

.stack-text {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}

.stack-text .body { font-size: 0.965rem; }

.stack-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.stack-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--fg-2);
}

.stack-list svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 0.22rem;
  color: var(--accent);
}

.stack-shot {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
}

@media (min-width: 900px) {
  .stack-shot {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.stack-shot img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   portal  (layout family: split, media left)
   ========================================================================== */

.portal { background: var(--surface-2); border-block: 1px solid var(--line); }

.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .portal-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.portal-media {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  background: var(--surface);
}

.portal-copy .h2 { margin-bottom: 1rem; }
.portal-copy .body { margin-bottom: 1.5rem; }

/* ==========================================================================
   boundary  (layout family: two-column contrast list)
   ========================================================================== */

.boundary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 780px) {
  .boundary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.boundary-col {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.boundary-col h3 {
  font-size: 1.02rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  margin-bottom: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.boundary-col h3 svg { width: 18px; height: 18px; flex: none; }

.boundary-col ul { display: flex; flex-direction: column; gap: 0.7rem; }

.boundary-col li {
  font-size: 0.945rem;
  color: var(--fg-2);
  padding-left: 1.1rem;
  position: relative;
}

.boundary-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 1px;
  background: var(--line-strong);
}

.col-can h3 { color: var(--accent); }
.col-cant h3 { color: var(--fg-3); }

/* ==========================================================================
   integrations  (layout family: logo grid)
   ========================================================================== */

.integ { background: var(--surface-2); border-block: 1px solid var(--line); }

.integ-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.integ-head .h2 { margin-top: 0.85rem; margin-bottom: 1rem; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.logo-cell {
  background: var(--surface);
  padding: 1.6rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 118px;
  transition: background-color 0.2s var(--ease);
}

.logo-cell:hover { background: var(--surface-3); }

.logo-cell svg {
  width: 27px;
  height: 27px;
  fill: var(--fg-2);
  transition: fill 0.2s var(--ease);
}

.logo-cell:hover svg { fill: var(--fg); }

.logo-cell span {
  font-size: 0.855rem;
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.integ-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--fg-3);
  max-width: 58ch;
}

/* ==========================================================================
   faq  (layout family: accordion)
   ========================================================================== */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
}

.faq-list { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-size: 1.0rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  position: relative;
  color: var(--fg);
  transition: color 0.18s var(--ease);
}

.faq-q:hover { color: var(--accent); }

.faq-q::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.28s var(--ease);
  opacity: 0.55;
}

.faq-item[data-open='true'] .faq-q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.faq-item[data-open='true'] .faq-a { grid-template-rows: 1fr; }

.faq-a > div { overflow: hidden; }

.faq-a p {
  padding-bottom: 1.35rem;
  color: var(--fg-2);
  font-size: 0.955rem;
  max-width: 58ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-q::after { transition: none; }
}

/* ==========================================================================
   closer  (layout family: ink colour block)
   The one deliberate theme block on the page, in both light and dark mode.
   ========================================================================== */

.closer {
  background: var(--ink);
  color: #f2f0f5;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.closer .h2 { color: #ffffff; margin-bottom: 1rem; }

.closer p {
  color: #b3aec0;
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.closer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* the refraction beam: one beam in, brand ramp out. Identity surface. */
.closer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 50% at 50% 104%, color-mix(in srgb, var(--ramp-glow) 52%, transparent), transparent 70%),
    radial-gradient(28% 42% at 28% 100%, color-mix(in srgb, var(--ramp-deep) 60%, transparent), transparent 72%),
    radial-gradient(26% 38% at 74% 101%, color-mix(in srgb, var(--ramp-warm) 40%, transparent), transparent 72%);
  filter: blur(26px);
  opacity: 0.9;
}

.closer .wrap { position: relative; }

/* ==========================================================================
   footer
   ========================================================================== */

.foot {
  padding-block: 2.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.885rem;
  color: var(--fg-3);
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot-links a { transition: color 0.18s var(--ease); }
.foot-links a:hover { color: var(--fg); }

/* ==========================================================================
   missing-screenshot slot
   Deliberately loud. A real screenshot goes here or the gap is obvious. This
   page never renders a div-based fake product preview in its place.
   ========================================================================== */

.shot-missing {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface-2);
  color: var(--fg-3);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ==========================================================================
   scroll reveal
   Motion is opt-IN via .reveal. JS adds [data-inview] through an
   IntersectionObserver. No scroll listeners anywhere on this page.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.66s var(--ease), transform 0.66s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .reveal[data-inview='true'] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* If JS never runs, nothing is hidden: .reveal only dims once JS marks the
   document as capable. */
html:not([data-js]) .reveal { opacity: 1; transform: none; }