/* Actual ribbon-pulls hero */
.festival-hero {
  isolation: isolate;
  background: #171814;
}

.festival-photo-stage {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #171814;
}

.festival-photo-stage figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  will-change: transform;
}

.festival-photo-stage__main {
  z-index: 2;
  inset: -3% 30% -3% -3%;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  transform: translate3d(
    calc(var(--scene-back-x, 0px) + var(--scene-back-scroll, 0px)),
    calc(var(--scene-back-y, 0px) + var(--scene-back-scroll, 0px)),
    0
  );
}

.festival-photo-stage__side {
  z-index: 1;
  inset: -3% -3% -3% 56%;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  transform: translate3d(
    calc(var(--scene-mid-x, 0px) + var(--scene-mid-scroll, 0px)),
    calc(var(--scene-mid-y, 0px) + var(--scene-mid-scroll, 0px)),
    0
  );
}

.festival-photo-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.01) brightness(1.08);
  transform: scale(1.035);
  animation: festival-ribbon-photo-drift 18s ease-in-out infinite alternate;
}

.festival-photo-stage__main img { object-position: center 61%; }

.festival-photo-stage__side img {
  object-position: center 58%;
  animation-delay: -7s;
}

.festival-photo-stage::before,
.festival-photo-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.festival-photo-stage::before {
  background:
    linear-gradient(90deg, rgba(9, 19, 17, .44) 0%, rgba(9, 19, 17, .2) 38%, rgba(9, 19, 17, .02) 68%, rgba(9, 19, 17, .07) 100%),
    linear-gradient(180deg, rgba(9, 15, 14, .02) 30%, rgba(9, 15, 14, .38) 100%);
}

.festival-photo-stage::after {
  opacity: .12;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

.festival-photo-stage__split {
  position: absolute;
  z-index: 3;
  left: 62%;
  top: -10%;
  width: 2px;
  height: 120%;
  background: rgba(247, 224, 176, .82);
  box-shadow: 0 0 26px rgba(248, 206, 118, .54);
  transform: rotate(6deg);
  transform-origin: center;
}

.festival-photo-stage__ribbons {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.festival-photo-stage__ribbons i {
  position: absolute;
  right: -10%;
  top: 30%;
  width: 58%;
  height: 2px;
  opacity: .64;
  background: #d7ad57;
  transform: rotate(-8deg);
  transform-origin: right center;
  animation: festival-ribbon-line 5.5s ease-in-out infinite alternate;
}

.festival-photo-stage__ribbons i:nth-child(2) {
  top: 38%;
  background: #a94756;
  transform: rotate(-3deg);
  animation-delay: -1.4s;
}

.festival-photo-stage__ribbons i:nth-child(3) {
  top: 46%;
  background: #356f68;
  transform: rotate(4deg);
  animation-delay: -2.7s;
}

.festival-photo-stage__ribbons i:nth-child(4) {
  top: 54%;
  background: #dcd3b4;
  transform: rotate(9deg);
  animation-delay: -3.6s;
}

.festival-hero__shade {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(7, 17, 15, .32) 0%, rgba(7, 17, 15, .06) 48%, transparent 74%),
    linear-gradient(180deg, rgba(7, 17, 15, .01) 38%, rgba(7, 17, 15, .52) 100%);
}

.festival-hero__type {
  z-index: 4;
  opacity: .7;
}

.festival-hero__copy,
.festival-hero__note,
.festival-scroll {
  z-index: 6;
}

.festival-hero__copy {
  width: min(690px, 56vw);
  text-shadow: 0 3px 28px rgba(0, 0, 0, .82);
}

.festival-hero__copy > p:last-child {
  max-width: 560px;
}

.festival-hero__note {
  border-left-color: #e3bd70;
  background: rgba(11, 24, 21, .72);
  backdrop-filter: blur(12px);
}

@keyframes festival-ribbon-photo-drift {
  from { transform: scale(1.035) translate3d(-.5%, 0, 0); }
  to { transform: scale(1.07) translate3d(.7%, -.7%, 0); }
}

@keyframes festival-ribbon-line {
  from { translate: 0 -2px; }
  to { translate: -2% 4px; }
}

@media (max-width: 767px) {
  .festival-hero {
    min-height: 760px;
    padding: 150px 20px 58px;
  }

  .festival-photo-stage__main {
    inset: -2% 15% -2% -8%;
    clip-path: polygon(0 0, 100% 0, 83% 100%, 0 100%);
  }

  .festival-photo-stage__side {
    inset: -2% -10% -2% 69%;
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%);
  }

  .festival-photo-stage__main img { object-position: center 60%; }

  .festival-photo-stage__side img { object-position: 52% 58%; }

  .festival-photo-stage::before {
    background:
      linear-gradient(90deg, rgba(8, 17, 15, .18), transparent 64%),
      linear-gradient(180deg, rgba(8, 17, 15, .02) 24%, rgba(8, 17, 15, .14) 54%, rgba(8, 17, 15, .58) 100%);
  }

  .festival-photo-stage__split { left: 74%; }

  .festival-photo-stage__ribbons i {
    right: -28%;
    width: 90%;
  }

  .festival-hero__type { display: none; }

  .festival-hero__copy {
    width: 100%;
    max-width: 355px;
  }

  .festival-hero__copy h1 {
    font-size: clamp(36px, 11vw, 45px);
    white-space: normal;
  }

  .festival-hero__copy > p:last-child {
    max-width: 320px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
  }

  .festival-hero__note { display: none; }
}

/* Opening: zoom out from the ribbon knot to the bride and groom. */
.festival-opening__photo--couple {
  background: #15211f;
}

.festival-opening__photo--couple .festival-night-scene__picture--back {
  display: block;
  inset: -8%;
  width: 116%;
  height: 116%;
  clip-path: none;
  opacity: 0;
  filter: blur(26px) brightness(.64) saturate(.96);
  transform: scale(1.18);
  animation: none;
}

.festival-opening.is-running .festival-opening__photo--couple .festival-night-scene__picture--back {
  animation: festival-opening-couple-back 5.4s cubic-bezier(.2, .7, .2, 1) both;
}

.festival-opening__photo--couple .festival-night-scene__picture--back img {
  object-position: center 44%;
}

.festival-opening__photo--couple .festival-night-scene__picture--mid {
  display: block;
  z-index: 2;
  inset: -2% 7% -2% auto;
  width: min(48vw, 720px);
  height: 104%;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  transform-origin: 52% 28%;
  animation: none;
}

.festival-opening.is-running .festival-opening__photo--couple .festival-night-scene__picture--mid {
  animation: festival-opening-couple-reveal 5.15s .08s cubic-bezier(.18, .76, .18, 1) both;
}

.festival-opening__photo--couple .festival-night-scene__picture--mid img {
  object-position: center 44%;
  filter: brightness(1.06) saturate(1.06) contrast(1.01);
}

.festival-opening__photo--couple .festival-night-scene__picture--front {
  display: none;
}

.festival-opening__photo--couple .festival-night-scene__wash {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(6, 18, 15, .82) 0%, rgba(6, 18, 15, .58) 35%, rgba(6, 18, 15, .08) 62%, rgba(6, 18, 15, .2) 100%),
    linear-gradient(180deg, rgba(7, 15, 14, .05), rgba(7, 15, 14, .56));
}

.festival-opening__photo--couple .festival-night-scene__ribbons {
  z-index: 5;
  top: -21%;
  right: -5%;
  bottom: 0;
  left: 39%;
  width: 66%;
  height: 121%;
  opacity: .48;
}

.festival-opening__photo--couple .festival-night-scene__glows,
.festival-opening__photo--couple .festival-night-scene__fireflies {
  z-index: 6;
}

.festival-opening__photo--couple + .festival-opening__iris {
  background:
    radial-gradient(circle at 71% 29%, rgba(255, 214, 128, .38), transparent 4%, rgba(14, 24, 22, .7) 18%, #0b1614 58%);
}

@keyframes festival-opening-couple-back {
  0% { opacity: 0; transform: scale(1.28); }
  20% { opacity: .55; }
  100% { opacity: 1; transform: scale(1.08); }
}

@keyframes festival-opening-couple-reveal {
  0% {
    opacity: 0;
    clip-path: circle(2% at 52% 28%);
    transform: scale(2.7);
  }
  22% {
    opacity: 1;
    clip-path: circle(13% at 52% 28%);
    transform: scale(2.42);
  }
  58% {
    clip-path: circle(72% at 52% 28%);
    transform: scale(1.32);
  }
  100% {
    opacity: 1;
    clip-path: circle(120% at 52% 28%);
    transform: scale(1.01);
  }
}

@media (max-width: 767px) {
  .festival-opening__photo--couple .festival-night-scene__picture--mid {
    inset: -2%;
    width: 104%;
    height: 104%;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 85%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 85%, transparent 100%);
  }

  .festival-opening__photo--couple .festival-night-scene__wash {
    background:
      linear-gradient(180deg, rgba(6, 18, 15, .1) 0%, rgba(6, 18, 15, .03) 46%, rgba(6, 18, 15, .68) 100%),
      linear-gradient(90deg, rgba(6, 18, 15, .1), transparent 70%);
  }

  .festival-opening__photo--couple .festival-night-scene__ribbons {
    top: -20%;
    right: -12%;
    left: -12%;
    width: 124%;
    height: 120%;
  }

  .festival-opening__photo--couple + .festival-opening__iris {
    background:
      radial-gradient(circle at 51% 29%, rgba(255, 214, 128, .38), transparent 4%, rgba(14, 24, 22, .7) 18%, #0b1614 58%);
  }

  .festival-opening__copy {
    top: auto;
    bottom: 13%;
  }

  .festival-opening__copy > p:first-child {
    margin-bottom: 14px;
  }

  .festival-opening__title {
    font-size: clamp(40px, 13vw, 58px);
  }

  .festival-opening__jp {
    margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .festival-photo-stage figure,
  .festival-photo-stage img,
  .festival-photo-stage__ribbons i {
    animation: none !important;
    transform: none !important;
  }

  .festival-opening__photo--couple .festival-night-scene__picture--back,
  .festival-opening__photo--couple .festival-night-scene__picture--mid {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}