/* =====================================================
   RESET
===================================================== */

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: #030205;
    color: white;
    font-family:
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;
}


/* =====================================================
   SCREENS
===================================================== */

.screen {
    position: fixed;
    inset: 0;
    display: none;
    overflow: hidden;
}

.screen.active {
    display: block;
}

.hidden {
    display: none !important;
}


/* =====================================================
   INTRO
===================================================== */

#intro {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(130, 35, 80, 0.25),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #09040c,
            #170713,
            #050308
        );
}

.cinematic-light {
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;

    left: 50%;
    top: 45%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 100, 150, 0.13),
            transparent 68%
        );

    filter: blur(30px);
}

.intro-stars {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.75) 1px,
            transparent 1.5px
        );

    background-size:
        75px 75px;

    opacity: .28;

    animation:
        starsMove 18s linear infinite;
}

@keyframes starsMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-75px);
    }
}

.floating-hearts::before,
.floating-hearts::after {
    content: "♡  ♡  ♡  ♡  ♡";

    position: absolute;

    width: 100%;

    left: 0;

    color: rgba(255, 90, 135, .18);

    letter-spacing: 40px;

    font-size: 25px;

    animation:
        floatHearts 8s ease-in-out infinite;
}

.floating-hearts::before {
    top: 20%;
}

.floating-hearts::after {
    top: 72%;
    animation-delay: 2s;
}

@keyframes floatHearts {
    0%,
    100% {
        transform: translateY(0);
        opacity: .15;
    }

    50% {
        transform: translateY(-18px);
        opacity: .35;
    }
}

.intro-content {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 70px;

    padding: 30px;
}

.intro-copy {
    text-align: center;
    direction: ltr;
}

.intro-mini {
    font-size: 11px;

    letter-spacing: 5px;

    color: rgba(255,255,255,.58);

    margin-bottom: 10px;
}

.intro-copy h1 {
    font-size: clamp(65px, 10vw, 140px);

    line-height: .9;

    letter-spacing: 12px;

    font-weight: 300;

    background:
        linear-gradient(
            135deg,
            #fff,
            #ff9ab3,
            #fff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.intro-line {
    width: 90px;

    height: 1px;

    margin: 22px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff718e,
            transparent
        );
}

.intro-copy p {
    color: rgba(255,255,255,.55);

    font-size: 13px;

    letter-spacing: 1px;
}

.intro-footer {
    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 10px;

    letter-spacing: 4px;

    color: rgba(255,255,255,.38);

    direction: ltr;

    white-space: nowrap;
}

.intro-footer span {
    color: #ff6685;

    margin: 0 8px;
}


/* =====================================================
   KITTY
===================================================== */

.kitty-scene {
    position: relative;

    width: 310px;
    height: 400px;

    flex-shrink: 0;
}

.kitty-shadow {
    position: absolute;

    width: 170px;
    height: 28px;

    bottom: 30px;
    left: 70px;

    border-radius: 50%;

    background: rgba(0,0,0,.45);

    filter: blur(8px);
}

.kitty {
    position: absolute;

    left: 50%;
    top: 20px;

    transform: translateX(-50%);

    width: 180px;
    height: 280px;
}

.kitty-head {
    position: absolute;

    left: 20px;
    top: 30px;

    width: 140px;
    height: 120px;

    border-radius:
        48% 48% 44% 44%;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f0eef2
        );

    box-shadow:
        0 15px 35px rgba(0,0,0,.35);
}

.ear {
    position: absolute;

    top: -25px;

    width: 55px;
    height: 55px;

    background: #f8f6f7;

    transform: rotate(45deg);

    border-radius: 8px;
}

.left-ear {
    left: 5px;
}

.right-ear {
    right: 5px;
}

.eye {
    position: absolute;

    top: 57px;

    width: 8px;
    height: 12px;

    border-radius: 50%;

    background: #111;
}

.left-eye {
    left: 40px;
}

.right-eye {
    right: 40px;
}

.nose {
    position: absolute;

    top: 72px;
    left: 50%;

    transform: translateX(-50%);

    width: 10px;
    height: 7px;

    border-radius: 50%;

    background: #e4a800;
}

.whisker {
    position: absolute;

    width: 45px;
    height: 1px;

    background: #444;

    opacity: .7;
}

.w1 {
    left: -28px;
    top: 67px;
    transform: rotate(8deg);
}

.w2 {
    left: -28px;
    top: 78px;
}

.w3 {
    left: -28px;
    top: 89px;
    transform: rotate(-8deg);
}

.w4 {
    right: -28px;
    top: 67px;
    transform: rotate(-8deg);
}

.w5 {
    right: -28px;
    top: 78px;
}

.w6 {
    right: -28px;
    top: 89px;
    transform: rotate(8deg);
}

.bow {
    position: absolute;

    right: -10px;
    top: 0;

    width: 58px;
    height: 42px;
}

.bow span {
    position: absolute;

    width: 28px;
    height: 32px;

    background: #ff365d;

    top: 5px;

    border-radius: 70% 30% 70% 30%;
}

.bow span:first-child {
    left: 0;
    transform: rotate(20deg);
}

.bow span:nth-child(2) {
    right: 0;
    transform: rotate(-20deg);
}

.bow b {
    position: absolute;

    width: 15px;
    height: 15px;

    left: 22px;
    top: 13px;

    border-radius: 50%;

    background: #ff183f;
}

.kitty-body {
    position: absolute;

    top: 135px;
    left: 25px;

    width: 130px;
    height: 135px;

    background: white;

    border-radius:
        45% 45% 25% 25%;
}

.kitty-dress {
    position: absolute;

    left: 15px;
    bottom: 0;

    width: 100px;
    height: 100px;

    background:
        linear-gradient(
            145deg,
            #ff476a,
            #a80032
        );

    clip-path:
        polygon(
            25% 0,
            75% 0,
            100% 100%,
            0 100%
        );

    border-radius: 20px;
}

.kitty-arm {
    position: absolute;

    width: 35px;
    height: 85px;

    background: white;

    border-radius: 50%;
}

.left-arm {
    left: -17px;
    top: 30px;
    transform: rotate(30deg);
}

.right-arm {
    right: -17px;
    top: 30px;
    transform: rotate(-30deg);
}

.enter-card {
    position: absolute;

    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 230px;

    padding: 17px;

    text-align: center;

    background:
        rgba(20, 7, 15, .78);

    border:
        1px solid rgba(255,120,150,.28);

    border-radius: 18px;

    backdrop-filter: blur(12px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.4);
}

.enter-card-top,
.enter-card-bottom {
    font-size: 9px;

    letter-spacing: 3px;

    color: rgba(255,255,255,.55);

    direction: ltr;
}

.enter-card button {
    width: 100%;

    margin: 13px 0;

    padding: 12px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(255,60,100,.20),
            rgba(100,10,40,.25)
        );

    color: white;

    cursor: pointer;

    font-size: 12px;

    letter-spacing: 4px;

    transition: .3s;
}

.enter-card button:hover {
    transform: translateY(-2px);

    border-color: #ff6987;

    box-shadow:
        0 0 25px rgba(255,70,110,.25);
}


/* =====================================================
   HEART
===================================================== */

.heart-screen {
    background:
        radial-gradient(
            circle at center,
            #210812,
            #090309 65%,
            #020103
        );
}

.heart-dark {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 15%,
            rgba(0,0,0,.45) 70%
        );
}

.heart-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    max-width: 80vw;
    max-height: 80vw;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,40,100,.13),
            transparent 70%
        );

    filter: blur(30px);
}

.heart-title {
    position: absolute;

    top: 7vh;

    left: 50%;

    transform: translateX(-50%);

    font-size: 12px;

    letter-spacing: 7px;

    color: rgba(255,255,255,.55);

    direction: ltr;

    z-index: 5;
}

#heartCanvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.heart-message {
    position: absolute;

    left: 50%;
    bottom: 7vh;

    transform:
        translate(-50%, 20px);

    text-align: center;

    opacity: 0;

    transition:
        opacity 1s ease,
        transform 1s ease;

    direction: ltr;

    z-index: 10;
}

.heart-message.show {
    opacity: 1;

    transform:
        translate(-50%, 0);
}

.heart-small-title {
    font-size: 11px;

    letter-spacing: 4px;

    color: #ff7894;
}

.heart-caption {
    margin-top: 10px;

    font-size: 13px;

    letter-spacing: 2px;

    color: rgba(255,255,255,.65);
}


/* =====================================================
   ALBUM BACKGROUND
===================================================== */

.album-screen {
    background:
        linear-gradient(
            180deg,
            #071324,
            #0d2636 55%,
            #d6b17a 56%,
            #d8b77d
        );
}

.album-background-light {
    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 25%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,240,180,.20),
            transparent 70%
        );

    filter: blur(25px);
}

.nature-world {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.moon {
    position: absolute;

    width: 90px;
    height: 90px;

    top: 10%;
    right: 13%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 35%,
            #fffbe0,
            #ffeab0 55%,
            #d9bb78
        );

    box-shadow:
        0 0 45px rgba(255,225,160,.45);
}

.cloud {
    position: absolute;

    width: 160px;
    height: 45px;

    border-radius: 50px;

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

    filter: blur(2px);
}

.cloud::before,
.cloud::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: inherit;
}

.cloud::before {
    width: 70px;
    height: 70px;

    left: 25px;
    bottom: 5px;
}

.cloud::after {
    width: 55px;
    height: 55px;

    right: 25px;
    bottom: 5px;
}

.cloud-one {
    top: 22%;
    left: 10%;

    animation:
        cloudMove 22s linear infinite;
}

.cloud-two {
    top: 30%;
    right: 30%;

    transform: scale(.7);

    animation:
        cloudMove 30s linear infinite reverse;
}

@keyframes cloudMove {
    0% {
        margin-left: -20px;
    }

    50% {
        margin-left: 45px;
    }

    100% {
        margin-left: -20px;
    }
}


/* TREES */

.tree {
    position: absolute;

    bottom: 28%;

    width: 150px;
    height: 280px;
}

.tree-one {
    left: 4%;
}

.tree-two {
    right: 3%;

    transform: scale(.8);
}

.tree-trunk {
    position: absolute;

    width: 28px;
    height: 180px;

    bottom: 0;
    left: 61px;

    background:
        linear-gradient(
            90deg,
            #321a13,
            #6b3820,
            #30160f
        );

    border-radius: 15px;
}

.tree-crown {
    position: absolute;

    width: 105px;
    height: 105px;

    left: 15px;
    top: 30px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #44714a,
            #1b462a 70%
        );

    box-shadow:
        35px 35px 0 #214e2d,
        -30px 45px 0 #285a33;
}

.crown-two {
    left: 55px;
    top: 75px;

    transform: scale(.75);
}

.crown-three {
    left: -5px;
    top: 95px;

    transform: scale(.62);
}


/* SEA */

.sea {
    position: absolute;

    left: 0;
    right: 0;

    bottom: 12%;

    height: 18%;

    background:
        linear-gradient(
            180deg,
            rgba(35,110,140,.85),
            rgba(11,65,95,.95)
        );

    overflow: hidden;
}

.wave {
    position: absolute;

    width: 150%;

    height: 35px;

    left: -25%;

    border-top:
        2px solid rgba(255,255,255,.22);

    border-radius: 50%;

    animation:
        waveMove 7s ease-in-out infinite;
}

.wave-one {
    top: 20%;
}

.wave-two {
    top: 48%;

    animation-delay: 1.5s;
}

.wave-three {
    top: 74%;

    animation-delay: 3s;
}

@keyframes waveMove {
    0%,
    100% {
        transform: translateX(-2%);
    }

    50% {
        transform: translateX(2%);
    }
}

.sand {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 13%;

    background:
        linear-gradient(
            180deg,
            #e2c18b,
            #c99e64
        );
}


/* =====================================================
   ALBUM COVER
===================================================== */

.album-cover {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);

    width: min(470px, 88vw);
    height: min(650px, 82vh);

    padding: 45px 35px;

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #f4e4ea
        );

    border-radius: 12px;

    color: #3d1424;

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

    text-align: center;

    z-index: 20;

    transform-origin: left center;

    transition:
        transform 1.15s cubic-bezier(.2,.75,.2,1),
        opacity .9s ease;
}

.album-cover.opening {
    transform:
        translate(-50%,-50%)
        perspective(1200px)
        rotateY(-110deg);

    opacity: 0;
}

.cover-border {
    position: absolute;

    inset: 15px;

    border:
        1px solid rgba(120,40,70,.25);

    border-radius: 8px;

    pointer-events: none;
}

.cover-bow {
    font-size: 42px;

    margin-top: 5px;
}

.cover-heart-decoration {
    margin-top: 10px;

    color: #e53862;

    letter-spacing: 10px;
}

.cover-label {
    margin-top: 40px;

    font-size: 9px;

    letter-spacing: 4px;

    direction: ltr;

    color: #8d5368;
}

.album-cover h2 {
    margin-top: 18px;

    font-size: clamp(35px, 6vw, 55px);

    font-weight: 300;

    letter-spacing: 7px;

    direction: ltr;

    color: #5a2035;
}

.cover-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 20px auto;
}

.cover-divider i {
    width: 80px;
    height: 1px;

    background: #d98ba2;
}

.cover-divider span {
    color: #e7476d;
}

.cover-arabic {
    font-size: 16px;

    line-height: 1.8;

    font-weight: 600;
}

.cover-small-arabic {
    margin-top: 8px;

    color: #8b5268;

    font-size: 13px;
}

.cover-number {
    margin-top: 12px;

    font-size: 55px;

    font-weight: 200;

    color: #d33c62;
}

.cover-years {
    direction: ltr;

    margin-top: 5px;

    font-size: 9px;

    letter-spacing: 3px;

    color: #9b6377;
}

#openAlbumButton {
    margin-top: 25px;

    padding: 13px 24px;

    border:
        1px solid #d87591;

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

    color: #6e263e;

    border-radius: 30px;

    cursor: pointer;

    font-size: 10px;

    letter-spacing: 2px;

    transition: .3s;
}

#openAlbumButton:hover {
    background: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(100,20,50,.15);
}


/* =====================================================
   BOOK
===================================================== */

.book {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    width: min(1100px, 92vw);
    height: min(760px, 88vh);

    z-index: 30;

    background:
        linear-gradient(
            145deg,
            #fffaf4,
            #f4e9dc
        );

    border-radius: 14px;

    box-shadow:
        0 35px 100px rgba(0,0,0,.5);

    color: #43242b;

    padding: 20px;
}

.book-top-decoration {
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    color: #d53c64;

    direction: ltr;
}

.book-top-decoration strong {
    letter-spacing: 5px;
}

.book-header {
    height: 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 12px;

    border-bottom:
        1px solid rgba(100,50,60,.12);

    font-size: 9px;

    letter-spacing: 3px;

    direction: ltr;

    color: #8b6670;
}

.book-pages {
    position: relative;

    width: 100%;

    height:
        calc(100% - 105px);

    margin-top: 10px;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #fdf7ed,
            #f0e5d7
        );

    box-shadow:
        inset 0 0 40px rgba(80,30,20,.08);
}

.page-nature {
    position: absolute;

    inset: 0;

    overflow: hidden;

    opacity: .75;
}

.page-nature::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(60,120,130,.16)
        );
}

.page-tree {
    position: absolute;

    bottom: 18%;

    width: 120px;
    height: 250px;
}

.page-tree-left {
    left: -20px;
}

.page-tree-right {
    right: -20px;
}

.page-tree i {
    position: absolute;

    bottom: 0;
    left: 50%;

    width: 22px;
    height: 150px;

    transform: translateX(-50%);

    background: #63412c;

    border-radius: 10px;
}

.page-tree b {
    position: absolute;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #6d9460,
            #3c6845
        );
}

.page-tree b:nth-of-type(1) {
    top: 20px;
    left: 10px;
}

.page-tree b:nth-of-type(2) {
    top: 55px;
    right: 0;
}

.page-tree b:nth-of-type(3) {
    top: 80px;
    left: 25px;
}

.page-sea {
    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 18%;

    background:
        linear-gradient(
            180deg,
            rgba(65,140,150,.18),
            rgba(40,100,120,.25)
        );
}

.page-sea span {
    position: absolute;

    width: 70%;

    height: 20px;

    left: 15%;

    border-top:
        1px solid rgba(50,100,110,.25);

    border-radius: 50%;
}

.page-sea span:nth-child(1) {
    top: 20%;
}

.page-sea span:nth-child(2) {
    top: 50%;
}

.page-sea span:nth-child(3) {
    top: 80%;
}

.page-content {
    position: absolute;

    inset: 35px 75px;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, .8fr);

    gap: 35px;

    align-items: center;
}

.memory-image-area {
    width: 100%;
    height: 100%;

    min-height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

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

    border:
        1px solid rgba(120,60,70,.12);

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(60,20,30,.12);

    overflow: hidden;
}

.memory-photo {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

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

.memory-text {
    direction: ltr;

    text-align: center;

    max-height: 100%;

    overflow: auto;

    scrollbar-width: none;

    padding: 15px;
}

.memory-text::-webkit-scrollbar {
    display: none;
}

.memory-number {
    font-size: 9px;

    letter-spacing: 4px;

    color: #bd627b;
}

.memory-title {
    margin-top: 12px;

    font-size: clamp(18px, 2vw, 27px);

    line-height: 1.3;

    color: #562434;

    font-weight: 500;
}

.memory-divider {
    width: 55px;

    height: 1px;

    margin: 15px auto;

    background: #d27c93;
}

.memory-en {
    font-size: clamp(13px, 1.2vw, 17px);

    line-height: 1.7;

    color: #4d3840;
}

.memory-ar {
    margin-top: 12px;

    font-family: Tahoma, Arial, sans-serif;

    direction: rtl;

    font-size: clamp(12px, 1.1vw, 15px);

    line-height: 1.8;

    color: #89626e;
}

.page-button {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 45px;
    height: 45px;

    border-radius: 50%;

    border:
        1px solid rgba(110,50,70,.22);

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

    color: #78374c;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    z-index: 20;

    transition: .25s;
}

.page-button:hover {
    background: #fff;

    transform:
        translateY(-50%)
        scale(1.08);
}

.previous {
    left: 15px;
}

.next {
    right: 15px;
}

.page-left-decoration,
.page-right-decoration {
    position: absolute;

    z-index: 10;

    color: rgba(190,50,85,.5);
}

.page-left-decoration {
    left: 25px;
    bottom: 20px;

    font-size: 28px;
}

.page-right-decoration {
    right: 25px;
    top: 20px;

    font-size: 24px;
}

.page-counter {
    height: 25px;

    text-align: center;

    font-size: 10px;

    letter-spacing: 3px;

    direction: ltr;

    color: #9b7180;
}

.book-bottom {
    height: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 10px;

    direction: ltr;

    font-size: 8px;

    letter-spacing: 2px;

    color: #98747e;
}


/* =====================================================
   FINAL SCENE
===================================================== */

.final-screen {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(150,25,55,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 50%,
            #16070d,
            #080407 55%,
            #030204
        );

    color: white;

    opacity: 0;

    transition:
        opacity .8s ease;
}

.final-screen.active {
    opacity: 1;
}

.final-glow {
    position: absolute;

    width: 55vw;
    height: 55vw;

    max-width: 650px;
    max-height: 650px;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(190,30,65,.16),
            rgba(110,15,40,.06) 35%,
            transparent 70%
        );

    filter: blur(25px);
}

.final-label {
    position: absolute;

    top: 7vh;

    left: 50%;

    transform:
        translateX(-50%);

    font-size: clamp(10px,1vw,14px);

    letter-spacing: 5px;

    color: rgba(255,255,255,.65);

    white-space: nowrap;

    direction: ltr;

    z-index: 30;
}


/* =====================================================
   ROSE SCENE
===================================================== */

.rose-scene {
    position: absolute;

    left: 50%;
    top: 47%;

    width: min(520px,80vw);
    height: min(520px,65vh);

    transform:
        translate(-50%,-50%);

    display: flex;

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


/* =====================================================
   ROSE
===================================================== */

.rose {
    position: absolute;

    left: 50%;
    top: 48%;

    width: 230px;
    height: 230px;

    transform:
        translate(-50%,-50%)
        scale(.72);

    opacity: 1;

    z-index: 10;

    transition:
        transform 1.5s cubic-bezier(.22,.8,.24,1),
        opacity 1.25s ease,
        filter 1.2s ease;
}

.petal {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 105px;
    height: 145px;

    transform-origin:
        50% 90%;

    border-radius:
        70% 30% 65% 35% /
        70% 45% 55% 30%;

    background:
        radial-gradient(
            ellipse at 35% 28%,
            rgba(255,130,150,.65),
            transparent 20%
        ),
        linear-gradient(
            145deg,
            #ff405f,
            #d90e39 42%,
            #8e0628
        );

    box-shadow:
        0 0 18px rgba(230,20,60,.24),
        inset -10px -15px 22px rgba(50,0,15,.30),
        inset 8px 8px 16px rgba(255,120,145,.16);

    opacity: .95;

    transition:
        transform 1.45s cubic-bezier(.19,.85,.25,1),
        opacity 1.1s ease,
        filter 1.2s ease;
}

.petal-back-left {
    transform:
        translate(-50%,-50%)
        rotate(-28deg)
        scale(.72);

    z-index: 1;
}

.petal-back-right {
    transform:
        translate(-50%,-50%)
        rotate(28deg)
        scale(.72);

    z-index: 1;
}

.petal-left {
    transform:
        translate(-50%,-50%)
        rotate(-14deg)
        scale(.78);

    z-index: 2;
}

.petal-right {
    transform:
        translate(-50%,-50%)
        rotate(14deg)
        scale(.78);

    z-index: 2;
}

.petal-front-left {
    transform:
        translate(-50%,-50%)
        rotate(-7deg)
        scale(.68);

    z-index: 4;
}

.petal-front-right {
    transform:
        translate(-50%,-50%)
        rotate(7deg)
        scale(.68);

    z-index: 4;
}

.petal-center {
    width: 90px;
    height: 125px;

    transform:
        translate(-50%,-50%)
        scale(.55);

    z-index: 7;

    background:
        radial-gradient(
            ellipse at 35% 25%,
            #ff7185,
            #df123d 42%,
            #76051f
        );
}


/* =====================================================
   ROSE OPENS
===================================================== */

.final-screen.rose-open .petal-back-left {
    transform:
        translate(-90%,-82%)
        rotate(-48deg)
        scale(1);
}

.final-screen.rose-open .petal-back-right {
    transform:
        translate(-10%,-82%)
        rotate(48deg)
        scale(1);
}

.final-screen.rose-open .petal-left {
    transform:
        translate(-112%,-45%)
        rotate(-72deg)
        scale(1);
}

.final-screen.rose-open .petal-right {
    transform:
        translate(12%,-45%)
        rotate(72deg)
        scale(1);
}

.final-screen.rose-open .petal-front-left {
    transform:
        translate(-82%,-5%)
        rotate(-34deg)
        scale(.95);
}

.final-screen.rose-open .petal-front-right {
    transform:
        translate(-18%,-5%)
        rotate(34deg)
        scale(.95);
}

.final-screen.rose-open .petal-center {
    transform:
        translate(-50%,-50%)
        scale(.85);
}


/* =====================================================
   ROSE DISAPPEARS
===================================================== */

.final-screen.photo-coming .rose {
    transform:
        translate(-50%,-50%)
        scale(1.28);

    opacity: 0;

    filter: blur(5px);
}


/* =====================================================
   PHOTO
===================================================== */

.final-photo {
    position: absolute;

    left: 50%;
    top: 48%;

    width: min(310px,52vw);
    height: min(310px,52vw);

    transform:
        translate(-50%,-50%)
        scale(.06);

    opacity: 0;

    z-index: 20;

    display: flex;

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

    transition:
        transform 2.1s cubic-bezier(.16,.82,.22,1),
        opacity 1.2s ease;
}

.photo-glow {
    position: absolute;

    inset: -15px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,45,90,.30),
            transparent 65%
        );

    filter: blur(18px);

    opacity: 0;

    transition:
        opacity 1.5s ease;
}

.final-photo img {
    position: relative;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    border-radius: 50%;

    clip-path:
        polygon(
            50% 0%,
            61% 8%,
            73% 4%,
            80% 16%,
            93% 19%,
            88% 32%,
            100% 43%,
            92% 54%,
            96% 68%,
            82% 73%,
            76% 88%,
            62% 84%,
            50% 100%,
            38% 84%,
            24% 88%,
            18% 73%,
            4% 68%,
            8% 54%,
            0% 43%,
            12% 32%,
            7% 19%,
            20% 16%,
            27% 4%,
            39% 8%
        );

    filter:
        drop-shadow(
            0 12px 30px rgba(0,0,0,.45)
        )
        drop-shadow(
            0 0 18px rgba(220,30,70,.20)
        );
}


/* الصورة تدخل من المركز */

.final-screen.photo-revealed .final-photo {
    opacity: 1;

    transform:
        translate(-50%,-50%)
        scale(1);
}

.final-screen.photo-revealed .photo-glow {
    opacity: 1;
}


/* =====================================================
   FINAL TEXT
===================================================== */

.final-text {
    position: absolute;

    left: 50%;
    bottom: 5vh;

    width: min(90vw,700px);

    transform:
        translate(-50%,30px);

    text-align: center;

    opacity: 0;

    z-index: 40;

    transition:
        opacity 1.3s ease,
        transform 1.3s cubic-bezier(.2,.8,.2,1);
}

.final-screen.show-final-text .final-text {
    opacity: 1;

    transform:
        translate(-50%,0);
}

.final-text h2 {
    margin: 0 0 8px;

    font-size:
        clamp(20px,3vw,34px);

    font-weight: 600;

    text-shadow:
        0 0 15px rgba(255,255,255,.16);
}

.final-name {
    font-size:
        clamp(13px,1.4vw,18px);

    letter-spacing: 7px;

    color: #ff6682;

    margin-top: 5px;

    direction: ltr;
}

.final-divider {
    width: 90px;
    height: 1px;

    margin: 13px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,90,120,.85),
            transparent
        );
}

.final-text p {
    margin: 6px 0;

    color: rgba(255,255,255,.86);

    font-size:
        clamp(12px,1.2vw,16px);

    line-height: 1.8;
}

.final-text .final-wish {
    color: rgba(255,255,255,.60);

    font-size:
        clamp(11px,1vw,14px);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 750px) {

    .intro-content {
        flex-direction: column;

        gap: 10px;
    }

    .kitty-scene {
        transform: scale(.78);
        transform-origin: center;
    }

    .intro-copy {
        margin-top: -45px;
    }

    .intro-copy h1 {
        font-size: 65px;
    }

    .album-cover {
        height: 620px;

        max-height: 85vh;

        padding-top: 35px;
    }

    .book {
        width: 96vw;
        height: 90vh;

        padding: 12px;
    }

    .book-header {
        font-size: 7px;
    }

    .page-content {
        inset: 30px 50px;

        grid-template-columns: 1fr;

        grid-template-rows:
            minmax(0,1.1fr)
            minmax(150px,.75fr);

        gap: 10px;
    }

    .memory-image-area {
        min-height: 0;

        padding: 8px;
    }

    .memory-text {
        padding: 4px 15px;
    }

    .memory-title {
        font-size: 17px;
    }

    .memory-en {
        font-size: 12px;
    }

    .memory-ar {
        font-size: 11px;
    }

    .page-button {
        width: 38px;
        height: 38px;

        font-size: 27px;
    }

    .rose-scene {
        width: 100vw;
        height: 55vh;

        top: 43%;
    }

    .rose {
        width: 190px;
        height: 190px;
    }

    .petal {
        width: 88px;
        height: 125px;
    }

    .petal-center {
        width: 75px;
        height: 105px;
    }

    .final-photo {
        width: min(270px,68vw);
        height: min(270px,68vw);
    }

    .final-text {
        bottom: 3vh;
    }

    .final-text h2 {
        font-size: 21px;
    }

    .final-text p {
        font-size: 11px;
    }
}