.launch-stage {
  display: none;
  pointer-events: none;
  user-select: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  contain: layout paint;
  opacity: 0;
  visibility: hidden;
}
.launch-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: Arial, sans-serif;
  font-size: clamp(65px, 12vw, 160px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.065em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.launch-caption {
  position: absolute;
  top: calc(50% + 95px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.22em;
}
.launch-accent {
  position: absolute;
  display: block;
}
html[data-intro="red"] .launch-stage {
  display: block;
  background: #e60012;
  color: white;
  animation: red-curtain 1.25s cubic-bezier(0.75, 0, 0.25, 1) both;
}
html[data-intro="red"] .launch-brand {
  animation: red-brand 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-intro="red"] .launch-caption {
  animation: caption-in 0.5s 0.15s both;
}
html[data-intro="red"] .launch-accent {
  left: 50%;
  top: calc(50% - 115px);
  width: 1px;
  height: 35px;
  background: #fff7;
  animation: caption-in 0.35s both;
}
html[data-intro="black"] .launch-stage {
  display: block;
  background: #141414;
  color: white;
  animation: black-curtain 1.35s cubic-bezier(0.75, 0, 0.25, 1) both;
}
html[data-intro="black"] .launch-brand {
  animation: black-brand 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  font-size: clamp(60px, 10vw, 130px);
}
html[data-intro="black"] .launch-caption {
  color: #999;
  animation: caption-in 0.5s 0.2s both;
  top: calc(50% + 85px);
}
html[data-intro="black"] .launch-accent {
  height: 3px;
  left: 0;
  right: 0;
  top: calc(50% + 120px);
  background: #e60012;
  transform-origin: left;
  animation: red-trace 0.7s 0.1s cubic-bezier(0.6, 0, 0.2, 1) both;
}
html[data-intro="type"] .launch-stage {
  display: block;
  background: #fff;
  color: #e60012;
  animation: type-curtain 1.2s cubic-bezier(0.7, 0, 0.25, 1) both;
}
html[data-intro="type"] .launch-brand {
  font-size: clamp(135px, 30vw, 520px);
  animation: type-sweep 1.2s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}
html[data-intro="type"] .launch-caption {
  top: auto;
  bottom: 22%;
  color: #222;
  font-size: 11px;
  animation: caption-in 0.4s 0.15s both;
}
html[data-intro="type"] .launch-accent {
  width: 100%;
  height: 8px;
  bottom: 0;
  background: #e60012;
}
@keyframes red-curtain {
  0%,
  58% {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
  }
  99% {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }
}
@keyframes red-brand {
  from {
    opacity: 0;
    transform: translate(-50%, -35%) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes black-curtain {
  0%,
  59% {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0);
  }
  99% {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes black-brand {
  from {
    opacity: 0;
    letter-spacing: 0.025em;
    transform: translate(-50%, -50%) scale(1.05);
  }
  to {
    opacity: 1;
    letter-spacing: -0.065em;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes red-trace {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes type-curtain {
  0%,
  68% {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0);
  }
  99% {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes type-sweep {
  0% {
    transform: translate(-78%, -50%);
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  65% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100% {
    transform: translate(-35%, -50%);
    opacity: 1;
  }
}
@keyframes caption-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.intro-review {
  position: fixed;
  z-index: 2100;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 9px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 5px 30px #0003;
  color: #222;
  max-width: calc(100% - 24px);
  font-family: inherit;
}
.intro-review button,
.intro-review a {
  font: 12px/1.5 inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  padding: 9px 12px;
  border: 0;
  border-radius: 3px;
  background: #f4f4f4;
  color: #333;
}
.intro-review button[aria-pressed="true"] {
  background: #e60012;
  color: #fff;
}
.intro-review .replay {
  background: #222;
  color: white;
}
.intro-review-label {
  font-size: 11px;
  padding: 0 8px;
  color: #888;
  white-space: nowrap;
}
.intro-review a {
  background: transparent;
  font-size: 11px;
  text-decoration: underline;
}
@media (max-width: 700px) {
  .launch-brand {
    font-size: 70px;
  }
  .launch-caption {
    top: calc(50% + 65px);
    font-size: 10px;
  }
  html[data-intro="red"] .launch-accent {
    top: calc(50% - 80px);
    height: 25px;
  }
  html[data-intro="black"] .launch-caption {
    top: calc(50% + 60px);
  }
  html[data-intro="black"] .launch-accent {
    top: calc(50% + 95px);
  }
  .intro-review {
    bottom: 80px;
    gap: 4px;
    padding: 7px;
    flex-wrap: wrap;
    justify-content: center;
    width: 350px;
  }
  .intro-review-label {
    display: none;
  }
  .intro-review button,
  .intro-review a {
    font-size: 11px;
    padding: 8px 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .launch-stage {
    display: none !important;
  }
  .launch-stage * {
    animation: none !important;
  }
}
@media print {
  .launch-stage,
  .intro-review {
    display: none !important;
  }
}