/* P08: text is the first read. Restrained sculptures sit behind the copy. */
[data-thread-illustrated] { --story-header: 78px; }
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed > .p-label {
  position: absolute; left: 6.5%; right: 6.5%; top: 30px;
  margin: 0; padding: 0; z-index: 5;
}
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-sticky {
  height: calc(100svh - var(--story-header)); min-height: 0;
  isolation: isolate; overflow: hidden;
  --story-size: min(820px, 105vw, 94svh);
  --story-center: 48%;
}
[data-thread-illustrated] .story-art {
  position: absolute; left: calc(50% - var(--story-size) / 2);
  top: calc(var(--story-center) - var(--story-size) / 2);
  width: var(--story-size); aspect-ratio: 1;
  z-index: 0; pointer-events: none;
  opacity: .3; perspective: 1200px;
  filter: saturate(.7) contrast(.94);
}
[data-thread-illustrated] .story-tilt,
[data-thread-illustrated] .story-rotor { width: 100%; height: 100%; }
[data-thread-illustrated] .story-tilt {
  transform: rotateX(var(--story-rx, 0deg)) rotateY(var(--story-ry, 0deg));
  transition: transform .8s ease-out;
  transform-style: preserve-3d;
}
[data-thread-illustrated] .story-rotor { transform-style: preserve-3d; }
[data-thread-illustrated] .story-art:has([data-glitch="true"]) { opacity: .43; }
[data-thread-illustrated] .story-motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-thread-illustrated] .has-motion-canvas .story-scene { display: none; }
[data-thread-illustrated] .story-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
[data-thread-illustrated] .story-scene:first-child { opacity: 1; visibility: visible; }
[data-thread-illustrated] .story-scene img { display: block; width: 100%; height: 100%; object-fit: contain; }
[data-thread-illustrated] .story-legibility {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 57% 20% at 50% var(--story-center), #20112e52, #20112e18 62%, transparent 100%);
}
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-caption {
  z-index: 2; isolation: isolate;
}
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-caption > .p-kicker {
  top: calc(var(--story-center) - 88px); z-index: 3; margin: 0;
  font-size: 10px; letter-spacing: .18em; color: #f0e6f6b3;
  text-shadow: 0 2px 12px #21142a66;
}
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-panel {
  display: block; opacity: 0; visibility: hidden;
  transition: none;
}
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-panel.is-current { opacity: 1; visibility: visible; }
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message {
  position: absolute; left: 50%; top: var(--story-center);
  width: max-content; max-width: 92%; transform: translate(-50%, -50%);
  margin: 0; font-size: clamp(22px, 2.65vw, 42px);
  line-height: 1.7; letter-spacing: .025em; color: #fff;
  text-shadow: 0 2px 18px #1c102a8c, 0 0 40px #21142a55;
}
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message.thread-move {
  font-size: clamp(68px, 8vw, 112px); line-height: 1.15;
}
[data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message.thread-brand {
  font-size: clamp(28px, 4.5vw, 64px); line-height: 1.4; letter-spacing: -.015em;
}
[data-thread-illustrated].thread-is-timed .is-current .thread-message > span { animation: story-copy-resolve .38s ease-out both; }
@keyframes story-copy-resolve { from {opacity: 0; filter: blur(3px)} to {opacity: 1; filter: none} }
[data-thread-illustrated].thread-is-timed .thread-note { bottom: 89px; }
[data-thread-illustrated].thread-is-timed .thread-progress { bottom: 70px; }
@media (max-width: 600px) {
  [data-thread-illustrated] { --story-header: 70px; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed > .p-label { top: 24px; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-sticky { --story-size: min(128vw, 74svh); --story-center: 46%; }
  [data-thread-illustrated] .story-art { opacity: .25; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-caption > .p-kicker { top: calc(var(--story-center) - 62px); font-size: 8px; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message { font-size: min(22px, calc(92vw / var(--line-characters))); letter-spacing: 0; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message.thread-move { font-size: 66px; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message.thread-brand { font-size: min(8vw, 36px); }
  [data-thread-illustrated].thread-is-timed .thread-note { bottom: 105px; }
  [data-thread-illustrated].thread-is-timed .thread-progress { bottom: 84px; }
}
@media (max-height: 600px) {
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed > .p-label { top: 18px; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-sticky { --story-size: min(72svh, 440px); --story-center: 43%; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-caption > .p-kicker { display: none; }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message { font-size: min(25px, calc(90vw / var(--line-characters))); }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message.thread-move { font-size: min(11svh, 56px); }
  [data-perspective="08-heart"] [data-thread-illustrated].thread-is-timed .thread-message.thread-brand { font-size: min(7svh, 36px); }
  [data-thread-illustrated].thread-is-timed .thread-progress { bottom: 68px; }
}
/* When motion is off, all copy remains readable without a timer or a busy backdrop. */
[data-thread-illustrated]:not(.thread-is-timed) .story-art,
[data-thread-illustrated]:not(.thread-is-timed) .story-legibility { display: none; }
[data-thread-illustrated]:not(.thread-is-timed) .thread-panel { padding: 28px 0; }
[data-thread-illustrated]:not(.thread-is-timed) .thread-message > span { white-space: normal; }