/* Container for centering and overall look */
.index-page-container {
  /* background-color: #f0f2f5; */
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Outer container stays as you have it */
.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100dvh; */
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

/* NEW: This wraps ONLY Welcome/To/PilottApp */
.welcome-content-frame {
  position: relative;
  padding: 40px;
  /* space for the card frame */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Stack and initial hidden position for the cards */
.card-stack {
  display: flex;
  gap: 10px;
  max-width: 95vw;
  flex-wrap: wrap;
  perspective: 1000px;
  padding-bottom: 20px;
  flex-direction: row;
}

/* Suits row above PilottApp; motion is on this wrap so transforms match (not only on the span) */
.card-stack-main-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(100svh) rotateX(90deg);
  opacity: 0;
  animation: slideInCardMain 2s ease-out forwards;
  animation-delay: 2s;
  font-size: 1.1rem;
}

/*
  Welcome: two modes (Index sets welcome-animations-on | welcome-animations-off).
  Off mode: no long delayed flight from off-screen; card-stack-main-wrap uses welcomeMainRevealSoft instead.
  Effects that do not move elements — e.g. welcomeSteelShine on .bi — run in both modes.
*/
.welcome-content-frame.welcome-animations-off .card-stack .card-text {
  animation: none !important;
  transform: translateY(-100svh) rotateX(0);
  opacity: 0;
}

.welcome-content-frame.welcome-animations-off .card-stack-main-wrap {
  /* Match @keyframes welcomeMainRevealSoft 0% so base .card-stack-main-wrap never flashes from 100svh */
  opacity: 0;
  transform: translateY(calc(0svh - 60% + 0.85rem)) rotateX(0);
  animation: welcomeMainRevealSoft 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0s;
}

/* welcomeSuitsIn skipped in off mode; row fades with the wrap via parent opacity */
.welcome-content-frame.welcome-animations-off .welcome-suits-row {
  animation: none;
  opacity: 1;
  transform: translateY(-8px);
}

.card-stack-main {
  display: flex;
  gap: 10px;
  max-width: 95vw;
  flex-wrap: wrap;
  perspective: 1000px;
  padding-bottom: 20px;
  flex-direction: row;
}

/* Title no longer carries the main entrance/float transforms — the wrap does — so suits stay above it visually */
.card-stack-main .card-text {
  transform: none;
  opacity: 1;
}

/* Styling for each 'card' */
.card-text {
  font-size: clamp(1.5em, 6vw, 3em);
  background: white;
  background-color: #f0f2f5;
  color: #333;
  padding: 10px 15px;
  border-radius: 12px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  height: fit-content;
  /* --- KEY CHANGE 1: Define the initial state (hidden) --- */
  transform: translateY(100vh) rotateX(90deg);
  opacity: 0;
}

/* --- Option 2 CSS --- */
.card-app-name {
  /* Vibrant, modern gradient: Blue to Violet/Pink */
  background: var(--mud-palette-primary);
  color: var(--mud-palette-dark-text);

  /* Slightly more rounded corners for a modern feel */
  border-radius: 15px;

  /* Deep, defined shadow that mimics the gradient color */
  box-shadow: 0 1px 12px 0px var(--mud-palette-primary);

  cursor: pointer;
  user-select: none;
}

.card-app-name:hover {
  filter: brightness(1.06);
}

.card-app-name:active {
  transform: scale(0.97);
}

.index-flying-cards-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.index-flying-card {
  position: fixed;
  left: var(--start-x, 50%);
  top: var(--start-y, 50%);
  width: clamp(3rem, 14vw, 5.5rem);
  height: auto;
  transform: translate(-50%, -50%);
  animation: indexLogoCardThrow 1.85s cubic-bezier(0.33, 0.02, 0.55, 1) forwards;
  will-change: transform, opacity;
}

@keyframes indexLogoCardThrow {
  0% {
    transform: translate(-50%, -50%) scale(0.25) rotate(0deg);
    opacity: 1;
  }

  22% {
    transform: translate(calc(-50% + var(--peak-x, 0px)), calc(-50% - var(--peak-y, min(42vh, 320px)))) scale(1.05)
      rotate(calc(var(--spin, 180deg) * 0.25));
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--peak-x, 0px)), calc(-50% + 115vh)) scale(0.9) rotate(var(--spin, 360deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-flying-card {
    animation-duration: 0.55s;
    animation-timing-function: ease-out;
  }

  @keyframes indexLogoCardThrow {
    0% {
      transform: translate(-50%, -50%) scale(0.9);
      opacity: 1;
    }

    100% {
      transform: translate(calc(-50% + var(--peak-x, 0px)), calc(-50% + 80vh)) scale(0.9);
      opacity: 0;
    }
  }
}

/* Delay the start of each card's animation */
.card-stack .card-text:nth-child(1) {
  animation-delay: 0.1s, 3.1s !important;
  animation: slideInCard 1.5s ease-out forwards,
    slideOutCard 1s ease-out forwards
}

.card-stack .card-text:nth-child(2) {
  animation-delay: 1s, 3.1s !important;
  animation: slideInCard 1.5s ease-out forwards,
    slideOutCard 1s ease-out forwards
}

/* Suit icons above PilottApp — same symbols as the nav bar, in a row */
.welcome-suits-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(0.35rem, 2vw, 0.75rem);
  font-size: clamp(1.2rem, 3.5vw, 1.75rem);
  line-height: 1;
  margin-bottom: 0.4rem;
  opacity: 0;
  /* After slideInCardMain finishes (2s delay + 2s duration) */
  animation: welcomeSuitsIn 0.85s ease-out 4s forwards;
}

.welcome-suits-row .bi {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary), var(--mud-palette-white), var(--mud-palette-primary), var(--mud-palette-primary), var(--mud-palette-primary));
  background-size: 200% 100%;
  animation: welcomeSteelShine 8s linear infinite;
}

@keyframes welcomeSuitsIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(-8px);
  }
}

@keyframes welcomeSteelShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* Off-mode: short fade + small ease-in at final layout (no 2s delay / no flight from 100svh) */
@keyframes welcomeMainRevealSoft {
  from {
    opacity: 0;
    transform: translateY(calc(0svh - 60% + 0.85rem)) rotateX(0);
  }

  to {
    opacity: 1;
    transform: translateY(calc(0svh - 60%)) rotateX(0);
  }
}

/* Signed-in shortcuts: opacity only, after main wrap + suits are steady (on: 4s + 0.85s; off: after welcomeMainRevealSoft) */
.index-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
  max-width: 95vw;
  opacity: 0;
  pointer-events: none;
}

@keyframes welcomeIndexActionsReveal {
  from {
    opacity: 0;
    pointer-events: none;
  }

  to {
    opacity: 1;
    pointer-events: auto;
  }
}

.welcome-content-frame.welcome-animations-on .index-welcome-actions {
  animation: welcomeIndexActionsReveal 0.55s ease-out 4.85s forwards;
}

.welcome-content-frame.welcome-animations-off .index-welcome-actions {
  animation: welcomeIndexActionsReveal 0.55s ease-out 0s forwards;
}

/* The first animation: One-time slide-in with bounce */
@keyframes slideInCard {
  0% {
    transform: translateY(100svh) rotateX(90deg);
    opacity: 0;
  }

  70% {
    transform: translateY(calc(0svh + 50% - 10px)) rotateX(-5deg);
    opacity: 1;
  }

  100% {
    transform: translateY(calc(0svh + 50%)) rotateX(0);
    opacity: 1;
  }
}

@keyframes slideOutCard {
  0% {
    transform: translateY(calc(0svh + 50%)) rotateX(0);
  }

  70% {
    transform: translateY(-60svh) rotateX(-5deg);
    opacity: 1;
  }

  100% {
    transform: translateY(-100svh) rotateX(0);
    opacity: 0;
  }
}

@keyframes slideInCardMain {
  0% {
    transform: translateY(100svh) rotateX(90deg);
    opacity: 0;
  }

  70% {
    transform: translateY(calc(0svh - 60% - 50px)) rotateX(-5deg);
    opacity: 1;
  }

  100% {
    transform: translateY(calc(0svh - 60%)) rotateX(0);
    opacity: 1;
  }
}

/* --- KEY CHANGE 2: Modify Keyframes for Greater Movement --- */
@keyframes floatAndRotate {
  0% {
    transform: translateY(calc(0svh - 50%));
  }

  33% {
    transform: translateY(calc(0svh - 50% - 15px));
  }

  66% {
    transform: translateY(calc(0svh - 50% + 5px));
  }

  99%,
  100% {
    transform: translateY(calc(0svh - 50%));
  }
}

/* Border cards are positioned relative to the content frame */
.border-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* generic card */
.card-card {
  position: absolute;
  width: 45px;
  height: 60px;
  background: white;
  font-size: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  animation: flip 3s ease-in-out;
  transform-style: preserve-3d;
  visibility: hidden;
  /* border-radius: 8px; */
  /* box-shadow: 0 4px 8px rgba(0,0,0,0.25); */
}

/* Positioning relative to content frame edge */
.card-card.top {
  top: -40.5px;
}

.card-card.bottom {
  bottom: -15px;
}

.card-card.left {
  left: -22.5px;
}

.card-card.right {
  right: -22.5px;
}

/* Spread card positions */
.card-card.top:nth-child(1) {
  left: -22.5px;
}

.card-card.top:nth-child(2) {
  left: calc(50% - 22.5px);
}

.card-card.top:nth-child(3) {
  right: -22.5px;
}

.card-card.bottom:nth-child(6) {
  left: calc(50% - 22.5px);
}

.card-card.left:nth-of-type(7) {
  top: calc(50% - 30px);
}

.card-card.left:nth-of-type(8) {
  bottom: -15px;
}

.card-card.right:nth-of-type(4) {
  top: calc(50% - 30px);
}

.card-card.right:nth-of-type(5) {
  bottom: -15px;
}

/* Flip animation */
@keyframes unflip {
  0% {
    visibility: hidden;
  }
}

/* Flip animation */
@keyframes flip {
  0% {
    transform: rotateY(180deg);
  }

  50% {
    transform: rotateY(360deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}