:root {
  --bg: 25% 0.0075 70;
  --pink: 77.75% 0.1003 350.51;
  --gold: 84.16% 0.1169 71.19;
  --mint: 84.12% 0.1334 165.28;
  --mobile--w: 360px;
  --mobile--h: 540px;
  --outline-w: 9px;
  --preview-bg: #fff;
}

.preview-cards .card__container {
  display: flex;
  flex-wrap: wrap;
  place-items: center;
  place-content: center;
  gap: 16px;
}

/* Fade out other cards when any card is hovered/focused */
.preview-cards .card__container:has(.card:hover, .card:focus-within) .card:not(:hover):not(:focus-within) {
  opacity: 0.4;
}

.preview-cards .card {
  --bg-pos-y--start: 0;
  --bg-pos-y--end: 0;
  --bg-pos-y: var(--bg-pos-y--start);
  --delay: 0;
  --duration: 6s;
  --img: url(https://assets.codepen.io/2392/360__homepage--full.png);
  --shadow-blur: 16px;
  --shadow-color: oklch(var(--bg));

  background-clip: padding-box;
  background-image: var(--img);
  background-position: center center;
  background-position-y: var(--bg-pos-y);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  border: var(--outline-w) solid var(--border-color, transparent);
  border-radius: 6px;
  box-shadow: none;

  transition-property: border, box-shadow, filter, outline-offset, opacity, rotate, scale, z-index;
  transition-duration: 0.15s, 0.15s, 0.6s, 0.6s, 0.3s, 0.3s, 0.3s, 0.15s;

  filter: grayscale(100%) sepia(5%);
  mix-blend-mode: multiply;
  opacity: 0.69;

  scale: 0.85;
  rotate: var(--rotation, -4deg);

  /* Make outline visible on light backgrounds as well */
  outline: var(--outline-w) solid rgba(0, 0, 0, 0.12);
  outline-offset: var(--outline-w);

  min-height: var(--mobile--h);
  height: 100%;
  min-width: var(--mobile--w);
  width: 100%;
  position: relative;

  animation-name: bg-scroll;
  animation-delay: var(--delay);
  animation-duration: var(--duration);
  animation-fill-mode: forwards;
}

.preview-cards .card:focus-within,
.preview-cards .card:hover {
  --shadow-blur: 48px;
  --shadow-color: #8054FF;
  --border-color: var(--shadow-color);
  background-color: #fff;
  mix-blend-mode: initial;
  filter: none;
  opacity: 1;
  outline-offset: calc(var(--outline-w) / 2);
  scale: 1;
  rotate: 0deg;
  transition-property: border, box-shadow, filter, outline-offset, opacity, rotate, scale, z-index;
  transition-duration: 0.15s, 0.15s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.15s;
}

.preview-cards .card:focus-within {
  --shadow-color: #8054FF;
  z-index: 5;
}

.preview-cards .card:hover {
  z-index: 6;
}

/* Persist active state same as hover */
.preview-cards .card.active {
  --shadow-blur: 48px;
  --shadow-color: #8054FF;
  --border-color: var(--shadow-color);
  background-color: #fff;
  mix-blend-mode: initial;
  filter: none;
  opacity: 1;
  outline-offset: calc(var(--outline-w) / 2);
  scale: 1;
  rotate: 0deg;
}

.preview-cards .card.mobile {
  max-height: var(--mobile--h);
  max-width: var(--mobile--w);
}

.preview-cards .card__container .card:nth-of-type(2) {
  --bg-pos-y--end: calc(var(--mobile--h) * -1.025);
  --rotation: 3deg;
}
.preview-cards .card__container .card:nth-of-type(3) {
  --bg-pos-y--end: calc(var(--mobile--h) * -2.25);
  --duration: 6.5s;
  --rotation: -1deg;
}


.preview-cards .card__container .card:nth-of-type(4) {
  --bg-pos-y--end: calc(var(--mobile--h) * -3.75);
  --duration: 6.75s;
  --rotation: -5deg;
}
.preview-cards .card__container .card:nth-of-type(5) {
  --bg-pos-y--end: calc(var(--mobile--h) * -4.82);
  --duration: 7s;
  --rotation: -2deg;
}
.preview-cards .card__container .card:nth-of-type(6) {
  --bg-pos-y--end: calc(var(--mobile--h) * -5.85);
  --duration: 7.25s;
  --rotation: 2deg;
}
.preview-cards .card__container .card:nth-of-type(7) {
  --bg-pos-y--end: calc(var(--mobile--h) * -7.21);
  --duration: 7.5s;
  --rotation: 4deg;
}

@keyframes bg-scroll {
  to {
    background-position-y: var(--bg-pos-y--end);
  }
}

/* Disable background scroll animation for card 2 and 3 */
.preview-cards .card__container .card:nth-of-type(2),
.preview-cards .card__container .card:nth-of-type(3) {
  animation: none !important;
}

/* Dark mode visibility adjustments */
[data-bs-theme="dark"] .preview-cards .card {
  /* Avoid multiply so images don't vanish */
  mix-blend-mode: initial;
  /* Match light-mode grayscale look while keeping visibility */
  filter: grayscale(100%) sepia(5%);
  opacity: 0.8;
  outline: var(--outline-w) solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  background-color: #111;
}

/* On hover/focus in dark mode, show full-color preview */
[data-bs-theme="dark"] .preview-cards .card:hover,
[data-bs-theme="dark"] .preview-cards .card:focus-within {
  filter: none;
  opacity: 1;
}

/* Persist active state in dark mode as well */
[data-bs-theme="dark"] .preview-cards .card.active {
  filter: none;
  opacity: 1;
}