@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": "overdoze sans-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "overdoze sans-Regular";
  src: local("overdoze sans-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: "overdozesans";
  src: url("./overdozesans.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "overdozesans";
  src: url("./overdozesans.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
.screen {
  background-color: #fff2f8;
  overflow: hidden;
  width: 100%;
  min-width: 390px;
  min-height: 1130px;
  position: relative;
}

.screen .text-wrapper {
  top: 107px;
  left: calc(50.00% - 116px);
  -webkit-text-stroke: 0.4px #ffffff;
  font-size: 29px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  color: #5a1132;
  letter-spacing: 0;
}

.screen .d-e-s-s-e-r-t {
  position: absolute;
  top: 137px;
  left: calc(50.00% - 44px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5a1132;
  font-size: 20px;
  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: 143px;
  left: calc(50.00% - 87px);
  width: 175px;
  height: 194px;
  aspect-ratio: 0.9;
  object-fit: cover;
}

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

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

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

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

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

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

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

.screen .text-wrapper-2 {
  top: 404px;
  left: calc(50.00% - 119px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  color: #5a1132;
  letter-spacing: 0;
}

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

.screen .text-wrapper-4 {
  top: 619px;
  left: calc(50.00% - 121px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

.screen .text-wrapper-5 {
  top: 619px;
  left: calc(50.00% - 20px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

.screen .text-wrapper-6 {
  top: 619px;
  left: calc(50.00% + 78px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

.screen .text-wrapper-7 {
  position: absolute;
  top: 506px;
  left: calc(50.00% + 68px);
  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: 693px;
  left: calc(50.00% - 54px);
  font-size: 23px;
  line-height: 17px;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

.screen .text-wrapper-9 {
  position: absolute;
  top: 517px;
  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: 1093px;
  left: calc(50.00% - 162px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

.screen .text-wrapper-11 {
  top: 1093px;
  left: calc(50.00% - 63px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

.screen .text-wrapper-12 {
  top: 1093px;
  left: calc(50.00% + 25px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

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

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

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

.screen .text-wrapper-14 {
  top: 404px;
  left: calc(50.00% + 36px);
  font-size: 15px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  position: absolute;
            font-family: "overdozesans";
  font-weight: 400;
  color: #5a1132;
  letter-spacing: 0;
}

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

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

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

.screen .p {
  position: absolute;
  top: 700px;
  left: calc(50.00% + 15px);
  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 .haiiii-welcome-to {
  position: absolute;
  top: 747px;
  left: calc(50.00% - 119px);
  width: 227px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffb7d9;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

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

.screen .text-wrapper-15 {
            font-family: "overdozesans";
}

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

.screen .double-chocolate {
  position: absolute;
  top: 359px;
  left: 97px;
  width: 44px;
  height: 44px;
}

.screen .berry-jam {
  position: absolute;
  top: 362px;
  left: 250px;
  width: 44px;
  height: 42px;
}

.screen .kawaii {
  position: absolute;
  top: 493px;
  left: 68px;
  width: 48px;
  height: 45px;
}

.screen .cherry-cheesecake {
  position: absolute;
  top: 576px;
  left: 74px;
  width: 40px;
  height: 40px;
}

.screen .cookie {
  position: absolute;
  top: 577px;
  left: 175px;
  width: 40px;
  height: 40px;
}

.screen .jam {
  position: absolute;
  top: 578px;
  left: 276px;
  width: 40px;
  height: 40px;
}

.screen .jam-2 {
  position: absolute;
  top: 168px;
  left: 286px;
  width: 34px;
  height: 36px;
}

.screen .pancake-stack {
  position: absolute;
  top: 903px;
  left: 270px;
  width: 54px;
  height: 47px;
}

.screen .bakery {
  position: absolute;
  top: 1063px;
  left: 40px;
  width: 26px;
  height: 26px;
}

.screen .person {
  position: absolute;
  top: 1064px;
  left: 321px;
  width: 26px;
  height: 26px;
}

.screen .circled-menu {
  position: absolute;
  top: 1063px;
  left: 225px;
  width: 26px;
  height: 26px;
}

.screen .create-order {
  position: absolute;
  top: 10488px;
  left: -15126px;
  width: 90px;
  height: 90px;
}

.screen .wedding-cake {
  position: absolute;
  top: 1063px;
  left: 131px;
  width: 26px;
  height: 26px;
}

.screen .brezel {
  position: absolute;
  top: 259px;
  left: 32px;
  width: 44px;
  height: 45px;
}

.screen .banana-split {
  position: absolute;
  top: 146px;
  left: 57px;
  width: 38px;
  height: 43px;
}

.screen .ellipsis {
  position: absolute;
  top: 38px;
  left: 308px;
  width: 16px;
  height: 16px;
}

.screen .hanukkah-donut {
  position: absolute;
  top: 274px;
  left: 271px;
  width: 38px;
  height: 38px;
}

.screen .sweet-halloween {
  position: absolute;
  top: 203px;
  left: 132px;
  width: 25px;
  height: 21px;
}


/* ===== SCROLL REVEAL ANIMATIONS ===== */

/* 1. Make sure Top Header Text is ALWAYS visible (Don't hide it!) */
.text-wrapper, 
.d-e-s-s-e-r-t,
.rectangle, 
.ellipsis, 
.record {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* 2. Initial hidden state for ALL elements BELOW the header */
.text-wrapper-2, .text-wrapper-3, .text-wrapper-4, .text-wrapper-5, .text-wrapper-6, .text-wrapper-7,
.text-wrapper-10, .text-wrapper-11, .text-wrapper-12, .text-wrapper-13,
.text-wrapper-8, .text-wrapper-9,
.rectangle-3, .rectangle-4, .rectangle-5, .rectangle-6, .rectangle-2, .img,
.haiiii-welcome-to,
.vector, .vector-2, .vector-3, .vector-4, .vector-5, .p, .text-wrapper-14,
.divasiree {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. Active state when scrolled into view */
.scroll-reveal-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 4. 🎀 DELAYS FOR A CUTE WAVE EFFECT */
/* Top Section */
.divasiree { transition-delay: 0.1s; }

/* First Row of Cards */
.img { transition-delay: 0.2s; }
.text-wrapper-2 { transition-delay: 0.3s; }
.text-wrapper-14 { transition-delay: 0.4s; }
.vector { transition-delay: 0.4s; }
.vector-3 { transition-delay: 0.5s; }
.vector-2 { transition-delay: 0.3s; }

/* Middle Row (About & Decor) */
.rectangle-6 { transition-delay: 0.1s; }
.text-wrapper-3 { transition-delay: 0.2s; }
.text-wrapper-7 { transition-delay: 0.3s; }
.text-wrapper-9 { transition-delay: 0.4s; }

/* Circles (Desserts, Purchase, Delivery) */
.rectangle-5 { transition-delay: 0.2s; }
.rectangle-3 { transition-delay: 0.3s; }
.rectangle-4 { transition-delay: 0.4s; }
.text-wrapper-4 { transition-delay: 0.3s; }
.text-wrapper-5 { transition-delay: 0.4s; }
.text-wrapper-6 { transition-delay: 0.5s; }

/* Bottom Card & Text */
.rectangle-2 { transition-delay: 0.1s; }
.text-wrapper-8 { transition-delay: 0.2s; }
.p { transition-delay: 0.3s; }
.vector-4 { transition-delay: 0.3s; }
.vector-5 { transition-delay: 0.4s; }
.haiiii-welcome-to { transition-delay: 0.5s; }

/* Bottom Nav */
.text-wrapper-10 { transition-delay: 0.0s; }
.text-wrapper-11 { transition-delay: 0.1s; }
.text-wrapper-12 { transition-delay: 0.2s; }
.text-wrapper-13 { transition-delay: 0.3s; }

/* 5. 🌟 SPECIAL: Ensure floating icons still bounce after appearing */
.scroll-reveal-active.record,
.scroll-reveal-active.banana-split,
.scroll-reveal-active.brezel,
.scroll-reveal-active.sweet-halloween,
.scroll-reveal-active.hanukkah-donut,
.scroll-reveal-active.jam-2 {
    animation: floatIcon 4s infinite ease-in-out !important;
}

/* Hide floating icons initially so they can scroll-reveal */
.banana-split, .brezel, .sweet-halloween, .hanukkah-donut, .jam-2 {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}