.ctsem-splash {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background: linear-gradient(135deg, var(--color-white) 0%, var(--surface-soft) 54%, var(--surface-blue) 100%);
  opacity: 1;
  transition: opacity 360ms ease;
}

.ctsem-splash[hidden] {
  display: none;
}

.ctsem-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.ctsem-splash__lockup {
  --splash-gap: clamp(14px, 2vw, 24px);
  --splash-heart-size: clamp(76px, 15vw, 112px);
  --splash-name-size: clamp(3.25rem, 9vw, 6.25rem);
  display: flex;
  align-items: center;
  gap: var(--splash-gap);
  max-width: calc(100vw - 32px);
  color: var(--navy-900);
  font-family: "Manrope", sans-serif;
  font-weight: 850;
  white-space: nowrap;
}

.ctsem-splash__heart {
  width: var(--splash-heart-size);
  height: var(--splash-heart-size);
  flex: 0 0 var(--splash-heart-size);
  overflow: hidden;
  opacity: 0;
  transform: translateX(calc((var(--splash-name-size) * 2.8 + var(--splash-gap)) / 2));
  scale: 0.72;
  filter: drop-shadow(0 0 0 rgb(var(--red-500-rgb) / 0));
  animation: ctsem-splash-heart-in 720ms 80ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), scale 520ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 520ms ease;
}

.ctsem-splash__heart img {
  width: 100%;
  height: auto;
  display: block;
}

.ctsem-splash__name {
  display: inline-block;
  opacity: 0;
  font-size: var(--splash-name-size);
  letter-spacing: -0.08em;
  line-height: 0.9;
  transform: translateX(18px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ctsem-splash.is-revealing .ctsem-splash__heart {
  transform: translateX(0);
  scale: 1;
  filter: drop-shadow(0 0 18px rgb(var(--red-500-rgb) / 0.28));
}

.ctsem-splash.is-revealing .ctsem-splash__name {
  opacity: 1;
  transform: translateX(0);
}

@keyframes ctsem-splash-heart-in {
  0% { opacity: 0; scale: 0.72; }
  55% { opacity: 1; scale: 1.04; }
  72% { scale: 0.98; }
  88%, 100% { opacity: 1; scale: 1; }
}

@media (max-width: 600px) {
  .ctsem-splash__lockup {
    --splash-heart-size: clamp(64px, 19vw, 82px);
    --splash-name-size: clamp(2.7rem, 14vw, 4rem);
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctsem-splash,
  .ctsem-splash__heart,
  .ctsem-splash__name {
    animation: none;
    transition: none;
  }
}