* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  overflow: hidden;
  background: #120d0f;
  color: #fff;
}

.background {
  position: fixed;
  inset: 0;
  background-image: url("images/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  animation: zoom 25s ease-in-out infinite alternate;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}

.vault {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90%);
  padding: 36px 34px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(30,23,24,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transition: opacity .5s ease;
}

.fade-out {
  opacity: 0;
  pointer-events: none;
}

h1 {
  font-family: "Patrick Hand", cursive;
  font-size: 50px;
  font-weight: 400;
  color: #f7eeee;
  text-align: center;
  margin-bottom: 24px;
}

input {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 0 15px;
  outline: none;
  margin-bottom: 10px;
}

input::placeholder {
  color: rgba(255,255,255,0.45);
}

.message {
  min-height: 22px;
  font-size: 13px;
  color: #ff9cab;
  margin-bottom: 12px;
}

button {
  width: 100%;
  height: 47px;
  border: none;
  border-radius: 9px;
  background: #cc5d73;
  color: white;
  font-weight: 500;
  transition: all .25s ease;
}

#unlockBtn:hover {
  transform: scale(1.03);
  background: #ff7ea8;
  box-shadow: 0 0 25px rgba(255,126,168,.45);
}

#unlockBtn:active {
  transform: scale(.98);
}

button span {
  margin-left: 8px;
}

.hint {
  margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

.success-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #fff1f6;
  color: #5a2b36;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}

.success-screen h2 {
  font-family: "Patrick Hand", cursive;
  font-size: 56px;
  font-weight: 400;
  color: #7a4d57;
}

.success-screen p {
  font-size: 28px;
  margin-top: 10px;
  animation: pulse 1.5s infinite;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

#particles-js{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  display:block;
}

* {
  cursor: url("./cursors/paw.png") 16 16, auto !important;
}

button,
input,
a {
  cursor: url("./cursors/paw.png") 16 16, pointer !important;
}

/* ---------------- Envelope ---------------- */

.envelope-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff1f6;
  z-index: 20;
  transition: opacity .8s ease;
}

.envelope {
  position: relative;
  width: 240px;
  height: 160px;
  cursor: pointer;
  perspective: 900px;
  transition: transform .3s ease;
}

.envelope:hover {
  transform: scale(1.03);
}

.envelope-back {
  position: absolute;
  inset: 0;
  background: #f7d8df;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  transition: opacity .35s ease;
  z-index: 1;
}

.envelope-letter {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 25px;
  bottom: 20px;
  border-radius: 5px;
  z-index: 2;
  transition: transform 1s ease .3s;
}

.paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0,0,0,.08);
  transform-origin: center center;
  transition: transform .9s ease, border-radius .9s ease, box-shadow .9s ease;
}

.envelope-flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background: #f2c8d1;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform .8s ease, opacity .35s ease;
  z-index: 4;
}

.envelope-text {
  margin-top: 35px;
  font-family: "Patrick Hand", cursive;
  font-size: 30px;
  color: #b06d82;
  opacity: .8;
  transition: opacity .4s ease;
}

.envelope.open .envelope-flap {
  transform: rotateX(180deg);
  opacity: 0;
}

.envelope.open .envelope-back {
  opacity: 0;
}

.envelope.open .envelope-letter {
  transform: translateY(10px);
}

.envelope.open .paper {
  transform: scale(2.4);
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0,0,0,.16);
}

.envelope.open + .envelope-text {
  opacity: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* ---------------- Big Letter ---------------- */

.letter-screen {
  position: fixed;
  inset: 0;
  z-index: 30;

  background:
    linear-gradient(rgba(255,241,246,.30), rgba(255,241,246,.38)),
    url("images/letter-bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .8s ease;
}

.big-letter {
  position: relative;
  z-index: 32;

  width: min(850px, 90%);
  height: min(85vh, 900px);

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 18px;
  padding: 55px;
  box-shadow: 0 25px 70px rgba(0,0,0,.18);
  overflow-y: auto;

  transform: scale(.9);
  opacity: 0;
  transition: transform .8s ease, opacity .8s ease;
}

.letter-screen:not(.hidden) .big-letter {
  transform: scale(1);
  opacity: 1;
}

.big-letter h2 {
  font-family: "Patrick Hand", cursive;
  font-size: 48px;
  color: #744856;
  margin-bottom: 30px;
}

.letter-body {
  color: #5f4951;
  font-size: 22px;
  line-height: 1.9;
}

.letter-body p {
    margin-bottom: 30px;
}

.signature {
  margin-top: 60px;
  text-align: right;
  font-family: "Patrick Hand", cursive;
  font-size: 34px;
  color: #8d5d6d;
}

.signature {
    margin-top: 70px;
    text-align: right;

    font-family: "Patrick Hand", cursive;
    font-size: 38px;
    color: #7a4d57;

    line-height: 1.2;
}

/* ---------------- Kawaii Background Stickers ---------------- */



.ending{
    margin-top:60px;
    text-align:center;

    font-family:"Patrick Hand", cursive;
    font-size:24px;

    color:#b8929d;
    opacity:.8;

    animation: fadeIn 2s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:.8;
        transform:translateY(0);
    }
}

.letter-body p,
.signature,
.ending {
    opacity: 0;
    transform: translateY(12px);
}

.letter-screen:not(.hidden) .letter-body p,
.letter-screen:not(.hidden) .signature,
.letter-screen:not(.hidden) .ending {
    animation: letterFade 0.8s ease forwards;
}

.letter-screen:not(.hidden) .letter-body p:nth-child(1) { animation-delay: 0.2s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(2) { animation-delay: 0.5s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(3) { animation-delay: 0.8s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(4) { animation-delay: 1.1s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(5) { animation-delay: 1.4s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(6) { animation-delay: 1.7s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(7) { animation-delay: 2s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(8) { animation-delay: 2.3s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(9) { animation-delay: 2.6s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(10) { animation-delay: 2.9s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(11) { animation-delay: 3.2s; }
.letter-screen:not(.hidden) .letter-body p:nth-child(12) { animation-delay: 3.5s; }

.letter-screen:not(.hidden) .signature { animation-delay: 3.9s; }
.letter-screen:not(.hidden) .ending { animation-delay: 4.3s; }

@keyframes letterFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.big-letter::-webkit-scrollbar {
  width: 7px;
}

.big-letter::-webkit-scrollbar-track {
  background: transparent;
}

.big-letter::-webkit-scrollbar-thumb {
  background: #e8a7b8;
  border-radius: 20px;
}

.big-letter::-webkit-scrollbar-thumb:hover {
  background: #d9859d;
}

.love-pop {
  position: fixed;
  z-index: 999;
  color: #f58fb1;
  pointer-events: none;
  animation: heartBurst 1.8s ease-out forwards;
}

@keyframes heartBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(.4);
  }

  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(1.5);
  }
}

.signature{
    margin-top:70px;
    text-align:right;
    font-family:"Patrick Hand", cursive;
    font-size:38px;
    color:#7a4d57;
    line-height:1.2;
    min-height:95px;
}

#signatureText::after{
    content:"";
    display:inline-block;
    width:2px;
    height:34px;
    background:#7a4d57;
    margin-left:4px;
    animation:blink .8s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}

.finished::after{
    display:none;
}

.next-btn{
    display:flex;
    justify-content:center;
    align-items:center;

    margin-left:auto;
    margin-top:40px;

    width:180px;
    height:52px;

    border:none;
    border-radius:999px;

    background:#f7a9c2;
    color:#744856;

    font-family:"Patrick Hand", cursive;
    font-size:25px;
    font-weight:400;

    text-align:center;

    transition:.3s ease;

    cursor:pointer;
}

.next-btn:hover{
    background:#f9b8cd;
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(245,143,177,.35);
}

.memories-screen{
  position:fixed;
  inset:0;
  z-index:40;

  background:
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.18)),
    url("images/little-pieces-bg.png");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  overflow:hidden;
}

.memories-screen h2{
  position:absolute;
  top:55px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;

  font-family:"Patrick Hand", cursive;
  font-size:64px;
  color:white;
  margin:0;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}

.memories-subtitle{
  position:absolute;
  top:130px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;

  width:760px;
  max-width:90%;
  text-align:center;

  font-size:22px;
  color:#ffc0d4;
  margin:0;
  text-shadow:0 3px 12px rgba(0,0,0,.45);
}

.polaroid-gallery{
  position:absolute;
  top:215px;
  left:50%;
  transform:translateX(-50%);

  width:820px;
  height:520px;
  z-index:8;
}

.polaroid{
  position:absolute;
  width:190px;

  background:white;
  padding:11px 11px 20px;

  border-radius:7px;
  box-shadow:0 18px 35px rgba(0,0,0,.28);

  transition:.3s ease;
}

.polaroid:hover{
    transform:
        translateY(-12px)
        scale(1.18)
        rotate(var(--rot));

    box-shadow:0 35px 80px rgba(0,0,0,.42);

    z-index:100;
}

.polaroid img{
  width:100%;
  height:205px;
  object-fit:cover;
  border-radius:4px;
}

.polaroid p{
  font-family:"Patrick Hand", cursive;
  font-size:18px;
  line-height:1.25;
  color:#744856;
  text-align:center;
  margin:12px 0 0;
}

.polaroid::before{
  content:"";
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%) rotate(1deg);

  width:72px;
  height:26px;

  background:rgba(255,165,195,.78);
  border-radius:2px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.p1{
  left:85px;
  top:0;
  --rot:-3deg;
  transform:rotate(var(--rot));
}

.p2{
  left:315px;
  top:0;
  --rot:2deg;
  transform:rotate(var(--rot));
}

.p3{
  left:545px;
  top:0;
  --rot:3deg;
  transform:rotate(var(--rot));
}

.p4{
  left:205px;
  top:285px;
  --rot:-4deg;
  transform:rotate(var(--rot));
}

.p5{
  left:445px;
  top:285px;
  --rot:4deg;
  transform:rotate(var(--rot));
}

@keyframes polaroidIn {
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--r));
  }
}

.full-photo img{
    object-fit:cover;
    object-position:center top;
}

.messages-screen{
    position:fixed;
    inset:0;
    z-index:50;
    overflow:hidden;

    background:
        linear-gradient(rgba(255,241,246,.18), rgba(255,241,246,.18)),
        url("images/words-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:opacity .8s ease;
}

.messages-screen h2,
.messages-subtitle,
.chat-card,
.messages-next{
    position:relative;
    z-index:5;
}

.messages-screen h2{
    position:absolute;
    top:42%;
    left:50%;
    transform:translate(-50%,-50%);

    font-family:"Patrick Hand", cursive;
    font-size:62px;
    color:#744856;
    margin:0;
}

.chat-card{
    transition:transform .35s ease, box-shadow .35s ease;
    animation:floatChat 5s ease-in-out infinite alternate;
}

.chat-card:hover{
    transform:
        translateY(-10px)
        scale(1.12)
        rotate(var(--r));

    box-shadow:0 30px 60px rgba(0,0,0,.35);
    z-index:30;
}

@keyframes floatChat{
    from{
        transform:translateY(0) rotate(var(--r));
    }

    to{
        transform:translateY(-6px) rotate(var(--r));
    }
}

.messages-subtitle{

    position:absolute;

    top:48%;
    left:50%;

    transform:translateX(-50%);

    width:700px;

    text-align:center;

    font-size:20px;
    color:#8d5d6d;

}

#memoriesNextBtn{
    position: fixed;

    right: 55px;
    bottom: 35px;

    margin: 0;

    width: 220px;
    height: 58px;

    z-index: 999;
}

.chat-card{
    position:absolute;
    width:210px;
    background:#fff;
    padding:8px;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.13);
    transition:.35s;
}

.chat-card img{
    width:100%;
    display:block;
    border-radius:12px;
    height:auto;
}

.chat-card{
    width:260px;
}

.c1{ top:5%; left:6%; transform:rotate(-7deg); }
.c2{ top:4%; left:25%; transform:rotate(5deg); }
.c3{ top:5%; right:25%; transform:rotate(-5deg); }
.c4{ top:6%; right:6%; transform:rotate(6deg); }

.c5{ top:36%; left:3%; transform:rotate(5deg); }
.c6{ top:47%; right:3%; transform:rotate(-5deg); }

.c7{ bottom:6%; left:9%; transform:rotate(-5deg); }
.c8{ bottom:6%; right:9%; transform:rotate(5deg); }

.c9{ bottom:3%; left:34%; transform:rotate(-4deg); }
.c10{ bottom:3%; right:34%; transform:rotate(4deg); }

.c2,
.c3,
.c7,
.c8{
    width:285px;
}

.c5,
.c6{
    width:275px;
}

.nickname-screen{
    position:fixed;
    inset:0;
    z-index:60;
    overflow:hidden;

    background:
        linear-gradient(rgba(255,241,246,.18), rgba(255,241,246,.18)),
        url("images/nickname-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.nickname-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:700px;
    text-align:center;
    z-index:15;
}

.nickname-screen::before{
    content:"";
    position:absolute;

    left:50%;
    top:47%;
    transform:translate(-50%,-50%);

    width:620px;
    height:170px;

    pointer-events:none;
    z-index:2;

    background:
    radial-gradient(
        ellipse,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.95) 20%,
        rgba(255,255,255,.78) 45%,
        rgba(255,255,255,.40) 70%,
        rgba(255,255,255,.08) 92%,
        rgba(255,255,255,0) 100%
    );

filter: blur(20px);
}

.nickname-center h2{
  font-family:"Patrick Hand", cursive;
  font-size:60px;
  color:#744856;
  margin:0 0 14px;
  line-height:1.05;
  text-align:center;
}

.nickname-subtitle{
  position:relative;
  top:-6px;

  font-size:19px;
  color:#8d5d6d;
  line-height:1.6;
  margin:0;
  text-align:center;
}

.nickname-screen .mommy-card{
  position:absolute;
  z-index:10;
}

.nickname-next{
  position:absolute;
  right:55px;
  bottom:35px;
  z-index:30;
}

.mommy-card{
  position:absolute;
  background:white;
  padding:9px;
  border-radius:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.14);
  z-index:2;
  animation:cardFloat 5s ease-in-out infinite alternate;
}

.mommy-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* pozele lungi */
.m3{
  top:7%;
  right:27%;
  width:250px;
  transform:rotate(-5deg);
}

.m5{
  top:8%;
  left:5%;
  width:255px;
  transform:rotate(-7deg);
}

/* restul pozelor */
.m1{
  top:8%;
  left:7%;
  width:260px;
  transform:rotate(-5deg);
}

.m3{
  top:7%;
  right:26%;
  width:235px;
  transform:rotate(-4deg);
}

.m5{
  top:23%;
  left:5%;
  width:230px;
  transform:rotate(4deg);
}

.m2{
  top:8%;
  right:7%;
  width:260px;
  transform:rotate(5deg);
}

.m4{
  top:36%;
  right:7%;
  width:245px;
  transform:rotate(-4deg);
}

.m6{
  bottom:8%;
  left:6%;
  width:245px;
  transform:rotate(4deg);
}

.m7{
  bottom:7%;
  left:24%;
  width:260px;
  transform:rotate(-4deg);
}

.m8{
  bottom:7%;
  right:25%;
  width:260px;
  transform:rotate(4deg);
}

.m9{
  bottom:9%;
  right:7%;
  width:260px;
  transform:rotate(-3deg);
}

.m10{
  top:8%;
  left:31%;
  width:260px;
  transform:rotate(4deg);
}

.nickname-next{
  position:absolute;
  right:55px;
  bottom:35px;
  margin:0;
  z-index:10;
  width:220px;
}

.messages-next{
  position:absolute;
  right:55px;
  bottom:35px;
  margin:0;
  z-index:10;
  width:220px;
}


/* Mommy page decorations */

.mommy-tape{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%) rotate(-6deg);

  width:82px;
  height:22px;

  background:rgba(247,174,195,.78);
  border-radius:4px;

  z-index:20;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.mommy-tape::before{
  content:"";
  position:absolute;
  inset:0;

  background:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.28) 0px,
    rgba(255,255,255,.28) 4px,
    transparent 4px,
    transparent 8px
  );

  border-radius:4px;
}

.heart-clip{
  position:absolute;
  top:-28px;
  right:22px;

  font-family:"Patrick Hand", cursive;
  font-size:42px;
  color:#ef8fb0;

  z-index:25;
  transform:rotate(13deg);
  text-shadow:0 4px 10px rgba(0,0,0,.1);
}

.bg-heart{
  position:absolute;
  font-family:"Patrick Hand", cursive;
  color:#ef9fba;
  opacity:.32;
  pointer-events:none;
  z-index:1;

  animation:bgHeartFloat 5s ease-in-out infinite alternate;
}

.bg-heart{
    position:absolute;
    color:#f2a3c0;
    opacity:.35;
    pointer-events:none;
    z-index:1;
    animation:bgHeartFloat 5s ease-in-out infinite alternate;
}

.h1{top:3%;left:4%;font-size:22px;}
.h2{top:5%;left:15%;font-size:34px;}
.h3{top:8%;left:34%;font-size:26px;}
.h4{top:3%;left:53%;font-size:20px;}
.h5{top:7%;left:72%;font-size:32px;}
.h6{top:4%;left:91%;font-size:24px;}

.h7{top:18%;left:9%;font-size:28px;}
.h8{top:23%;left:27%;font-size:22px;}
.h9{top:18%;left:46%;font-size:36px;}
.h10{top:24%;left:65%;font-size:25px;}
.h11{top:19%;left:84%;font-size:30px;}

.h12{top:37%;left:18%;font-size:24px;}
.h13{top:34%;left:40%;font-size:30px;}
.h14{top:39%;left:58%;font-size:20px;}
.h15{top:35%;left:80%;font-size:34px;}

.h16{top:54%;left:7%;font-size:26px;}
.h17{top:58%;left:30%;font-size:22px;}
.h18{top:53%;left:51%;font-size:30px;}
.h19{top:59%;left:71%;font-size:24px;}
.h20{top:56%;left:91%;font-size:28px;}

.h21{top:72%;left:15%;font-size:32px;}
.h22{top:75%;left:37%;font-size:20px;}
.h23{top:71%;left:57%;font-size:28px;}
.h24{top:76%;left:79%;font-size:22px;}

.h25{top:88%;left:6%;font-size:26px;}
.h26{top:91%;left:24%;font-size:22px;}
.h27{top:87%;left:45%;font-size:34px;}
.h28{top:90%;left:63%;font-size:24px;}
.h29{top:86%;left:82%;font-size:30px;}
.h30{top:92%;left:95%;font-size:18px;}

@keyframes bgHeartFloat{
    from{
        transform:translateY(0) scale(1);
    }
    to{
        transform:translateY(-10px) scale(1.08);
    }
}

.sparkle{
    position:absolute;
    color:#f7bfd3;
    opacity:.55;
    pointer-events:none;
    z-index:1;
    animation:sparkleFloat 4s ease-in-out infinite alternate;
    text-shadow:0 0 8px rgba(255,255,255,.8);
}

.s1{top:6%;left:9%;font-size:18px;}
.s2{top:10%;left:22%;font-size:14px;}
.s3{top:7%;left:41%;font-size:20px;}
.s4{top:12%;left:59%;font-size:16px;}
.s5{top:8%;left:78%;font-size:18px;}
.s6{top:10%;left:94%;font-size:14px;}

.s7{top:28%;left:12%;font-size:18px;}
.s8{top:24%;left:37%;font-size:14px;}
.s9{top:30%;left:53%;font-size:20px;}
.s10{top:27%;left:72%;font-size:16px;}

.s11{top:48%;left:19%;font-size:18px;}
.s12{top:43%;left:43%;font-size:15px;}
.s13{top:49%;left:63%;font-size:20px;}
.s14{top:45%;left:88%;font-size:16px;}

.s15{top:67%;left:10%;font-size:18px;}
.s16{top:71%;left:34%;font-size:14px;}
.s17{top:69%;left:57%;font-size:20px;}
.s18{top:73%;left:82%;font-size:15px;}

.s19{top:88%;left:28%;font-size:18px;}
.s20{top:91%;left:71%;font-size:15px;}

@keyframes sparkleFloat{

    from{
        transform:translateY(0) scale(1);
        opacity:.35;
    }

    to{
        transform:translateY(-8px) scale(1.15);
        opacity:.8;
    }

}

/* Love messages decorations */

.msg-tape{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%) rotate(-6deg);
  width:82px;
  height:22px;
  background:rgba(247,174,195,.78);
  border-radius:4px;
  z-index:20;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.msg-tape::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.28) 0px,
    rgba(255,255,255,.28) 4px,
    transparent 4px,
    transparent 8px
  );
  border-radius:4px;
}

.msg-clip{
  position:absolute;
  top:-28px;
  right:22px;
  font-family:"Patrick Hand", cursive;
  font-size:42px;
  color:#ef8fb0;
  z-index:25;
  transform:rotate(13deg);
  text-shadow:0 4px 10px rgba(0,0,0,.1);
}

.messages-screen h2{
  position:absolute;
  left:50%;
  top:43%;
  transform:translate(-50%, -50%);
  z-index:20;

  font-family:"Patrick Hand", cursive;
  font-size:62px;
  color:#744856;
  margin:0;
}

.messages-subtitle{
  position:absolute;
  left:50%;
  top:48%;
  transform:translateX(-50%);
  z-index:20;

  width:760px;
  text-align:center;
  font-size:20px;
  color:#8d5d6d;
}

.messages-screen .title-clean-bg{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%, -50%);
  width:720px;
  height:150px;
  background:rgba(255,241,246,.78);
  border-radius:40px;
  filter:blur(18px);
  z-index:15;
}

.lilies-screen{
  position:fixed;
  inset:0;
  z-index:70;
  overflow:hidden;

  background:
    linear-gradient(
        rgba(255,241,246,.10),
        rgba(255,241,246,.10)
    ),
    url("images/lilies-bg.png");

  background-size:cover;
  background-position:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  transition:opacity .8s ease;
}

.lilies-screen h2{
  font-family:"Patrick Hand", cursive;
  font-size:58px;
  color:#744856;
  margin-bottom:28px;
  z-index:5;
}

.lilies-photo-card{
  width:min(460px, 85vw);
  max-height:62vh;

  background:white;
  padding:14px;
  border-radius:22px;

  box-shadow:0 25px 70px rgba(116,72,86,.22);
  z-index:5;
}

.lilies-photo-card img{
  width:100%;
  max-height:58vh;
  object-fit:contain;
  display:block;
  border-radius:16px;
}

.lilies-text{
  width:min(760px, 85%);
  margin-top:28px;

  text-align:center;
  font-family:"Patrick Hand", cursive;
  font-size:29px;
  line-height:1.45;

  color:#8d5d6d;
  z-index:5;
}

.lilies-next{
  position:absolute;
  right:55px;
  bottom:35px;
  margin:0;
  z-index:10;
  width:220px;
}

/* Petale care cad */

.petals{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  overflow:hidden;
}

.petals span{
  position:absolute;
  top:-10%;

  width:18px;
  height:28px;

  background:#f5a6c0;
  border-radius:70% 30% 70% 30%;

  opacity:.55;
  filter:blur(.2px);

  animation:fallPetal linear infinite;
}

.petals span:nth-child(1){ left:5%; animation-duration:12s; animation-delay:0s; }
.petals span:nth-child(2){ left:12%; animation-duration:15s; animation-delay:2s; }
.petals span:nth-child(3){ left:19%; animation-duration:11s; animation-delay:4s; }
.petals span:nth-child(4){ left:26%; animation-duration:16s; animation-delay:1s; }
.petals span:nth-child(5){ left:34%; animation-duration:13s; animation-delay:3s; }

.petals span:nth-child(6){ left:43%; animation-duration:17s; animation-delay:0s; }
.petals span:nth-child(7){ left:51%; animation-duration:12s; animation-delay:5s; }
.petals span:nth-child(8){ left:58%; animation-duration:15s; animation-delay:2s; }
.petals span:nth-child(9){ left:66%; animation-duration:14s; animation-delay:1s; }
.petals span:nth-child(10){ left:73%; animation-duration:18s; animation-delay:4s; }

.petals span:nth-child(11){ left:80%; animation-duration:13s; animation-delay:0s; }
.petals span:nth-child(12){ left:86%; animation-duration:16s; animation-delay:3s; }
.petals span:nth-child(13){ left:91%; animation-duration:12s; animation-delay:6s; }
.petals span:nth-child(14){ left:96%; animation-duration:15s; animation-delay:2s; }
.petals span:nth-child(15){ left:38%; animation-duration:19s; animation-delay:7s; }

@keyframes fallPetal{
  0%{
    transform:translateY(-10vh) translateX(0) rotate(0deg);
    opacity:0;
  }

  10%{
    opacity:.55;
  }

  100%{
    transform:translateY(115vh) translateX(90px) rotate(360deg);
    opacity:0;
  }
}

.cat-screen{
    position:fixed;
    inset:0;
    z-index:80;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(255,241,246,.22),
            rgba(255,241,246,.22)
        ),
        url("images/cat-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    transition:opacity .8s ease;
}

.cat-screen h2{

    font-family:"Patrick Hand", cursive;
    font-size:60px;

    color:#ffffff;

    text-shadow:
    0 0 8px rgba(0,0,0,.35),
    0 0 18px rgba(0,0,0,.30),
    0 0 28px rgba(0,0,0,.22);

    margin-bottom:12px;

}

.cat-subtitle{

    text-align:center;

    font-size:21px;

    color:#ffffff;

    text-shadow:
    0 0 8px rgba(0,0,0,.35),
    0 0 18px rgba(0,0,0,.30),
    0 0 28px rgba(0,0,0,.22);

    line-height:1.5;

    margin-bottom:45px;

}

.cat-gallery{

    display:grid;

    grid-template-columns:340px 260px;

    grid-template-rows:230px 230px;

    gap:22px;

}

.cat-photo{

    background:white;

    padding:12px;

    border-radius:22px;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

}

.cat-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:14px;

}

.big{

    grid-row:1 / span 2;

}

.cat-text{

    margin-top:45px;

    font-family:"Patrick Hand", cursive;

    font-size:30px;

    color:#ffffff;

    text-shadow:
    0 0 8px rgba(0,0,0,.35),
    0 0 18px rgba(0,0,0,.30),
    0 0 28px rgba(0,0,0,.22);

}

.cat-next{

    position:absolute;

    bottom:35px;

    right:55px;

}

.cat-photo:nth-child(1){
    transform:rotate(-3deg);
}

.cat-photo:nth-child(2){
    transform:rotate(2deg);
}

.cat-photo:nth-child(3){
    transform:rotate(-2deg);
}

.cat-photo{
    position:relative;
}

.cat-photo::before{

    content:"";

    position:absolute;

    width:90px;
    height:24px;

    top:-10px;
    left:50%;

    transform:translateX(-50%) rotate(-4deg);

    background:
    repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.15) 0px,
        rgba(255,255,255,.15) 3px,
        transparent 3px,
        transparent 6px
    );

    background-color:#f9b6d2;

    border-radius:4px;

    opacity:.95;

}

/* ---------------- Wallpaper Page ---------------- */

.wallpaper-screen{
  position:fixed;
  inset:0;
  z-index:90;
  overflow:hidden;

  background:
    linear-gradient(rgba(255,245,248,.28), rgba(255,245,248,.28)),
    url("images/wallpaper-bg.png");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding-top:90px;

  transition:opacity .8s ease;
}

.wallpaper-screen::before{
  content:"♡   ✦   ♡   ✧   ♡   ✦   ♡";
  position:absolute;
  top:55px;
  left:50%;
  transform:translateX(-50%);

  font-family:"Patrick Hand", cursive;
  font-size:32px;
  letter-spacing:16px;
  color:rgba(230,125,160,.25);
}

.wallpaper-screen::after{
    content:"";
    position:absolute;

    left:50%;
    top:70px;

    transform:translateX(-50%);

    width:760px;
    height:180px;

    pointer-events:none;
    z-index:2;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.88) 30%,
            rgba(255,255,255,.58) 58%,
            rgba(255,255,255,.22) 82%,
            rgba(255,255,255,0) 100%
        );

    filter:blur(18px);
}

.wallpaper-screen h2{
  position:relative;
  z-index:5;

  font-family:"Patrick Hand", cursive;
  font-size:58px;
  color:#744856;

  margin-bottom:10px;

  text-shadow:
      0 2px 12px rgba(255,255,255,.9);
}

.wallpaper-subtitle{
  position:relative;
  z-index:5;

  width:min(780px,86%);
  text-align:center;
  font-size:20px;
  line-height:1.6;
  color:#8d5d6d;

  margin-bottom:42px;

  text-shadow:
      0 2px 10px rgba(255,255,255,.85);
}

.phone-gallery{
  position:relative;
  width:880px;
  height:720px;
  z-index:5;
}

.phone-card{
  position:absolute;
  width:205px;
  height:430px;

  background:#2b2428;
  border-radius:34px;
  padding:9px;

  box-shadow:0 28px 65px rgba(116,72,86,.22);
  transition:.35s ease;
}

.phone-card::before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);

  width:68px;
  height:18px;
  background:#2b2428;
  border-radius:0 0 16px 16px;
  z-index:10;
}

.phone-frame{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:27px;
  background:#f7d8df;
}

.phone-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* layout mai elegant */
.phone1{
  left:115px;
  top:145px;
  transform:rotate(-7deg);
}

.phone2{
  left:50%;
  top:-20px;
  transform:translateX(-50%) rotate(0deg);
}

.phone3{
  right:110px;
  top:115px;
  transform:rotate(7deg);
}

.phone4{
  left:50%;
  top:270px;
  transform:translateX(-50%) rotate(0deg);
}

.phone-card:hover{
  transform:translateY(-12px) scale(1.04) rotate(0deg);
  box-shadow:0 35px 75px rgba(116,72,86,.30);
  z-index:20;
}

.wallpaper-next{
  position:absolute;
  right:55px;
  bottom:35px;
  margin:0;
  z-index:10;
  width:220px;
}

.confession-screen{

    position:fixed;
    inset:0;

    background:url("images/confession-bg.png") center center/cover no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

.confession-overlay{

    width:780px;
    max-width:88%;

    height:84vh;

    background:rgba(255,255,255,.58);
    backdrop-filter:blur(14px);

    border-radius:32px;

    border:1px solid rgba(255,255,255,.55);

    box-shadow:0 25px 70px rgba(0,0,0,.18);

    padding:55px 60px;

    display:flex;
    flex-direction:column;
    align-items:center;

    position:relative;
}

.confession-overlay h2{

    font-family:"Patrick Hand",cursive;
    font-size:60px;

    color:#744856;

    margin:0 0 18px;

    text-align:center;
}

.confession-subtitle{

    width:680px;
    max-width:100%;

    text-align:center;

    font-size:20px;
    line-height:1.8;

    color:#8b6370;

    margin-bottom:35px;
}

.confession-letter{

    width:100%;

    flex:1;

    overflow-y:auto;

    padding-right:14px;

    font-size:20px;

    line-height:2.05;

    color:#4c3b41;

    white-space:pre-line;
}

.confession-footer{

    margin-top:25px;

    text-align:center;

    font-style:italic;

    color:#7d5d68;

    font-size:18px;
}

.confession-next{

    position:absolute;

    right:35px;
    bottom:30px;
}

.confession-screen{
  z-index:100;
}

.confession-overlay{
  position:relative;
  z-index:102;
}

.confession-next{
  z-index:103;
}

.confession-screen{
  z-index:100;
}

.confession-overlay{
  position:relative;
  z-index:3;
}

.confession-next{
  z-index:4;
}

.confession-screen{
  z-index:100;
}

.confession-overlay{
  position:relative;
  z-index:102;
}

.confession-next{
  z-index:103;
}

.confession-screen{
  z-index:100;
}

#confessionParticles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

#confessionParticles canvas{
  position:absolute;
  inset:0;
}

.confession-overlay{
  position:relative;
  z-index:5;
}

.confession-next{
  position:absolute;
  right:55px;
  bottom:35px;
  z-index:6;
}

#confessionParticles{
  display:none;
}

#confessionScreen:not(.hidden) #confessionParticles{
  display:block;
}

/* Chrome, Edge, Opera */
.confession-letter::-webkit-scrollbar{
    width:12px;
}

.confession-letter::-webkit-scrollbar-track{
    background:rgba(255,255,255,.35);
    border-radius:999px;
}

.confession-letter::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #ff9fc3,
        #ffbfd5
    );
    border-radius:999px;
    border:2px solid rgba(255,255,255,.35);
}

.confession-letter::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        180deg,
        #ff89b8,
        #ffb3cf
    );
}

/* Firefox */
.confession-letter{
    scrollbar-width:thin;
    scrollbar-color:#ff9fc3 rgba(255,255,255,.35);
}

.reasons-screen{
  position:fixed;
  inset:0;
  z-index:110;
  overflow:hidden;

  background:
    linear-gradient(rgba(255,245,247,.18), rgba(255,245,247,.18)),
    url("images/reasons-bg.png");

  background-size:cover;
  background-position:center;

  display:flex;
  justify-content:center;
  align-items:center;
}

.reasons-overlay{
  position:relative;

  width:940px;
  height:620px;

  padding:55px 80px 70px;

  border-radius:34px;

  background:rgba(255,255,255,.35);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:0 28px 70px rgba(0,0,0,.18);

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.reasons-overlay h1{
  font-family:"Patrick Hand", cursive;
  font-size:58px;
  color:white;
  margin:0 0 8px;
}

.reasons-subtitle{
  font-size:22px;
  color:white;
  margin:0 0 38px;
}

.reason-number,
#reasonCounter{
  font-family:"Patrick Hand", cursive;
  font-size:30px;
  color:#ee8db2;
  letter-spacing:3px;
  font-weight:600;

  margin-bottom:30px;
}

.reason-card{
  position:relative;
  width:100%;
  flex:1;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
}

.reason-content{
  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  text-align:center;
  padding:0 80px;
}

#reasonText{
  width:90%;
  max-width:820px;

  font-family:"Patrick Hand", cursive;
  font-size:50px;
  line-height:1.18;
  font-weight:600;

  color:#604052;
  text-align:center;

  transition:.25s ease;
}

.reason-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:76px;
  height:76px;

  border-radius:50%;
  border:1px solid rgba(255,255,255,.65);

  background:#f29abb;
  color:white;

  font-size:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 14px 35px rgba(242,154,187,.45);

  cursor:pointer;
  transition:.25s ease;

  z-index:20;
}

.reason-arrow:hover{
  transform:translateY(-50%) scale(1.08);
  background:#ec86ad;
}

.reason-arrow.left{
  left:-115px;
}

.reason-arrow.right{
  right:-115px;
}

#letterParticles{
  position:absolute;
  inset:0;
  z-index:31;
  pointer-events:none;
}

#letterParticles canvas{
  position:absolute;
  inset:0;
}

.big-letter{
  position:relative;
  z-index:32;
}

.c1{ --r:-7deg; }
.c2{ --r:5deg; }
.c3{ --r:-5deg; }
.c4{ --r:6deg; }
.c5{ --r:5deg; }
.c6{ --r:-5deg; }
.c7{ --r:-5deg; }
.c8{ --r:5deg; }
.c9{ --r:-4deg; }
.c10{ --r:4deg; }

.chat-card{
  transition:transform .35s ease, box-shadow .35s ease;
  animation:floatChat 5s ease-in-out infinite alternate;
  transform:rotate(var(--r));
}

.chat-card:hover{
  transform:translateY(-10px) scale(1.12) rotate(var(--r));
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  z-index:30;
}

@keyframes floatChat{
  from{
    transform:translateY(0) rotate(var(--r));
  }

  to{
    transform:translateY(-6px) rotate(var(--r));
  }
}

.chat-card{
  transition:transform .35s ease, box-shadow .35s ease;
  animation:floatChatCard 4.5s ease-in-out infinite alternate;
}

.chat-card:hover{
  animation-play-state:paused;
  transform:translateY(-10px) scale(1.12) rotate(var(--r));
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  z-index:30;
}

@keyframes floatChatCard{
  from{
    translate:0 0;
  }

  to{
    translate:0 -8px;
  }
}

.reasons-next{
  position:absolute;
  right:55px;
  bottom:35px;
  z-index:20;
}

.songs-screen{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;

  background:
    linear-gradient(rgba(255,245,248,.20), rgba(255,245,248,.24)),
    url("images/songs-bg.png");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding-top:70px;
}

.songs-glow{
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  width:900px;
  height:300px;
  background:radial-gradient(ellipse, rgba(255,255,255,.95), rgba(255,255,255,.45), transparent 75%);
  filter:blur(20px);
  z-index:1;
}

.songs-screen h2,
.songs-subtitle,
.songs-list,
.songs-next{
  position:relative;
  z-index:5;
}

.songs-screen h2{
  font-family:"Patrick Hand", cursive;
  font-size:58px;
  color:#744856;
  margin:0 0 10px;
}

.songs-subtitle{
  width:min(760px,86%);
  text-align:center;
  font-size:20px;
  line-height:1.5;
  color:#8d5d6d;
  margin:0 0 55px;
}

.songs-list{
  display:flex;
  gap:22px;
}

.song-card{
  width:260px;
  height:500px;
  border-radius:24px;
  background:rgba(255,255,255,.46);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 45px rgba(0,0,0,.16);

  display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding:28px 20px;
}

.song-card h3{
  font-family:"Patrick Hand", cursive;
  font-size:28px;
  color:#744856;
  margin:0 0 18px;
}

.song-card p{
  font-size:16px;
  line-height:1.5;
  color:#8d5d6d;
  margin:0;
}

.songs-next{
  position:absolute;
  right:55px;
  bottom:35px;
}

.album-cover{
    display:block;

    width:160px;
    height:160px;

    object-fit:cover;
    object-position:center;

    border-radius:12px;

    margin:0 auto 22px;

    box-shadow:0 10px 25px rgba(0,0,0,.22);

    transition:.35s ease;
}

.song-card:hover .album-cover{
    transform:scale(1.12) rotate(-3deg);
}

.song-card h3{
    margin-top:5px;
    margin-bottom:18px;
}

.song-card p{
    line-height:1.6;
}

.song-card{
    transition:.35s;
}

.song-card:hover{
    transform:translateY(-12px) scale(1.05);
    box-shadow:0 25px 55px rgba(0,0,0,.22);
}

.album-cover{

    width:150px;
    height:150px;

    object-fit:contain;

    margin-bottom:24px;

    filter:
        drop-shadow(0 10px 25px rgba(0,0,0,.22));

    transition:.35s;
}

.song-card:hover .album-cover{
    transform:scale(1.08);
    box-shadow:0 18px 35px rgba(0,0,0,.28);
}

.song-card img[alt="White Mustang"]{
    transform:scale(1.18);
}

.song-card img[alt="Never Let Me Go"]{
    transform:scale(1.18);
}

.song-card img[alt="Video Games"]{
    transform:scale(1.18);
}

.song-card img[alt="Say Yes To Heaven"]{
    transform:scale(1.18);
}

.song-card img[alt="Blue Jeans"]{
    transform:scale(1.18);
}

.song-card{
  width:260px;
  height:500px;
  padding:28px 24px;
  border-radius:32px;

  display:flex;
  flex-direction:column;
  align-items:center;

  background:rgba(255,255,255,.46);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:0 18px 45px rgba(0,0,0,.16);
}

.song-progress{
  width:100%;
  height:6px;
  border-radius:50px;
  background:rgba(116,72,86,.18);
  overflow:hidden;
  margin-top:auto;
}

.song-progress-fill{
  height:100%;
  background:#744856;
  border-radius:50px;
}

.song-time{
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#9b6f7e;
  margin-top:8px;
}

.play-button{
  width:58px;
  height:58px;
  border:none;
  border-radius:50%;

  background:#f7a9c5;
  color:white;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:24px;
  padding-left:4px;
  margin-top:18px;

  cursor:pointer;
  box-shadow:0 10px 25px rgba(247,169,197,.45);
  transition:.3s ease;
}

.play-button:hover{
  transform:scale(1.1);
  background:#ef8cb3;
}

.quotes-screen{ 
    position:fixed;
    inset:0;
    z-index:110;
    overflow:hidden;

    background:
        linear-gradient(rgba(255,245,248,.18), rgba(255,245,248,.22)),
        url("images/quotes-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding-top:70px;
    transition:opacity .8s ease;
}

.quotes-glow{
    position:absolute;
    left:50%;
    top:50px;
    transform:translateX(-50%);

    width:620px;
    height:180px;

    background:radial-gradient(
        ellipse,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.72) 35%,
        rgba(255,255,255,.28) 70%,
        rgba(255,255,255,0) 100%
    );

    filter:blur(18px);
    pointer-events:none;
    z-index:1;
}

.quotes-screen h2,
.quotes-subtitle,
.quote-card,
.quote-arrow,
.quotes-next{
    position:relative;
    z-index:5;
}

.quotes-screen h2{
    font-family:"Patrick Hand", cursive;
    font-size:58px;
    color:#744856;
    margin:0 0 10px;
}

.quotes-subtitle{
    font-size:20px;
    color:#8d5d6d;
    margin:0 0 95px;
}

.quote-card{
    width:700px;
    height:400px;

    background:rgba(255,255,255,.50);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-radius:32px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:50px 65px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);
    text-align:center;
    margin-top:60px;
    position:relative;
}

#quoteText{
    font-family:"Patrick Hand", cursive;
    font-size:50px;
    line-height:1.32;
    color:#5d404d;
    margin:0;
    padding-bottom:55px;

    transition:opacity .35s ease, transform .35s ease;
}

.quote-counter{

    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);

    font-family:"Patrick Hand", cursive;
    font-size:26px;
    color:#e08ab0;

    margin:0;
}

.quote-arrow{
    position:absolute;
    top:59%;
    transform:translateY(-50%);

    width:58px;
    height:58px;

    border:none;
    border-radius:50%;

    background:rgba(242,154,187,.92);
    color:white;

    font-size:42px;
    cursor:pointer;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:0 12px 28px rgba(0,0,0,.18);
    transition:.25s ease;
}

.quote-arrow:hover{
    transform:translateY(-50%) scale(1.08);
}

.quote-arrow.left{
    left:500px;
}

.quote-arrow.right{
    right:500px;
}

.quotes-next{
    position:absolute;
    right:55px;
    bottom:35px;
}

.poem-screen{

    position:fixed;
    inset:0;

    z-index:120;

    overflow:hidden;

    background:
        linear-gradient(rgba(255,245,248,.16), rgba(255,245,248,.22)),
        url("images/poem-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding-top:65px;

    transition:.8s;
}

.poem-glow{

    position:absolute;

    left:50%;
    top:50px;

    transform:translateX(-50%);

    width:640px;
    height:200px;

    background:radial-gradient(
        ellipse,
        rgba(255,255,255,.96),
        rgba(255,255,255,.55),
        transparent 78%
    );

    filter:blur(18px);

    z-index:1;
}

.poem-screen h2,
.poem-subtitle,
.poem-card,
.poem-next{

    position:relative;
    z-index:5;
}

.poem-screen h2{

    font-family:"Patrick Hand", cursive;
    font-size:58px;
    color:#744856;

    margin:0 0 10px;
}

.poem-subtitle{

    font-size:20px;
    color:#8d5d6d;

    margin-bottom:55px;
}

.poem-card{

    width:820px;
    height:640px;

    background:rgba(255,255,255,.50);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-radius:34px;

    box-shadow:0 25px 65px rgba(0,0,0,.18);

    padding:55px 70px;

    overflow:auto;
}

.poem-card h3{

    font-family:"Cormorant Garamond", serif;
    font-size:42px;
    font-style:italic;
    font-weight:600;

    color:#5d404d;

    text-align:center;

    margin:0 0 35px;
}

.poem-content{

    font-family:"Cormorant Garamond", serif;

    font-size:28px;

    line-height:1.9;

    color:#5d404d;

    text-align:center;
}

.poem-content p{

    margin-bottom:35px;
}

.poem-signature{

    margin-top:40px;

    text-align:center;

    font-style:italic;

    font-size:18px;

    color:#9d7080;

    letter-spacing:1px;
}

.poem-next{

    position:absolute;

    right:55px;
    bottom:35px;
}

/* Chrome, Edge, Opera */
.poem-card::-webkit-scrollbar{
    width:12px;
}

.poem-card::-webkit-scrollbar-track{
    background:transparent;
    border-radius:20px;
}

.poem-card::-webkit-scrollbar-thumb{
    background:#f29abb;
    border-radius:20px;
    border:3px solid rgba(255,255,255,.25);
}

.poem-card::-webkit-scrollbar-thumb:hover{
    background:#ea82ad;
}

/* Firefox */
.poem-card{
    scrollbar-width:thin;
    scrollbar-color:#f29abb transparent;
}

.ending-screen{

    position:fixed;
    inset:0;

    z-index:130;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:
        linear-gradient(rgba(255,245,248,.15), rgba(255,245,248,.2)),
        url("images/ending-bg.png");

    background-size:cover;
    background-position:center;
}



.ending-screen h2{
    position:relative;
    font-family:"Patrick Hand", cursive;
    font-size:64px;
    color:#ffffff;
    text-align:center;
    transition:opacity 1.4s ease;
}

#endingLine2{
    margin-top:40px;
    opacity:0;
    transition:opacity 2s ease;
}

#endingLine2.show{
    opacity:1;
}