.story-r3-cut.is-opening-cutout {
  inset: 0;
  overflow: hidden;
  background: #07090a;
  transition-duration: 160ms;
}

body.story-r3-active:has(#storyR3Cut.is-opening-cutout.is-visible) > #settingsButton {
  opacity: 0;
  pointer-events: none;
}

.story-r3-cut.is-opening-cutout img {
  object-fit: cover;
  filter: none;
}

.story-r3-opening-photo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111619;
}

.story-r3-cut.is-opening-photo img {
  visibility: hidden;
}

.story-r3-opening-photo-wipe {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.story-r3-opening-photo-wipe::before {
  content: "";
  position: absolute;
  top: 41%;
  left: 28%;
  width: clamp(26px, 5.5vw, 86px);
  height: clamp(70px, 16vh, 176px);
  border: 1px solid rgba(92, 58, 39, 0.54);
  border-radius: 56% 54% 46% 48%;
  opacity: 0;
  background:
    linear-gradient(88deg, transparent 38%, rgba(91, 55, 36, 0.4) 42% 45%, transparent 50%) 0 58% / 100% 12% no-repeat,
    linear-gradient(103deg, #9d6b4c 0%, #c28d69 42%, #8d5a3f 100%);
  box-shadow: inset -8px -5px 12px rgba(69, 41, 30, 0.36), 0 5px 10px rgba(0, 0, 0, 0.24);
  transform: rotate(62deg);
  transform-origin: 50% 90%;
  animation: story-r3-opening-photo-thumb 4s linear both;
}

.story-r3-opening-photo-wipe::after {
  content: "";
  position: absolute;
  top: 32%;
  left: 27%;
  width: 25%;
  height: 37%;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 35%, rgba(240, 226, 190, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 62%, rgba(240, 226, 190, 0.34) 0 1px, transparent 2px),
    linear-gradient(105deg, transparent 30%, rgba(255, 244, 214, 0.22) 48%, transparent 64%);
  mix-blend-mode: screen;
  animation: story-r3-opening-photo-dust 4s linear both;
}

.story-r3-cut.is-opening-cutout figcaption {
  display: none;
}

.story-r3-cut.is-visible.is-opening-whip {
  animation: story-r3-opening-whip-frame 360ms ease-out both;
}

.story-r3-cut.is-opening-whip img {
  animation: story-r3-opening-whip-image 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes story-r3-opening-whip-frame {
  0% { opacity: 0.35; }
  45% { opacity: 0.88; }
  100% { opacity: 1; }
}

@keyframes story-r3-opening-whip-image {
  0% { transform: translateX(12%) scale(1.035); filter: blur(18px); }
  55% { transform: translateX(-2%) scale(1.015); filter: blur(5px); }
  100% { transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes story-r3-opening-photo-thumb {
  0%, 38% { left: 28%; opacity: 0; }
  41% { left: 29%; opacity: 0.94; }
  48% { left: 41%; opacity: 0.96; }
  52% { left: 35%; opacity: 0.9; }
  57%, 100% { left: 30%; opacity: 0; }
}

@keyframes story-r3-opening-photo-dust {
  0%, 40% { opacity: 0; transform: translateX(-5%); }
  47% { opacity: 0.72; }
  56% { opacity: 0; transform: translateX(18%); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .story-r3-cut.is-visible.is-opening-whip,
  .story-r3-cut.is-opening-whip img,
  .story-r3-opening-photo-wipe::before,
  .story-r3-opening-photo-wipe::after {
    animation-duration: 1ms;
  }
}