/* Local, asset-free animated previews for the caption preset picker. */
.director-modal[data-axis="captions"] .director-sheet {
  width: min(1180px, 100%);
}

.director-modal[data-axis="captions"] .director-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.director-modal[data-axis="captions"] .director-tabs::-webkit-scrollbar { display: none; }

.director-modal[data-axis="captions"] .director-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.director-modal[data-axis="captions"] .director-card-art {
  aspect-ratio: 4 / 3;
}

.director-card-art.has-caption-preview {
  aspect-ratio: 4 / 3;
  border-color: #303334;
  background: #242627;
}

.director-card.active .director-card-art.has-caption-preview {
  border-color: #f3f3f3;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

.caption-preset-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--cp-accent) 9%, transparent), transparent 46%),
    #252728;
  color: var(--cp-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}

.caption-preset-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px);
}

.caption-preset-preview:not(.is-playing),
.caption-preset-preview:not(.is-playing) * {
  animation-play-state: paused !important;
}

.cp-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  transform: rotate(var(--cp-tilt)) scale(var(--cp-scale));
}

.cp-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .24em;
}

.cp-word {
  display: inline-block;
  font-size: clamp(14px, 1.55vw, 22px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.035em;
  text-transform: uppercase;
  transform-origin: center;
}

.cp-burst,
.cp-flame,
.cp-emoji,
.cp-cursor {
  position: absolute;
  opacity: 0;
}

/* Clean */
.cp-clean .cp-copy { gap: 6px; }
.cp-clean .cp-word {
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 690;
  letter-spacing: .05em;
}
.cp-clean .cp-line-two { opacity: .74; }
.cp-clean .cp-active {
  color: var(--cp-accent);
  animation: cp-clean-focus 2.4s ease-in-out infinite var(--cp-delay);
}

/* Heavy families */
.cp-impact-shadow .cp-word {
  font-size: clamp(17px, 1.85vw, 27px);
  font-weight: 950;
  text-shadow: 0 4px 0 #070707, 0 7px 12px rgba(0,0,0,.72);
}
.cp-impact-shadow .cp-active {
  color: var(--cp-accent);
  animation: cp-impact 1.8s cubic-bezier(.2,.8,.2,1) infinite var(--cp-delay);
}

.cp-outline-punch .cp-word {
  color: #fff;
  font-size: clamp(16px, 1.75vw, 25px);
  -webkit-text-stroke: 2px #050505;
  paint-order: stroke fill;
  filter: drop-shadow(2px 3px 0 #050505);
}
.cp-outline-punch .cp-active {
  color: var(--cp-accent);
  animation: cp-outline-punch 2s ease-in-out infinite var(--cp-delay);
}

.cp-condensed-italic .cp-copy { transform: skewX(-8deg) rotate(var(--cp-tilt)) scale(var(--cp-scale)); }
.cp-condensed-italic .cp-word {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(17px, 1.9vw, 28px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: .015em;
  text-shadow: 3px 4px 0 #080808;
}
.cp-condensed-italic .cp-line { animation: cp-condensed 2.2s ease-in-out infinite var(--cp-delay); }

/* Active-word families */
.cp-active-block .cp-word,
.cp-active-color .cp-word,
.cp-karaoke-bar .cp-word {
  font-size: clamp(13px, 1.35vw, 19px);
  letter-spacing: -.02em;
}
.cp-active-block .cp-active {
  padding: .18em .28em .14em;
  border-radius: .16em;
  background: var(--cp-accent);
  color: var(--cp-ink);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cp-accent) 35%, transparent);
  animation: cp-active-block 1.7s ease-in-out infinite var(--cp-delay);
}
.cp-active-color .cp-active {
  color: var(--cp-accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--cp-accent) 45%, transparent);
  animation: cp-active-color 1.6s steps(2, end) infinite var(--cp-delay);
}
.cp-karaoke-bar .cp-copy::after {
  content: "";
  width: 78%;
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--cp-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cp-accent) 55%, transparent);
  transform-origin: left;
  animation: cp-karaoke 2.4s linear infinite var(--cp-delay);
}
.cp-karaoke-bar .cp-active { color: var(--cp-accent); }

/* Glow */
.cp-neon-glow .cp-word {
  color: var(--cp-accent);
  font-size: clamp(15px, 1.7vw, 25px);
  text-shadow:
    0 0 2px #fff,
    0 0 7px var(--cp-accent),
    0 0 18px var(--cp-accent);
  animation: cp-neon 2.2s steps(2, end) infinite var(--cp-delay);
}
.cp-glow-blur .cp-word {
  font-size: clamp(15px, 1.65vw, 24px);
  text-shadow: 0 0 13px var(--cp-primary);
  animation: cp-glow-blur 2.5s ease-in-out infinite var(--cp-delay);
}
.cp-glow-blur .cp-w2 { animation-delay: calc(var(--cp-delay) + .22s); color: var(--cp-accent); }
.cp-glow-blur .cp-w3 { animation-delay: calc(var(--cp-delay) + .44s); }
.cp-glow-blur .cp-w4 { animation-delay: calc(var(--cp-delay) + .66s); }

.cp-gradient-texture .cp-word {
  font-size: clamp(16px, 1.8vw, 26px);
  color: transparent;
  background: linear-gradient(120deg, var(--cp-primary), var(--cp-accent) 48%, #fff 74%, var(--cp-accent));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: .6px rgba(255,255,255,.32);
  filter: drop-shadow(0 3px 3px #000);
  animation: cp-gradient 2.7s linear infinite var(--cp-delay);
}

/* Motion */
.cp-speed-smear .cp-word {
  font-size: clamp(15px, 1.75vw, 25px);
  font-style: italic;
  text-shadow: -8px 0 4px color-mix(in srgb, var(--cp-accent) 35%, transparent);
  animation: cp-speed-smear 1.8s cubic-bezier(.2,.8,.2,1) infinite var(--cp-delay);
}
.cp-speed-smear .cp-line-two { animation-delay: calc(var(--cp-delay) + .2s); }

.cp-rgb-glitch .cp-word {
  font-size: clamp(16px, 1.8vw, 26px);
  text-shadow: -3px 0 #ff2458, 3px 0 #22d9ff;
  animation: cp-rgb 1.15s steps(2, end) infinite var(--cp-delay);
}

.cp-scatter-cascade .cp-copy { height: 80%; }
.cp-scatter-cascade .cp-line { position: absolute; }
.cp-scatter-cascade .cp-line-one { top: 16%; left: 8%; transform: rotate(-7deg); }
.cp-scatter-cascade .cp-line-two { right: 7%; bottom: 14%; transform: rotate(6deg); }
.cp-scatter-cascade .cp-word {
  font-size: clamp(14px, 1.55vw, 22px);
  animation: cp-scatter 2.5s cubic-bezier(.2,.75,.25,1) infinite var(--cp-delay);
}
.cp-scatter-cascade .cp-w2 { animation-delay: calc(var(--cp-delay) + .14s); }
.cp-scatter-cascade .cp-w3 { animation-delay: calc(var(--cp-delay) + .28s); }
.cp-scatter-cascade .cp-w4 { animation-delay: calc(var(--cp-delay) + .42s); }

.cp-fade-trail .cp-word {
  font-size: clamp(16px, 1.75vw, 25px);
  text-shadow: -5px 0 rgba(255,255,255,.34), -10px 0 rgba(255,255,255,.13);
  animation: cp-fade-trail 2.4s ease-in-out infinite;
}

/* Playful */
.cp-comic-bounce .cp-word,
.cp-bubble-wobble .cp-word {
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", Inter, sans-serif;
  -webkit-text-stroke: 2px #050505;
  paint-order: stroke fill;
  filter: drop-shadow(2px 3px 0 #050505);
}
.cp-comic-bounce .cp-word {
  font-size: clamp(16px, 1.85vw, 27px);
  animation: cp-comic 1.9s cubic-bezier(.2,.8,.3,1.25) infinite var(--cp-delay);
}
.cp-comic-bounce .cp-w2 { animation-delay: calc(var(--cp-delay) + .15s); color: var(--cp-accent); }
.cp-comic-bounce .cp-w3 { animation-delay: calc(var(--cp-delay) + .3s); }
.cp-comic-bounce .cp-w4 { animation-delay: calc(var(--cp-delay) + .45s); color: var(--cp-accent); }

.cp-bubble-wobble .cp-word {
  padding: .12em .2em;
  border-radius: .42em;
  background: color-mix(in srgb, var(--cp-accent) 72%, #fff);
  color: var(--cp-ink);
  font-size: clamp(13px, 1.5vw, 21px);
  animation: cp-wobble 2.1s ease-in-out infinite var(--cp-delay);
}

.cp-sticker-label .cp-copy { gap: 7px; }
.cp-sticker-label .cp-line {
  padding: .28em .48em .22em;
  border-radius: 7px;
  background: var(--cp-accent);
  color: var(--cp-ink);
  box-shadow: 0 5px 0 #080808;
  transform: rotate(-3deg);
  animation: cp-sticker 2.2s cubic-bezier(.2,.8,.25,1.2) infinite var(--cp-delay);
}
.cp-sticker-label .cp-line-two {
  background: var(--cp-primary);
  transform: rotate(2deg);
  animation-delay: calc(var(--cp-delay) + .22s);
}
.cp-sticker-label .cp-word { font-size: clamp(13px, 1.45vw, 20px); }

.cp-emoji-pop .cp-emoji {
  top: 14%;
  left: 50%;
  z-index: 3;
  opacity: 1;
  font-size: clamp(24px, 2.8vw, 40px);
  transform: translateX(-50%);
  animation: cp-emoji 1.8s cubic-bezier(.2,.8,.3,1.3) infinite var(--cp-delay);
}
.cp-emoji-pop .cp-copy { padding-top: 38px; }
.cp-emoji-pop .cp-word {
  font-size: clamp(15px, 1.7vw, 24px);
  text-shadow: 0 3px 0 #050505;
}
.cp-emoji-pop .cp-active { color: var(--cp-accent); }

/* Editorial */
.cp-editorial-stack .cp-copy { align-items: flex-start; padding: 6% 10%; }
.cp-editorial-stack .cp-line { width: 100%; justify-content: space-between; }
.cp-editorial-stack .cp-word {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.75vw, 26px);
  font-weight: 700;
  text-transform: none;
}
.cp-editorial-stack .cp-w2,
.cp-editorial-stack .cp-w3 {
  color: var(--cp-accent);
  font-size: 1.35em;
}
.cp-editorial-stack .cp-line {
  animation: cp-editorial 2.8s ease-in-out infinite var(--cp-delay);
}

.cp-script-write .cp-copy { overflow: hidden; width: 88%; }
.cp-script-write .cp-line-two { display: none; }
.cp-script-write .cp-word {
  font-family: "Bradley Hand", "Segoe Script", cursive;
  font-size: clamp(17px, 2vw, 30px);
  font-weight: 500;
  text-transform: lowercase;
}
.cp-script-write .cp-line-one {
  white-space: nowrap;
  animation: cp-script 3s steps(12, end) infinite var(--cp-delay);
}
.cp-script-write .cp-w1::after { content: " story"; }

.cp-typewriter .cp-copy {
  width: 76%;
  align-items: flex-start;
  overflow: hidden;
  border-right: 2px solid var(--cp-accent);
  animation: cp-typewriter 3.1s steps(15, end) infinite var(--cp-delay);
}
.cp-typewriter .cp-line { flex-wrap: nowrap; white-space: nowrap; }
.cp-typewriter .cp-word {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.2vw, 17px);
  font-weight: 650;
  text-transform: lowercase;
}

.cp-mixed-underline .cp-word {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.7vw, 25px);
  text-transform: lowercase;
}
.cp-mixed-underline .cp-w1,
.cp-mixed-underline .cp-w4 {
  color: #57d9ff;
  font-family: Inter, sans-serif;
  font-size: .72em;
  font-style: italic;
}
.cp-mixed-underline .cp-active {
  position: relative;
  color: #ffd65a;
}
.cp-mixed-underline .cp-active::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -.17em;
  height: 2px;
  background: #ffd65a;
  transform-origin: left;
  animation: cp-underline 2s ease-in-out infinite;
}

/* Specialty */
.cp-fire-flicker .cp-flame {
  top: 9%;
  left: 50%;
  z-index: 3;
  opacity: 1;
  font-size: clamp(20px, 2.4vw, 35px);
  transform: translateX(-50%);
  animation: cp-fire 1.1s ease-in-out infinite var(--cp-delay);
}
.cp-fire-flicker .cp-copy { padding-top: 28px; }
.cp-fire-flicker .cp-word {
  color: #fff4c5;
  font-family: Georgia, serif;
  font-size: clamp(16px, 1.85vw, 27px);
  text-shadow: 0 0 4px #fff, 0 0 9px #ffb000, 0 0 18px #ff3d00;
  animation: cp-fire-text 1.4s ease-in-out infinite var(--cp-delay);
}

.cp-strip-cascade .cp-copy { gap: 2px; }
.cp-strip-cascade .cp-line {
  width: 82%;
  justify-content: flex-start;
  padding: 5px 7px;
  background: #050505;
  animation: cp-strip 2.2s ease-in-out infinite;
}
.cp-strip-cascade .cp-line-two {
  margin-left: 14%;
  background: var(--cp-accent);
  color: var(--cp-ink);
  animation-delay: .18s;
}
.cp-strip-cascade .cp-word { font-size: clamp(11px, 1.25vw, 18px); }

.cp-title-card-punch .cp-copy {
  width: 78%;
  min-height: 58%;
  padding: 10px;
  border: 3px solid var(--cp-primary);
  box-shadow: 6px 6px 0 var(--cp-accent);
  animation: cp-title-card 2s cubic-bezier(.15,.8,.25,1.25) infinite var(--cp-delay);
}
.cp-title-card-punch .cp-line-two { display: none; }
.cp-title-card-punch .cp-w1 { display: none; }
.cp-title-card-punch .cp-active {
  font-size: clamp(23px, 2.8vw, 42px);
  text-shadow: 0 4px 0 #050505;
}

/* Animations */
@keyframes cp-clean-focus { 50% { opacity: .5; transform: translateY(-1px); } }
@keyframes cp-impact { 0%, 22% { transform: scale(1.22) translateY(-2px); } 35%, 100% { transform: none; } }
@keyframes cp-outline-punch { 0%, 18% { transform: scale(.72) rotate(-6deg); opacity: .15; } 30%, 100% { transform: none; opacity: 1; } }
@keyframes cp-condensed { 50% { transform: translateX(4px); } }
@keyframes cp-active-block { 0%, 20% { transform: scale(1.2); } 34%, 100% { transform: none; } }
@keyframes cp-active-color { 0%, 42% { color: var(--cp-accent); transform: scale(1.08); } 43%, 100% { color: var(--cp-primary); transform: none; } }
@keyframes cp-karaoke { 0% { transform: scaleX(0); } 72%, 100% { transform: scaleX(1); } }
@keyframes cp-neon { 0%, 8%, 12%, 100% { opacity: 1; } 10%, 64% { opacity: .72; } }
@keyframes cp-glow-blur { 0%, 15% { filter: blur(5px); opacity: .2; transform: scale(.9); } 30%, 75% { filter: blur(0); opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes cp-gradient { to { background-position: -220% 0; } }
@keyframes cp-speed-smear { 0%, 15% { opacity: .1; transform: translateX(-35px) scaleX(1.5); filter: blur(4px); } 30%, 72% { opacity: 1; transform: none; filter: none; } 100% { opacity: .25; transform: translateX(20px); } }
@keyframes cp-rgb { 0%, 88%, 100% { transform: none; } 90% { transform: translate(-3px, 1px) skewX(5deg); } 94% { transform: translate(3px, -1px); } }
@keyframes cp-scatter { 0%, 15% { opacity: 0; transform: translateY(-20px) rotate(-12deg) scale(.7); } 32%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(15px); } }
@keyframes cp-fade-trail { 0%, 15% { opacity: 0; transform: translateX(-8px); } 36%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(8px); } }
@keyframes cp-comic { 0%, 16% { opacity: 0; transform: translateY(16px) scale(.55) rotate(-8deg); } 32%, 72% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes cp-wobble { 25% { transform: rotate(3deg) scale(1.06); } 55% { transform: rotate(-2deg) scale(.98); } }
@keyframes cp-sticker { 0%, 14% { opacity: 0; transform: translateY(20px) rotate(-8deg) scale(.8); } 32%, 78% { opacity: 1; } 100% { opacity: .35; transform: translateY(-3px) rotate(2deg); } }
@keyframes cp-emoji { 0%, 15% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(-20deg); } 32%, 72% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(.8); opacity: .35; } }
@keyframes cp-editorial { 0%, 15% { opacity: 0; transform: translateX(-12px); } 32%, 78% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes cp-script { 0%, 15% { clip-path: inset(0 100% 0 0); } 65%, 82% { clip-path: inset(0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes cp-typewriter { 0%, 12% { width: 0; } 62%, 82% { width: 76%; } 100% { width: 0; } }
@keyframes cp-underline { 0%, 15% { transform: scaleX(0); } 45%, 82% { transform: scaleX(1); } 100% { opacity: 0; } }
@keyframes cp-fire { 50% { transform: translateX(-50%) scale(1.12) rotate(3deg); filter: brightness(1.3); } }
@keyframes cp-fire-text { 50% { filter: brightness(1.35); transform: scale(1.03); } }
@keyframes cp-strip { 0%, 14% { opacity: 0; transform: translateX(-28px); } 32%, 78% { opacity: 1; transform: none; } 100% { opacity: .25; transform: translateX(16px); } }
@keyframes cp-title-card { 0%, 18% { opacity: 0; transform: scale(.35) rotate(-7deg); } 38%, 76% { opacity: 1; transform: scale(1); } 100% { opacity: .3; transform: scale(.94); } }

@media (max-width: 640px) {
  .director-modal[data-axis="captions"] .director-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-inline: 14px;
  }
  .director-modal[data-axis="captions"] .director-card-art { aspect-ratio: 1 / 1; }
  .director-modal[data-axis="captions"] .director-sheet-controls,
  .director-modal[data-axis="captions"] .director-sheet-hero,
  .director-modal[data-axis="captions"] .director-sheet-head { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .caption-preset-preview,
  .caption-preset-preview * {
    animation: none !important;
  }
}