* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; cursor: none; }
body {
  background: #070d13;
  color: #f3dfac;
  font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
}

.ambient {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 52%, #123239 0%, transparent 61%),
    radial-gradient(ellipse at 50% 105%, #362a16 0%, transparent 50%),
    linear-gradient(120deg, #070c11, #0b1820 50%, #070b10);
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    radial-gradient(circle, #f8dfa4 0 1px, transparent 1.6px),
    radial-gradient(circle, #88b7c2 0 1px, transparent 1.5px);
  background-size: 163px 137px, 241px 193px;
  background-position: 29px 45px, 81px 20px;
}
#fireworks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* Fine double rules and stepped corners echo the film's Art Deco styling. */
.frame {
  position: fixed;
  inset: 2.5vmin;
  z-index: 3;
  border: 1px solid #bc955356;
  pointer-events: none;
}
.frame::before { content: ""; position: absolute; inset: .65vmin; border: 1px solid #bc955327; }
.frame i { position: absolute; width: 6.3vmin; height: 6.3vmin; border-top: 2px solid #c9a96d; border-left: 2px solid #c9a96d; }
.frame i::before { content: ""; position: absolute; inset: .8vmin; border-top: 1px solid #c9a96d; border-left: 1px solid #c9a96d; }
.frame i::after { content: ""; position: absolute; left: -.37vmin; top: -.37vmin; width: .6vmin; height: .6vmin; transform: rotate(45deg); background: #edd398; }
.frame i:nth-child(1) { left: -.1vmin; top: -.1vmin; }
.frame i:nth-child(2) { right: -.1vmin; top: -.1vmin; transform: rotate(90deg); }
.frame i:nth-child(3) { right: -.1vmin; bottom: -.1vmin; transform: rotate(180deg); }
.frame i:nth-child(4) { left: -.1vmin; bottom: -.1vmin; transform: rotate(270deg); }

.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 4.8vmin 6vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2vmin;
}
.greeting { flex: 0 0 auto; text-align: center; }
.eyebrow {
  margin: 0 0 1.4vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8vmin;
  color: #cdb787;
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(1.1vw, 1.4vh);
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
}
.eyebrow span { width: 5.5vmin; height: 1px; background: linear-gradient(90deg, transparent, #c8a668); }
.eyebrow span:last-child { transform: rotate(180deg); }
.title { margin: 0; font-weight: 400; line-height: 1.04; filter: drop-shadow(0 2px 10px #0009); }
.line { display: block; white-space: nowrap; }
.line1 { font-size: min(6vw, 7.2vh); text-transform: uppercase; letter-spacing: .105em; }
.line2 { font-size: min(11.8vw, 13.2vh); font-style: italic; line-height: 1.1; margin-top: .035em; }
.ch {
  display: inline-block;
  color: #f4dfab;
  background: linear-gradient(110deg, #bc8c49 0%, #e3bf77 20%, #fff0c5 35%, #fff7dd 42%, #d7ae63 58%, #f2d796 80%, #bd9252 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chIn 1s cubic-bezier(.2,.8,.3,1) both, chWave 5.5s ease-in-out infinite, shimmer 7s linear infinite;
}
.ch.space { width: .32em; }
@keyframes chIn {
  from { opacity: 0; transform: translateY(.3em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chWave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.035em); }
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* Preserve the entire source without cropping, stretching or a decorative frame. */
.figure {
  position: relative;
  flex: 0 0 auto;
  width: min(76vw, 124vh);
  margin: 0;
  animation: pictureIn 1.5s .15s ease-out both;
}
.picture-frame { position: relative; width: 100%; aspect-ratio: 1216 / 512; overflow: hidden; }
.gatsby { display: block; width: 100%; height: 100%; object-fit: contain; }
.picture-corner { display: none; }
@keyframes pictureIn { from { opacity: 0; transform: translateY(1vmin); } to { opacity: 1; transform: none; } }

.signoff {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 2.4vmin;
  margin-top: .3vmin;
  color: #d1be95;
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(1.05vw, 1.5vh);
  letter-spacing: .24em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
.rule { position: relative; display: block; width: 7vmin; height: 1px; background: #bd975b70; }
.rule::after { content: ""; position: absolute; right: 0; top: -.2vmin; width: .45vmin; height: .45vmin; background: #c5a66d; transform: rotate(45deg); }
.rule:last-child { transform: rotate(180deg); }

@media (max-aspect-ratio: 1/1) {
  .stage { gap: 5vmin; padding: 9vmin 6vmin; }
  .eyebrow { font-size: 1.9vw; margin-bottom: 3.5vmin; }
  .line1 { font-size: 6.9vw; letter-spacing: .06em; }
  .line2 { font-size: 20vw; margin-top: .06em; }
  .figure { width: 86vw; }
  .signoff { font-size: 1.8vw; gap: 2vmin; letter-spacing: .16em; }
  .rule { width: 4vmin; }
}
@media (prefers-reduced-motion: reduce) {
  .ch { animation: shimmer 14s linear infinite; }
  .figure { animation: none; }
}