/* Fullscreen project slides. Each slide carries data-theme from its project, so type, scrims and
   glass follow the artwork; the page can mirror it on <body> for the chrome around (see the demo).
   The host sets the size: fixed and full-screen in the demo, a sticky full-height stage on the home page. */

.slides {
  --inset-left: calc(var(--space-5) + 120px); /* clears the dock */
  --inset-right: var(--space-7);
  position: relative;
  overflow: hidden;
  background: var(--color-night);
}

.slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  color: var(--ink);
  background: var(--surface);
}
.slide.is-active {
  visibility: visible;
}

.slide__art,
.slide__scrim {
  position: absolute;
  inset: 0;
}
.slide__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Counter when the page has its own header (header: false): bottom left. */
.slide__corner {
  position: absolute;
  left: var(--inset-left);
  bottom: var(--space-7);
}

/* Keeps type legible over any artwork: a soft wash on the left (title and card) and along the bottom. */
.slide__scrim {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 58%, transparent) 0%, transparent 52%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface) 46%, transparent) 0%, transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 30%, transparent) 0%, transparent 14%);
}

.slide__top {
  position: absolute;
  top: var(--space-6);
  left: var(--inset-left);
  right: var(--inset-right);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slide__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.slide__count .glyph {
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.slide__count:hover .glyph {
  transform: translateX(4px);
}

.slide__title {
  position: absolute;
  left: var(--inset-left);
  top: 50%;
  max-width: min(46vw, 760px);
  transform: translateY(-50%);
}
.slide__title .rule-label {
  color: var(--ink-muted);
}
.slide__title h2 {
  margin-top: var(--space-5);
}
.slide__sub {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-style: italic;
  line-height: var(--leading-tight);
}

/* The card: the topic in one sentence, and its facts as pills. Always open, under the title. */
.slide__card {
  width: min(100%, 480px);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
}
.slide__desc {
  font-size: var(--text-body-l);
  line-height: var(--leading-text);
}
.slide__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.slide__desc + .slide__pills {
  margin-top: var(--space-5);
}
.slide__pills:first-child {
  margin-top: 0;
}
.slide__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  line-height: 1.2;
  white-space: nowrap;
}
.slide__pill--link {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent-strong);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard);
}
.slide__pill--link .glyph {
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.slide__pill--link:hover {
  background: var(--accent-soft);
}
.slide__pill--link:hover .glyph {
  transform: translate(2px, -2px);
}

/* ── With the dock ── */

/* While the dock previews another project, the current title (and its card) steps back so the dock's preview
   reads cleanly. It stays back while the slide leaves, so the old title never flashes up before the reveal
   covers it. */
.slide__title {
  transition: opacity var(--dur-base) var(--ease-standard), filter var(--dur-base) var(--ease-standard);
}
body:has(.dock.is-previewing) .slide.is-active .slide__title,
.slide.is-leaving .slide__title {
  opacity: 0.18;
  filter: blur(3px);
}

/* ── Motion ── */

/* The next slide opens like light: a radial mask with a soft 120 px edge grows from the origin (--ox/--oy)
   to the farthest corner (--r, set in JS). --reveal is registered so it can be animated. */
@property --reveal {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.slide.is-entering {
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--reveal) - 120px), transparent var(--reveal));
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--reveal) - 120px), transparent var(--reveal));
  animation: slide-reveal var(--reveal-ms, 1300ms) var(--ease-in-out-quart) both;
}
.slide.is-entering .slide__art img {
  animation: art-settle 1700ms var(--ease-out-expo) both;
}
.slide.is-leaving .slide__art img {
  animation: art-recede 1150ms var(--ease-out-expo) both;
}
.slide.is-entering .reveal,
.slide.is-intro .reveal {
  animation: blur-in 900ms var(--ease-out-expo) both;
  animation-delay: calc(260ms + var(--i, 0) * 90ms);
}

@keyframes slide-reveal {
  from { --reveal: 0px; }
  to { --reveal: calc(var(--r) + 120px); }
}
@keyframes art-settle {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
@keyframes art-recede {
  to { transform: scale(0.96); filter: brightness(0.8); }
}
@keyframes blur-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

@media (max-width: 720px) {
  .slides {
    --inset-left: var(--space-5);
    --inset-right: var(--space-5);
  }
  /* The type sits at the bottom, over a deeper wash; the artwork keeps the top. */
  .slide__scrim {
    background:
      linear-gradient(0deg, color-mix(in srgb, var(--surface) 72%, transparent) 0%, color-mix(in srgb, var(--surface) 34%, transparent) 46%, transparent 68%),
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 30%, transparent) 0%, transparent 14%);
  }
  .slide__title {
    top: auto;
    right: var(--inset-right);
    bottom: var(--space-6);
    max-width: none;
    transform: none;
  }
  .slide__title h2 {
    margin-top: var(--space-4);
    font-size: clamp(34px, 10vw, 44px);
  }
  .slide__sub {
    margin-top: var(--space-3);
    font-size: 20px;
  }
  .slide__card {
    width: 100%;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
  }
  .slide__desc {
    font-size: 15px;
  }
  .slide__desc + .slide__pills {
    margin-top: var(--space-4);
  }
  .slide__corner {
    left: auto;
    right: var(--inset-right);
    bottom: auto;
    top: 76px;
  }
}

/* Short phones (Safari's bars take up to ~180 px of an iPhone's height): tighter type and spacing, so the longest
   topic still ends below the page's chrome at the top, like the home page's dock in the top-left corner. */
@media (max-width: 720px) and (max-height: 720px) {
  .slide__title h2 {
    margin-top: var(--space-3);
    font-size: clamp(30px, 9vw, 38px);
  }
  .slide__sub {
    margin-top: var(--space-2);
    font-size: 18px;
  }
  .slide__card {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .slide__desc + .slide__pills {
    margin-top: var(--space-3);
  }
  .slide__pills {
    gap: 6px;
  }
  .slide__pill {
    padding: 5px 10px 4px;
  }
}