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

  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: "Peperrito Ornaments Regular";
  src: url("PeperritoOrnaments-Regular.otf") format("truetype");
    src: url("PeperritoOrnaments-Regular.ttf") format("truetype");

  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "KNMaiyuan-Regular";
  src: url("KNMaiyuan-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Vividly-Regular";
  src: local("Vividly-Regular");
}
/* @FONTWARNING[{"type": "restricted", "family": "Peperrito Ornaments-Regular", "weight": "400", "style": "normal", "allowsCrossOrigin": false}] */

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

@font-face {
  font-family: "Single Day";
  src: local("Single Day");
}
.iphone {
  background-image: url(bg1.png);
  background-size: cover;
  background-position: 50% 50%;

  width: 390px;
  height: 1581px;

  position: relative;
  margin: 0 auto;

  transform-origin: top center;
}
.iphone .gemini-generated {
  position: absolute;
  top: 263px;
  left: calc(50.00% - 109px);
  width: 60px;
  height: 68px;
  aspect-ratio: 0.8;
}

.iphone .rectangle {
  position: absolute;
  top: 228px;
  left: calc(50.00% - 61px);
  width: 143px;
  height: 163px;
}

.iphone .img {
  position: absolute;
  top: 299px;
  left: calc(50.00% - 102px);
  width: 108px;
  height: 124px;
}

.iphone .rectangle-2 {
  position: absolute;
  top: 637px;
  left: calc(50.00% - 132px);
  width: 264px;
  height: 116px;
}

.iphone .rectangle-3 {
  position: absolute;
  top: 847px;
  left: calc(50.00% - 132px);
  width: 136px;
  height: 120px;
}

.iphone .gemini-generated-2 {
  position: absolute;
  top: 475px;
  left: calc(50.00% + 2px);
  width: 64px;
  height: 52px;
  aspect-ratio: 1.35;
}

.iphone .gemini-generated-3 {
  position: absolute;
  top: 874px;
  left: calc(50.00% + 8px);
  width: 64px;
  height: 52px;
  aspect-ratio: 1.35;
}

.iphone .text-wrapper {
  position: absolute;
  top: 158px;
  left: calc(50.00% - 112px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: normal;
  color: #ffacd3;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .div {
  top: 406px;
  left: calc(50.00% + 36px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 10px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

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

.iphone .little-something {
  position: absolute;
  top: 183px;
  left: calc(50.00% - 49px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .text-wrapper-2 {
  top: 769px;
  left: calc(50.00% - 132px);
  width: 147px;
  font-family: "Vividly-Regular", Helvetica;
  font-size: 13px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .some-moments-don-t {
  position: absolute;
  top: 790px;
  left: calc(50.00% - 128px);
  width: 129px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .just-little-pieces {
  position: absolute;
  top: 836px;
  left: calc(50.00% + 4px);
  width: 129px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .l {
  position: absolute;
  top: 188px;
  left: calc(50.00% + 113px);
  transform: rotate(14.87deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .z {
  position: absolute;
  top: 232px;
  left: calc(50.00% + 69px);
  transform: rotate(14.87deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .y {
  position: absolute;
  top: 329px;
  left: calc(50.00% - 169px);
  transform: rotate(21.41deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .z-2 {
  position: absolute;
  top: 579px;
  left: calc(50.00% + 31px);
  transform: rotate(14.87deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .take-a-little {
  position: absolute;
  top: 462px;
  left: calc(50.00% - 71px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .text-wrapper-3 {
  top: 482px;
  left: calc(50.00% - 108px);
  font-family: "Single Day";
  font-size: 10px;
  position: absolute;
  font-weight: 400;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .keep-this-little {
  position: absolute;
  top: 516px;
  left: calc(50.00% - 165px);
  width: 173px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .text-wrapper-4 {
  position: absolute;
  top: 993px;
  left: calc(50.00% - 72px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

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

.iphone .happiness-begins {
  position: absolute;
  top: 1035px;
  left: calc(50.00% - 169px);
  width: 142px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .this-moment-belongs {
  position: absolute;
  top: 535px;
  left: calc(50.00% - 23px);
  width: 173px;
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .kawaii-steak {
  position: absolute;
  top: 28px;
  left: 38px;
  width: 22px;
  height: 22px;
}

.iphone .hello-kitty {
  position: absolute;
  top: 102px;
  left: calc(50.00% - 16px);
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-2 {
  top: 102px;
  left: calc(50.00% + 30px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-3 {
  top: 102px;
  left: calc(50.00% - 62px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-4 {
  top: 1105px;
  left: calc(50.00% - 16px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-5 {
  top: 1105px;
  left: calc(50.00% + 30px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-6 {
  top: 1105px;
  left: calc(50.00% - 62px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-7 {
  top: 1493px;
  left: calc(50.00% - 16px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-8 {
  top: 1493px;
  left: calc(50.00% + 30px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .hello-kitty-9 {
  top: 1493px;
  left: calc(50.00% - 62px);
  position: absolute;
  width: 33px;
  height: 33px;
}

.iphone .favorite {
  position: absolute;
  top: 39px;
  left: 318px;
  width: 26px;
  height: 26px;
}

.iphone .rectangle-4 {
  position: absolute;
  top: 296px;
  left: calc(50.00% + 65px);
  width: 36px;
  height: 11px;
  border-radius: 16px;
  border: 0.4px solid;
  border-color: #ffacd3;
  background: linear-gradient(
    90deg,
    rgba(255, 243, 247, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.iphone .rectangle-5 {
  position: absolute;
  top: 932px;
  left: calc(50.00% - 11px);
  width: 36px;
    z-index: 999;

  height: 11px;
  border-radius: 16px;
  border: 0.4px solid;
  border-color: #ffacd3;
  background: linear-gradient(
    90deg,
    rgba(255, 243, 247, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.iphone .rectangle-6 {
  position: absolute;
  top: 932px;
  left: calc(50.00% + 35px);
  width: 97px;
  height: 142px;
}


.iphone .rectangle-33 {
  position: absolute;
  top: 850px;
  left: calc(50.00% + -134px);
  width: 136px;
  height: 120px;
  z-index: 0;
}

.iphone .rectangle-7 {
  position: absolute;
  top: 1035px;
  left: calc(50.00% + 12px);
  width: 36px;
  height: 11px;
  border-radius: 16px;
  border: 0.4px solid;
  border-color: #ffacd3;
  background: linear-gradient(
    90deg,
    rgba(255, 243, 247, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.iphone .rectangle-8 {
  position: absolute;
  top: 386px;
  left: calc(50.00% - 135px);
  width: 37px;
  height: 14px;
  border-radius: 16px;
  border: 0.4px solid;
  border-color: #ffacd3;
  transform: rotate(-7.03deg);
  background: linear-gradient(
    90deg,
    rgba(255, 243, 247, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.iphone .rectangle-9 {
  position: absolute;
  top: 405px;
  left: calc(50.00% - 140px);
  width: 45px;
  height: 14px;
  border-radius: 16px;
  border: 0.4px solid;
  border-color: #ffacd3;
  transform: rotate(-7.03deg);
  background: linear-gradient(
    90deg,
    rgba(255, 243, 247, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.iphone .ellipse {
  position: absolute;
  top: 563px;
  left: 67px;
  width: 41px;
  height: 33px;
}

.iphone .ellipse-2 {
  position: absolute;
  top: 572px;
  left: 99px;
  width: 41px;
  height: 33px;
}

.iphone .ellipse-3 {
  position: absolute;
  top: 788px;
  left: 223px;
  width: 41px;
  height: 32px;
  object-fit: cover;
}

.iphone .ellipse-4 {
  position: absolute;
  top: 792px;
  left: 255px;
  width: 41px;
  height: 33px;
}

.iphone .text-wrapper-6 {
  top: 298px;
  left: calc(50.00% + 71px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 7px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;

  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .text-wrapper-7 {
  top: 932px;
      z-index: 9999;

  left: calc(50.00% - 2px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 9px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .text-wrapper-8 {
  top: 1036px;
  left: calc(50.00% + 20px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 9px;
  white-space: nowrap;
  position: absolute;
  font-weight: 400;
  color:#ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .text-wrapper-9 {
  top: 409px;
  left: calc(50.00% - 136px);
  transform: rotate(-7.03deg);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 6px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .text-wrapper-10 {
  top: 390px;
  left: calc(50.00% - 130px);
  transform: rotate(-7.03deg);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 6px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .rectangle-10 {
  position: absolute;
  top: 1159px;
  left: calc(50.00% - 139px);
  width: 278px;
  height: 297px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid;
  border-color: #ffacd3;
}

.iphone .gemini-generated-4 {
  position: absolute;
  top: 1247px;
  left: calc(50.00% - 38px);
  width: 76px;
  height: 74px;
  aspect-ratio: 1.02;
}

.iphone .text-wrapper-11 {
  top: 1190px;
  left: calc(50.00% - 64px);
  font-family: "Vividly-Regular", Helvetica;
  font-size: 13px;
  white-space: nowrap;
  position: absolute;
  font-weight: normal;
  color: #ffacd3;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .one-last-thing-keep {
  position: absolute;
  top: 1334px;
  left: calc(50.00% - 113px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 11px;
}

.iphone .i-hope-this-little {
  position: absolute;
  top: 1214px;
  left: calc(50.00% - 98px);
  font-family: "Vividly-Regular", Helvetica;
  font-weight: 400;
  color: #ffacd3;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.iphone .l-2 {
  position: absolute;
  top: 1149px;
  left: calc(50.00% + 92px);
  transform: rotate(14.87deg);
  font-family: "Peperrito Ornaments Regular";
  font-weight: 400;
  color: #ffacd3;
  font-size: 23px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.iphone .vector {
  position: absolute;
  top: 728px;
  left: 179px;
  width: 33px;
  height: 7px;
}

.iphone .ellipse-5 {
  position: absolute;
  top: 677px;
  left: 116px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-6 {
  position: absolute;
  top: 714px;
  left: 114px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-7 {
  position: absolute;
  top: 695px;
  left: 88px;
  width: 4px;
  height: 4px;
  background-color:#ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-8 {
  position: absolute;
  top: 653px;
  left: 86px;
  width: 4px;
  height: 4px;
  background-color:#ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-9 {
  position: absolute;
  top: 737px;
  left: 75px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-10 {
  position: absolute;
  top: 679px;
  left: 272px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-11 {
  position: absolute;
  top: 710px;
  left: 283px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-12 {
  position: absolute;
  top: 737px;
  left: 308px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-13 {
  position: absolute;
  top: 691px;
  left: 312px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}

.iphone .ellipse-14 {
  position: absolute;
  top: 649px;
  left: 300px;
  width: 4px;
  height: 4px;
  background-color: #ffe3f0;
  border-radius: 2px;
}
/* --- SLIDE-IN ANIMATION FOR TEXT (p, div) --- */
.iphone p,
.iphone div {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  filter: blur(3px);
  transition: 
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.iphone p.revealed,
.iphone div.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* --- FADE-IN ONLY FOR IMAGES (so they never move/hide) --- */
.iphone img {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.iphone img.revealed {
  opacity: 1;
}

/* Staggered delays for text (slide up wave) */
.iphone p:nth-of-type(1), .iphone div:nth-of-type(1) { transition-delay: 0.1s; }
.iphone p:nth-of-type(2), .iphone div:nth-of-type(2) { transition-delay: 0.2s; }
.iphone p:nth-of-type(3), .iphone div:nth-of-type(3) { transition-delay: 0.3s; }
.iphone p:nth-of-type(4), .iphone div:nth-of-type(4) { transition-delay: 0.4s; }
.iphone p:nth-of-type(5), .iphone div:nth-of-type(5) { transition-delay: 0.5s; }
.iphone p:nth-of-type(6), .iphone div:nth-of-type(6) { transition-delay: 0.6s; }
.iphone p:nth-of-type(7), .iphone div:nth-of-type(7) { transition-delay: 0.7s; }
.iphone p:nth-of-type(8), .iphone div:nth-of-type(8) { transition-delay: 0.8s; }
.iphone p:nth-of-type(9), .iphone div:nth-of-type(9) { transition-delay: 0.9s; }
.iphone p:nth-of-type(10), .iphone div:nth-of-type(10) { transition-delay: 1s; }
.iphone p:nth-of-type(11), .iphone div:nth-of-type(11) { transition-delay: 1.1s; }
.iphone p:nth-of-type(12), .iphone div:nth-of-type(12) { transition-delay: 1.2s; }
.iphone p:nth-of-type(13), .iphone div:nth-of-type(13) { transition-delay: 1.3s; }
.iphone p:nth-of-type(14), .iphone div:nth-of-type(14) { transition-delay: 1.4s; }
.iphone p:nth-of-type(15), .iphone div:nth-of-type(15) { transition-delay: 1.5s; }
/* Add more if you have more text elements */

/* Staggered delays for images (gentle pop-in) */
.iphone img:nth-of-type(1) { transition-delay: 0.1s; }
.iphone img:nth-of-type(2) { transition-delay: 0.2s; }
.iphone img:nth-of-type(3) { transition-delay: 0.3s; }
.iphone img:nth-of-type(4) { transition-delay: 0.4s; }
.iphone img:nth-of-type(5) { transition-delay: 0.5s; }
.iphone img:nth-of-type(6) { transition-delay: 0.6s; }
.iphone img:nth-of-type(7) { transition-delay: 0.7s; }
.iphone img:nth-of-type(8) { transition-delay: 0.8s; }
.iphone img:nth-of-type(9) { transition-delay: 0.9s; }
.iphone img:nth-of-type(10) { transition-delay: 1s; }
.iphone img:nth-of-type(11) { transition-delay: 1.1s; }
.iphone img:nth-of-type(12) { transition-delay: 1.2s; }
.iphone img:nth-of-type(13) { transition-delay: 1.3s; }
.iphone img:nth-of-type(14) { transition-delay: 1.4s; }
.iphone img:nth-of-type(15) { transition-delay: 1.5s; }
/* Add more if you have more images */

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */

/* 📱 PHONE */
@media (max-width: 599px) {
  .iphone {
    transform: scale(1);
  }
}


/* 📱 TABLET — 810px */
@media (min-width: 600px) and (max-width: 899px) {
  .iphone {
    transform: scale(1.25);
  }
}


/* 💻 LAPTOP — 1024px */
@media (min-width: 900px) {
  .iphone {
    transform: scale(1.45);
  }
}