/* The two approved raster scenes share Château Romance's ribbon and door timing.
   Each image uses the same source-space rectangle so its artwork stays aligned. */
.opening-overlay.chateau-gatefold-opening {
  --gf-ratio: .510695;
  --gf-paper: #f0e9dc;
  --gf-ink: #4d6048;
  --gf-edge: #a68748;
  --gf-background: url('/themes/evermore/gatefold-background.webp');
  --gf-card: url('/themes/evermore/gatefold-floral-card.webp');
  --gf-left: url('/themes/evermore/gatefold-left.webp');
  --gf-right: url('/themes/evermore/gatefold-right.webp');
  --gf-ribbon-left: url('/themes/evermore/gatefold-ribbon-left.webp');
  --gf-ribbon-right: url('/themes/evermore/gatefold-ribbon-right.webp');
  --gf-bow: url('/themes/evermore/gatefold-bow.webp');
  --gf-caption-top: 22%;
  --gf-caption-bottom: 55%;
  --gf-bow-top: 50%;
  --gf-open-bottom: 9.6%;
  --gf-hinge: 5.6%;
  width: min(100%, 440px);
  margin-inline: auto;
  position: fixed;
  z-index: 100;
  transition: opacity .5s ease, visibility .5s;
  padding: 0 !important;
  background: var(--gf-paper);
  color: var(--gf-ink);
  container-type: size;
  isolation: isolate;
  overflow: hidden;
}

.opening-overlay.chateau-gatefold-opening.op-bluebelle {
  --gf-ratio: .527663;
  --gf-paper: #a3b6cd;
  --gf-ink: #3d567e;
  --gf-edge: #526d90;
  --gf-background: url('/themes/blue-belle/gatefold-background.webp');
  --gf-card: url('/themes/blue-belle/gatefold-floral-card.webp');
  --gf-left: url('/themes/blue-belle/gatefold-left.webp');
  --gf-right: url('/themes/blue-belle/gatefold-right.webp');
  --gf-ribbon-left: url('/themes/blue-belle/gatefold-ribbon-left.webp');
  --gf-ribbon-right: url('/themes/blue-belle/gatefold-ribbon-right.webp');
  --gf-bow: url('/themes/blue-belle/gatefold-bow.webp');
  --gf-caption-top: 24%;
  --gf-caption-bottom: 47%;
  --gf-bow-top: 47.6%;
  --gf-open-bottom: 10%;
  --gf-hinge: 7.2%;
}

.chateau-gatefold-opening.wc-opening:not(.wc-garden) .wc-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  perspective: none;
  overflow: hidden;
}

.chateau-gatefold-opening .gatefold-book {
  position: relative;
  width: min(100%, calc((100cqh - var(--gf-booking-space, 0px)) * var(--gf-ratio)));
  aspect-ratio: var(--gf-ratio);
  background: var(--gf-background) center / contain no-repeat;
  perspective: 1400px;
  container-type: inline-size;
}

.chateau-gatefold-opening .gatefold-book :is(.wc-reveal-card, .wc-vellum, .wc-silk, .gatefold-bow) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--gf-layer) center / contain no-repeat;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.chateau-gatefold-opening .gatefold-book .wc-reveal-card {
  --gf-layer: var(--gf-card);
  display: block;
  z-index: 1;
  filter: drop-shadow(0 5px 5px #29272448);
}

.chateau-gatefold-opening .wc-reveal-copy {
  position: absolute;
  inset: var(--gf-caption-top) 0 auto;
  width: 51%;
  height: calc(var(--gf-caption-bottom) - var(--gf-caption-top));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1.3cqw;
  margin-inline: auto;
  color: var(--gf-ink);
}

.chateau-gatefold-opening .wc-reveal-copy > p {
  font: 9px/1.4 Georgia, serif;
  margin: 0;
  overflow-wrap: anywhere;
}

.chateau-gatefold-opening .wc-reveal-copy > p:first-child {
  font-size: clamp(7px, 1.75cqw, 10px);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .35s ease 1.55s;
}

.chateau-gatefold-opening .wc-reveal-copy > strong {
  gap: .65cqw;
  color: inherit;
  font: 400 clamp(14px, 5.1cqw, 26px)/1.08 Georgia, serif;
}

.chateau-gatefold-opening.op-bluebelle .wc-reveal-copy > strong {
  font-style: italic;
}

.chateau-gatefold-opening .wc-reveal-copy > strong > span {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.chateau-gatefold-opening .wc-reveal-copy > strong > em {
  color: var(--gf-edge);
}

.chateau-gatefold-opening .wc-reveal-copy > p:nth-of-type(2) {
  position: absolute;
  inset: 100% 0 auto;
  padding-top: 2cqw;
  opacity: 0;
  transition: opacity .4s ease 1.9s;
}

.chateau-gatefold-opening.is-opening .wc-reveal-copy > p {
  opacity: 1;
}

.chateau-gatefold-opening .gatefold-book .wc-vellum {
  z-index: 3;
  backface-visibility: hidden;
  filter: drop-shadow(0 7px 8px #28262245);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1) 1s, opacity 1s ease 2s;
}

.chateau-gatefold-opening .wc-vellum.wc-left {
  --gf-layer: var(--gf-left);
  transform-origin: var(--gf-hinge) center;
}

.chateau-gatefold-opening .wc-vellum.wc-right {
  --gf-layer: var(--gf-right);
  transform-origin: calc(100% - var(--gf-hinge)) center;
}

.chateau-gatefold-opening.is-opening .gatefold-book .wc-left {
  transform: translateX(-52%) rotateY(-25deg);
  opacity: 0;
}

.chateau-gatefold-opening.is-opening .gatefold-book .wc-right {
  transform: translateX(52%) rotateY(25deg);
  opacity: 0;
}

.chateau-gatefold-opening .gatefold-book .wc-silk {
  z-index: 4;
  filter: drop-shadow(0 2px 2px #28262242);
  transition: transform 1s ease, opacity .65s ease .25s;
}

.chateau-gatefold-opening .wc-silk::after {
  content: none;
}

.chateau-gatefold-opening .wc-silk-left { --gf-layer: var(--gf-ribbon-left); }
.chateau-gatefold-opening .wc-silk-right { --gf-layer: var(--gf-ribbon-right); }

.chateau-gatefold-opening.is-opening .gatefold-book .wc-silk-left {
  transform: translateX(-64%) rotate(-10deg);
  opacity: 0;
}

.chateau-gatefold-opening.is-opening .gatefold-book .wc-silk-right {
  transform: translateX(64%) rotate(10deg);
  opacity: 0;
}

.chateau-gatefold-opening .gatefold-book .gatefold-bow {
  --gf-layer: var(--gf-bow);
  z-index: 5;
  transform-origin: center var(--gf-bow-top);
  filter: drop-shadow(0 3px 3px #28262246);
  transition: transform .85s ease, opacity .55s ease .22s;
}

.chateau-gatefold-opening.is-opening .gatefold-book .gatefold-bow {
  transform: translateY(6%) rotate(7deg) scale(.86);
  opacity: 0;
}

.chateau-gatefold-opening .gatefold-book .gatefold-bow-action {
  top: var(--gf-bow-top);
  width: max(44px, 40%);
  height: max(44px, 10%);
  cursor: pointer;
}

.chateau-gatefold-opening button:focus-visible {
  outline: 2px solid var(--gf-ink);
  outline-offset: 3px;
}

.chateau-gatefold-opening .wc-skip,
.chateau-gatefold-opening .wc-enter {
  min-height: 44px;
  border: 1px solid var(--gf-edge);
  border-radius: 999px;
  background: #fffdf7f5;
  color: var(--gf-ink);
  cursor: pointer;
}

.chateau-gatefold-opening .wc-skip {
  top: max(10px, env(safe-area-inset-top), calc((100cqh - var(--gf-booking-space, 0px) - 100cqw / var(--gf-ratio)) / 2 + 12px));
  inset-inline-end: 14px;
  font: 13px Georgia, serif;
}

.chateau-gatefold-opening .wc-enter {
  bottom: var(--gf-open-bottom);
  min-width: min(52%, 225px);
  max-width: calc(100% - 42px);
  padding: 8px 21px;
  font: 17px/1.25 Georgia, serif;
  white-space: normal;
}

.chateau-gatefold-opening .wc-brand {
  bottom: 3.6%;
  background: transparent;
  color: var(--gf-ink);
  font: 9px/1.4 Georgia, serif;
}

body:has(.template-enquiry-bar) .chateau-gatefold-opening {
  --gf-booking-space: 128px;
}

body:has(.template-enquiry-bar) .chateau-gatefold-opening.wc-opening:not(.wc-garden) .wc-stage {
  height: calc(100% - var(--gf-booking-space));
}

@media (max-width: 400px) {
  body:has(.template-enquiry-bar) .chateau-gatefold-opening {
    --gf-booking-space: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chateau-gatefold-opening *,
  .chateau-gatefold-opening {
    transition: none !important;
  }
}