@import url("./devices.css");
@import url("./privacy-visual.css");

/* Ambient section chevrons.
   Each symbol is vertically centered in its own section scene. JavaScript adds
   only the 50%-speed parallax delta, so when the section center crosses the
   viewport center, the chevron center crosses it at exactly the same moment. */

.chevron-scene { position: relative; isolation: isolate; overflow: clip; }
.chevron-scene > section { position: relative; z-index: 1; }
.ambient-chevron { position: absolute; top: 50%; z-index: 0; display: flex; align-items: center; gap: clamp(6px, .8vw, 14px); pointer-events: none; transform: translate3d(0, calc(-50% + var(--background-y, 0px)), 0); will-change: transform; }
.ambient-chevron--right { right: clamp(-82px, -3.5vw, -34px); }
.ambient-chevron--left { left: clamp(-82px, -3.5vw, -34px); }
.ambient-chevron span { display: block; height: 90vh; aspect-ratio: 887 / 1200; mask: url("/assets/chevron-right-heavy.png") center / contain no-repeat; -webkit-mask: url("/assets/chevron-right-heavy.png") center / contain no-repeat; }
.ambient-chevron--double span { height: 90vh; }
.ambient-chevron--mint { opacity: .12; }
.ambient-chevron--mint span { background: var(--mint); }
.ambient-chevron--cyan { opacity: .085; }
.ambient-chevron--cyan span { background: var(--cyan); }

.hero-art { background: var(--surface); border: 0; border-radius: 0; }
.hero-art::before { inset: 0; z-index: 0; background: url("/assets/next-mountain.webp") 50% 50% / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.07) 10%, rgba(0,0,0,.22) 20%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.92) 50%, #000 60%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.07) 10%, rgba(0,0,0,.22) 20%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.92) 50%, #000 60%, #000 100%); transform: none; }
.hero-art .orbit { display: none; }
.hero-next { position: relative; z-index: 2; }
.illustration-note, .art-index { display: none !important; }

@media (min-width: 901px) {
  .hero-copy { z-index: 2; }
  .hero-art { --hero-right-bleed: max(48px, calc((100vw - var(--max)) / 2)); width: auto; margin-left: 0; overflow: visible; background: transparent; z-index: 0; }
  .hero-art::before { left: -12vw; right: calc(0px - var(--hero-right-bleed)); top: 0; bottom: 0; background-position: 59% 50%; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.03) 10%, rgba(0,0,0,.09) 20%, rgba(0,0,0,.20) 30%, rgba(0,0,0,.36) 40%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.86) 70%, rgba(0,0,0,.96) 80%, #000 88%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.03) 10%, rgba(0,0,0,.09) 20%, rgba(0,0,0,.20) 30%, rgba(0,0,0,.36) 40%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.86) 70%, rgba(0,0,0,.96) 80%, #000 88%, #000 100%); }
  .hero-next { left: -28px; }
  .hero-time { font-size: clamp(44px, 4.8vw, 68px); }
}

.life-grid { --photo-bleed: max(48px, calc((100vw - var(--max)) / 2)); padding-block: 0; align-items: stretch; }
.life-grid > [data-reveal]:last-child { align-self: center; padding-block: 100px; }
.photo-slot { width: calc(100% + var(--photo-bleed) + 12vw); min-height: 100%; margin-left: calc(-1 * var(--photo-bleed)); border-radius: 0; background: linear-gradient(90deg, transparent 48%, rgba(255,255,255,.10) 56%, rgba(255,255,255,.30) 66%, rgba(255,255,255,.58) 76%, rgba(255,255,255,.82) 88%, #fff 100%), linear-gradient(90deg, rgba(7,27,40,.08), transparent 55%), url("/assets/life-manhattan.webp") 48% 50% / cover no-repeat; color: transparent; -webkit-mask-image: linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.92) 65%,rgba(0,0,0,.72) 75%,rgba(0,0,0,.45) 84%,rgba(0,0,0,.22) 91%,rgba(0,0,0,.07) 96%,transparent 100%); mask-image: linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.92) 65%,rgba(0,0,0,.72) 75%,rgba(0,0,0,.45) 84%,rgba(0,0,0,.22) 91%,rgba(0,0,0,.07) 96%,transparent 100%); }
.photo-slot .window-lines, .photo-slot .slot-tag, .photo-slot .photo-caption { display: none; }
.hero-chevron, .pass-chevron, .closing-chevron { display: none !important; }

@media (prefers-color-scheme: dark) {
  .site-header { position: relative; isolation: isolate; border-bottom-color: transparent; }
  .site-header::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient(to bottom,#040a15 0%,#040a15 90%,var(--bg) 100%); pointer-events: none; }
  .site-header > * { position: relative; z-index: 1; }
  .brand img { -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 89%,rgba(0,0,0,.75) 93%,rgba(0,0,0,.35) 97%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 89%,rgba(0,0,0,.75) 93%,rgba(0,0,0,.35) 97%,transparent 100%); }
  .ambient-chevron--mint { opacity: .14; }
  .ambient-chevron--cyan { opacity: .11; }
  .photo-slot { width: calc(100% + var(--photo-bleed)); background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 58%), url("/assets/life-manhattan.webp") 48% 50% / cover no-repeat; -webkit-mask-image: linear-gradient(to right,#000 0%,#000 62%,rgba(0,0,0,.82) 72%,rgba(0,0,0,.42) 86%,transparent 100%); mask-image: linear-gradient(to right,#000 0%,#000 62%,rgba(0,0,0,.82) 72%,rgba(0,0,0,.42) 86%,transparent 100%); }
}

@media (max-width: 900px) { .hero-art { width: 100vw; margin-left: calc(50% - 50vw); border: 0; border-radius: 0; } }
@media (max-width: 760px) {
  .ambient-chevron--right { right: -88px; }
  .ambient-chevron--left { left: -88px; }
  .ambient-chevron span, .ambient-chevron--double span { height: 90vh; }
  .ambient-chevron--mint { opacity: .09; }
  .ambient-chevron--cyan { opacity: .07; }
  .hero-art::before { background-position: 57% 50%; -webkit-mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.45) 36%,rgba(0,0,0,.78) 54%,#000 70%,#000 100%); mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.45) 36%,rgba(0,0,0,.78) 54%,#000 70%,#000 100%); }
  .life-grid { padding-top: 100px; padding-bottom: 0; }
  .life-grid > [data-reveal]:last-child { padding-block: 0; }
  .photo-slot { width: 100vw; min-height: 430px; margin-left: calc(50% - 50vw); border-radius: 0; background: url("/assets/life-manhattan.webp") 50% 50% / cover no-repeat; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) { .photo-slot { background: url("/assets/life-manhattan.webp") 50% 50% / cover no-repeat; } }
@media (prefers-reduced-motion: reduce) { .ambient-chevron { transform: translate3d(0,-50%,0); will-change: auto; } }

/* Canonical small mint chevron. */
.right-chevron {
  display: inline-block;
  width: 10px;
  height: 15px;
  flex: 0 0 auto;
  background: var(--mint);
  -webkit-mask: url("/assets/chevron-right-heavy.png") center / contain no-repeat;
  mask: url("/assets/chevron-right-heavy.png") center / contain no-repeat;
}

.steps .step-chevron,
.state-chevrons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.steps .step-chevron {
  height: 18px;
}
.state-sequence .state {
  grid-template-columns: 38px 1fr;
}
.state-chevrons {
  width: 38px;
  padding-top: 5px;
}

/* NEXT copy refinements. */
.next-demo > .demo-caption {
  font-size: 18px;
  font-weight: 500;
}
.next-grid > div:first-child > .muted.small {
  font-size: 18px;
  line-height: 1.65;
  margin-top: 0;
}

/* Made for real life. */
.life-grid > [data-reveal]:last-child > .eyebrow {
  display: none;
}
.life-lines {
  display: grid;
  gap: 0;
}
.life-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}