@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": "Dreamy Notes Script-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "KNMaiyuan-Regular";
    src: url("./KNMaiyuan-Regular.ttf") format("woff2"),
         url("./KNMaiyuan-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@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: "Dreamy Notes Script-Regular";
  src: local("Dreamy Notes Script-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "KN Maiyuan-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

@font-face {
  font-family: "KN Maiyuan-Regular";
  src: local("KN Maiyuan-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Vividly-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */
@font-face {
    font-family: "Dreamy Notes Script";
    src: url("./Dreamy\ Notes\ Script.otf") format("woff2"),
         url("./Dreamy\ Notes\ Script.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @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");
}
.clio {
  background-color: #fff5fa;
  overflow: hidden;
  width: 100%;
  min-width: 390px;
  height: 3141px;
  position: relative;
}

.clio .ellipse {
  position: absolute;
  top: 154px;
  left: calc(50.00% - 57px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}

.clio .div {
  position: absolute;
  top: 962px;
  left: calc(50.00% - 280px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}

.clio .ellipse-2 {
  position: absolute;
  top: 2078px;
  left: calc(50.00% + 6px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}

.clio .ellipse-3 {
  position: absolute;
  top: 2950px;
  left: calc(50.00% - 290px);
  width: 282px;
  height: 281px;
  background-color: #ffffff;
  border-radius: 140.84px / 140.61px;
  transform: rotate(0.88deg);
  filter: blur(90.42px);
}

.clio .text-wrapper {
  top: 77px;
  left: calc(50.00% - 104px);
  font-size: 25.9px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .designed-for-a-light {
  position: absolute;
  top: 105px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .span {
        font-family: "Vividly-Regular", Helvetica;

  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-2 {
  font-family: "Vividly-Regular", Helvetica;
  font-size: 15.7px;
}

.clio .text-wrapper-3 {
  position: absolute;
  top: 643px;
  left: calc(50.00% - 131px);
  width: 245px;
  -webkit-text-stroke: 0.16px #000000;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-4 {
  position: absolute;
  top: 1069px;
  left: calc(50.00% - 131px);
  width: 245px;
  -webkit-text-stroke: 0.16px #000000;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .experience-makeup {
  position: absolute;
  top: 1092px;
  left: calc(50.00% - 126px);
  width: 232px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 13.4px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-5 {
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 13.4px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-6 {
    font-family: "Single Day", cursive;
  font-size: 10.2px;
}

.clio .p {
  position: absolute;
  top: 2562px;
  left: calc(50.00% - 126px);
  width: 232px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 13.4px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-7 {
  position: absolute;
  top: 3033px;
  left: calc(50.00% - 99px);
  width: 198px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 13.4px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-8 {
  top: 465px;
  left: calc(50.00% - 119px);
  width: 238px;
  font-size: 13.4px;
  text-align: center;
  line-height: 18.1px;
  position: absolute;
    font-family: "Single Day", cursive;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}

.clio .rectangle {
  top: 157px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 282px;
  background-color: #ff7d7d;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-2 {
  top: 1146px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 262px;
  background-color: #ff7d7d;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-3 {
  top: 680px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 336px;
  background-color: #ffe8f3;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-4 {
  top: 1165px;
  left: calc(50.00% - 122px);
  width: 78px;
  height: 24px;
  background-color: #ffffffc4;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-5 {
  top: 1355px;
  left: calc(50.00% - 119px);
  width: 238px;
  height: 36px;
  background-color: #ffffffc4;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-6 {
  top: 543px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border: 1.57px solid;
  border-color: #ffadd6;
  position: absolute;
  border-radius: 34.6px;
}

.clio .explore-the {
  position: absolute;
  top: 558px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-9 {
  font-size: 15.7px;
}

.clio .text-wrapper-10 {
  font-family: "Vividly-Regular", Helvetica;
  font-size: 19.7px;
}

.clio .rectangle-7 {
  top: 1424px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border: 1.57px solid;
  border-color: #ffadd6;
  position: absolute;
  border-radius: 34.6px;
}

.clio .text-wrapper-11 {
  top: 706px;
  left: calc(50.00% - 110px);
  width: 216px;
  font-size: 11.8px;
  line-height: 17.3px;
  position: absolute;
    font-family: "Single Day", cursive;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}

.clio .text-wrapper-12 {
  position: absolute;
  top: 965px;
  left: calc(50.00% - 100px);
  width: 199px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: 11px;
}

.clio .ellipse-4 {
  position: absolute;
  top: 885px;
  left: calc(50.00% - 44px);
  width: 55px;
  height: 55px;
  background-color: #ff7d7d;
  border-radius: 27.52px;
}

.clio .ellipse-5 {
  position: absolute;
  top: 885px;
  left: calc(50.00% - 11px);
  width: 55px;
  height: 55px;
  background-color: #ff7d7d;
  border-radius: 27.52px;
}

.clio .text-wrapper-13 {
  top: 1171px;
  left: calc(50.00% - 111px);
  width: 57px;
  font-size: 9.4px;
  text-align: center;
  line-height: 14.2px;
  position: absolute;
    font-family: "Single Day", cursive;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}

.clio .text-wrapper-14 {
  position: absolute;
  top: 1365px;
  left: calc(50.00% - 76px);
  width: 151px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: 8.6px;
}

.clio .rectangle-8 {
  top: 1505px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 262px;
  background-color: #ff7d7d;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-9 {
  top: 1524px;
  left: calc(50.00% - 122px);
  width: 78px;
  height: 24px;
  background-color: #ffffffc4;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-10 {
  top: 1714px;
  left: calc(50.00% - 119px);
  width: 238px;
  height: 36px;
  background-color: #ffffffc4;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-11 {
  top: 1783px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border: 1.57px solid;
  border-color: #ffadd6;
  position: absolute;
  border-radius: 34.6px;
}

.clio .text-wrapper-15 {
  top: 1529px;
  left: calc(50.00% - 111px);
  width: 57px;
  font-size: 9.4px;
  text-align: center;
  line-height: 14.2px;
  position: absolute;
    font-family: "Single Day", cursive;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}

.clio .text-wrapper-16 {
  position: absolute;
  top: 1724px;
  left: calc(50.00% - 76px);
  width: 151px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: 8.6px;
}

.clio .rectangle-12 {
  top: 1868px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 262px;
  background-color: #ff7d7d;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-13 {
  top: 1886px;
  left: calc(50.00% - 122px);
  width: 78px;
  height: 24px;
  background-color: #ffffffc4;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-14 {
  top: 2076px;
  left: calc(50.00% - 119px);
  width: 238px;
  height: 36px;
  background-color: #ffffffc4;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-15 {
  top: 2145px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border: 1.57px solid;
  border-color: #ffadd6;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-16 {
  top: 2765px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border: 1.57px solid;
  border-color: #ffadd6;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-17 {
  top: 2910px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border: 1.57px solid;
  border-color: #ffadd6;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-18 {
  top: 2963px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 43px;
  background-color: #ffe8f3;
  border: 1.57px solid;
  border-color: #ffadd6;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-19 {
  top: 3085px;
  left: calc(50.00% - 259px);
  width: 516px;
  height: 103px;
  background-color: #ffe8f3;
  position: absolute;
  border-radius: 34.6px;
}

.clio .telegram {
  position: absolute;
  top: 2978px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 14.2px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-17 {
    font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 14.2px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .tik-tok {
  position: absolute;
  top: 2925px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 14.2px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-18 {
  top: 1892px;
  left: calc(50.00% - 111px);
  width: 57px;
  font-size: 9.4px;
  text-align: center;
  line-height: 14.2px;
  position: absolute;
    font-family: "Single Day", cursive;
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
}

.clio .text-wrapper-19 {
  position: absolute;
  top: 2086px;
  left: calc(50.00% - 76px);
  width: 151px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: 8.6px;
}

.clio .rectangle-20 {
  top: 2283px;
  left: calc(50.00% - 141px);
  width: 282px;
  height: 200px;
  background-color: #ffe8f3;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-21 {
  top: 2611px;
  left: calc(50.00% + 7px);
  width: 134px;
  height: 136px;
  background-color: #ff7d7d;
  position: absolute;
  border-radius: 34.6px;
}

.clio .rectangle-22 {
  top: 2611px;
  left: calc(50.00% - 141px);
  width: 172px;
  height: 136px;
  background-color: #ffe8f3;
  position: absolute;
  border-radius: 34.6px;
}

.clio .perfect-for-your {
  position: absolute;
  top: 2310px;
  left: calc(50.00% - 110px);
  width: 216px;
    font-family: "Single Day", cursive;
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 11.8px;
}

.clio .text-wrapper-20 {
  line-height: 17.3px;
}

.clio .text-wrapper-21 {
  font-family: "Vividly-Regular", Helvetica;
  line-height: 13.4px;
}

.clio .achieve-flawless {
  position: absolute;
  top: 2639px;
  left: calc(50.00% - 120px);
  width: 134px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 11.8px;
}

.clio .text-wrapper-22 {
  top: 3102px;
  left: calc(50.00% - 91px);
  width: 183px;
  font-size: 8.9px;
  text-align: center;
  line-height: 7.9px;
  position: absolute;
    font-family: "Single Day", cursive;
  font-weight: 400;
  color: #5b1133;
    z-index: 99999;

  letter-spacing: 0;
}

.clio .discover-the-glow {
  position: absolute;
  top: 1440px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .claim-your-shade {
  position: absolute;
  top: 1798px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .add-to-bag {
  position: absolute;
  top: 2160px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .get-the-look {
  position: absolute;
  top: 2779px;
  left: calc(50.00% - 116px);
  width: 232px;
  font-family: "KNMaiyuan-Regular";
  font-weight: 400;
  color: #5b1133;
  font-size: 12.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-23 {
  position: absolute;
  top: 2249px;
  left: calc(50.00% - 131px);
  width: 245px;
  -webkit-text-stroke: 0.16px #000000;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-24 {
  position: absolute;
  top: 2538px;
  left: calc(50.00% - 131px);
  width: 245px;
  -webkit-text-stroke: 0.16px #000000;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 14.2px;
}

.clio .text-wrapper-25 {
  top: 2867px;
  left: calc(50.00% - 131px);
  width: 245px;
  -webkit-text-stroke: 0.16px #000000;
  font-size: 11.8px;
  position: absolute;
  font-family: "Dreamy Notes Script";
  font-weight: 400;
  color: #5b1133;
  letter-spacing: 0;
  line-height: 14.2px;
}

/* ====== PROFESSIONAL MULTI-ANIMATION STYLES ====== */

/* Base hidden state - FORCED with !important to override any conflicts */
.animate-on-scroll {
  opacity: 0 !important;
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Visible state - FORCED with !important */
.animate-on-scroll.visible {
  opacity: 1 !important;
}

/* ====== DIFFERENT ANIMATION TYPES ====== */

/* 1. FADE UP - classic professional */
.fade-up {
  transform: translateY(40px) !important;
}
.fade-up.visible {
  transform: translateY(0) !important;
}

/* 2. FADE LEFT - elegant entrance from left */
.fade-left {
  transform: translateX(-40px) !important;
}
.fade-left.visible {
  transform: translateX(0) !important;
}

/* 3. FADE RIGHT - elegant entrance from right */
.fade-right {
  transform: translateX(40px) !important;
}
.fade-right.visible {
  transform: translateX(0) !important;
}

/* 4. ZOOM IN - subtle scale from 0.95 to 1 */
.zoom-in {
  transform: scale(0.95) !important;
}
.zoom-in.visible {
  transform: scale(1) !important;
}

/* 5. SCALE UP - grows slightly from below */

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

/* ====== SOFT HOVER EFFECTS (optional) ====== */
.rectangle:hover,
.rectangle-2:hover,
.rectangle-8:hover,
.rectangle-12:hover,
.rectangle-21:hover,
.ellipse-4:hover,
.ellipse-5:hover {
  transform: scale(1.02) !important;
  transition: transform 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(255, 125, 125, 0.2) !important;
}