@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  min-height: 100%;
        background-image: url(BG.png);
          background-size: cover;
    background-position: 50% 50%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Rabbit-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Rabbit-Regular";
  src: local("Rabbit-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Single Day-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Single Day";
  src: local("Single Day");
}

@font-face {
  font-family: "Vividly-Regular";
  src: url("./Vividly-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rabbit-Regular";
  src: url("./Rabbit-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Peperrito Ornaments Regular";
  src: url("./PeperritoOrnaments-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Peperrito Ornaments Regular";
  src: url("./PeperritoOrnaments-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.rabiette {
  width: 100%;
  min-width: 390px;
  min-height: 644px;
  position: relative;
}

.rabiette .haii {
  top: 245px;
  left: calc(50.00% - 132px);
  width: 265px;
  height: 272px;
  position: absolute;
  aspect-ratio: 0.97;
  object-fit: cover;
}

.rabiette .haii-i-m-rabiette {
  position: absolute;
  top: 103px;
  left: 53px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ff90c9;
  font-size: 26px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.rabiette .text-wrapper {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ff90c9;
  font-size: 26px;
  letter-spacing: 0;
}

.rabiette .span {
  font-family: "Rabbit-Regular", Helvetica;
}

.rabiette .div {
  top: 130px;
  left: 53px;
font-family: 'Single Day', cursive;  font-size: 14px;
  line-height: 16px;
  position: absolute;
  font-weight: 400;
  color: #ff90c9;
  letter-spacing: 0;
}

.rabiette .text-wrapper-2 {
font-family: 'Single Day', cursive;  font-weight: 400;
  color: #ff90c9;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 16px;
}

.rabiette .text-wrapper-3 {
  font-family: "Vividly-Regular", Helvetica;
}

.rabiette .text-wrapper-4 {
  font-size: 10px;
}

.rabiette .rectangle {
  position: absolute;
  top: 530px;
  left: calc(50.00% - 50px);
  width: 100px;
  height: 42px;
  background-color: #ffffff75;
  border-radius: 40px;
  border: 1px solid;
  border-color: #ff90c9;
}

.rabiette .let-s-start {
  position: absolute;
  top: 546px;
  left: calc(50.00% - 34px);
  width: 69px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ff90c9;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.rabiette .text-wrapper-5 {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ff90c9;
  font-size: 15px;
  letter-spacing: 0;
}

.rabiette .img {
  top: -28px;
  left: calc(50.00% - 56px);
  width: 29px;
  height: 30px;
  position: absolute;
  aspect-ratio: 0.97;
  object-fit: cover;
}

.rabiette .text-wrapper-6 {
  top: 399px;
  left: calc(50.00% - 145px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 12px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ff90c9;
  letter-spacing: 0;
}

.rabiette .p {
  top: 340px;
  left: calc(50.00% + 81px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 12px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color: #ff90c9;
  letter-spacing: 0;
}


/* ============================================
   RABIETTE CUTE ANIMATIONS 🎀
   ============================================ */

/* ---------- 1. PAGE FADE IN ---------- */
.rabiette {
  animation: pageFadeIn 1s ease-out forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 2. TYPING ANIMATION: "Haii, I'm Rabiette" ---------- */
.typing-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #ff90c9;
  width: 0;
  animation:
    typing 2s steps(20, end) 0.5s forwards,
    blinkCaret 0.7s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blinkCaret {
  0%, 100% { border-color: transparent; }
  50%      { border-color: #ff90c9; }
}

/* Remove caret after typing is done */
.typing-text {
  animation:
    typing 2s steps(20, end) 0.5s forwards,
    blinkCaret 0.7s step-end 4,
    hideCaret 0s linear 2.8s forwards;
}

@keyframes hideCaret {
  to { border-color: transparent; }
}

/* ---------- 3. KOREAN TEXT FADES IN AFTER TYPING ---------- */
.fade-in-delayed {
  opacity: 0;
  animation: softFadeIn 1.2s ease-out 2.6s forwards;
}

@keyframes softFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 4. RABIETTE IMAGE: SOFT FLOATING ---------- */
.rabiette .haii {
  animation: floaty 3.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes floaty {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-10px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* ---------- 5. "LET'S START" TYPING + GLOW ---------- */
.typing-text-btn {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typingBtn 1s steps(11, end) 3.2s forwards;
}

@keyframes typingBtn {
  from { width: 0; }
  to   { width: 100%; }
}

/* Button rectangle soft pulse */
.rabiette .rectangle {
  animation: softPulse 2.5s ease-in-out 4s infinite;
  transition: all 0.3s ease;
}

@keyframes softPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 190, 223, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 219, 238, 0);
    transform: scale(1.03);
  }
}

/* Hover effect on the whole button area */
.rabiette a:hover .rectangle {
  background-color: #ffd6ea;
  border-color: #ff70b8;
  box-shadow: 0 0 18px rgba(255, 144, 201, 0.6);
  transform: scale(1.06);
}

.rabiette a:hover .text-wrapper-5 {
  color: #ff70b8;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* ---------- 6. NAME + HAI TAG LITTLE SPARKLE ---------- */
.rabiette .text-wrapper-6 {
  animation: sparkle 4s ease-in-out infinite;
}

.rabiette .p {
  animation: sparkle 4s ease-in-out 0.5s infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* ---------- 7. DECOR IMAGE GENTLE ROTATE ---------- */
.rabiette .img {
  animation: gentleWiggle 5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes gentleWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}