/* Homepage featured Kindle preview */

.hero-kindle-scene {
  position: relative;
  display: grid;
  gap: .72rem;
  padding: var(--space-3);
  border: var(--line) solid var(--border-color);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .54), rgba(255, 250, 245, .38)),
    var(--surface-inset);
  box-shadow: var(--inset-highlight);
  overflow: hidden;
  isolation: isolate;
}

.hero-kindle-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, transparent 0 43%, rgba(255, 255, 255, .2) 43% 48%, transparent 48% 100%);
  pointer-events: none;
}

.hero-kindle-input,
.hero-kindle-output,
.hero-kindle-lower,
.hero-kindle-caption {
  position: relative;
  z-index: 1;
}

.hero-kindle-input,
.hero-kindle-output {
  display: grid;
  margin: 0;
}

.hero-kindle-input {
  justify-self: center;
  width: min(100%, 20.5rem);
  aspect-ratio: 3 / 2;
  padding: .42rem;
  border: var(--line) solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow-card);
  transform: rotate(-1.1deg);
  overflow: hidden;
}

.hero-kindle-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html[data-theme="pop"] .hero-kindle-image--pop,
html[data-theme="nova"] .hero-kindle-image--nova {
  display: block;
}

.hero-kindle-input .hero-kindle-image {
  border-radius: calc(var(--radius-lg) - .55rem);
}

.hero-kindle-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: end;
}

.hero-kindle-caption {
  align-self: end;
  display: grid;
  gap: .35rem;
  max-width: 13.2rem;
  padding: .85rem .9rem;
  border: var(--line) solid color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34)),
    color-mix(in srgb, var(--surface-strong) 76%, transparent);
  box-shadow:
    var(--inset-highlight),
    0 .75rem 1.6rem rgba(23, 19, 35, .1);
}

.hero-kindle-caption h2 {
  margin: 0;
  color: var(--text-brand);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: .98;
  letter-spacing: 0;
  font-weight: var(--heading-weight);
}

.hero-kindle-caption p {
  margin: 0;
  color: var(--text-body);
  font-family: var(--font-plain);
  font-size: .78rem;
  font-weight: var(--body-weight);
  line-height: 1.35;
}

.hero-kindle-output {
  align-self: start;
  justify-items: end;
}

.hero-kindle-device {
  position: relative;
  height: 9.55rem;
  aspect-ratio: .74;
  padding: .48rem .42rem .62rem;
  border: var(--line) solid rgba(23, 19, 35, .32);
  border-radius: 1.08rem;
  background: linear-gradient(145deg, #252329, #101016 64%, #35323b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1rem 2rem rgba(23, 19, 35, .24);
  transform: rotate(1.35deg);
}

.hero-kindle-device::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .28rem;
  width: 1.25rem;
  height: .16rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  transform: translateX(-50%);
}

.hero-kindle-device .hero-kindle-image {
  border-radius: .55rem;
  background: #f4f3ee;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

html[data-theme="nova"] .hero-kindle-scene {
  background:
    radial-gradient(circle at 50% 38%, rgba(98, 232, 255, .1), transparent 34%),
    linear-gradient(135deg, rgba(139, 101, 255, .12), rgba(98, 232, 255, .038)),
    var(--surface-inset);
}

html[data-theme="nova"] .hero-kindle-input {
  background: rgba(255, 255, 255, .075);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .34), var(--inset-highlight);
}

html[data-theme="nova"] .hero-kindle-caption {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .03)),
    rgba(0, 0, 0, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 1rem 2.4rem rgba(0, 0, 0, .24);
}

html[data-theme="nova"] .hero-kindle-device {
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(145deg, #303039, #08090f 62%, #22232c);
  box-shadow:
    0 1.25rem 2.8rem rgba(0, 0, 0, .5),
    0 0 1.8rem rgba(98, 232, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

@media (max-width: 680px) {
  .hero-kindle-scene {
    gap: .62rem;
    padding: .85rem;
  }

  .hero-kindle-input {
    padding: .32rem;
    border-radius: var(--radius-md);
  }

  .hero-kindle-input .hero-kindle-image {
    border-radius: calc(var(--radius-md) - .38rem);
  }

  .hero-kindle-lower {
    gap: .5rem;
  }

  .hero-kindle-caption {
    max-width: 8.6rem;
    padding: .62rem .66rem;
    border-radius: var(--radius-sm);
  }

  .hero-kindle-caption h2 {
    font-size: .95rem;
  }

  .hero-kindle-caption p {
    font-size: .68rem;
    line-height: 1.28;
  }

  .hero-kindle-device {
    height: 8.05rem;
    padding: .38rem .34rem .52rem;
    border-radius: .86rem;
  }
}