/* Container for centering and overall look */

.index-page-container{
    /* background-color: #f0f2f5; */
    height: -webkit-fill-available;
    align-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;
}

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

/* 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: linear-gradient(135deg, #007bff, #8a2be2); 
  color: white;
  
  /* Slightly more rounded corners for a modern feel */
  border-radius: 15px; 
  
  /* Deep, defined shadow that mimics the gradient color */
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.5); 
}

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

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

.card-stack-main .card-text:nth-child(1) {
  animation-delay: 2s, 6.5s !important; 
  animation: slideInCardMain 2s ease-out forwards,
             floatAndRotate 9s ease-in-out infinite alternate
}

/* 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 slideInCardMain {
  0% {
    transform: translateY(100svh) rotateX(90deg);
    opacity: 0;
  }
  70% {
    transform: translateY(calc(0svh + 50% - 100px)) rotateX(-5deg); 
    opacity: 1;
  }
  100% {
    transform: translateY(calc(0svh - 50%)) rotateX(0); 
    opacity: 1;
  }
}

@keyframes slideOutCard {
  0% {
    transform: translateY(0px) rotateX(0); 
  }
  70% {
    transform: translateY(-50svh) rotateX(-5deg); 
    opacity: 1;
  }
  100% {
    transform: translateY(-100svh) rotateX(0); 
    opacity: 0;
  }
}

/* --- 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); }
}