html,
body,
main {
  background: var(--bs-dark);
}

:root {
  /* Use theme colors */
  --primary: var(--bs-primary);
  --primary-rgb: var(--bs-primary-rgb);
  --secondary: var(--bs-secondary);
  --dark: var(--bs-dark);
  --light: var(--bs-light);

  /* Animation timings */
  --fade-duration: 700ms;
  --letter-duration: 800ms;
  --letter-stagger: 120ms;
  --flip-ease: cubic-bezier(.2, .65, .25, 1);
}

/* Full-height hero */
.coming-soon-wrapper {
  min-height: calc(100vh - 120px);
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

/* Glow backdrop in your theme colors */
.coming-soon-wrapper::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70vh;
  background: radial-gradient(60% 60% at 50% 50%,
      rgba(var(--primary-rgb), 0.3),
      rgba(13, 110, 253, 0.15) 40%,
      transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.coming-soon {
  font-family: "Nata Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: clamp(2.2rem, 6vw, 5rem);
  color: #D51C29;
  margin: 0;
  display: inline-block;
  transform-style: preserve-3d;
  perspective: 900px;
  opacity: 0;
  transform: translateY(6px);
  animation: cs-fade-in var(--fade-duration) ease-out forwards;
}

/* Each letter can flip individually */
.coming-soon .letter {
  display: inline-block;
  transform-origin: 50% 50%;
  white-space: pre;
  will-change: transform;
}

/* After fade-in, letters backflip sequentially */
.flip-sequence-start .letter {
  animation: cs-backflip var(--letter-duration) var(--flip-ease) both;
  animation-delay: calc(var(--i) * var(--letter-stagger));
}

/* Keyframes */
@keyframes cs-fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cs-backflip {
  0% {
    transform: rotateX(-360deg);
    filter: brightness(1.25);
  }

  60% {
    transform: rotateX(-10deg);
  }

  80% {
    transform: rotateX(6deg);
  }

  100% {
    transform: rotateX(0deg);
    filter: none;
  }
}

/* Add a red glow accent on the final letter */
.flip-sequence-start .letter:last-child {
  animation-name: cs-backflip, cs-finish-glow;
  animation-duration: var(--letter-duration), 900ms;
  animation-delay: calc(var(--i) * var(--letter-stagger)),
    calc(var(--i) * var(--letter-stagger) + var(--letter-duration));
  animation-fill-mode: both, both;
}

@keyframes cs-finish-glow {
  0% {
    text-shadow: 0 0 0 rgba(var(--primary-rgb), 0);
  }

  40% {
    text-shadow: 0 0 18px rgba(var(--primary-rgb), 0.8);
  }

  100% {
    text-shadow: 0 0 0 rgba(var(--primary-rgb), 0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .coming-soon,
  .flip-sequence-start .letter {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}