:root {
   --blacklow: #4f4f4f;
   --blacks: #2f2f2f;
   --dark-bg: #272727;
   --sunday-date: #4862f9;
   --purple: #9b87f5;
   --pink-dark: #f7289f;
   --pinks: #f2789f;
   --pink-soft: #fec7d7;
   --pink-shadow: #f2789f80;
   --pink-pastel: #fee3ec90;
   --whites: #fafafa;
   --whites-low: #f0f0f0;
   --whites-text: #eaeaea;
}

* {
   webkit-tap-highlight-color: transparent;
   scroll-behavior: smooth;
}

::selection {
    background: var(--whites);
    color: var(--pinks);
}

body {
   margin: 0;
   font-family: "TikTok Sans";
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
}

#lock {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 10000;
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 14px;
   background-color: var(--whites);
   background-image: linear-gradient(var(--pink-pastel), var(--pink-pastel));
   transition: opacity 0.4s ease;
   user-select: none;
   -webkit-user-select: none;
}
.lock-title {
   font-family: "Parisienne", cursive;
   font-size: 3rem;
   font-weight: 400;
   color: var(--pinks);
}
.lock-sub {
   font-family: "Urbanist", sans-serif;
   font-weight: 700;
   color: var(--blacklow);
}
#pinBox {
   display: flex;
   gap: 8px;
   margin: 6px 0 14px;
}
.pin-cell {
   width: clamp(36px, 12vw, 46px);
   height: clamp(46px, 15vw, 56px);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   color: var(--pink-dark);
   background: var(--whites);
   border: 2px solid var(--pink-shadow);
   border-radius: 12px;
   transition:
      border-color 0.2s,
      box-shadow 0.2s;
}
.pin-cell.active {
   border-color: var(--pinks);
   box-shadow: 0 0 8px var(--pink-shadow);
}
.pin-cell i {
   animation: pop 0.2s ease;
}

#pinBox.shake {
   animation: shake 0.4s;
}

#keypad {
   display: grid;
   grid-template-columns: repeat(3, 70px);
   gap: 12px;
}
#keypad button {
   height: 70px;
   font-family: "Urbanist", sans-serif;
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--blacks);
   background: var(--whites);
   border: none;
   border-radius: 50%;
   box-shadow: 0 2px 6px var(--pink-shadow);
   touch-action: manipulation;
}
#keypad button:active {
   background: var(--pinks);
   color: var(--whites);
}
#keypad .spacer {
   visibility: hidden;
}

header {
   position: fixed;
   top: 0;
   width: 100%;

   background: var(--whites);
   box-shadow:
      1px 1px 4px var(--pink-shadow),
      -1px -1px 4px var(--pink-shadow);
   backdrop-filter: blur(2px);
   z-index: 9000;
}
#head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
   padding: 1em 2em;
}
h1 {
   margin: 0;
   display: flex;
   gap: 10px;
   align-items: center;

   font-family: "Parisienne";
   font-size: 1.5rem;
   font-weight: 800;

   color: var(--pinks);
}

#container {
   display: flex;
   flex-direction: column;
   justify-content: center;

   background: var(--pink-pastel);
}
/* FIRST PAGE */
.pageWrap {
   padding: 0 2em;
}
.pageWrap1 {
   background: var(--pink-pastel);
}
#firstPage,
#secondPage,
#thirdPage,
#fourthPage,
#lastPage {
   align-content: center;
   margin: 0 auto;
   width: 100%;
   max-width: 1200px;
   min-height: 100vh;
}
#saying,
#spHead,
#fP,
#lH {
   font-family: "Parisienne", cursive;
   font-style: normal;
   font-size: 3em;
   font-weight: 400;
   line-height: 1.2em;
   color: var(--blacks);
}
#saying::before {
   content: "H";
   font-family: "Parisienne", cursive;
   font-size: 1em;
   font-weight: 400;
   color: var(--pinks);
}
#startSaying {
   font-family: "Parisienne";
   font-size: 1.5em;
}
#hbd {
   display: inline;
   margin: 0;
}
.line {
   margin: 0.5em 0;
   width: 3.5em;
   height: 5px;

   background: var(--pinks);
}
#slogan,
.slogan {
   font-family: "Urbanist";
   font-size: 1.2em;
   font-weight: 600;
   color: var(--blacks);
}
.paragraph {
   font-family: "Urbanist";
   font-weight: 600;

   color: var(--blacklow);
}
.btn-left {
   position: relative;
   top: 10px;
   opacity: 1;
   padding: 10px 20px;

   font-family: "Urbanist";
   font-weight: 800;

   border: 1px dotted var(--pink-shadow);
   border-radius: 2em;
   background: transparent;
   color: transparent;

   transition: 1.25s ease;
}

/* SECONDPAGE */
.pageWrap2 {
   padding: 0 2em;
   background: var(--pink-soft);
}
#secondPage {
   min-width: 0;
}
#spHead,
#tpH,
#fP,
#lH{
   font-family: "Urbanist";
   font-size: 2.5em;
   font-weight: 1000;
}
.line2 {
   background: var(--purple);
}
#calendarBox {
   display: flex;
   gap: 3em;
}
#calendar {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 1em;
   margin-top: 2em;
   max-width: 300px;
   border-radius: 1em;
   corner-shape: notch scoop;

   border: 2px solid var(--purple);
   border-style: dashed;
   background: var(--whites);
}
#calendar::before {
   content: "";
   position: absolute;
   top: -12px;
   left: 50%;
   width: 90px;
   height: 24px;
   transform: translateX(-50%) rotate(-3deg);
   background: repeating-linear-gradient(
      45deg,
      var(--pinks) 0 8px,
      var(--pink-pastel) 8px 16px
   );
   opacity: 0.85;
}
#calendar::after {
   content: "";
   position: absolute;

   width: 100px;
   height: 100px;

   background-image: url("../images/cat.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;

   bottom: -30px;
   right: 0px;
   z-index: 0;

   animation: goyangDumang 2s ease-in-out infinite;
}
#calendarHead {
   display: flex;
   justify-content: space-between;
   align-items: end;
   margin: 0em 1em 2em 1em;
}
#yearCalendar {
   font-size: 1.75em;
   font-weight: 800;

   color: var(--pinks);
}
.calendar-table,
th,
td {
   text-align: center;

   border-collapse: collapse;
   border: 0px solid var(--blacks);
}

.calendar-table tr th {
   padding-bottom: 15px;
}
.calendar-table tr td {
   padding: 5px 5px;

   font-family: "JetBrains Mono";
}
.date-off {
   opacity: 0.2;
}
.sunday {
   color: var(--sunday-date);
}
.date-birtday {
   position: relative;
   text-align: center;
   color: var(--pinks);
   font-weight: 700;
}
.date-birtday .num {
   position: relative;
   z-index: 1;
   color: var(--whites);
}
.mark-birthday {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 2.2em;
   z-index: 0;

   animation: beat 1.2s ease-in-out infinite;
}

#memories {
   position: relative;
   width: min(92vw, 420px);
   max-width: 100%;
   aspect-ratio: 6 / 5;
   display: block;
}

#memories .photo {
   position: absolute;
   background: #ffffff;
   padding: 5px 5px 16px;
   border-radius: 3px;
   box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.15),
      0 6px 14px rgba(0, 0, 0, 0.25),
      inset 0 0 0 1px rgba(0, 0, 0, 0.03);
   display: flex;
   flex-direction: column;
   transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;
}

#memories .photo img {
   width: 100%;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   display: block;
   border-radius: 1px;
   filter: saturate(0.95) contrast(1.02);
}
#memories .photo img:nth-child(2) {
   position: absolute;
   top: 16px;
   display: none;
}

/* 1. kiri atas */
#memories .photo:nth-child(1) {
   left: 1%;
   top: 2%;
   width: 29%;
   transform: rotate(-3deg);
   z-index: 1;
}
/* 2. kiri bawah */
#memories .photo:nth-child(2) {
   left: 0;
   top: 40%;
   width: 29%;
   transform: rotate(2deg);
   z-index: 1;
}
/* 3. tengah (besar, potret) */
#memories .photo:nth-child(3) {
   left: 32%;
   top: 22%;
   width: 37%;
   transform: rotate(0deg);
   z-index: 3;
}
#memories .photo:nth-child(3) img {
   aspect-ratio: 3 / 4;
}
/* 4. kanan atas */
#memories .photo:nth-child(4) {
   left: 70%;
   top: 2%;
   width: 29%;
   transform: rotate(3deg);
   z-index: 1;
}
/* 5. kanan bawah */
#memories .photo:nth-child(5) {
   left: 70%;
   top: 40%;
   width: 29%;
   transform: rotate(-2deg);
   z-index: 1;
}
/* 6. kecil, ujung bawah */
#memories .photo:nth-child(6) {
   left: 41%;
   top: 82%;
   width: 14%;
   padding: 3px 3px 8px;
   z-index: 4;
}
#memories .photo:nth-child(6) img {
   aspect-ratio: 3 / 4;
}

/* THIRDPAGE */

.pageWrap3 {
   background: var(--dark-bg);
   padding: 4em 2em;
   overflow: hidden;
   overflow: clip;
}
#tpH {
   color: var(--whites);
}
.slogan-dark {
   color: var(--whites);
}
.paragraph-dark {
   color: var(--whites-text);
}

.grid-19 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: repeat(5, 1fr);
   gap: 6px;
   max-width: 520px;
   margin: 0 auto;
}

.grid-19 .foto {
   grid-row: var(--r);
   grid-column: var(--c);
   aspect-ratio: 1 / 1;
   border-radius: 0px;
   overflow: hidden;
   background: #f4b6cb;
   box-shadow:
      0 0 2px var(--purple),
      0 0 2px var(--purple);
}

.grid-19 .foto img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.3s;
}
.grid-19 .foto:hover img {
   transform: scale(1.1);
}

.photo-stack {
   position: relative;
   margin: 5em auto 0;
   width: var(
      --ps-width,
      min(75vw, 200px)
   ); 
   aspect-ratio: 5 / 6;
   touch-action: none;
   user-select: none;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
   cursor: grab;
   outline: none;
}
.photo-stack,
.photo-stack * {
   touch-action: none !important; 
   -webkit-touch-callout: none;
}
.photo-stack {
   overscroll-behavior: contain;
}
.photo-stack:active {
   cursor: grabbing;
}
.photo-stack:focus-visible {
   outline: 2px solid #e58aa8;
   outline-offset: 8px;
}

.ps-card {
   position: absolute;
   inset: 0;
   padding: 12px 12px 48px;
   background: #fff;
   border-radius: 4px;
   box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.22),
      0 1px 3px rgba(0, 0, 0, 0.15);
   will-change: transform;
   transition: transform 0.25s ease; 
}

.ps-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   background: #f4b6cb;
   pointer-events: none;
   -webkit-user-drag: none;
}

.ps-caption {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 12px;
   text-align: center;
   font-size: 15px;
   color: #555;
   font-family: var(
      --ps-caption-font,
      inherit
   ); 
}

/*  FOURTH PAGE */

.pageWrap4 {
   background: var(--whites);
}

.paper {
	max-width: 320px;
   max-height: 55vh;
	margin: 2rem 0;
	padding: 20px 18px;
   overflow: auto;

	background-color: #fff0f5;

	background-image: repeating-linear-gradient(
		to bottom,
		#fff0f5 0px,
		#fff0f5 23px,
		#dcdcdc 24px
	);

	border-radius: 6px;

	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);

	position: relative;
}

.paper::before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	width: 2px;
	height: 100%;
	background: rgba(255, 0, 0, 0.35);
}

.paper p {
	margin: 4px 0;
	padding-left: 30px;

	font-size: 14px;
	line-height: 24px;

	color: #2a2a2a;
}

#note3::before {
   content: "Satu pesan penting: ";
   font-weight: bold;
}

/* LAST PAGE */

.pageWrap5 {
   background: var(--blacks);
}
#lH {
   color: var(--whites);
   
}
.sloganLast {
   color: var(--whites);
}
.paragraphLast {
   color: var(--whites-low);
}
#reopen {
   background: var(--purple);
   color: var(--whites);
}

/* DEKSTOP */
@media (min-width: 769px) {
   #calendarBox {
      
      display: flex;
      justify-content: space-between;
      align-items: end;
      width: 100%
   }
}
/* MOBILE */
@media (max-width: 768px) {
   #calendarBox {
      display: flex;
      flex-direction: column;
   }
   .pageWrap2 {
      padding: 6em 2em;
   }
}
@keyframes pop {
   from {
      transform: scale(0);
   }
   to {
      transform: scale(1);
   }
}
@keyframes shake {
   0%,
   100% {
      transform: translateX(0);
   }
   20%,
   60% {
      transform: translateX(-8px);
   }
   40%,
   80% {
      transform: translateX(8px);
   }
}
@keyframes beat {
   0%,
   100% {
      transform: translate(-50%, -50%) scale(1);
   }
   50% {
      transform: translate(-50%, -50%) scale(1.18);
   }
}
@keyframes goyangDumang {
   0%,
   100% {
      transform: rotate(-5deg);
   }
   50% {
      transform: rotate(5deg);
   }
}
img {
   pointer-events: none  !important;
}