/* The date board is a miniature painted jharokha, scaled from the 320:150
   reference artwork. The venue line is visually set inside the board while
   remaining a separate node for the invitation editor. */
.date-plaque {
  width: min(92vw, 38rem);
  max-width: none;
  height: auto;
  aspect-ratio: 320 / 150;
  box-sizing: border-box;
  position: relative;
  padding: 0;
  margin: 0 0 0 calc((100% - min(92vw, 38rem)) / 2);
  border: 0;
  outline: 0;
  border-radius: 0;
  background: url('assets/plaque-frame.svg') center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 10px 14px rgb(60 20 0 / 35%));
  container-type: inline-size;
}

.date-plaque::before,
.date-plaque::after { content: none; }

.date-plaque > div {
  position: absolute;
  inset: 16% 7.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  outline: 0;
  padding: 2.5% 5.1% 0;
  background: none;
  box-shadow: none;
  color: #fff4df;
  perspective: 900px;
  clip-path: url(#plaque-window-clip);
}

.date-plaque > div > span {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  font: 400 5.4cqw/1.25 'Cinzel Decorative', Georgia, serif;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  color: #fff4df;
  text-shadow: 0 1px 3px rgb(50 4 12 / 30%);
}

.date-plaque > div > span span,
.date-plaque > div > span strong {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.date-plaque .plaque-door {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #f8c21b;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 92%) 0 33%, transparent 35%),
    radial-gradient(circle, rgb(255 255 255 / 92%) 0 33%, transparent 35%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  box-shadow: inset 0 0 0 2px #c98a00;
  backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform 1.45s cubic-bezier(.2,.78,.2,1);
  pointer-events: none;
}

.date-plaque .plaque-door::before {
  content: '';
  position: absolute;
  inset: 6%;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 2px;
}

.date-plaque .plaque-door::after {
  content: '';
  position: absolute;
  top: 42%;
  height: 16%;
  width: 7%;
  border: 2px solid #d4a23a;
  border-radius: 999px;
  background: rgb(246 210 122 / 30%);
  box-shadow: 0 1px 3px rgb(65 27 6 / 25%);
}

.date-plaque .plaque-door-left { left: 0; transform-origin: left center; }
.date-plaque .plaque-door-right { right: 0; transform-origin: right center; }
.date-plaque .plaque-door-left::after { right: 5%; }
.date-plaque .plaque-door-right::after { left: 5%; }
.date-plaque.plaque-open .plaque-door-left { transform: rotateY(108deg); }
.date-plaque.plaque-open .plaque-door-right { transform: rotateY(-108deg); }

@media (prefers-reduced-motion: reduce) {
  .date-plaque .plaque-door { transition-duration: .01ms; }
}

.plaque-venue {
  position: relative;
  z-index: 1;
  width: min(92vw, 38rem);
  max-width: none;
  margin: -86px 0 102px calc((100% - min(92vw, 38rem)) / 2);
  font: 400 16.416px/1.5 'Cinzel Decorative', Georgia, serif;
  letter-spacing: .3em;
  text-align: center;
  text-transform: uppercase;
  color: #dea645;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease .75s;
}

.date-plaque.plaque-open + .plaque-venue { opacity: 1; }

@media (max-width: 660px) {
  .plaque-venue {
    margin-top: calc(min(92vw, 38rem) * -.143);
    margin-bottom: calc(min(92vw, 38rem) * .168);
    font-size: min(2.48vw, 16px);
    letter-spacing: .3em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plaque-venue { transition-duration: .01ms; }
}