/* The plate and both leaves share the same coordinates on the 1672×941 master. */
.hero {
  --portal-art: url("assets/gate.webp");
  --portal-duration: 1540ms;
  --portal-approach: approach-gate var(--portal-duration) cubic-bezier(0.35, 0, 0.22, 1) both;
  --portal-hearth: enter-hearth var(--portal-duration) ease-out both;
  --portal-x: 0.64;
  --portal-y: 0.54;
  --portal-center-x: 0.7465;
  --portal-center-y: 0.48;
  --plate-width: max(100cqw, calc(100cqh * 1672 / 941));
  --plate-height: max(100cqh, calc(100cqw * 941 / 1672));
}

.hero-scenes {
  container-type: size;
}

.scene-outside img {
  object-position: calc(var(--portal-x) * 100%) calc(var(--portal-y) * 100%);
}

.hero:has(.cave-gate[open]) .scene-inside img {
  transform: scale(1.08);
  transform-origin: 70% 54%;
}

.portal-plate,
.portal-frame img {
  display: none;
}

@supports (inline-size: 1cqw) and (clip-path: polygon(evenodd, 0 0, 100% 0, 0 100%)) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    .hero:has(.cave-gate[open]) .portal-plate {
      position: absolute;
      display: block;
      inline-size: var(--plate-width);
      block-size: var(--plate-height);
      inset-inline-start: calc((100cqw - var(--plate-width)) * var(--portal-x));
      inset-block-start: calc((100cqh - var(--plate-height)) * var(--portal-y));
      transform-origin: calc(var(--portal-center-x) * 100%) calc(var(--portal-center-y) * 100%);
      will-change: transform, opacity;
      animation: var(--portal-approach),
                 pass-threshold var(--portal-duration) linear both;
    }

    .portal-frame, .portal-leaf {
      position: absolute;
      inset: 0;
      background: var(--portal-art) center / 100% 100%;
    }

    .portal-frame {
      clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 62.500% 36.026%, 63.995% 32.306%, 66.627% 28.480%, 69.199% 25.717%, 71.591% 23.911%, 73.864% 22.635%, 75.060% 22.635%, 77.572% 23.486%, 80.203% 25.717%, 82.835% 28.587%, 84.091% 30.499%, 84.868% 37.513%, 86.065% 46.865%, 86.842% 54.729%, 87.141% 61.637%, 85.526% 64.187%, 77.751% 65.781%, 74.880% 66.525%, 74.462% 66.631%, 66.986% 66.419%, 63.517% 64.718%, 62.560% 61.318%, 62.500% 36.026%, 0 0);
    }

    .portal-leaf {
      will-change: transform;
      animation: swing-leaf var(--portal-duration) cubic-bezier(0.48, 0.04, 0.22, 1) both;
    }

    /* Keep each rotating texture bounded to the timber it depicts. */
    .portal-leaf-left {
      --hinge-turn: 73deg;
      inset: 22.635% auto auto 62.500%;
      inline-size: 12.500%;
      block-size: 43.996%;
      background-size: 800.000% 227.295%;
      background-position: 71.429% 40.417%;
      transform-origin: 0.800% 57.652%;
      clip-path: polygon(0.000% 30.435%, 11.962% 21.981%, 33.014% 13.285%, 53.589% 7.005%, 72.727% 2.899%, 90.909% 0.000%, 99.522% 0.000%, 100.000% 99.758%, 95.694% 100.000%, 35.885% 99.517%, 8.134% 95.652%, 0.478% 87.923%);
    }

    .portal-leaf-right {
      --hinge-turn: -73deg;
      inset: 22.635% auto auto 74.821%;
      inline-size: 12.321%;
      block-size: 43.889%;
      background-size: 811.650% 227.845%;
      background-position: 85.334% 40.341%;
      transform-origin: 91.550% 57.792%;
      clip-path: polygon(0.000% 0.000%, 1.942% 0.000%, 22.330% 1.937%, 43.689% 7.022%, 65.049% 13.559%, 75.243% 17.918%, 81.553% 33.898%, 91.262% 55.206%, 97.573% 73.123%, 100.000% 88.862%, 86.893% 94.673%, 23.786% 98.305%, 0.485% 100.000%);
    }

    .hero:has(.cave-gate[open]) .scene-inside img {
      animation: var(--portal-hearth);
    }
  }
}

@keyframes swing-leaf {
  0%, 5% { transform: perspective(95rem) rotateY(0deg); }
  46%, 100% { transform: perspective(95rem) rotateY(var(--hinge-turn)); }
}

@keyframes approach-gate {
  0%, 38% { transform: translate3d(0, 0, 0) scale(1); }
  64% { transform: translate3d(-5cqw, 1cqh, 0) scale(1.42); }
  100% { transform: translate3d(-23cqw, 2cqh, 0) scale(4.8); }
}

@keyframes approach-gate-desktop {
  0%, 38% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-23cqw, 2cqh, 0) scale(4.8); }
}

@keyframes pass-threshold {
  0%, 77% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes enter-hearth {
  0%, 60% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

@media (min-width: 701px) {
  .hero {
    --portal-approach: approach-gate-desktop var(--portal-duration) cubic-bezier(0.52, 0, 0.36, 1) both;
    --portal-hearth: none;
  }

  .hero[data-portal-frame-ready] .portal-frame {
    background: none;
    clip-path: none;
    transform: translateZ(0);
  }

  .hero[data-portal-frame-ready] .portal-frame img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
}

@media (max-width: 700px) {
  .hero {
    --portal-art: url("assets/gate-mobile.webp");
    --portal-x: 0.95;
    --portal-y: 0.42;
    --portal-center-y: 0.34;
  }

  @supports (mask-image: linear-gradient(#000, transparent)) { /* taste-skill-ignore: support check for the image edge mask */
    .scene-inside {
      background: var(--ground);
    }

    .scene-inside img {
      block-size: clamp(21rem, 76vw, 25rem);
      object-position: 75% 58%;
      mask-image: linear-gradient(#000 76%, transparent); /* taste-skill-ignore: feather the bottom edge of the artwork */
    }
  }
}

@supports not (inline-size: 1cqw) {
  .gate-hotspot {
    display: none;
  }
}