:root {
  --difv-desktop-height: 72vh;
  --difv-mobile-height: 58vh;
  --difv-display-time: 6200ms;
  --difv-transition-time: 1500ms;
  --difv-zoom: 1.12;
  --difv-shade: .34;
  --difv-shade-deep: .62;
}

body.difv-cinema-active #pickup_posts_container.difv-cinema {
  width: 100vw !important;
  max-width: none !important;
  height: var(--difv-desktop-height);
  min-height: 500px;
  max-height: 940px;
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #07131b;
  border-radius: 0;
}

.difv-cinema *, .difv-cinema *::before, .difv-cinema *::after { box-sizing: border-box; }

.difv-cinema .difv-scene {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  text-decoration: none !important;
  color: #fff !important;
  background: #07131b;
  transform-origin: center;
}

.difv-cinema .difv-scene.is-current {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.difv-cinema .difv-scene.is-leaving { z-index: 1; opacity: 1; }
.difv-cinema .difv-scene.is-entering { z-index: 3; pointer-events: auto; }

.difv-cinema .difv-image {
  position: absolute;
  inset: -3%;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.02);
  will-change: transform, filter;
}

.difv-cinema .is-current .difv-image,
.difv-cinema .is-entering .difv-image {
  animation: difv-pan-one var(--difv-display-time) ease-out both;
}
.difv-cinema [data-pan="2"].is-current .difv-image,
.difv-cinema [data-pan="2"].is-entering .difv-image { animation-name: difv-pan-two; }
.difv-cinema [data-pan="3"].is-current .difv-image,
.difv-cinema [data-pan="3"].is-entering .difv-image { animation-name: difv-pan-three; }

@keyframes difv-pan-one { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(var(--difv-zoom)) translate3d(-1.4%,-.8%,0); } }
@keyframes difv-pan-two { from { transform: scale(var(--difv-zoom)) translate3d(-1%,.5%,0); } to { transform: scale(1.025) translate3d(1%,0,0); } }
@keyframes difv-pan-three { from { transform: scale(1.03) translate3d(0,-1%,0); } to { transform: scale(var(--difv-zoom)) translate3d(1.2%,1%,0); } }

.difv-cinema .difv-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2,17,26,var(--difv-shade-deep)) 0%, rgba(2,17,26,var(--difv-shade)) 48%, rgba(2,17,26,.06) 82%),
    linear-gradient(0deg, rgba(0,8,14,.55) 0%, transparent 50%);
}

.difv-cinema .difv-vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 150px rgba(0,0,0,.22);
}

.difv-cinema .difv-copy {
  position: absolute;
  z-index: 4;
  left: clamp(30px, 7vw, 120px);
  right: clamp(28px, 40vw, 650px);
  bottom: clamp(70px, 13vh, 145px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: #fff;
}

.difv-cinema .difv-category,
.difv-cinema .difv-title,
.difv-cinema .difv-read {
  opacity: 0;
  transform: translate3d(0,30px,0);
}

.difv-cinema .is-current .difv-category,
.difv-cinema .is-entering .difv-category { animation: difv-copy-up .75s cubic-bezier(.2,.8,.2,1) .35s forwards; }
.difv-cinema .is-current .difv-title,
.difv-cinema .is-entering .difv-title { animation: difv-copy-up .9s cubic-bezier(.2,.8,.2,1) .52s forwards; }
.difv-cinema .is-current .difv-read,
.difv-cinema .is-entering .difv-read { animation: difv-copy-up .8s cubic-bezier(.2,.8,.2,1) .72s forwards; }
@keyframes difv-copy-up { to { opacity: 1; transform: translate3d(0,0,0); } }

.difv-cinema .difv-category {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.difv-cinema .difv-title {
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .025em;
  text-shadow: 0 4px 28px rgba(0,0,0,.48);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.difv-cinema .difv-read {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  border-bottom: 1px solid rgba(255,255,255,.65);
  padding-bottom: 7px;
}
.difv-cinema .difv-read b { font-size: 18px; margin-left: 8px; }

.difv-cinema .difv-scene[data-motion="zoom"].is-entering { animation: difv-enter-zoom var(--difv-transition-time) cubic-bezier(.22,.75,.18,1) both; }
.difv-cinema .difv-scene[data-motion="wipe"].is-entering { animation: difv-enter-wipe var(--difv-transition-time) cubic-bezier(.7,0,.2,1) both; }
.difv-cinema .difv-scene[data-motion="circle"].is-entering { animation: difv-enter-circle var(--difv-transition-time) cubic-bezier(.6,0,.25,1) both; }
.difv-cinema .difv-scene[data-motion="flash"].is-entering { animation: difv-enter-flash var(--difv-transition-time) cubic-bezier(.2,.75,.2,1) both; }
.difv-cinema .difv-scene.is-leaving .difv-image { animation: difv-leave var(--difv-transition-time) ease-in both; }

@keyframes difv-enter-zoom { from { opacity: 0; transform: scale(1.2); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes difv-enter-wipe { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes difv-enter-circle { from { opacity: 1; clip-path: circle(0 at 50% 50%); } to { opacity: 1; clip-path: circle(80% at 50% 50%); } }
@keyframes difv-enter-flash { from { opacity: 0; transform: scale(.94); filter: brightness(2.4) saturate(.3); } to { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); } }
@keyframes difv-leave { to { transform: scale(1.16); filter: brightness(.55) blur(3px); } }

.difv-cinema .difv-flash { position:absolute; inset:0; z-index:8; pointer-events:none; background:#fff; opacity:0; }
.difv-cinema .difv-flash.is-active { animation: difv-flash .7s ease-out both; }
@keyframes difv-flash { 0% { opacity:0; } 18% { opacity:.65; } 100% { opacity:0; } }

.difv-cinema .difv-progress { position:absolute; z-index:9; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15); }
.difv-cinema .difv-progress i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#c6892c,#fff1b5); transform:scaleX(0); transform-origin:left; }
.difv-cinema .difv-progress i.is-running { animation:difv-progress var(--difv-display-time) linear forwards; }
.difv-cinema.is-paused .difv-progress i { animation-play-state:paused; }
@keyframes difv-progress { to { transform:scaleX(1); } }

.difv-cinema.difv-hide-title .difv-title,
.difv-cinema.difv-hide-category .difv-category { display:none; }
.difv-cinema.difv-hide-read .difv-read,
.difv-cinema.difv-hide-progress .difv-progress { display:none; }

@media (max-width: 767px) {
  body.difv-cinema-active #pickup_posts_container.difv-cinema { height:var(--difv-mobile-height); min-height:410px; max-height:760px; }
  .difv-cinema .difv-scene::after { background:linear-gradient(0deg,rgba(0,8,14,.78) 0%,rgba(0,8,14,.16) 74%); }
  .difv-cinema .difv-copy { left:24px; right:24px; bottom:54px; gap:12px; }
  .difv-cinema .difv-title { font-size:clamp(25px,7.5vw,38px); -webkit-line-clamp:3; }
  .difv-cinema .difv-category { padding:7px 12px; font-size:12px; }
  .difv-cinema .difv-read { font-size:10px; }
}

@media (prefers-reduced-motion: reduce) {
  .difv-cinema.difv-reduced-motion .difv-image,
  .difv-cinema.difv-reduced-motion .difv-category,
  .difv-cinema.difv-reduced-motion .difv-title,
  .difv-cinema.difv-reduced-motion .difv-read { animation:none!important; opacity:1; transform:none; }
  .difv-cinema.difv-reduced-motion .difv-progress { display:none; }
}