/* Separate arrival sequence; the normal page remains the non-script fallback. */
.brand-welcome {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f2edde;
  color: #12162a;
  visibility: hidden;
  pointer-events: none;
  contain: layout paint;
}
.brand-welcome__wash {
  position: absolute;
  inset: 0;
  background: none;
  opacity: 1;
  transform: none;
}
.brand-welcome__wordmark {
  position: relative;
  display: block;
  width: 200px;
  max-width: calc(100vw - 56px);
  height: auto;
}
.brand-welcome__rule {
  position: absolute;
  top: calc(50% + 38px);
  width: 120px;
  height: 1px;
  background: #8276f5;
  transform-origin: center;
}
.brand-welcome__skip {
  position: absolute;
  bottom: max(30px, env(safe-area-inset-bottom));
  right: max(32px, env(safe-area-inset-right));
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(18,22,42,.3);
  background: none;
  border-radius: 0;
  color: #12162a;
  font: 400 12px/1.3 "Hanken Grotesk", Arial, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.brand-welcome__skip:hover { border-bottom-color: #a99fff; }
.brand-welcome__skip:focus-visible { outline: 2px solid #a99fff; outline-offset: 6px; }
html.welcome-pending .brand-welcome,
html.welcome-playing .brand-welcome {
  visibility: visible;
  pointer-events: auto;
}
html.welcome-pending .brand-welcome {
  animation: indigo-welcome-safety 1ms 4s forwards;
}
html.welcome-pending .brand-welcome__wordmark,
html.welcome-pending .brand-welcome__rule { opacity: 0; }
html.welcome-playing { overflow: hidden; }
html.welcome-playing .brand-welcome {
  animation: indigo-welcome-curtain 1900ms cubic-bezier(.76,0,.24,1) both;
}
html.welcome-playing .brand-welcome__wordmark {
  animation: indigo-welcome-name 1900ms cubic-bezier(.2,.7,.2,1) both;
}
html.welcome-playing .brand-welcome__rule {
  animation: indigo-welcome-line 1900ms cubic-bezier(.3,.6,.3,1) both;
}
/* The artwork stays still; the opening is made by clipping the curtain. */
html.welcome-playing .brand-welcome__skip { animation: indigo-welcome-skip 1900ms ease both; }
@keyframes indigo-welcome-curtain {
  0%, 60% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
@keyframes indigo-welcome-name {
  0% { opacity: 0; }
  22%, 100% { opacity: 1; }
}
@keyframes indigo-welcome-line {
  0%, 17% { opacity: 0; transform: scaleX(.06); }
  40%, 63% { opacity: .7; transform: scaleX(1); }
  82%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes indigo-welcome-skip { 0% { opacity: 0; } 18%, 64% { opacity: .72; } 90%,100% { opacity: 0; } }
@keyframes indigo-welcome-safety { to { visibility: hidden; pointer-events: none; } }
@media (max-width: 600px) {
  .brand-welcome__wordmark { width: 172px; max-width:43vw; }
  .brand-welcome__skip { right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html.welcome-pending .brand-welcome,
  html.welcome-playing .brand-welcome { display: none; animation: none; }
  html.welcome-playing { overflow: visible; }
}