/* Without :where() — same specificity */
.btn-primary { background: red; }  /* (0,1,0) */
.btn         { background: blue; } /* (0,1,0) — cascade wins */

/* With :where() — zero specificity */
.btn-primary  { background: red; }  /* (0,1,0) — wins */
:where(.btn)  { background: blue; } /* (0,0,0) */

.profile-wrapper {
  container-type: inline-size; /* or size, normal */
  container-name: profile;
}

@container profile (min-width: 350px) {
  .card__banner {
    flex-direction: row;
  }
  .card__actions {
    flex-direction: row;
  }
  .card__data {
    grid-template-columns: 1fr 1fr;
  }
}

.pagination {
  container-type: inline-size; /* or size, normal */
  container-name: pager;
}

.pagination__pages {
  display: none;
}

@container pager (min-width: 500px) {
  .pagination__pages {
    display: flex;
  }
}

.container {
  container-type: size;
}

.title {
  font-size: clamp(24px, 8cqw, 56px);
}

.bar--width {
  width: 40cqw;
}

.bar--height {
  width: 40cqh;
}

.pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto repeat(5, auto);
}

.card {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
}

.card ul {
  display: contents;
}

.table {
  display: grid;
  grid-template-columns:
    auto auto auto auto;
}

.row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.item {
  animation: wipe-right linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes wipe-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes circle-in {
  from {
    clip-path: circle(0% at 50% 50%);
  }
  to {
    clip-path: circle(100% at 50% 50%);
  }
}

.container {
  overflow-y: auto;
}

.progress-bar {
  position: sticky;
  top: 0;
  transform-origin: left;
  animation: grow linear both;
  animation-timeline: scroll(nearest);
}

@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.horizontal-wrapper {
  height: 400dvh;
  view-timeline-name: --section-scroll;
  view-timeline-axis: block;
}

.sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

.track {
  display: flex;
  width: 400vw;
  animation: horizontal-pan linear both;
  animation-timeline: --section-scroll;
  animation-range: contain 0% contain 100%;
}

@keyframes horizontal-pan {
  to {
    transform: translateX(-75%);
  }
}

.item {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

@keyframes reveal {
  entry 0% {
    opacity: 0;
  }
  entry 100% {
    opacity: 1;
  }
  exit 0% {
    opacity: 1;
    transform: translateY(0);
  }
  exit 100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

button.onclick = () => {
  document.startViewTransition(() => {
    box.classList.toggle('red')
    box.classList.toggle('blue')
  })
}

/* CSS: normal styles for each view */
.card-emoji { font-size: 28px; }
.detail-emoji { font-size: 64px; }

// JS: old snapshot, small emoji in the card
cardEmoji.style.viewTransitionName = 'selected-emoji'

const transition = document.startViewTransition(() => {
  list.hidden = true
  detail.hidden = false

  // New snapshot: large emoji in the detail view
  detailEmoji.textContent = cardEmoji.textContent
  detailEmoji.style.viewTransitionName = 'selected-emoji'
})

transition.finished.finally(() => {
  cardEmoji.style.viewTransitionName = ''
  detailEmoji.style.viewTransitionName = ''
})

/* Name the wrapper so it animates on its own */
.content { view-transition-name: content; }

/* Clip to the box so slides don't spill out */
::view-transition-image-pair(content) {
  overflow: hidden;
}

html[data-dir='forward']::view-transition-old(content) {
  animation: slide-out-left 500ms ease-out both;
}
html[data-dir='forward']::view-transition-new(content) {
  animation: slide-in-right 500ms ease-out;
}
html[data-dir='back']::view-transition-old(content) {
  animation: slide-out-right 500ms ease-out both;
}
html[data-dir='back']::view-transition-new(content) {
  animation: slide-in-left 500ms ease-out;
}

// JS: direction chooses the old/new keyframes
function transitionToStep(next) {
  document.documentElement.dataset.dir =
    next > current ? 'forward' : 'back'

  document.startViewTransition(() => {
    showStep(next)
  })
}

/* MPA: both pages opt in */
@view-transition {
  navigation: auto;
}

// SPA: wrap the route render
function navigate(route) {
  document.startViewTransition(() => {
    render(route)
  })
}

/* Shared pieces still need matching names */
.card.is-selected .thumb,
.detail .thumb {
  view-transition-name: route-hero;
}