/* The introduction plays on every home load; the catalog loads behind it. */
#mansoco-brand-intro { display: none; }
.mansoco-intro-active #mansoco-brand-intro {
  position: fixed; inset: 0; z-index: 10000; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  padding: 24px; background: #fff; color: #881337; pointer-events: none;
  animation: mansoco-intro-safety 3.5s forwards;
}
.mansoco-intro-dots { position: absolute; inset: -40px; opacity: .45; pointer-events: none; }
.mansoco-intro-dots::before, .mansoco-intro-dots::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, #881337 1px, transparent 1.3px);
  background-size: 31px 31px; animation: mansoco-dot-drift 9s ease-in-out infinite alternate;
}
.mansoco-intro-dots::after { opacity: .3; background-size: 49px 49px; animation-delay: -4s; animation-direction: alternate-reverse; }
.mansoco-intro-content {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; width: min(100%, 520px); padding: 20px 0;
  background: radial-gradient(ellipse, #fff 48%, #ffffffd9 64%, #ffffff00 74%);
}
.mansoco-intro-logo {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  width: 120px; height: 152px; padding: 13px; border-radius: 30px;
  background: #881337; box-shadow: 0 10px 28px #88133717; margin-bottom: 22px;
}
.mansoco-intro-logo img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.mansoco-intro-wordmark {
  margin: 0; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(42px, 10vw, 68px); font-style: italic; font-weight: 400;
  letter-spacing: .045em; line-height: 1.12; color: #881337;
}
.mansoco-intro-subtitle {
  display: block; margin-top: 12px; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(11px, 3vw, 14px); font-style: normal; letter-spacing: .3em;
  line-height: 1.8; text-transform: uppercase; color: #881337;
}
.mansoco-intro-exit #mansoco-brand-intro { opacity: 0; transition: opacity 220ms ease-out; }
@keyframes mansoco-dot-drift { from { transform: translate3d(-8px, -5px, 0); } to { transform: translate3d(12px, 13px, 0); } }
/* CSS also releases the page if the app or dismissal script fails. */
@keyframes mansoco-intro-safety { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .mansoco-intro-dots::before, .mansoco-intro-dots::after { animation: none; }
  .mansoco-intro-exit #mansoco-brand-intro { transition: none; }
}
@media print { #mansoco-brand-intro { display: none !important; } }