/* =========================
   FONT
========================= */
.page1 .outside span,
.page1 .inside span,
.page2 span {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    color: rgb(18, 18, 18);

    transform: translate(0.5px, 0.5px);
}

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

body {
    background: #ffd7e7;
}

/* =========================
   CARD CONTAINER
========================= */
.birthday-card {
    width: 640px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-75%, -50%) scale(0.9);
    perspective: 1400px;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
}

.birthday-card.hover {
    transform: translate(-75%, -50%) rotate(-3deg);
}

.birthday-card.open {
    transform: translate(-50%, -50%) scale(1.316);
}

.birthday-card.open .page1 {
    transform: rotateY(-150deg);
}

.birthday-card.open .page2 {
    transform: rotateY(-20deg);
    transition: transform 0.8s ease;
    transform-origin: left;
}

/* =========================
   CARD PAGES
========================= */
.page {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    box-shadow: 12px -12px 20px rgba(182, 130, 155, 0.2);
}

.page1 {
    left: 50%;
    transform-origin: left;
    transform-style: preserve-3d;
    transition: transform 1.2s ease;
    cursor: pointer;
    z-index: 2;
}

.page2 {
    left: 50%;
    background: linear-gradient(-60deg, rgb(246, 238, 227), rgb(226, 216, 199) 90%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 30px;
    gap: 20px;
    cursor: pointer;

    transform: rotateY(0deg);
    transform-origin: left;
    transition: transform 0.8s ease;

    border-top: 1px solid #fb7fb0;
    border-bottom: 1px solid #fb7fb0;
    border-right: 1px solid #fb7fb0;
}

/* =========================
   PAGE FACES
========================= */
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.page1 .outside {
    background: linear-gradient(60deg, #ff9dc4, #fb7fb0 90%);
    display: flex;
    justify-content: center;
    padding-top: 30%;

    font-size: 28px;
    font-weight: 600;
    color: #9b4fc8;
}

.page1 .inside {
    transform: rotateY(180deg);
    /*background: linear-gradient(220deg, #f076a7, #fb95be 80%);*/
    background: linear-gradient(220deg, rgb(246, 238, 227), rgb(226, 216, 199) 80%);

    border-top: 1px solid #fb7fb0;
    border-bottom: 1px solid #fb7fb0;
    border-left: 1px solid #fb7fb0;
}

.page1 .inside,
.page2 {
    font-size: 15.2px;
}

/* =========================
   PAPER TEXTURE OVERLAY
========================= */
.page1 .outside::after,
.page1 .inside::after,
.page2::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        /* vertical grain */
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.03) 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 1px,
            transparent 4px),
        /* cross-grain noise */
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.015) 0px,
            rgba(0, 0, 0, 0.015) 1px,
            transparent 1px,
            transparent 3px),
        /* light patch */
        radial-gradient(circle at 25% 35%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 60%),
        /* darker patch */
        radial-gradient(circle at 75% 65%,
            rgba(0, 0, 0, 0.05) 0%,
            transparent 70%);

    opacity: 0.6;
}

/* =========================
   ALBUM
========================= */
.album {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
    padding: 10px;
}

.album>div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
}

.album img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    border-radius: 5px;
    border: 1px solid #960ec7;
}

.horizontal {
    grid-column: span 2;
}

.vertical {
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}