@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  min-height: 100%;
}
/* 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": "Single Day-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "Single Day-Regular";
  src: local("Single Day-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "Vividly-Regular";
    src: url("./Vividly-Regular.otf") format("woff2"),
         url("./Vividly-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
.screen {
  background-color: #fff4f9;
  overflow: hidden;
  width: 100%;
  min-width: 390px;
  min-height: 1293px;
  position: relative;
}

.screen .ellipse {
  position: absolute;
  top: 69px;
  left: calc(50.00% - 132px);
  width: 265px;
  height: 262px;
  background-color: #ffffff;
  border-radius: 132.3px / 130.89px;
  transform: rotate(0.88deg);
  filter: blur(55.5px);
}

.screen .text-wrapper {
  top: 92px;
  left: calc(50.00% - 69px);
  font-size: 32px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .div {
  position: absolute;
  top: 129px;
  left: calc(50.00% - 34px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5a1132;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .rectangle {
  position: absolute;
  top: 33px;
  left: 295px;
  width: 74px;
  height: 25px;
  background-color: #ffffff;
  border-radius: 22px;
}

.screen .divasiree {
  position: absolute;
  top: 146px;
  left: calc(50.00% - 82px);
  width: 163px;
  height: 181px;
  aspect-ratio: 0.9;
  object-fit: cover;
}

.screen .img {
  position: absolute;
  top: 342px;
  left: calc(50.00% - 150px);
  width: 300px;
  height: 106px;
}

.screen .rectangle-2 {
  position: absolute;
  top: 638px;
  left: calc(50.00% - 150px);
  width: 300px;
  height: 496px;
}

.screen .rectangle-3 {
  position: absolute;
  top: 1208px;
  left: calc(50.00% - 205px);
  width: 410px;
  height: 96px;
  background-color: #ffffff;
  border-radius: 43px;
}

.screen .rectangle-4 {
  position: absolute;
  top: 534px;
  left: calc(50.00% - 51px);
  width: 102px;
  height: 97px;
}

.screen .rectangle-5 {
  position: absolute;
  top: 534px;
  left: calc(50.00% + 50px);
  width: 102px;
  height: 97px;
}

.screen .rectangle-6 {
  position: absolute;
  top: 534px;
  left: calc(50.00% - 152px);
  width: 102px;
  height: 97px;
}

.screen .rectangle-7 {
  position: absolute;
  top: 450px;
  left: calc(50.00% - 150px);
  width: 300px;
  height: 84px;
}

.screen .text-wrapper-2 {
  position: absolute;
  top: 407px;
  left: calc(50.00% - 110px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5a1132;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-3 {
  top: 480px;
  left: calc(50.00% - 70px);
  width: 46px;
  font-size: 13px;
  white-space: nowrap;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-4 {
  top: 599px;
  left: calc(50.00% - 125px);
  font-size: 11px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-5 {
  top: 599px;
  left: calc(50.00% - 14px);
  font-size: 12px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-6 {
  top: 599px;
  left: calc(50.00% + 82px);
  font-size: 11px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-7 {
  position: absolute;
  top: 484px;
  left: calc(50.00% + 85px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5a1132;
  font-size: 21px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-8 {
  top: 672px;
  left: calc(50.00% - 39px);
  font-size: 18px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-9 {
  position: absolute;
  top: 497px;
  left: calc(50.00% - 70px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5a1132;
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-10 {
  top: 1256px;
  left: calc(50.00% - 146px);
  font-size: 10px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-11 {
  top: 1256px;
  left: calc(50.00% - 59px);
  font-size: 10px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-12 {
  top: 1256px;
  left: calc(50.00% + 18px);
  font-size: 10px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .text-wrapper-13 {
  top: 1256px;
  left: calc(50.00% + 119px);
  font-size: 10px;
  text-align: center;
  position: absolute;
  font-family: "Single Day";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
  line-height: normal;
}

.screen .vector {
  position: absolute;
  top: 422px;
  left: 97px;
  width: 44px;
  height: 6px;
}

.screen .vector-2 {
  position: absolute;
  top: 379px;
  left: calc(50.00% - 2px);
  width: 5px;
  height: 37px;
}

.screen .food-bar {
  position: absolute;
  top: 369px;
  left: 101px;
  width: 35px;
  height: 35px;
}

.screen .text-wrapper-14 {
  position: absolute;
  top: 407px;
  left: calc(50.00% + 34px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5a1132;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.screen .vector-3 {
  position: absolute;
  top: 422px;
  left: 251px;
  width: 44px;
  height: 6px;
}

.screen .salami-pizza {
  position: absolute;
  top: 367px;
  left: 255px;
  width: 35px;
  height: 35px;
}

.screen .undertale-heart {
  position: absolute;
  top: 559px;
  left: 74px;
  width: 38px;
  height: 38px;
}

.screen .love-for-money {
  position: absolute;
  top: 558px;
  left: calc(50.00% - 19px);
  width: 38px;
  height: 38px;
}

.screen .dumplings {
  position: absolute;
  top: 561px;
  left: 280px;
  width: 32px;
  height: 32px;
}

.screen .kawaii-noodle {
  position: absolute;
  top: 811px;
  left: 253px;
  width: 33px;
  height: 33px;
}

.screen .vector-4 {
  position: absolute;
  top: 686px;
  left: 231px;
  width: 13px;
  height: 14px;
}

.screen .vector-5 {
  position: absolute;
  top: 667px;
  left: 148px;
  width: 13px;
  height: 14px;
}

.screen .rectangle-8 {
  position: absolute;
  top: 1279px;
  left: calc(50.00% - 52px);
  width: 103px;
  height: 3px;
  background-color: #5a1132;
  border-radius: 9px;
}

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

.screen .welcome-to-our {
  position: absolute;
  top: 723px;
  left: calc(50.00% - 119px);
  width: 227px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa8d1;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.screen .span {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffa8d1;
  font-size: 16px;
  letter-spacing: 0;
}

.screen .text-wrapper-15 {
  font-family: "Single Day";
  font-size: 13px;
}

.screen .gingerbread-house {
  position: absolute;
  top: 1221px;
  left: 39px;
  width: 30px;
  height: 30px;
}

.screen .hello-kitty {
  position: absolute;
  top: 474px;
  left: 72px;
  width: 40px;
  height: 40px;
}

.screen .restart-love {
  position: absolute;
  top: 1221px;
  left: 128px;
  width: 30px;
  height: 30px;
}

.screen .cinnamon-roll {
  position: absolute;
  top: 1221px;
  left: 224px;
  width: 30px;
  height: 30px;
}

.screen .menu {
  position: absolute;
  top: 1221px;
  left: 319px;
  width: 30px;
  height: 30px;
}

.screen .sparkles {
  position: absolute;
  top: 38px;
  left: 310px;
  width: 16px;
  height: 16px;
}

.screen .record {
  position: absolute;
  top: 38px;
  left: 338px;
  width: 16px;
  height: 16px;
}

.screen .love-potion {
  position: absolute;
  top: 1053px;
  left: 259px;
  width: 77px;
  height: 72px;
}

.screen .cake {
  position: absolute;
  top: 666px;
  left: 233px;
  width: 17px;
  height: 17px;
}

/* ============================================
   ULTRA CUTE SCROLL ANIMATIONS 🌸
   ============================================ */

/* ---------- BASE ANIMATIONS ---------- */

/* Hidden states */
.scroll-hidden {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}

.cute-hidden {
    transform: translateY(40px) scale(0.92) rotate(-2deg);
}

/* Visible states */
.visible {
    opacity: 1 !important;
}

.cute-visible {
    transform: translateY(0) scale(1) rotate(0deg) !important;
}

/* ---------- STAGGER DELAYS ---------- */
[style*="--delay"] {
    transition-delay: var(--delay, 0s);
}

/* ---------- FLOATING HEARTS ---------- */
@keyframes floatHeart {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.5);
        opacity: 0.8;
    }
    20% {
        opacity: 1;
        transform: translateY(-20px) rotate(10deg) scale(1.2);
    }
    80% {
        opacity: 1;
        transform: translateY(-60vh) rotate(-10deg) scale(1);
    }
    100% {
        transform: translateY(-100vh) rotate(20deg) scale(0.3);
        opacity: 0;
    }
}

/* ---------- GENTLE WOBBLE ---------- */
@keyframes gentleWobble {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(3deg) scale(1.05); }
    50% { transform: rotate(-3deg) scale(1.05); }
    75% { transform: rotate(2deg) scale(1.02); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ---------- CUTE GLOW ---------- */
@keyframes cuteGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 168, 209, 0.3)); }
    50% { filter: drop-shadow(0 0 25px rgba(255, 168, 209, 0.6)); }
}

/* ---------- BOUNCE IN ---------- */
@keyframes bounceIn {
    0% {
        transform: scale(0.3) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(2deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.9) rotate(-1deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ---------- SLIDE IN FROM LEFT (SUPER SMOOTH) ---------- */
.slide-left {
    transform: translateX(-50px) scale(0.95);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-left.visible {
    transform: translateX(0) scale(1);
}

/* ---------- SLIDE IN FROM RIGHT ---------- */
.slide-right {
    transform: translateX(50px) scale(0.95);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-right.visible {
    transform: translateX(0) scale(1);
}

/* ---------- POP IN WITH ROTATION ---------- */
.pop-in {
    transform: scale(0.4) rotate(-15deg);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-in.visible {
    transform: scale(1) rotate(0deg);
}

/* ---------- FADE IN WITH SCALE ---------- */
.fade-scale {
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fade-scale.visible {
    transform: scale(1);
    opacity: 1;
}

/* ---------- FLOAT IN FROM BOTTOM ---------- */
.float-up {
    transform: translateY(60px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.float-up.visible {
    transform: translateY(0);
    opacity: 1;
}

/* ============================================
   ELEMENT-SPECIFIC ANIMATIONS 🌸
   ============================================ */

/* ----- HEADER ELEMENTS ----- */
.ellipse.scroll-hidden {
    transform: scale(0.6) translateY(30px);
    opacity: 0.5;
}
.ellipse.visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.text-wrapper.scroll-hidden,
.div.scroll-hidden {
    transform: translateY(25px) scale(0.9);
    opacity: 0;
}
.text-wrapper.visible,
.div.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.divasiree.scroll-hidden {
    transform: translateY(40px) scale(0.7) rotate(-5deg);
    opacity: 0;
}
.divasiree.visible {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    animation: cuteGlow 3s ease-in-out infinite;
}

/* ----- MENU CARDS ----- */
.menu-cards.scroll-hidden {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
}
.menu-cards.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.img.scroll-hidden,
.rectangle-2.scroll-hidden,
.rectangle-3.scroll-hidden,
.rectangle-4.scroll-hidden,
.rectangle-5.scroll-hidden,
.rectangle-6.scroll-hidden,
.rectangle-7.scroll-hidden {
    transform: scale(0.8) translateY(30px);
    opacity: 0;
}
.img.visible,
.rectangle-2.visible,
.rectangle-3.visible,
.rectangle-4.visible,
.rectangle-5.visible,
.rectangle-6.visible,
.rectangle-7.visible {
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- ICON GRID ----- */
.icon-grid.scroll-hidden {
    transform: translateY(20px);
    opacity: 0;
}
.icon-grid.visible {
    transform: translateY(0);
    opacity: 1;
}

.undertale-heart.scroll-hidden,
.love-for-money.scroll-hidden,
.dumplings.scroll-hidden {
    transform: scale(0.2) rotate(-30deg);
    opacity: 0;
}
.undertale-heart.visible,
.love-for-money.visible,
.dumplings.visible {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- PROMO BANNER ----- */
.promo-banner.scroll-hidden {
    transform: scale(0.85) translateY(30px);
    opacity: 0;
}
.promo-banner.visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.hello-kitty.scroll-hidden {
    transform: scale(0.3) rotate(-20deg);
    opacity: 0;
}
.hello-kitty.visible {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    animation: gentleWobble 2s ease-in-out infinite;
}

/* ----- TEXT ELEMENTS ----- */
.text-wrapper-2.scroll-hidden,
.text-wrapper-14.scroll-hidden,
.text-wrapper-3.scroll-hidden,
.text-wrapper-4.scroll-hidden,
.text-wrapper-5.scroll-hidden,
.text-wrapper-6.scroll-hidden,
.text-wrapper-7.scroll-hidden,
.text-wrapper-8.scroll-hidden,
.text-wrapper-9.scroll-hidden {
    transform: translateX(-30px) scale(0.9);
    opacity: 0;
}
.text-wrapper-2.visible,
.text-wrapper-14.visible,
.text-wrapper-3.visible,
.text-wrapper-4.visible,
.text-wrapper-5.visible,
.text-wrapper-6.visible,
.text-wrapper-7.visible,
.text-wrapper-8.visible,
.text-wrapper-9.visible {
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- ABOUT SECTION ----- */
.about-section.scroll-hidden {
    transform: translateY(40px);
    opacity: 0;
}
.about-section.visible {
    transform: translateY(0);
    opacity: 1;
}

.welcome-to-our.scroll-hidden {
    transform: translateY(50px) scale(0.9);
    opacity: 0;
}
.welcome-to-our.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- BOTTOM NAV ----- */
.bottom-nav.scroll-hidden {
    transform: translateY(30px);
    opacity: 0;
}
.bottom-nav.visible {
    transform: translateY(0);
    opacity: 1;
}

.gingerbread-house.scroll-hidden,
.restart-love.scroll-hidden,
.cinnamon-roll.scroll-hidden,
.menu.scroll-hidden {
    transform: scale(0.3) translateY(20px);
    opacity: 0;
}
.gingerbread-house.visible,
.restart-love.visible,
.cinnamon-roll.visible,
.menu.visible {
    transform: scale(1) translateY(0);
    opacity: 1;
    animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */
html {
    scroll-behavior: smooth;
}

/* ============================================
   CUTE CURSOR
   ============================================ */
.cute-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    font-size: 20px;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 15px rgba(255, 168, 209, 0.5));
    transform: translate(-50%, -50%) scale(1);
}

/* ============================================
   HOVER EFFECTS (Extra Cute!)
   ============================================ */
.visible:hover {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.text-wrapper-2.visible:hover,
.text-wrapper-14.visible:hover {
    transform: scale(1.05) !important;
    color: #ff6b9d !important;
}

.undertale-heart.visible:hover,
.love-for-money.visible:hover,
.dumplings.visible:hover {
    transform: scale(1.3) rotate(10deg) !important;
    filter: drop-shadow(0 0 20px rgba(255, 168, 209, 0.6));
}

.gingerbread-house.visible:hover,
.restart-love.visible:hover,
.cinnamon-roll.visible:hover,
.menu.visible:hover {
    transform: scale(1.2) rotate(-10deg) !important;
    filter: drop-shadow(0 0 20px rgba(255, 168, 209, 0.5));
}

.hello-kitty.visible:hover {
    transform: scale(1.2) rotate(10deg) !important;
}

.divasiree.visible:hover {
    transform: scale(1.05) rotate(-3deg) !important;
    filter: drop-shadow(0 0 30px rgba(255, 168, 209, 0.4));
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 500px) {
    .scroll-hidden {
        transition-duration: 0.5s;
    }
    
    .cute-hidden {
        transform: translateY(25px) scale(0.95);
    }
    
    .cute-cursor {
        display: none;
    }
}

/* ============================================
   EXTRA: RIPPLE EFFECT ON LOAD
   ============================================ */
@keyframes ripple {
    0% { transform: scale(0); opacity: 0.8; }
    50% { transform: scale(1.5); opacity: 0.3; }
    100% { transform: scale(3); opacity: 0; }
}

.ripple-effect {
    position: fixed;
    border-radius: 50%;
    background: rgba(255, 168, 209, 0.3);
    pointer-events: none;
    animation: ripple 1s ease-out forwards;
}