@import url('./fonts/fonts.css');600&family=Manrope:wght@400;500;600&display=swap');

/* This proposal is isolated from the live PHP homepage. */
#qm-cinema-v2 {
  font-family: 'Manrope', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#qm-cinema-v2 .qc-film {
  --qc-accent: #d84956;
  --qc-send: linear-gradient(135deg, #31181f, #181114);
}
#qm-cinema-v2 .qc-scene {
  transition: opacity 1.15s ease, visibility 1.15s;
}
#qm-cinema-v2 .qc-chat {
  width: min(500px, calc(100vw - 48px));
}
#qm-cinema-v2 .qc-chat-header {
  padding: 0 2px 22px;
  border-bottom: 1px solid #242023;
}
#qm-cinema-v2 .qc-profile {
  width: 45px;
  height: 45px;
  flex-basis: 45px;
  color: #e6d6dc;
  background: #140d10;
  border-color: #49303a;
}
#qm-cinema-v2 .qc-chat-marker {
  color: #a39197;
  letter-spacing: .18em;
  font-size: 10px;
}
#qm-cinema-v2 .qc-contact { font-weight: 500; }
#qm-cinema-v2 .qc-handle,
#qm-cinema-v2 .qc-sender { color: #b5a7ad; }
#qm-cinema-v2 .qc-date { color: #9c9296; }
#qm-cinema-v2 .qc-message { margin-top: 20px; }
#qm-cinema-v2 .qc-bubble {
  background: #171416;
  border: 1px solid #30262b;
  padding: 15px 19px;
  font-size: 15px;
  border-radius: 21px 21px 21px 6px;
  box-shadow: 0 10px 36px #0008;
  transition: opacity .5s, transform .8s cubic-bezier(.16,1,.3,1);
}
#qm-cinema-v2 .qc-out .qc-bubble {
  border-color: #56303a;
  border-radius: 21px 21px 6px 21px;
}
#qm-cinema-v2 .qc-dots,
#qm-cinema-v2 .qc-out .qc-dots { background: #21171b; }
#qm-cinema-v2 .qc-dots b { background: #c8a7b3; }
#qm-cinema-v2 .qc-final-message .qc-bubble {
  background: linear-gradient(140deg, #2b171d, #130e10);
  border-color: #5a2d38;
  box-shadow: inset 0 1px #ffffff05, 0 16px 64px #7d213815;
  font-size: clamp(18px, 1.75vw, 23px);
  line-height: 1.7;
  letter-spacing: -.025em;
  padding: 25px 28px;
}
#qm-cinema-v2 .qc-final-message .qc-sent-time {
  color: #d48e9e;
  letter-spacing: .17em;
  margin-top: 12px;
}
#qm-cinema-v2 .qc-last-reply .qc-reply {
  border-color: #944753;
  color: #bca5af;
}
#qm-cinema-v2 .qc-afterword-user {
  color: #b18b99;
  letter-spacing: .12em;
}
#qm-cinema-v2 .qc-afterword-text {
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 33px);
  letter-spacing: -.025em;
  line-height: 1.75;
}
#qm-cinema-v2 .qc-finale-inner { perspective: 1100px; }
#qm-cinema-v2 .qc-big-time {
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -.075em;
  color: #f1eded;
}
#qm-cinema-v2 .qc-big-time b { color: #c33c4a; }
#qm-cinema-v2 .qc-final-overline {
  color: #b6a7ad;
  letter-spacing: .22em;
  margin-bottom: 27px;
}
#qm-cinema-v2 .qc-finale h2 {
  font-family: 'Manrope', Arial, sans-serif;
  font-size: clamp(16px, 2.2vw, 23px);
  letter-spacing: .45em;
}
#qm-cinema-v2 .qc-ending-line {
  background: #be3444;
  box-shadow: 0 0 16px #b7203950;
  margin: 29px auto;
}
#qm-cinema-v2 .qc-memory,
#qm-cinema-v2 .qc-finale h2 { transition-duration: 1.3s; }
#qm-cinema-v2 .qc-signature { perspective: 1400px; }
#qm-cinema-v2 .qc-signature-inner {
  width: min(1080px, calc(100vw - 40px));
  perspective: 1400px;
}
#qm-cinema-v2 .qc-signature-orbit {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
#qm-cinema-v2 .qc-mask-reveal {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(25px, 4vw, 46px);
  opacity: 0;
  transform: translateY(26px) rotateX(28deg) scale(.76);
  transform-origin: center 70%;
  transition: opacity 1.5s ease, transform 2.4s cubic-bezier(.16,1,.3,1);
}
#qm-cinema-v2 .qc-signature-mask {
  display: block;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  font-size: clamp(98px, 15vw, 170px);
  line-height: 1.22;
  letter-spacing: 0;
  margin: 0;
  transform: translateZ(35px);
  filter: saturate(.75) drop-shadow(0 17px 19px #8d162526);
}
#qm-cinema-v2 .qc-signature-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .23em;
  font-family: 'Antonio', 'Arial Narrow', Impact, sans-serif;
  font-size: clamp(42px, 10.3vw, 145px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
  opacity: 1;
  transform: translateZ(20px);
  transition: none;
}
#qm-cinema-v2 .qc-word {
  display: flex;
  overflow: hidden;
  padding: 0 .025em .12em;
}
#qm-cinema-v2 .qc-word > span {
  display: block;
  color: #eee9e6;
  background: linear-gradient(165deg, #fffaf4 5%, #e0dbd8 52%, #918991 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(114%) rotateX(-20deg);
  transition: transform 1.7s cubic-bezier(.16,1,.3,1), opacity 1s;
  transition-delay: calc(.35s + var(--i) * .065s);
}
#qm-cinema-v2 .qc-word-moves > span {
  background-image: linear-gradient(165deg, #ef6974 0%, #c13346 45%, #65182b 100%);
}
#qm-cinema-v2 .qc-film[data-scene="signature"] .qc-mask-reveal {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
}
#qm-cinema-v2 .qc-film[data-scene="signature"] .qc-signature-title {
  transform: translateZ(20px);
}
#qm-cinema-v2 .qc-film[data-scene="signature"] .qc-word > span {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
@media(max-width:600px) {
  #qm-cinema-v2 .qc-signature-title { font-size: clamp(38px, 10.8vw, 65px); }
  #qm-cinema-v2 .qc-final-message .qc-bubble { padding: 20px 22px; }
  #qm-cinema-v2 .qc-chat-header { padding-bottom: 15px; }
  #qm-cinema-v2 .qc-chat-marker { font-size: 9px; letter-spacing: .1em; }
  #qm-cinema-v2 .qc-final-overline { font-size: 10px; letter-spacing: .14em; }
}
@media(max-height:430px) and (min-width:601px) {
  #qm-cinema-v2 .qc-signature-mask { font-size: 82px; }
  #qm-cinema-v2 .qc-mask-reveal { margin-bottom: 14px; }
  #qm-cinema-v2 .qc-signature-title { font-size: 70px; }
}
@media(prefers-reduced-motion:reduce) {
  #qm-cinema-v2 .qc-signature-orbit { transform: none; }
  #qm-cinema-v2 .qc-word > span { transition-delay: 0s; }
}