:root { --difv-brightness: 1.15; }

.difv-cinema .difv-image {
  filter: brightness(var(--difv-brightness)) saturate(1.12) contrast(1.02);
}

.difv-cinema .difv-scene-break {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.difv-cinema .difv-scene-break.is-active { visibility: visible; }

.difv-cinema .difv-scene-break span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #02090e 0%, #071b27 78%, #b67a22 100%);
  transform: scaleY(0);
  transform-origin: top;
}
.difv-cinema .difv-scene-break span:nth-child(even) { transform-origin: bottom; background:linear-gradient(90deg,#b67a22 0%,#071b27 22%,#02090e 100%); }
.difv-cinema .difv-scene-break.is-active span { animation:difv-v5-curtain var(--difv-transition-time) cubic-bezier(.7,0,.22,1) both; }
.difv-cinema .difv-scene-break.is-active span:nth-child(2) { animation-delay:45ms; }
.difv-cinema .difv-scene-break.is-active span:nth-child(3) { animation-delay:80ms; }
.difv-cinema .difv-scene-break.is-active span:nth-child(4) { animation-delay:120ms; }

@keyframes difv-v5-curtain {
  0% { transform:scaleY(0); }
  30% { transform:scaleY(1); }
  62% { transform:scaleY(1); }
  100% { transform:scaleY(0); }
}

.difv-cinema .difv-scene-break b {
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  background:#fff;
}

.difv-cinema .difv-scene-break.mode-flash span { background:#040b10; }
.difv-cinema .difv-scene-break.mode-flash.is-active b { animation:difv-v5-whiteout var(--difv-transition-time) ease-out both; }
@keyframes difv-v5-whiteout {
  0% { opacity:0; }
  24% { opacity:.95; }
  44% { opacity:.15; background:#fff1b5; }
  65%,100% { opacity:0; }
}

.difv-cinema .difv-scene-break.mode-slice { transform:rotate(-5deg) scale(1.15); }
.difv-cinema .difv-scene-break.mode-slice span { transform:translateX(-115%); transform-origin:center; background:linear-gradient(90deg,#00131d,#b67a22); }
.difv-cinema .difv-scene-break.mode-slice span:nth-child(even) { transform:translateX(115%); background:linear-gradient(90deg,#b67a22,#00131d); }
.difv-cinema .difv-scene-break.mode-slice.is-active span { animation-name:difv-v5-slice; }
@keyframes difv-v5-slice {
  0% { transform:translateX(-115%); }
  32% { transform:translateX(0); }
  62% { transform:translateX(0); }
  100% { transform:translateX(115%); }
}
.difv-cinema .difv-scene-break.mode-slice.is-active span:nth-child(even) { animation-name:difv-v5-slice-reverse; }
@keyframes difv-v5-slice-reverse {
  0% { transform:translateX(115%); }
  32% { transform:translateX(0); }
  62% { transform:translateX(0); }
  100% { transform:translateX(-115%); }
}

.difv-cinema .difv-scene-break.mode-ink { display:block; background:#02090e; clip-path:circle(0 at 50% 50%); }
.difv-cinema .difv-scene-break.mode-ink span { display:none; }
.difv-cinema .difv-scene-break.mode-ink.is-active { animation:difv-v5-ink var(--difv-transition-time) cubic-bezier(.7,0,.2,1) both; }
@keyframes difv-v5-ink {
  0% { clip-path:circle(0 at 50% 50%); }
  38% { clip-path:circle(75% at 50% 50%); }
  60% { clip-path:circle(75% at 50% 50%); }
  100% { clip-path:circle(0 at 50% 50%); }
}

.difv-cinema .difv-scene-break.mode-glitch span { background:repeating-linear-gradient(0deg,#02090e 0 12px,#b67a22 13px,#071b27 16px); }
.difv-cinema .difv-scene-break.mode-glitch.is-active { animation:difv-v5-break-glitch var(--difv-transition-time) steps(8,end) both; }
@keyframes difv-v5-break-glitch {
  0%,100% { transform:translateX(0); filter:none; }
  16% { transform:translateX(7%); filter:hue-rotate(80deg); }
  30% { transform:translateX(-6%); }
  48% { transform:translateX(4%); filter:contrast(2); }
  68% { transform:translateX(-2%); }
}

.difv-cinema .difv-scene[data-motion="curtain"].is-entering { animation:difv-v5-enter-curtain var(--difv-transition-time) cubic-bezier(.7,0,.2,1) both; }
.difv-cinema .difv-scene[data-motion="slice"].is-entering { animation:difv-v5-enter-slice var(--difv-transition-time) cubic-bezier(.7,0,.2,1) both; }
@keyframes difv-v5-enter-curtain { from { opacity:0; clip-path:inset(0 50% 0 50%); } to { opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes difv-v5-enter-slice { from { opacity:0; clip-path:polygon(50% 0,50% 0,50% 100%,50% 100%); transform:skewX(-8deg); } to { opacity:1; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:skewX(0); } }

@media (prefers-reduced-motion: reduce) {
  .difv-cinema.difv-reduced-motion .difv-scene-break { display:none!important; }
}