:root {
  --difv-impact-scale: 1.30;
  --difv-impact-rotate: 26deg;
  --difv-impact-rotate-neg: -26deg;
  --difv-impact-spin: 370deg;
  --difv-impact-spin-neg: -370deg;
  --difv-impact-blur: 21px;
  --difv-impact-shift: 13%;
  --difv-impact-shift-neg: -13%;
  --difv-impact-shift-double-neg: -26%;
}

.difv-cinema { perspective: 1400px; }
.difv-cinema .difv-scene { backface-visibility: hidden; transform-style: preserve-3d; }

.difv-cinema .difv-scene[data-motion="rotate"].is-entering {
  animation: difv-v3-rotate var(--difv-transition-time) cubic-bezier(.18,.88,.24,1.12) both;
}
.difv-cinema .difv-scene[data-motion="spin"].is-entering {
  animation: difv-v3-spin var(--difv-transition-time) cubic-bezier(.15,.8,.2,1) both;
}
.difv-cinema .difv-scene[data-motion="flip"].is-entering {
  animation: difv-v3-flip var(--difv-transition-time) cubic-bezier(.2,.72,.18,1) both;
}
.difv-cinema .difv-scene[data-motion="diagonal"].is-entering {
  animation: difv-v3-diagonal var(--difv-transition-time) cubic-bezier(.7,0,.18,1) both;
}
.difv-cinema .difv-scene[data-motion="shutter"].is-entering {
  animation: difv-v3-shutter var(--difv-transition-time) cubic-bezier(.65,0,.18,1) both;
}
.difv-cinema .difv-scene[data-motion="slam"].is-entering {
  animation: difv-v3-slam var(--difv-transition-time) cubic-bezier(.12,.9,.2,1.12) both;
}
.difv-cinema .difv-scene[data-motion="blur"].is-entering {
  animation: difv-v3-blur var(--difv-transition-time) cubic-bezier(.22,.75,.2,1) both;
}
.difv-cinema .difv-scene[data-motion="glitch"].is-entering {
  animation: difv-v3-glitch var(--difv-transition-time) steps(9,end) both;
}

@keyframes difv-v3-rotate {
  from { opacity:0; transform:scale(var(--difv-impact-scale)) rotate(var(--difv-impact-rotate-neg)); filter:brightness(1.8) blur(5px); }
  to { opacity:1; transform:scale(1) rotate(0); filter:brightness(1) blur(0); }
}
@keyframes difv-v3-spin {
  from { opacity:0; transform:scale(.35) rotate(var(--difv-impact-spin-neg)); filter:brightness(2.5) saturate(.3); }
  62% { opacity:1; filter:brightness(1.25) saturate(1.3); }
  to { opacity:1; transform:scale(1) rotate(0); filter:brightness(1) saturate(1); }
}
@keyframes difv-v3-flip {
  from { opacity:0; transform:translateX(var(--difv-impact-shift-neg)) rotateY(-105deg) scale(.82); filter:brightness(.4); }
  to { opacity:1; transform:translateX(0) rotateY(0) scale(1); filter:brightness(1); }
}
@keyframes difv-v3-diagonal {
  from { opacity:1; clip-path:polygon(0 0,0 0,0 0,0 100%); transform:scale(1.15) rotate(-3deg); }
  to { opacity:1; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:scale(1) rotate(0); }
}
@keyframes difv-v3-shutter {
  from { opacity:1; clip-path:inset(49.5% 0 49.5% 0); filter:brightness(2); transform:scale(1.25); }
  45% { clip-path:inset(31% 0 31% 0); }
  to { opacity:1; clip-path:inset(0 0 0 0); filter:brightness(1); transform:scale(1); }
}
@keyframes difv-v3-slam {
  from { opacity:0; transform:translateY(var(--difv-impact-shift-double-neg)) scale(var(--difv-impact-scale)); filter:blur(var(--difv-impact-blur)) brightness(2); }
  68% { opacity:1; transform:translateY(1.5%) scale(.985); filter:blur(0) brightness(1); }
  to { opacity:1; transform:translateY(0) scale(1); filter:blur(0) brightness(1); }
}
@keyframes difv-v3-blur {
  from { opacity:0; transform:scale(var(--difv-impact-scale)); filter:blur(var(--difv-impact-blur)) contrast(1.6) saturate(.2); }
  to { opacity:1; transform:scale(1); filter:blur(0) contrast(1) saturate(1); }
}
@keyframes difv-v3-glitch {
  0% { opacity:0; transform:translateX(-8%) skewX(8deg); filter:hue-rotate(90deg) contrast(2); clip-path:inset(0 0 82% 0); }
  12% { opacity:1; transform:translateX(7%); clip-path:inset(64% 0 8% 0); }
  24% { transform:translateX(-4%) skewX(-5deg); filter:hue-rotate(-70deg) contrast(1.8); clip-path:inset(15% 0 55% 0); }
  38% { transform:translateX(3%); clip-path:inset(45% 0 25% 0); }
  52% { transform:translateX(-2%); filter:hue-rotate(30deg) contrast(1.4); clip-path:inset(5% 0 18% 0); }
  70% { transform:translateX(1%); clip-path:inset(0 0 0 0); }
  100% { opacity:1; transform:translateX(0) skewX(0); filter:none; clip-path:inset(0 0 0 0); }
}

.difv-cinema .difv-glitch-lines {
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:0;
  background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.15) 9px,transparent 10px);
  mix-blend-mode:screen;
}
.difv-cinema .difv-glitch-lines.is-active { animation:difv-v3-lines var(--difv-transition-time) steps(7,end) both; }
@keyframes difv-v3-lines {
  0%,100% { opacity:0; transform:translateX(0); }
  15% { opacity:.85; transform:translateX(7%); }
  30% { opacity:.25; transform:translateX(-5%); }
  48% { opacity:.7; transform:translateX(3%); }
  70% { opacity:.15; transform:translateX(-2%); }
}

.difv-cinema[data-active-motion="flash"] .difv-flash.is-active,
.difv-cinema[data-active-motion="spin"] .difv-flash.is-active,
.difv-cinema[data-active-motion="slam"] .difv-flash.is-active {
  animation-duration:.95s;
  background:radial-gradient(circle at center,#fff 0,#fff4c7 25%,rgba(255,255,255,0) 72%);
}

.difv-cinema.difv-impact-5 .difv-vignette { box-shadow:inset 0 0 220px rgba(0,0,0,.38); }
.difv-cinema.difv-impact-5 .difv-title { text-shadow:0 5px 35px rgba(0,0,0,.7),0 0 2px #fff; }

@media (prefers-reduced-motion: reduce) {
  .difv-cinema.difv-reduced-motion .difv-scene,
  .difv-cinema.difv-reduced-motion .difv-glitch-lines,
  .difv-cinema.difv-reduced-motion .difv-flash { animation:none!important; }
}