/* Project-card frame previews. All image work begins on interaction. */
:is(.editorial .project-grid .project-card, .case-animation-host).has-explode .card-media > .card-explode-poster,
:is(.editorial .project-grid .project-card, .case-animation-host) .card-media .card-explode-frame {
  transform: none !important;
  filter: none;
  padding: 0;
  object-fit: cover;
}
:is(.editorial .project-card, .case-animation-host) .card-explode-poster {
  /* Keep a fully opaque backing during the stage fade. Fading both layers
     exposes the dark card background halfway through their overlap. */
  opacity: 1;
  transition: none;
}
:is(.editorial .project-card, .case-animation-host) .card-explode-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  background: transparent;
}
:is(.editorial .project-grid .project-card, .case-animation-host) .card-media .card-explode-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: none;
}
:is(.editorial .project-card, .case-animation-host).is-explode-playing .card-explode-stage { opacity: 1; }
:is(.editorial, .case-animation-host) .card-explode-ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}
:is(.editorial, .case-animation-host) .card-explode-ui[hidden] { display: none; }
:is(.editorial .project-card, .case-animation-host):is(:hover, :focus-within, .is-explode-active) .card-explode-ui { opacity: 1; }
:is(.editorial, .case-animation-host) .card-explode-label {
  position: absolute;
  top: 9px;
  left: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  background: #090c10d9;
  color: #ccd5df;
  font: 10px/1.35 var(--font-mono);
  letter-spacing: .015em;
}
:is(.editorial, .case-animation-host) .card-explode-controls {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  pointer-events: auto;
}
:is(.editorial, .case-animation-host) .card-explode-controls::before {
  content: attr(data-hint);
  flex: 0 0 auto;
  color: #ccd5df;
  font: 10px/1.3 var(--font-mono);
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
  pointer-events: none;
}
:is(.editorial, .case-animation-host) .card-explode-controls input {
  appearance: auto;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  accent-color: #aacbff;
  cursor: ew-resize;
  touch-action: pan-y;
}
:is(.editorial, .case-animation-host) .card-explode-controls input:focus-visible {
  outline: 2px solid #aacbff;
  outline-offset: 2px;
  border-radius: 3px;
}
:is(.editorial .is-explode-loading, .case-animation-host.is-explode-loading) .card-explode-controls::before { content: "Loading preview"; }
.editorial .project-card:is([data-explode-mode="assembling"], [data-explode-mode="flow"]) .card-explode-controls {
  left: auto;
  width: 36%;
  min-width: 96px;
}
.editorial .project-card:is([data-explode-mode="assembling"], [data-explode-mode="flow"]) .card-explode-controls::before { display: none; }
@media (hover: none), (pointer: coarse) {
  :is(.editorial, .case-animation-host) .card-explode-ui { opacity: 1; }
  :is(.editorial, .case-animation-host) .card-explode-label { top: 6px; left: 6px; font-size: 9px; }
  :is(.editorial, .case-animation-host) .card-explode-controls { left: 8px; right: 8px; min-height: 44px; }
  :is(.editorial, .case-animation-host) .card-explode-controls input { min-height: 44px; }
  :is(.editorial, .case-animation-host) .card-explode-controls::before { display: none; }
}
@media (max-width: 1000px) {
  :is(.editorial, .case-animation-host) .card-explode-controls::before { display: none; }
}
@media (max-width: 600px) {
  .editorial .project-card:is([data-explode-mode="assembling"], [data-explode-mode="flow"]) .card-explode-controls {
    min-width: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.editorial .project-card, .case-animation-host) .card-explode-poster,
  :is(.editorial .project-card, .case-animation-host) .card-explode-stage,
  :is(.editorial, .case-animation-host) .card-explode-ui { transition: none; }
}
@media print {
  :is(.editorial, .case-animation-host) .card-explode-ui, :is(.editorial, .case-animation-host) .card-explode-stage { display: none; }
  :is(.editorial .project-card, .case-animation-host) .card-explode-poster { opacity: 1; }
}