:root{
  --rose:#D88AA4;
  --burgundy:#8A314E;
  --blush:#FDF2F8;
  --cream:#FFF7ED;
  --charcoal:#2F3142;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  background:linear-gradient(180deg,#FDF2F8 0%,#F8E3EA 55%,#F6D9E3 100%);
  overflow:hidden;
}

.splash{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
}

.content{
  position:relative;
  z-index:10;
  text-align:center;
  color:var(--burgundy);
  animation:fadeIn 1.8s ease;
}

.logo-box{
  width:120px;
  height:120px;
  margin:0 auto 24px;
  border-radius:32px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px);
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:'Playfair Display',serif;
  font-size:72px;
  box-shadow:0 12px 35px rgba(138,49,78,.18);
}

h1{
  font-family:'Playfair Display',serif;
  font-size:46px;
  margin-bottom:16px;
}

p{
  font-size:18px;
  line-height:1.5;
  max-width:280px;
  margin:0 auto 34px;
}

.loading{
  width:220px;
  height:6px;
  margin:0 auto 16px;
  background:rgba(255,255,255,.45);
  border-radius:999px;
  overflow:hidden;
}

.loading-bar{
  width:45%;
  height:100%;
  background:var(--rose);
  border-radius:999px;
  animation:loading 2s ease infinite;
}

small{
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:.75;
  font-size:11px;
}

.cloud{
  position:absolute;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  opacity:1;
}

.cloud1{
  width:140%;
  height:55%;
  top:-12%;
  left:-20%;
  background-image:url("A7C50673-F03A-4EEC-9D9E-EFEE64D513C9.png");
  animation:drift1 40s ease-in-out infinite;
}

.cloud2{
  width:130%;
  height:45%;
  top:18%;
  left:-15%;
  background-image:url("A7C50673-F03A-4EEC-9D9E-EFEE64D513C9.png");
  opacity:.75;
  animation:drift2 28s ease-in-out infinite;
}

.cloud3{
  width:150%;
  height:60%;
  bottom:-18%;
  left:-25%;
  background-image:url("A7C50673-F03A-4EEC-9D9E-EFEE64D513C9.png");
  background-size:contain;
  opacity:.95;
  animation:drift3 18s ease-in-out infinite;
}

.stars span{
  position:absolute;
  color:#FFF9E6;
  font-size:18px;
  animation:twinkle 3s infinite ease-in-out;
}

.stars span:nth-child(1){top:12%;left:24%;}
.stars span:nth-child(2){top:18%;right:20%;animation-delay:.8s;}
.stars span:nth-child(3){top:34%;left:12%;animation-delay:1.4s;}
.stars span:nth-child(4){top:46%;right:14%;animation-delay:2.2s;}
.stars span:nth-child(5){top:68%;left:26%;animation-delay:.5s;}
.stars span:nth-child(6){top:78%;right:28%;animation-delay:1.8s;}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}

@keyframes loading{
  0%{transform:translateX(-120%);}
  100%{transform:translateX(320%);}
}

@keyframes twinkle{
  0%,100%{opacity:.25;transform:scale(.8) rotate(0deg);}
  50%{opacity:1;transform:scale(1.3) rotate(18deg);}
}

@keyframes drift1{
  50%{transform:translate(30px,18px);}
}

@keyframes drift2{
  50%{transform:translate(-26px,20px);}
}

@keyframes drift3{
  50%{transform:translate(-50%, -18px);}
}


.primary-btn,
.secondary-btn{
  width:260px;
  padding:16px;
  border-radius:999px;
  font-size:16px;
  border:none;
  margin:8px auto;
  display:block;
  cursor:pointer;
  transition:.25s;
}

.primary-btn{
  background:var(--rose);
  color:white;
  box-shadow:0 10px 24px rgba(216,138,164,.35);
}

.secondary-btn{
  background:rgba(255,255,255,.55);
  color:var(--burgundy);
  backdrop-filter:blur(12px);
}