/* P08 only: the supplied cream / violet / pink palette, with visible film grain. */
[data-perspective="08-heart"] :is(.p-thread, .im-reel-perspective) {
  position: relative;
  isolation: isolate;
  color: #faf6ff;
  background-color: var(--perspective-base, #391a77);
  background-image:
    linear-gradient(130deg, var(--perspective-base, #391a77) 0%, var(--perspective-mid, #795094) 56%, var(--perspective-glow, #e8c7d2) 100%);
}
[data-perspective="08-heart"] :is(.p-thread, .im-reel-perspective)::before,
[data-perspective="08-heart"] .perspective-grain-canvas {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: var(--perspective-grain-opacity, .42);
}
[data-perspective="08-heart"] :is(.p-thread, .im-reel-perspective)::before {
  background: url('./perspective-grain.svg?v=clean') 0 0 / 220px 220px repeat;
}
[data-perspective="08-heart"] .perspective-grain-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
[data-perspective="08-heart"] .perspective-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* clip does not create a scroll container: the field sticks to the viewport. */
  overflow: clip;
  pointer-events: none;
}
[data-perspective="08-heart"] .perspective-color-field {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  isolation: isolate;
  background-color: var(--perspective-base, #391a77);
  /* Fixed, full-frame stops: the palette changes everywhere, without moving light spots. */
  background-image:
    linear-gradient(130deg, var(--perspective-base, #391a77) 0%, var(--perspective-mid, #795094) 56%, var(--perspective-glow, #e8c7d2) 100%);
}
[data-perspective="08-heart"] :is(.p-thread, .im-reel-perspective).has-clean-grain::before {
  display: none;
}
[data-perspective="08-heart"] .p-thread > .p-label,
[data-perspective="08-heart"] .p-thread > .thread-scroll {
  position: relative;
  z-index: 1;
}
[data-perspective="08-heart"] .p-thread > .p-label {
  color: #fff;
  text-shadow: 0 1px 12px #2c1e46aa;
}
[data-perspective="08-heart"] .p-thread > .p-label > span:last-child {
  color: #2c1e46;
  text-shadow: none;
}
[data-perspective="08-heart"] .p-thread .thread-sticky::before {
  display: none;
}
[data-perspective="08-heart"] .p-thread .thread-message {
  color: #fff;
  text-shadow: 0 2px 20px #2c1e4655;
}
[data-perspective="08-heart"] .p-thread .p-kicker,
[data-perspective="08-heart"] .p-thread .thread-note {
  color: #f3eaf7;
  text-shadow: 0 1px 8px #2c1e4680;
}
[data-perspective="08-heart"] .p-thread .thread-drag-hint {
  color: #49345b;
}
[data-perspective="08-heart"] .p-thread .thread-note > span:first-child {
  color: #2c1e46;
  text-shadow: none;
}
[data-perspective="08-heart"] .p-thread .thread-progress {
  background: #f2e8f742;
}
[data-perspective="08-heart"] .p-thread .thread-progress i {
  background: #e6c9f2;
}
[data-perspective="08-heart"] #thread-object canvas {
  filter: drop-shadow(0 2px 8px #21143145);
}

/* Browser zoom and landscape screens must keep timed messages in view. */
@media (max-height: 600px) {
  [data-perspective="08-heart"] { --p08-compact-header: 78px; }
  [data-perspective="08-heart"] .p-thread.thread-is-timed > .p-label {
    padding-top: 18px;
  }
  [data-perspective="08-heart"] .p-thread.thread-is-timed .thread-sticky {
    height: calc(100svh - var(--p08-compact-header) - 36px);
    min-height: 0;
  }
  [data-perspective="08-heart"] .thread-is-timed .thread-caption > .p-kicker {
    top: calc(50% - 60px);
  }
  [data-perspective="08-heart"] .thread-is-timed .thread-note {
    display: none;
  }
  [data-perspective="08-heart"] .thread-is-timed .thread-progress {
    bottom: 76px;
  }
}
@media (max-height: 600px) and (max-width: 600px) {
  [data-perspective="08-heart"] { --p08-compact-header: 70px; }
}