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

:root {
    /* Every backdrop-filter blur() on the site reads its radius
       through this variable, so performance can be tuned per
       screen size from one place instead of 30+ scattered rules.
       Blur cost roughly scales with the square of the radius, so
       even a moderate reduction here is a big performance win on
       weaker GPUs (most tablets and phones vs. a desktop). */
    --blur-scale: 1;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: #010817;
    color: white;
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;

    animation:
        pageFadeIn 0.7s ease;
}


body.page-leaving {
    animation:
        pageFadeOut 0.48s ease forwards;
}


@keyframes pageFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes pageFadeOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}


/* =================================================
   OCEAN BACKGROUND
================================================= */

.ocean-background {
    position: fixed;
    inset: 0;
    z-index: -10;

    background-image: url("sea.jpg");

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

    transform: scale(1.18);

    filter:
        saturate(1.08)
        contrast(1.03);

    will-change: transform;
}


/* =================================================
   CINEMATIC DARK OVERLAY
================================================= */

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

    background:
        linear-gradient(
            180deg,
            rgba(0, 7, 25, 0.28) 0%,
            rgba(0, 15, 45, 0.08) 35%,
            rgba(0, 8, 30, 0.38) 65%,
            rgba(0, 4, 20, 0.88) 100%
        );

    pointer-events: none;
}


/* =================================================
   ATMOSPHERIC BLUE LIGHT
================================================= */

.ocean-background::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(40, 180, 255, 0.12) 0%,
            rgba(0, 80, 180, 0.05) 35%,
            transparent 70%
        );

    mix-blend-mode: screen;

    opacity: 0.9;
}


.blue-glow {
    position: absolute;

    width: 750px;
    height: 750px;

    top: -300px;
    left: 4%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(70, 175, 255, 0.24),
            rgba(20, 100, 200, 0.08) 40%,
            transparent 72%
        );

    filter: blur(25px);

    pointer-events: none;
}


/* =================================================
   STARS
================================================= */

.stars {
    position: absolute;
    inset: 0;

    opacity: 0.85;

    background-image:

        radial-gradient(
            2px 2px at 8% 13%,
            white,
            transparent
        ),

        radial-gradient(
            1px 1px at 14% 25%,
            white,
            transparent
        ),

        radial-gradient(
            2px 2px at 21% 10%,
            white,
            transparent
        ),

        radial-gradient(
            1px 1px at 31% 20%,
            white,
            transparent
        ),

        radial-gradient(
            2px 2px at 39% 8%,
            white,
            transparent
        ),

        radial-gradient(
            1px 1px at 48% 15%,
            white,
            transparent
        ),

        radial-gradient(
            2px 2px at 57% 7%,
            white,
            transparent
        ),

        radial-gradient(
            1px 1px at 66% 19%,
            white,
            transparent
        ),

        radial-gradient(
            2px 2px at 75% 9%,
            white,
            transparent
        ),

        radial-gradient(
            1px 1px at 84% 17%,
            white,
            transparent
        ),

        radial-gradient(
            2px 2px at 94% 8%,
            white,
            transparent
        );

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


@keyframes starsBlink {

    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }

}


/* =================================================
   MOON
================================================= */

.moon {
    position: absolute;

    top: 65px;
    left: 16%;

    width: 115px;
    height: 115px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #e7f9ff 45%,
            #a9dcf5 75%,
            #75b8df 100%
        );

    box-shadow:

        0 0 20px
        rgba(230, 250, 255, 0.95),

        0 0 60px
        rgba(100, 210, 255, 0.55),

        0 0 120px
        rgba(50, 160, 255, 0.35);

    z-index: 2;
}


.moon::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    opacity: 0.25;

    background:

        radial-gradient(
            circle at 30% 25%,
            #8bb9d0 0 7px,
            transparent 8px
        ),

        radial-gradient(
            circle at 65% 30%,
            #8bb9d0 0 9px,
            transparent 10px
        ),

        radial-gradient(
            circle at 48% 65%,
            #8bb9d0 0 12px,
            transparent 13px
        );
}


.moon-glow {
    position: absolute;

    top: -30px;
    left: 7%;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(100, 200, 255, 0.22),
            rgba(40, 130, 230, 0.08) 35%,
            transparent 70%
        );

    filter: blur(25px);
}


/* =================================================
   BUBBLES
================================================= */

.bubble {
    position: absolute;

    bottom: -100px;

    border-radius: 50%;

    border:
        1px solid
        rgba(190, 240, 255, 0.65);

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0.08) 35%,
            transparent 70%
        );

    box-shadow:

        inset 0 0 10px
        rgba(255, 255, 255, 0.18),

        0 0 12px
        rgba(50, 200, 255, 0.35);

    animation:
        bubbleRise linear infinite;

    opacity: 0.65;
}


.bubble-1 {
    width: 20px;
    height: 20px;
    left: 12%;
    animation-duration: 8s;
}

.bubble-2 {
    width: 9px;
    height: 9px;
    left: 28%;
    animation-duration: 6s;
    animation-delay: 2s;
}

.bubble-3 {
    width: 36px;
    height: 36px;
    left: 73%;
    animation-duration: 10s;
}

.bubble-4 {
    width: 15px;
    height: 15px;
    left: 82%;
    animation-duration: 7s;
    animation-delay: 1s;
}

.bubble-5 {
    width: 26px;
    height: 26px;
    left: 34%;
    animation-duration: 9s;
}

.bubble-6 {
    width: 42px;
    height: 42px;
    left: 91%;
    animation-duration: 12s;
}

.bubble-7 {
    width: 11px;
    height: 11px;
    left: 48%;
    animation-duration: 5s;
}

.bubble-8 {
    width: 25px;
    height: 25px;
    left: 64%;
    animation-duration: 8s;
}

.bubble-9 {
    width: 13px;
    height: 13px;
    left: 20%;
    animation-duration: 6s;
}

.bubble-10 {
    width: 18px;
    height: 18px;
    left: 55%;
    animation-duration: 7s;
}

.bubble-11 {
    width: 30px;
    height: 30px;
    left: 42%;
    animation-duration: 11s;
}

.bubble-12 {
    width: 10px;
    height: 10px;
    left: 87%;
    animation-duration: 5s;
}


@keyframes bubbleRise {

    0% {
        transform:
            translateY(0)
            translateX(0)
            scale(0.7);

        opacity: 0;
    }

    15% {
        opacity: 0.65;
    }

    50% {
        transform:
            translateY(-45vh)
            translateX(30px)
            scale(1);
    }

    100% {
        transform:
            translateY(-120vh)
            translateX(-30px)
            scale(1.2);

        opacity: 0;
    }

}


/* =================================================
   NAVBAR
================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 82px;

    padding: 0 30px;

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

    z-index: 100;

    background:
        linear-gradient(
            180deg,
            rgba(0, 10, 30, 0.35),
            rgba(0, 10, 30, 0.08)
        );

    backdrop-filter: blur(calc(10px * var(--blur-scale, 1)));
}


.logo {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 29px;

    font-weight: 600;

    color: #f7fbff;

    text-shadow:
        0 0 12px
        rgba(110, 220, 255, 0.8);
}


.logo span {
    color: #b7eaff;
}


.logo-sparkle {
    font-size: 13px;
}


nav {
    display: flex;

    align-items: center;

    gap: 34px;
}


nav a {
    position: relative;

    color:
        rgba(255, 255, 255, 0.92);

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s ease;
}


nav a:hover {
    color: #7eeaff;

    text-shadow:
        0 0 15px #3ed7ff;
}


nav a.active {
    color: #66ddff;
}


nav a.active::after {
    content: "";

    position: absolute;

    width: 38px;
    height: 2px;

    left: 50%;
    bottom: -14px;

    transform:
        translateX(-50%);

    background:
        #5edfff;

    box-shadow:
        0 0 12px #5edfff;
}


/* =================================================
   MUSIC BUTTON
================================================= */

.music-button {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    border: 1px solid rgba(100, 225, 255, 0.72);

    background:
        radial-gradient(circle at 35% 30%, rgba(125, 235, 255, 0.20), transparent 38%),
        rgba(0, 60, 135, 0.34);

    color: #dffaff;
    font-size: 20px;
    line-height: 1;

    cursor: pointer;
    isolation: isolate;

    box-shadow:
        0 0 14px rgba(45, 210, 255, 0.35),
        inset 0 0 14px rgba(90, 220, 255, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.music-button::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(180, 245, 255, 0.18);
    pointer-events: none;
}

.music-button::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(60, 215, 255, 0);
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.music-button:hover {
    transform: scale(1.08);
    border-color: rgba(145, 240, 255, 0.95);
    box-shadow:
        0 0 22px rgba(35, 215, 255, 0.65),
        0 0 45px rgba(0, 130, 255, 0.20),
        inset 0 0 18px rgba(90, 220, 255, 0.14);
}

.music-button.playing {
    color: #ffffff;
    border-color: #73e7ff;
    box-shadow:
        0 0 18px rgba(50, 220, 255, 0.72),
        0 0 42px rgba(0, 145, 255, 0.28),
        inset 0 0 18px rgba(80, 220, 255, 0.16);
}

.music-button.playing::after {
    border-color: rgba(80, 225, 255, 0.65);
    opacity: 1;
    animation: musicPulse 1.8s ease-out infinite;
}

@keyframes musicPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.75;
    }
    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}


/* =================================================
   LEFT FLOATING MENU
================================================= */

.floating-menu {
    position: fixed;

    left: 30px;
    top: 51%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 7px;

    z-index: 80;
}


.float-btn {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    border:
        1px solid
        rgba(50, 205, 255, 0.55);

    background:
        rgba(0, 70, 150, 0.25);

    backdrop-filter: blur(calc(12px * var(--blur-scale, 1)));

    color: #e9fbff;

    font-size: 28px;

    cursor: pointer;

    text-decoration: none;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        inset 0 0 15px
        rgba(50, 190, 255, 0.12);

    transition: 0.4s;
}


.float-btn:hover {
    transform:
        scale(1.12);

    color: #8beaff;

    box-shadow:
        0 0 25px
        rgba(40, 210, 255, 0.75);
}


/* =================================================
   HERO
================================================= */

.hero {
    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


.hero-content {
    position: relative;

    z-index: 20;

    text-align: center;

    margin-top: 45px;

    animation:
        heroAppear 1.5s ease;
}


@keyframes heroAppear {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.top-sparkle {
    color: #baf4ff;

    font-size: 22px;

    margin-bottom: 5px;

    animation:
        sparkle 2s infinite;
}


@keyframes sparkle {

    0%,
    100% {
        opacity: 0.35;

        transform:
            scale(0.8);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.3);
    }

}


/* =================================================
   MALAK
================================================= */

.name-wrapper {
    position: relative;

    display: inline-block;
}


.name-wrapper h1 {
    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(130px, 15vw, 215px);

    font-weight: 400;

    line-height: 0.8;

    color: white;

    letter-spacing: 2px;

    text-shadow:

        0 0 3px white,

        0 0 10px #d9faff,

        0 0 22px #54dfff,

        0 0 45px #138cff,

        0 0 85px
        rgba(0, 120, 255, 0.7);
}


.name-heart {
    position: absolute;

    right: -75px;
    top: 18px;

    font-size: 54px;

    color: #73eaff;

    text-shadow:

        0 0 12px #40dfff,

        0 0 25px #008cff;

    transform:
        rotate(-12deg);
}


/* =================================================
   NAME LINE
================================================= */

.name-line {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 12px;
}


.name-line span {
    width: 85px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #69ddff
        );

    box-shadow:
        0 0 8px #69ddff;
}


.name-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #69ddff,
            transparent
        );
}


.name-line i {
    color: #6fe5ff;

    font-style: normal;

    font-size: 12px;
}


/* =================================================
   HERO TEXT
================================================= */

.hero-text {
    margin-top: 18px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 22px;

    line-height: 1.25;

    color:
        rgba(255, 255, 255, 0.94);

    text-shadow:
        0 0 10px
        rgba(50, 180, 255, 0.5);
}


.little-heart {
    position: absolute;

    right: -90px;
    bottom: 5px;

    font-size: 45px;

    color: #8ceeff;

    text-shadow:
        0 0 15px #4ddfff;
}


/* =================================================
   ENTER BUTTON
================================================= */

.enter-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    margin-top: 32px;

    padding:
        14px 35px;

    border-radius: 40px;

    border:
        1px solid
        rgba(70, 220, 255, 0.9);

    background:

        linear-gradient(
            135deg,
            rgba(0, 150, 255, 0.65),
            rgba(0, 80, 180, 0.6)
        );

    color: white;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 19px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:

        0 0 15px
        rgba(40, 200, 255, 0.5),

        inset 0 0 20px
        rgba(255, 255, 255, 0.08);

    transition:
        0.4s;
}


.enter-button span {
    color: #ffe56b;

    margin-left: 5px;
}


.enter-button:hover {
    transform:
        translateY(-5px)
        scale(1.04);

    box-shadow:

        0 0 30px
        rgba(50, 220, 255, 0.8),

        0 0 70px
        rgba(30, 150, 255, 0.4);
}


/* =================================================
   SCROLL ARROW
================================================= */

.scroll-arrow {
    margin-top: 22px;

    font-size: 30px;

    color: #8deeff;

    text-shadow:
        0 0 12px #35d8ff;

    animation:
        arrowMove 1.5s infinite;
}


@keyframes arrowMove {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(9px);
    }

}


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

.blue-rose {
    position: absolute;

    left: 8px;
    bottom: -35px;

    width: 390px;

    max-width: 32vw;

    z-index: 12;

    filter:

        drop-shadow(
            0 0 8px
            rgba(100, 200, 255, 0.9)
        )

        drop-shadow(
            0 0 30px
            rgba(30, 130, 255, 0.55)
        );

    animation:
        roseFloat 5s ease-in-out infinite;
}


@keyframes roseFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(1deg);
    }

}


/* =================================================
   HEART BURST EFFECT — ROMANTIC GAME STYLE
================================================= */

.heart-orb {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.heart-orb:focus-visible {
    outline: 2px solid #bdf7ff;
    outline-offset: 6px;
}

.heart-pop {
    animation:
        orbFloat 3.5s ease-in-out infinite,
        heartPop 0.48s cubic-bezier(.2,1.6,.35,1) !important;
}

@keyframes heartPop {
    0% { transform: translateY(0) scale(1); }
    28% { transform: translateY(-2px) scale(1.22); }
    58% { transform: translateY(1px) scale(.92); }
    100% { transform: translateY(0) scale(1); }
}

.heart-burst-pulse {
    position: fixed;
    z-index: 9998;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid rgba(190, 247, 255, .9);
    box-shadow: 0 0 14px rgba(65, 220, 255, .85), inset 0 0 14px rgba(255,255,255,.5);
    animation: heartPulse 760ms cubic-bezier(.12,.72,.22,1) forwards;
}

@keyframes heartPulse {
    0% { opacity: 1; transform: scale(.35); }
    55% { opacity: .75; }
    100% { opacity: 0; transform: scale(5.4); }
}

.burst-heart {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    font-size: var(--size);
    color: #a9f5ff;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.9));
    text-shadow:
        0 0 8px rgba(255,255,255,.95),
        0 0 17px rgba(50,210,255,.95),
        0 0 34px rgba(0,130,255,.72);
    transform: translate(-50%, -50%) scale(.15) rotate(0deg);
    animation: romanticHeartFloat ease-out forwards;
    will-change: transform, opacity, filter;
}

@keyframes romanticHeartFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.15) rotate(0deg);
        filter: blur(1px) drop-shadow(0 0 4px rgba(255,255,255,.7));
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(var(--rot));
    }
    55% {
        opacity: .92;
        transform: translate(calc(-50% + var(--sway)), calc(-50% + var(--y) * .52)) scale(1.04) rotate(calc(var(--rot) * -1));
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.78) rotate(var(--rot));
        filter: blur(2px) drop-shadow(0 0 12px rgba(50,210,255,.7));
    }
}

.heart-sparkle {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    user-select: none;
    font-size: var(--size);
    color: #f4ffff;
    text-shadow: 0 0 8px #fff, 0 0 18px #54ddff, 0 0 30px #168dff;
    transform: translate(-50%, -50%) scale(.2);
    animation: sparkleFloat ease-out forwards;
}

@keyframes sparkleFloat {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); }
    18% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(35deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0) rotate(160deg); }
}

@media (prefers-reduced-motion: reduce) {
    .burst-heart,
    .heart-sparkle,
    .heart-burst-pulse { animation-duration: 1ms !important; }
}

/* =================================================
   RIGHT HEART ORB
================================================= */

.heart-orb {
    position: absolute;

    right: 6%;
    top: 54%;

    width: 88px;
    height: 88px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        rgba(0, 100, 190, 0.22);

    border:
        1px solid
        rgba(80, 215, 255, 0.65);

    backdrop-filter: blur(calc(12px * var(--blur-scale, 1)));

    box-shadow:

        0 0 20px
        rgba(40, 200, 255, 0.45),

        inset 0 0 25px
        rgba(50, 200, 255, 0.15);

    z-index: 20;

    animation:
        orbFloat 3.5s ease-in-out infinite;
}


.heart-orb span {
    font-size: 39px;

    color: #bdf7ff;

    text-shadow:

        0 0 10px white,

        0 0 25px #43dfff,

        0 0 45px #008cff;
}


.orb-ring {
    position: absolute;

    inset: -15px;

    border-radius: 50%;

    border:
        1px solid
        rgba(70, 210, 255, 0.35);

    animation:
        ringPulse 2.5s infinite;
}


/* =================================================
   HEART HINT — "دوسي هنا" + pointing finger
================================================= */

.heart-hint {
    position: absolute;

    right: calc(6% - 26px);
    top: calc(54% + 100px);

    width: 140px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    z-index: 21;

    pointer-events: none;

    animation: heartHintFloat 1.8s ease-in-out infinite;
}

.heart-hint-text {
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    font-weight: 700;

    color: #bdf7ff;

    text-shadow:
        0 0 10px rgba(80, 210, 255, 0.9),
        0 0 22px rgba(40, 190, 255, 0.7);

    white-space: nowrap;
}

.heart-hint-finger {
    font-size: 40px;
    line-height: 1;
    transform: rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(80, 210, 255, 0.6));
}

@keyframes heartHintFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.heart-hint.is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


/* =================================================
   MINI SURPRISE — song + 2 messages + a final request,
   opened by the ♥ (heart-orb) button on the home page.
================================================= */

body.mini-surprise-lock {
    overflow: hidden;
}

.mini-surprise-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;

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

    padding: 24px;
    box-sizing: border-box;

    background: rgba(3, 10, 24, 0.72);
    backdrop-filter: blur(calc(6px * var(--blur-scale, 1)));
    -webkit-backdrop-filter: blur(calc(6px * var(--blur-scale, 1)));

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mini-surprise-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mini-surprise-card {
    position: relative;

    width: min(100%, 480px);
    padding: 46px 34px 38px;
    box-sizing: border-box;

    text-align: center;

    background: linear-gradient(160deg, rgba(20, 38, 66, 0.92), rgba(8, 18, 36, 0.92));
    border: 1px solid rgba(120, 220, 255, 0.3);
    border-radius: 26px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 rgba(80, 210, 255, 0);

    transform: translateY(18px) scale(0.94);
    transition: transform 0.45s cubic-bezier(.22, 1.4, .36, 1), box-shadow 0.6s ease;
}

.mini-surprise-overlay.is-open .mini-surprise-card {
    transform: translateY(0) scale(1);
    animation: miniSurpriseGlow 2.6s ease-in-out 0.15s 1;
}

@keyframes miniSurpriseGlow {
    0% {
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.5),
            0 0 0 rgba(80, 210, 255, 0);
    }
    35% {
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.5),
            0 0 55px rgba(80, 210, 255, 0.55);
    }
    100% {
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.5),
            0 0 0 rgba(80, 210, 255, 0);
    }
}

.mini-surprise-close {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 34px;
    height: 34px;

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

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;

    transition: background 0.25s ease, transform 0.25s ease;
}

.mini-surprise-close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.08);
}

.mini-surprise-step {
    display: none;
    animation: miniSurpriseStepIn 0.5s ease;
}

.mini-surprise-step.is-active {
    display: block;
}

@keyframes miniSurpriseStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mini-surprise-icon {
    font-size: 34px;
    margin-bottom: 18px;
    display: inline-block;
    animation: miniSurpriseHeartbeat 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(120, 210, 255, 0.55));
}

@keyframes miniSurpriseHeartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.14); }
    30% { transform: scale(1); }
    45% { transform: scale(1.08); }
    60% { transform: scale(1); }
}

.mini-surprise-text {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-line;
}

.mini-surprise-text.is-typing::after {
    content: "|";
    display: inline-block;
    margin-right: 3px;
    color: #bdf7ff;
    animation: miniSurpriseCursorBlink 0.8s step-end infinite;
}

@keyframes miniSurpriseCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.mini-surprise-request {
    font-size: 24px;
    color: #ffe3ef;
}

.mini-surprise-next {
    margin-top: 30px;
    padding: 12px 30px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: #fff;

    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 30px;
    cursor: pointer;

    transition: background 0.25s ease, transform 0.25s ease;
}

.mini-surprise-next:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

@media (max-width: 520px) {
    .mini-surprise-card {
        padding: 38px 22px 30px;
    }

    .mini-surprise-text {
        font-size: 19px;
    }
}


@keyframes orbFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


@keyframes ringPulse {

    0%,
    100% {
        transform:
            scale(0.95);

        opacity: 0.4;
    }

    50% {
        transform:
            scale(1.1);

        opacity: 1;
    }

}


/* =================================================
   THINGS SHE LOVES
================================================= */

.loves-section {
    position: relative;

    min-height: 390px;

    padding:
        20px 6% 55px;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(0, 10, 30, 0.70) 12%,
            rgba(0, 9, 30, 0.94)
        );
}


/* =================================================
   SECTION TITLE
================================================= */

.section-title {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;
}


.section-title h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 31px;

    font-weight: 600;

    color: white;

    text-shadow:
        0 0 12px
        rgba(100, 220, 255, 0.6);
}


.section-title > span {
    color: #65dcff;

    font-size: 12px;

    text-shadow:
        0 0 10px #55dfff;
}


.title-line {
    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(70, 210, 255, 0.7)
        );
}


.title-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(70, 210, 255, 0.7),
            transparent
        );
}


.title-wave {
    text-align: center;

    color: #47d9ff;

    font-size: 22px;

    margin-top: 1px;

    text-shadow:
        0 0 15px #36d7ff;
}


/* =================================================
   LOVE CARDS
================================================= */

.love-cards {
    width: fit-content;
    max-width: calc(100% - 30px);

    margin:
        12px auto 0;

    padding: 14px;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(150px, 1fr));

    gap: 14px;

    border-radius: 25px;

    border:
        1px solid
        rgba(70, 180, 255, 0.28);

    background:
        rgba(0, 40, 90, 0.22);

    backdrop-filter: blur(calc(12px * var(--blur-scale, 1)));

    box-shadow:
        inset 0 0 35px
        rgba(20, 150, 255, 0.05);
}


.love-card {
    min-height: 195px;

    padding:
        20px 10px;

    border-radius: 17px;

    border:
        1px solid
        rgba(50, 175, 255, 0.25);

    background:

        linear-gradient(
            145deg,
            rgba(0, 90, 170, 0.20),
            rgba(0, 25, 65, 0.38)
        );

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    text-decoration: none;

    color: inherit;

    transition:
        0.4s;

    backdrop-filter: blur(calc(8px * var(--blur-scale, 1)));
}


.love-card:hover {
    transform:
        translateY(-9px);

    border-color:
        rgba(80, 220, 255, 0.75);

    box-shadow:

        0 12px 30px
        rgba(0, 130, 255, 0.25),

        inset 0 0 25px
        rgba(50, 200, 255, 0.08);
}


.card-icon {
    font-size: 48px;

    height: 65px;

    display: flex;

    align-items: center;

    color: #d7faff;

    text-shadow:

        0 0 7px white,

        0 0 17px #3edaff,

        0 0 35px #008cff;

    margin-bottom: 8px;
}


.love-card h3 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 21px;

    font-weight: 600;

    margin-bottom: 7px;
}


.love-card p {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 14px;

    line-height: 1.35;

    color:
        rgba(255, 255, 255, 0.86);
}


/* =================================================
   FUTURE SECTIONS
================================================= */

.future-section {
    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        linear-gradient(
            180deg,
            #010b20,
            #001a3b
        );
}


.future-section h2 {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 65px;

    text-shadow:
        0 0 30px #28caff;
}


.future-section p {
    margin-top: 15px;

    color:
        rgba(255, 255, 255, 0.65);
}


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

@media (max-width: 1100px) {

    nav {
        gap: 18px;
    }

    nav a {
        font-size: 12px;
    }

    .love-cards {
        width: min(940px, calc(100% - 30px));
        max-width: calc(100% - 30px);
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 750px) {

    .navbar {
        padding:
            0 18px;
    }

    nav {
        display: none;
    }

    .logo {
        font-size: 25px;
    }

    .moon {
        left: 10%;

        width: 85px;
        height: 85px;
    }

    .blue-rose {
        width: 260px;

        max-width: 45vw;

        left: -20px;
    }

    .floating-menu {
        display: none;
    }

    .heart-orb {
        right: 5%;

        width: 65px;
        height: 65px;
    }

    .heart-orb span {
        font-size: 28px;
    }

    .heart-hint {
        right: calc(5% - 16px);
        top: calc(54% + 75px);
        width: 100px;
    }

    .heart-hint-text {
        font-size: 19px;
    }

    .heart-hint-finger {
        font-size: 30px;
    }

    .name-wrapper h1 {
        font-size: 100px;
    }

    .name-heart {
        right: -45px;

        font-size: 35px;
    }

    .hero-text {
        font-size: 18px;
    }

    .love-cards {
        width: calc(100% - 30px);
        max-width: calc(100% - 30px);
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 480px) {

    .name-wrapper h1 {
        font-size: 78px;
    }

    .love-cards {
        grid-template-columns:
            1fr;
    }

}

/* =================================================
   MOBILE MENU BUTTON
================================================= */

.menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border:
        1px solid
        #35cfff;

    background:
        rgba(0, 90, 180, 0.25);

    cursor: pointer;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;
}

.menu-button span {
    width: 18px;
    height: 2px;

    background: #d7faff;

    box-shadow: 0 0 6px #35d8ff;

    transition: 0.3s;
}

.menu-button.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-button.open span:nth-child(2) {
    opacity: 0;
}

.menu-button.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =================================================
   MOBILE NAV DROPDOWN
================================================= */

.mobile-nav {
    position: fixed;

    top: 82px;
    left: 0;
    right: 0;

    z-index: 99;

    display: none;

    flex-direction: column;

    background: rgba(0, 8, 25, 0.96);

    backdrop-filter: blur(calc(14px * var(--blur-scale, 1)));

    border-bottom:
        1px solid
        rgba(70, 200, 255, 0.25);

    max-height: 0;
    overflow: hidden;

    transition: max-height 0.4s ease;
}

.mobile-nav.open {
    max-height: 500px;
}

.mobile-nav a {
    padding: 16px 24px;

    color: rgba(255, 255, 255, 0.9);

    text-decoration: none;

    font-family: "Cormorant Garamond", serif;

    font-size: 18px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.mobile-nav a.active {
    color: #66ddff;
}


/* =================================================
   SCROLL REVEAL
================================================= */

.reveal {
    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


/* =================================================
   GALLERY
================================================= */

.gallery-section {
    min-height: 100vh;

    padding: 100px 6% 80px;

    background:
        linear-gradient(
            180deg,
            #001a3b,
            #010b20
        );
}

.gallery-intro {
    text-align: center;

    margin-top: 10px;

    color: rgba(255, 255, 255, 0.65);

    font-family: "Cormorant Garamond", serif;

    font-size: 18px;
}


/* =================================================
   GALLERY FILTERS
================================================= */

.gallery-filters {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.filter-btn {
    padding: 9px 22px;

    border-radius: 30px;

    border:
        1px solid
        rgba(70, 180, 255, 0.35);

    background:
        rgba(0, 40, 90, 0.22);

    color: rgba(255, 255, 255, 0.75);

    font-family: "Cormorant Garamond", serif;

    font-size: 15px;

    cursor: pointer;

    transition: 0.3s;
}

.filter-btn:hover {
    border-color: rgba(80, 220, 255, 0.7);

    color: white;
}

.filter-btn.active {
    background:
        linear-gradient(
            135deg,
            rgba(0, 150, 255, 0.55),
            rgba(0, 80, 180, 0.5)
        );

    border-color: rgba(80, 220, 255, 0.9);

    color: white;

    box-shadow:
        0 0 15px
        rgba(40, 200, 255, 0.4);
}

.gallery-item.hidden {
    display: none;
}

.gallery-grid {
    max-width: 1100px;

    margin: 40px auto 0;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;
}

.gallery-item {
    border-radius: 16px;

    overflow: hidden;

    border:
        1px solid
        rgba(70, 180, 255, 0.28);

    cursor: pointer;

    aspect-ratio: 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.lightbox {
    position: fixed;
    inset: 0;

    z-index: 200;

    display: none;

    align-items: center;

    justify-content: center;

    background: rgba(0, 5, 15, 0.92);

    backdrop-filter: blur(calc(6px * var(--blur-scale, 1)));
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: 88vw;
    max-height: 85vh;

    border-radius: 12px;

    box-shadow: 0 0 40px rgba(50, 200, 255, 0.35);
}

.lightbox-close {
    position: absolute;

    top: 30px;
    right: 40px;

    font-size: 42px;

    color: #d7faff;

    cursor: pointer;

    text-shadow: 0 0 12px #35d8ff;
}


/* =================================================
   MUSIC SECTION
================================================= */

.music-section {
    min-height: 100vh;

    padding: 100px 6% 80px;

    display: flex;

    flex-direction: column;

    align-items: center;

    background:
        linear-gradient(
            180deg,
            #010b20,
            #001a3b
        );
}

.playlist {
    max-width: 640px;
    width: 100%;

    margin-top: 40px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.track {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 14px 20px;

    border-radius: 14px;

    border:
        1px solid
        rgba(50, 175, 255, 0.25);

    background:
        rgba(0, 40, 90, 0.22);

    cursor: pointer;

    transition: 0.3s;
}

.track:hover,
.track.playing {
    border-color: rgba(80, 220, 255, 0.75);

    background: rgba(0, 60, 130, 0.32);
}

.track-play {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 90, 180, 0.35);

    color: #d7faff;

    font-size: 13px;
}

.track-info h4 {
    font-family: "Cormorant Garamond", serif;

    font-size: 18px;

    font-weight: 600;
}

.track-info p {
    font-size: 12px;

    color: rgba(255, 255, 255, 0.6);
}

.track-bars {
    margin-left: auto;

    display: flex;

    align-items: flex-end;

    gap: 3px;

    height: 18px;
}

.track-bars span {
    width: 3px;

    height: 40%;

    background: #47d9ff;

    border-radius: 2px;

    opacity: 0.4;
}

.track.playing .track-bars span {
    animation: barBounce 0.8s infinite ease-in-out;
    opacity: 1;
}

.track-bars span:nth-child(2) { animation-delay: 0.15s; }
.track-bars span:nth-child(3) { animation-delay: 0.3s; }
.track-bars span:nth-child(4) { animation-delay: 0.45s; }

@keyframes barBounce {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}


/* =================================================
   ABOUT SECTION
================================================= */

.about-section {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 100px 6%;

    background:
        linear-gradient(
            180deg,
            #001a3b,
            #010b20
        );
}

.about-card {
    max-width: 640px;

    text-align: center;
}

.about-text {
    margin-top: 28px;

    font-family: "Cormorant Garamond", serif;

    font-size: 22px;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.88);
}

.about-traits {
    margin-top: 40px;

    display: flex;

    justify-content: center;

    gap: 40px;
}

.trait span {
    display: block;

    font-size: 30px;

    color: #d7faff;

    text-shadow: 0 0 15px #3edaff;
}

.trait p {
    margin-top: 6px;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.7);
}


/* =================================================
   SURPRISE SECTION — circular reveal
================================================= */

/* The surprise is a fixed-size viewport scene: nothing is allowed
   to push the gallery below the fold. */
.surprise-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #010b20, #001a3b);
}

.surprise-section .section-title {
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    width: min(90vw, 900px);
    margin: 0;
    pointer-events: none;
}

/* This stage is the ONLY coordinate system. Its center is exactly
   the center of the browser viewport, so the card and spotlight
   can occupy the exact same pixel position. */
.surprise-stage {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: visible;
}

.surprise-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 320px;
    height: 220px;
    margin: 0;
    cursor: pointer;
    perspective: 1000px;
    transition: opacity .9s ease, visibility .9s ease;
}

/* The generic ".reveal.visible" rule (two classes) outranks
   ".surprise-card" (one class) and was overwriting the centering
   transform above with its own translateY(0) once the card
   scrolled into view — pushing the card right/down by half its
   own size. This locks the centering transform back in. */
.surprise-card.reveal.visible {
    transform: translate(-50%, -50%);
}

.surprise-stage.gallery-revealed .surprise-card {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.surprise-front,
.surprise-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid rgba(70, 180, 255, 0.35);
    background: rgba(0, 40, 90, 0.38);
    backdrop-filter: blur(calc(10px * var(--blur-scale, 1)));
    -webkit-backdrop-filter: blur(calc(10px * var(--blur-scale, 1)));
    backface-visibility: hidden;
    transition: transform .6s ease;
    padding: 24px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 35px rgba(62,218,255,.08);
}

.surprise-front span {
    font-size: 34px;
    color: #d7faff;
    text-shadow: 0 0 15px #3edaff;
}

.surprise-front p,
.surprise-back p {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
}

.surprise-back { transform: rotateY(180deg); }
.surprise-card.flipped .surprise-front { transform: rotateY(180deg); }
.surprise-card.flipped .surprise-back { transform: rotateY(360deg); }

/* Gallery sits over the card. Thumbnails form a COMPLETE ring. */
.surprise-gallery {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
    z-index: 100;
}

.surprise-gallery.show .surprise-photo { pointer-events: auto; }

.surprise-photo {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: var(--s, 96px);
    aspect-ratio: 3 / 4;
    z-index: var(--z, 101);
    box-sizing: border-box;
    border-radius: 14px;
    padding: 7px;
    background: rgba(2, 24, 52, 0.94);
    border: 1px solid rgba(175, 235, 255, 0.48);
    box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 22px rgba(62,218,255,.2);
    backdrop-filter: blur(calc(8px * var(--blur-scale, 1)));
    -webkit-backdrop-filter: blur(calc(8px * var(--blur-scale, 1)));
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72) rotate(var(--r, 0deg));
    transform-origin: center;
    transition: transform .85s cubic-bezier(.22,1,.36,1), opacity .65s ease;
    will-change: transform, opacity;
}

/* The generic ".malak-added-item { position: relative }" rule (used
   for the × delete button on every other page) has the same CSS
   specificity as ".surprise-photo" and loads after it, so it was
   silently winning and breaking the circle layout — every added
   photo fell back into normal top-to-bottom stacking instead of its
   calculated ring position. Two classes together outrank one class,
   so this locks position:absolute back in no matter the load order. */
.surprise-photo.malak-added-item {
    position: absolute;
}

.surprise-gallery.show .surprise-photo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg));
}

.surprise-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
    display: block;
}

.surprise-photo::after {
    content: '✦';
    position: absolute;
    top: -11px;
    right: -11px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(175,235,255,.4);
    background: rgba(2,24,52,.94);
    color: #ffe56b;
    font-size: 12px;
    text-shadow: 0 0 10px rgba(255,229,107,.7);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Spotlight is physically centered on the SAME 50/50 point as the
   card. It is hidden until the thumbnails have finished appearing. */
.surprise-photo--spotlight {
    left: 50% !important;
    top: 50% !important;
    width: min(285px, 30vw);
    z-index: 2000 !important;
    border-color: rgba(255,229,107,.7);
    box-shadow: 0 24px 65px rgba(0,0,0,.55), 0 0 55px rgba(120,210,255,.38), 0 0 105px rgba(120,210,255,.18);
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    transition: transform 1.05s cubic-bezier(.22,1,.36,1), opacity .85s ease, box-shadow .9s ease;
}

.surprise-gallery.spotlight-show .surprise-photo--spotlight {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.surprise-photo--spotlight::before {
    content: '';
    position: absolute;
    inset: -45px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120,210,255,.40), transparent 68%);
    filter: blur(5px);
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 700px) {
    .surprise-section .section-title { top: 92px; }
    .surprise-card { width: 290px; height: 200px; }
    .surprise-photo { width: var(--s, 82px); padding: 5px; }
    .surprise-photo--spotlight { width: min(225px, 58vw); }
}

@media (max-width: 480px) {
    .surprise-section .section-title { top: 88px; }
    .surprise-card { width: 265px; height: 185px; }
    .surprise-photo { width: var(--s, 70px); padding: 5px; }
    .surprise-photo--spotlight { width: min(195px, 54vw); }
}

/* =================================================
   FOR YOU / LETTER
================================================= */

.foryou-section {
    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 100px 6%;

    background:
        linear-gradient(
            180deg,
            #001a3b,
            #010817
        );
}

.letter {
    max-width: 620px;

    margin-top: 30px;

    padding: 40px;

    border-radius: 20px;

    border:
        1px solid
        rgba(70, 180, 255, 0.3);

    background:
        rgba(0, 30, 70, 0.25);

    backdrop-filter: blur(calc(10px * var(--blur-scale, 1)));
}

.letter p {
    font-family: "Cormorant Garamond", serif;

    font-size: 21px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.92);

    min-height: 1.7em;
}

.letter p::after {
    content: "|";

    animation: caretBlink 0.9s infinite;

    color: #47d9ff;
}

.letter p.done::after {
    content: "";
}

@keyframes caretBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* =================================================
   RESPONSIVE ADDITIONS
================================================= */

@media (max-width: 750px) {

    .menu-button {
        display: flex;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-traits {
        gap: 24px;
    }

    .surprise-card {
        width: 88vw;
    }

}

/* =================================================
   OCEAN / POETRY / MEMORY PAGES
================================================= */
.content-section {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 150px 0 80px;
    min-height: 100vh;
}
.section-intro {
    max-width: 680px;
    margin: 18px auto 38px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
}
.ocean-dropzone {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
    gap: 28px;
    align-items: center;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 28px;
    background: rgba(5, 20, 42, .42);
    backdrop-filter: blur(calc(14px * var(--blur-scale, 1)));
}
.ocean-dropzone img { width: 100%; height: 500px; object-fit: cover; border-radius: 20px; display: block; }
.ocean-dropzone h3, .poem-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; margin: 0 0 10px; }
.ocean-dropzone p, .poem-card p { font-family: 'Montserrat', sans-serif; line-height: 1.9; opacity: .85; }
.poetry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.poem-card { padding: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.06); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.poem-card > span { font-size: 1.5rem; }
code { opacity: .9; }
@media (max-width: 700px) {
    .content-section { width: min(100% - 24px, 1100px); padding-top: 120px; }
    .ocean-dropzone, .poetry-grid { grid-template-columns: 1fr; }
    .ocean-dropzone img { height: 330px; }
}

/* =================================================
   OCEAN MEDIA EXPERIENCE
================================================= */

.ocean-page {
    position: relative;
}

.ocean-intro {
    max-width: 760px;
}

.ocean-tabs {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 28px;
    flex-wrap: wrap;
}

.ocean-tab {
    border: 1px solid rgba(100, 220, 255, .28);
    background: rgba(0, 45, 95, .38);
    color: rgba(255,255,255,.82);
    padding: 13px 24px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: .35s ease;
    backdrop-filter: blur(calc(12px * var(--blur-scale, 1)));
    box-shadow: inset 0 0 20px rgba(60,190,255,.04);
}

.ocean-tab span {
    margin-right: 7px;
    color: #78e8ff;
}

.ocean-tab:hover,
.ocean-tab.active {
    color: #fff;
    border-color: rgba(100,225,255,.8);
    background: rgba(0, 110, 190, .42);
    box-shadow: 0 0 25px rgba(30,190,255,.22), inset 0 0 20px rgba(80,220,255,.08);
    transform: translateY(-2px);
}

.ocean-media-panel {
    display: none;
    animation: oceanPanelIn .55s ease both;
}

.ocean-media-panel.active {
    display: block;
}

@keyframes oceanPanelIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.ocean-panel-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto 18px;
    max-width: 1000px;
}

.panel-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(100,220,255,.4);
    background: rgba(0,100,180,.2);
    color: #8eefff;
    box-shadow: 0 0 20px rgba(30,190,255,.18);
}

.ocean-panel-heading h3,
.ocean-photo-empty h4,
.video-info h4 {
    font-family: 'Cormorant Garamond', serif;
}

.ocean-panel-heading h3 {
    font-size: 28px;
    margin-bottom: 2px;
}

.ocean-panel-heading p,
.video-info p,
.ocean-photo-empty p {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    opacity: .68;
}

.ocean-photo-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ocean-photo-card,
.ocean-photo-empty,
.ocean-video-card {
    border: 1px solid rgba(100,220,255,.2);
    border-radius: 24px;
    background: rgba(3,24,55,.48);
    box-shadow: 0 18px 50px rgba(0,0,0,.2), inset 0 0 30px rgba(50,180,255,.035);
    backdrop-filter: blur(calc(12px * var(--blur-scale, 1)));
}

.ocean-photo-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 340px;
    cursor: pointer;
    text-align: left;
}

.ocean-photo-card img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    display: block;
    transition: transform .7s ease, filter .7s ease;
}

.ocean-photo-card:hover img {
    transform: scale(1.055);
    filter: saturate(1.12) brightness(1.06);
}

.photo-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 55px 22px 20px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(transparent, rgba(0,8,25,.9));
    color: white;
}

.photo-overlay strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
}

.photo-overlay small {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    opacity: .7;
    margin-top: 2px;
}

.ocean-photo-empty {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    border-style: dashed;
}

.ocean-photo-empty > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(100,220,255,.35);
    color: #7eeaff;
    font-size: 28px;
    margin-bottom: 14px;
    box-shadow: 0 0 24px rgba(40,200,255,.14);
}

.ocean-photo-empty h4 {
    font-size: 24px;
    margin-bottom: 6px;
}

.ocean-photo-empty p {
    max-width: 260px;
}

.ocean-video-card {
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.ocean-video {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    background: #020914;
    object-fit: cover;
}

.video-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
}

.video-status {
    color: #68e7ff;
    text-shadow: 0 0 12px #42ddff;
    animation: videoDot 1.8s ease-in-out infinite;
}

@keyframes videoDot {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

.video-info h4 {
    font-size: 23px;
    margin-bottom: 2px;
}

.ocean-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0,5,18,.9);
    backdrop-filter: blur(calc(14px * var(--blur-scale, 1)));
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

.ocean-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.ocean-lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 0 70px rgba(30,180,255,.25);
    transform: scale(.96);
    transition: .35s ease;
}

.ocean-lightbox.open img {
    transform: scale(1);
}

.ocean-lightbox-close {
    position: absolute;
    top: 22px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(120,225,255,.45);
    background: rgba(0,50,100,.35);
    color: white;
    font-size: 30px;
    cursor: pointer;
}

@media (max-width: 700px) {
    .ocean-photo-grid {
        grid-template-columns: 1fr;
    }

    .ocean-photo-card,
    .ocean-photo-empty {
        min-height: 280px;
    }

    .ocean-photo-card img {
        min-height: 280px;
    }

    .ocean-lightbox {
        padding: 20px;
    }
}


/* =================================================
   OCEAN FEED — INSTAGRAM STYLE
================================================= */

.ocean-panel-switch {
    width: min(680px, 92vw);
    margin: 0 auto 24px;
    padding: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    border: 1px solid rgba(100,220,255,.20);
    border-radius: 18px;
    background: rgba(0,25,60,.48);
    backdrop-filter: blur(calc(16px * var(--blur-scale, 1)));
    box-shadow: 0 12px 35px rgba(0,0,0,.16), inset 0 0 25px rgba(40,180,255,.035);
}

.ocean-panel-switch .ocean-tab {
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    transform: none;
}

.ocean-panel-switch .ocean-tab:hover,
.ocean-panel-switch .ocean-tab.active {
    transform: none;
    background: rgba(0,120,200,.30);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(30,190,255,.14), inset 0 0 18px rgba(80,220,255,.06);
}

/* The original top switch is now hidden; each active feed has its own switch. */
.ocean-page > .ocean-tabs {
    display: none;
}

/* Narrow, single-column feed like a social media timeline */
.ocean-photo-grid {
    width: min(680px, 92vw);
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ocean-photo-card,
.ocean-photo-empty,
.ocean-video-card {
    width: 100%;
    max-width: 680px;
    border-radius: 20px;
}

.ocean-photo-card {
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    display: block;
}

.ocean-photo-card img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 820px;
    object-fit: cover;
}

/* Keep tall phone photos beautiful without cropping their important parts. */
.ocean-photo-card img {
    object-fit: contain;
    background: #020914;
}

.ocean-photo-card:hover img {
    transform: scale(1.018);
}

.photo-overlay {
    padding: 75px 22px 20px;
}

.ocean-video-card {
    margin: 0 auto 22px;
}

.ocean-video-card + .ocean-video-card {
    margin-top: 22px;
}

.ocean-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 820px;
    object-fit: cover;
}

/* On wider screens, keep the feed centered and cinematic. */
@media (min-width: 900px) {
    .ocean-video {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 700px) {
    .ocean-panel-switch {
        width: 94vw;
    }

    .ocean-photo-grid,
    .ocean-video-card {
        width: 94vw;
    }

    .ocean-photo-card,
    .ocean-photo-empty,
    .ocean-video-card {
        border-radius: 16px;
    }

    .ocean-photo-card img {
        max-height: none;
    }
}


/* =================================================
   OCEAN — CHAT STYLE PHOTO STACK
================================================= */

.ocean-switch-wrap{
    display:flex;
    justify-content:center;
    margin: 0 auto 34px;
}

.ocean-switch{
    display:flex;
    gap:6px;
    padding:6px;
    border:1px solid rgba(120,220,255,.22);
    background:rgba(2,18,42,.56);
    backdrop-filter: blur(calc(18px * var(--blur-scale, 1)));
    border-radius:999px;
    box-shadow:0 18px 50px rgba(0,0,0,.24), inset 0 0 22px rgba(70,190,255,.05);
}

.ocean-switch-btn{
    border:0;
    border-radius:999px;
    padding:12px 23px;
    color:rgba(255,255,255,.72);
    background:transparent;
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    cursor:pointer;
    transition:.35s ease;
}

.ocean-switch-btn.active,
.ocean-switch-btn:hover{
    color:#fff;
    background:linear-gradient(135deg,rgba(26,152,255,.72),rgba(0,74,170,.68));
    box-shadow:0 0 22px rgba(47,188,255,.28);
}

.switch-icon{ margin-right:7px; color:#9eeeff; }

.ocean-media-panel{
    width:min(100%,760px);
    margin:0 auto;
}

.ocean-feed-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 auto 30px;
    width:min(100%,560px);
}

.ocean-feed-badge{
    width:54px;
    height:54px;
    flex:0 0 54px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(110,220,255,.42);
    background:rgba(0,100,180,.22);
    color:#b9f5ff;
    font-size:22px;
    box-shadow:0 0 24px rgba(30,190,255,.16);
}

.ocean-feed-head h3{
    margin:0 0 3px;
    font-family:'Cormorant Garamond',serif;
    font-size:31px;
}

.ocean-feed-head p{
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-size:12px;
    opacity:.68;
}

.ocean-photo-stack{
    position:relative;
    width:min(100%,470px);
    height:560px;
    margin:0 auto;
}

.ocean-stack-card{
    position:absolute;
    left:50%;
    width:min(84%,410px);
    height:510px;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(175,235,255,.26);
    border-radius:30px;
    background:#071426;
    cursor:pointer;
    box-shadow:0 28px 65px rgba(0,0,0,.42);
    transform-origin:center bottom;
    transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease;
}

.ocean-stack-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.card-back{
    top:12px;
    transform:translateX(-50%) rotate(7deg) translate(24px,-5px) scale(.94);
    filter:brightness(.7) saturate(.8);
    z-index:1;
}

.card-middle{
    top:8px;
    transform:translateX(-50%) rotate(-5deg) translate(-18px,5px) scale(.97);
    filter:brightness(.84) saturate(.9);
    z-index:2;
}

.card-front{
    top:22px;
    transform:translateX(-50%) rotate(2deg);
    z-index:3;
}

.ocean-stack-card:hover{
    z-index:10;
    filter:brightness(1.04) saturate(1.08);
}

.card-front:hover{
    transform:translateX(-50%) translateY(-13px) rotate(0deg) scale(1.025);
    box-shadow:0 38px 85px rgba(0,0,0,.55),0 0 35px rgba(47,190,255,.2);
}

.card-middle:hover{
    transform:translateX(-50%) rotate(-2deg) translate(-18px,-10px) scale(1.01);
}

.card-back:hover{
    transform:translateX(-50%) rotate(4deg) translate(24px,-16px) scale(.99);
}

.stack-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:65px 24px 24px;
    display:flex;
    flex-direction:column;
    text-align:left;
    color:#fff;
    background:linear-gradient(transparent,rgba(0,5,16,.92));
}

.stack-caption strong{
    font-family:'Cormorant Garamond',serif;
    font-size:25px;
}

.stack-caption small{
    margin-top:3px;
    font-family:'Montserrat',sans-serif;
    font-size:11px;
    opacity:.72;
}

.ocean-stack-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:2px 0 25px;
}

.ocean-stack-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(180,235,255,.28);
}

.ocean-stack-dots .active{
    width:24px;
    border-radius:99px;
    background:#6fe3ff;
    box-shadow:0 0 12px #4ddcff;
}

.ocean-flip-button{
    margin:0 auto;
    min-width:235px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:14px 24px;
    border:1px solid rgba(120,225,255,.48);
    border-radius:999px;
    color:#e9fbff;
    background:rgba(0,83,164,.34);
    backdrop-filter: blur(calc(14px * var(--blur-scale, 1)));
    box-shadow:0 12px 35px rgba(0,0,0,.22), inset 0 0 20px rgba(70,210,255,.08);
    font-family:'Montserrat',sans-serif;
    font-size:12px;
    cursor:pointer;
    transition:.35s ease;
}

.ocean-flip-button:hover{
    transform:translateY(-4px) scale(1.025);
    background:rgba(0,122,205,.48);
    box-shadow:0 18px 42px rgba(0,0,0,.3),0 0 28px rgba(45,197,255,.22);
}

.flip-symbol{
    font-size:20px;
    color:#82eaff;
}

.flip-play{ color:#bdf5ff; font-size:12px; }

.ocean-video-stack{
    width:min(100%,520px);
    margin:0 auto 26px;
    position:relative;
}

.ocean-video-stack::before{
    content:"";
    position:absolute;
    inset:12px 8px -10px -8px;
    border-radius:30px;
    background:rgba(35,113,180,.22);
    border:1px solid rgba(110,220,255,.12);
    transform:rotate(-3deg);
}

.ocean-video-card{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
}

.ocean-video{
    width:100%;
    max-height:580px;
    display:block;
    background:#000;
}

@media (max-width:600px){
    .ocean-photo-stack{ height:500px; }
    .ocean-stack-card{ width:88%; height:455px; border-radius:25px; }
    .ocean-switch-btn{ padding:11px 18px; }
    .ocean-feed-head{ width:90%; }
}

@media (max-width:430px){
    .ocean-photo-stack{ height:440px; }
    .ocean-stack-card{ height:400px; width:90%; }
    .ocean-feed-head h3{ font-size:27px; }
    .ocean-switch{ width:100%; justify-content:center; }
    .ocean-switch-btn{ flex:1; }
}


/* =================================================
   OCEAN MEDIA NAVIGATION — PHOTOS + VIDEOS
================================================= */

.ocean-photo-viewer,
.ocean-video-viewer{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    position:relative;
}

.ocean-photo-viewer .ocean-photo-stack{
    flex:0 0 min(100%,470px);
}

.ocean-media-arrow{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:50%;
    border:1px solid rgba(125,225,255,.42);
    background:rgba(2,24,52,.72);
    color:#dffbff;
    font-family:Arial,sans-serif;
    font-size:38px;
    line-height:38px;
    display:grid;
    place-items:center;
    cursor:pointer;
    z-index:20;
    backdrop-filter: blur(calc(14px * var(--blur-scale, 1)));
    box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 20px rgba(35,195,255,.12);
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.ocean-media-arrow:hover{
    transform:scale(1.08);
    background:rgba(0,111,190,.72);
    box-shadow:0 12px 35px rgba(0,0,0,.3),0 0 28px rgba(45,205,255,.28);
}

.ocean-media-arrow:active{ transform:scale(.96); }

.ocean-stack-card.ocean-photo-slide{
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%) scale(.84) rotate(0deg);
    transition:opacity .35s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.ocean-stack-card.ocean-photo-slide.is-current{
    opacity:1;
    pointer-events:auto;
    z-index:5;
    transform:translateX(-50%) rotate(2deg);
}

.ocean-stack-card.ocean-photo-slide.is-prev{
    opacity:.72;
    pointer-events:auto;
    z-index:2;
    transform:translateX(-50%) rotate(-5deg) translateX(-24px) scale(.96);
    filter:brightness(.78);
}

.ocean-stack-card.ocean-photo-slide.is-next{
    opacity:.72;
    pointer-events:auto;
    z-index:2;
    transform:translateX(-50%) rotate(6deg) translateX(24px) scale(.96);
    filter:brightness(.78);
}

.ocean-photo-stack .stack-caption{
    z-index:8;
    pointer-events:none;
}

.ocean-stack-dots{
    align-items:center;
}

.ocean-stack-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(180,235,255,.28);
    cursor:pointer;
    transition:.3s ease;
}

.ocean-stack-dots button.active{
    width:25px;
    border-radius:99px;
    background:#6fe3ff;
    box-shadow:0 0 12px #4ddcff;
}

.ocean-photo-counter{
    text-align:center;
    margin:-13px 0 22px;
    font-family:'Montserrat',sans-serif;
    font-size:10px;
    letter-spacing:2px;
    opacity:.5;
}

.ocean-video-viewer{
    width:min(100%,620px);
    margin:0 auto;
}

.ocean-video-viewer .ocean-video-stack{
    flex:1;
    margin:0;
}

.ocean-video-slide{
    display:none;
    animation: oceanSlideIn .45s ease;
}

.ocean-video-slide.active{
    display:block;
}

@keyframes oceanSlideIn{
    from{opacity:0; transform:translateY(12px) scale(.985);}
    to{opacity:1; transform:translateY(0) scale(1);}
}

.ocean-video-viewer .ocean-media-arrow{
    flex:0 0 46px;
    width:46px;
    height:46px;
}

.video-dots{
    margin-top:22px;
}

@media (max-width:700px){
    .ocean-photo-viewer,
    .ocean-video-viewer{ gap:4px; }

    .ocean-media-arrow{
        width:40px;
        height:40px;
        flex-basis:40px;
        font-size:31px;
    }

    .ocean-photo-viewer .ocean-photo-stack{
        flex-basis:min(100%,390px);
    }
}

@media (max-width:500px){
    .ocean-photo-viewer .ocean-photo-stack{
        flex-basis:calc(100vw - 90px);
    }

    .ocean-media-arrow{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:28px;
    }
}

/* =================================================
   MUSIC PLAYER — DREAMY OCEAN STYLE
================================================= */
.music-player{
    width:min(680px,92vw);
    margin-top:38px;
    padding:30px 30px 25px;
    text-align:center;
    border:1px solid rgba(100,220,255,.24);
    border-radius:30px;
    background:linear-gradient(145deg,rgba(5,36,76,.68),rgba(1,13,32,.76));
    box-shadow:0 25px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05), 0 0 40px rgba(35,180,255,.08);
    backdrop-filter: blur(calc(18px * var(--blur-scale, 1)));
}
.now-playing-cover{
    width:92px;height:92px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
    font-size:36px;color:#dffaff;border:1px solid rgba(130,230,255,.45);
    background:radial-gradient(circle at 35% 30%,rgba(80,220,255,.5),rgba(5,48,100,.85));
    box-shadow:0 0 30px rgba(50,205,255,.18);
}
.now-playing-label{font:600 9px Montserrat,sans-serif;letter-spacing:3px;opacity:.5;margin-bottom:5px}
#nowPlayingTitle{font:600 29px "Cormorant Garamond",serif;margin:0}
#nowPlayingArtist{font:12px Montserrat,sans-serif;opacity:.55;margin:3px 0 20px}
.music-progress-wrap{display:grid;grid-template-columns:38px 1fr 38px;gap:10px;align-items:center;font:9px Montserrat,sans-serif;opacity:.7}
.music-progress-wrap input,.music-volume input{width:100%;accent-color:#63ddff;cursor:pointer}
.music-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px 0 12px}
.music-controls button{border:0;background:transparent;color:#dffaff;font-size:20px;cursor:pointer;opacity:.75;transition:.25s}
.music-controls button:hover{opacity:1;transform:scale(1.08)}
.music-controls .main-play{width:54px;height:54px;border-radius:50%;font-size:17px;background:linear-gradient(135deg,rgba(55,205,255,.8),rgba(0,91,175,.8));border:1px solid rgba(130,235,255,.6);box-shadow:0 0 25px rgba(55,205,255,.2);opacity:1}
.music-volume{width:min(210px,70%);margin:0 auto;display:flex;gap:8px;align-items:center;opacity:.65;font-size:11px}
.playlist{margin-top:26px}
.playlist-heading{display:flex;justify-content:center;gap:12px;font:600 10px Montserrat,sans-serif;letter-spacing:2px;text-transform:uppercase;opacity:.45;margin-bottom:12px}
.track{position:relative}
.track.playing .track-play{box-shadow:0 0 18px rgba(55,210,255,.3)}

@media(max-width:600px){
 .music-player{padding:24px 17px}
 #nowPlayingTitle{font-size:25px}
 .track{padding:13px 14px;gap:11px}
}


/* =================================================
   MUSIC — COVERS + EMPTY STATE
================================================= */
.track-cover{width:46px;height:46px;border-radius:12px;overflow:hidden;display:grid;place-items:center;flex:0 0 46px;background:radial-gradient(circle at 35% 30%,rgba(80,220,255,.42),rgba(5,48,100,.85));border:1px solid rgba(130,230,255,.25);box-shadow:0 0 18px rgba(50,205,255,.08);color:#dffaff;font-size:19px}
.track-cover img{width:100%;height:100%;object-fit:cover;display:block}
.now-playing-cover{overflow:hidden}
.now-playing-cover.has-image{padding:0}
.now-playing-cover.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.music-empty-state{padding:30px 20px;border:1px dashed rgba(130,230,255,.2);border-radius:22px;background:rgba(2,20,43,.24);text-align:center;margin-top:10px}
.empty-music-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;background:rgba(50,190,255,.1);font-size:24px}
.music-empty-state h4{margin:0 0 5px;font:600 21px "Cormorant Garamond",serif}
.music-empty-state p{margin:0;opacity:.55;font:11px Montserrat,sans-serif}
.ocean-empty-state{min-height:340px;width:100%;display:grid;place-items:center;align-content:center;gap:7px;text-align:center;padding:30px}
.ocean-empty-icon{font-size:42px;filter:drop-shadow(0 0 18px rgba(80,210,255,.25))}
.ocean-empty-state strong{font:600 24px "Cormorant Garamond",serif}
.ocean-empty-state small{font:11px Montserrat,sans-serif;opacity:.5}
.ocean-empty-stack{display:flex!important;align-items:center;justify-content:center}


/* =================================================
   MEMORIES — OCEAN-STYLE MEDIA CARDS
================================================= */
.memory-ocean-grid{
    width:min(100%, 1050px);
    margin:35px auto 0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:34px;
    align-items:start;
}

.memory-ocean-card{
    position:relative;
    overflow:hidden;
    padding:0 !important;
    min-height:430px;
    aspect-ratio:4 / 5;
    border:1px solid rgba(175,235,255,.26) !important;
    border-radius:30px !important;
    background:#071426 !important;
    cursor:pointer;
    box-shadow:0 28px 65px rgba(0,0,0,.42), inset 0 0 35px rgba(70,210,255,.04);
    transform:rotate(-1deg);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,filter .45s ease;
}

.memory-ocean-card:nth-child(even){ transform:rotate(1.5deg); }
.memory-ocean-card:nth-child(3n){ transform:rotate(-2deg); }
.memory-ocean-card:hover{
    z-index:10;
    transform:translateY(-10px) rotate(0) scale(1.025) !important;
    filter:brightness(1.04) saturate(1.08);
    box-shadow:0 38px 85px rgba(0,0,0,.55),0 0 35px rgba(47,190,255,.2);
}

.memory-ocean-card > img{
    width:100%;
    height:100%;
    min-height:430px;
    display:block;
    object-fit:cover;
}

.memory-ocean-card .malak-video-frame{
    width:100%;
    height:100%;
    min-height:430px;
    aspect-ratio:auto;
    margin:0;
    border-radius:0;
    box-shadow:none;
}

.memory-ocean-card .malak-video-frame video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.memory-ocean-card .malak-memory-caption{
    position:absolute;
    left:0;right:0;bottom:0;
    display:block;
    padding:70px 24px 24px;
    color:#fff;
    text-align:left;
    font-family:'Cormorant Garamond',serif;
    font-size:25px;
    line-height:1.05;
    background:linear-gradient(transparent,rgba(0,5,16,.94));
    pointer-events:none;
}

.memory-ocean-card::after{
    content:'♡';
    position:absolute;
    top:16px;
    right:18px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(175,235,255,.3);
    background:rgba(2,24,52,.52);
    color:#bdf5ff;
    backdrop-filter: blur(calc(10px * var(--blur-scale, 1)));
    box-shadow:0 8px 25px rgba(0,0,0,.22);
    pointer-events:none;
}

.memory-ocean-video .malak-video-frame::before{
    content:'▶';
    position:absolute;
    z-index:3;
    top:16px;
    left:18px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(175,235,255,.3);
    background:rgba(2,24,52,.52);
    color:#bdf5ff;
    backdrop-filter: blur(calc(10px * var(--blur-scale, 1)));
}

@media(max-width:700px){
    .memory-ocean-grid{ grid-template-columns:1fr; width:min(100%,430px); gap:28px; }
    .memory-ocean-card{ min-height:500px; }
    .memory-ocean-card > img,
    .memory-ocean-card .malak-video-frame{ min-height:500px; }
}

/* =========================================================
   MESSAGES — two-column composition matching the reference
   Message card sits around 20.5% of the viewport width;
   Photos/Videos sit around 68.9%.
========================================================= */
@media (min-width: 901px) {
    .about-section {
        position: relative;
        display: block !important;
        min-height: calc(100vh - 80px);
        padding: 110px 0 55px !important;
        overflow: hidden;
    }

    .about-section .about-card {
        position: absolute;
        top: 50%;
        left: 4%;
        transform: translateY(-50%);
        width: 33%;
        max-width: 560px;
        box-sizing: border-box;
        padding: 34px 32px;
        border: 1px solid rgba(175,235,255,.28);
        border-radius: 30px;
        background: rgba(2, 20, 48, .42);
        backdrop-filter: blur(calc(16px * var(--blur-scale, 1)));
        box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 0 35px rgba(70,190,255,.035);
    }

    .about-section .about-card .section-title {
        margin-top: 0;
    }

    .about-section .about-text {
        margin-top: 24px;
        font-size: clamp(18px, 1.35vw, 22px);
        line-height: 1.65;
    }

    .about-section .about-traits {
        margin-top: 32px;
        gap: clamp(22px, 2.5vw, 42px);
    }

    .about-section .messages-media-column {
        position: absolute;
        top: 50%;
        left: 49%;
        width: 39.8%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
    }

    .about-section .malak-switch-wrap {
        order: 2;
        width: auto;
        margin: 18px auto 0;
    }

    .about-section .malak-media-panel {
        order: 1;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-section .malak-stack-viewer {
        width: 100%;
        margin: 0;
        gap: 14px;
    }

    .about-section .malak-stack {
        width: min(100%, 390px);
        flex-basis: 390px;
        height: 488px;
        min-height: 488px;
    }

    .about-section .malak-stack .malak-stack-card {
        border-radius: 24px;
    }

    .about-section .malak-media-panel #aboutPhotoDots,
    .about-section .malak-media-panel #aboutVideoDots {
        margin-top: 12px;
    }

    .about-section .malak-media-panel #aboutPhotoCounter,
    .about-section .malak-media-panel #aboutVideoCounter {
        margin-top: 5px;
    }
}

@media (max-width: 900px) {
    .about-section .messages-media-column {
        width: 100%;
    }
}

/* =========================================================
   MESSAGES — FINAL CLEAN LAYOUT
   Keep the original two-column composition, with the
   Photos/Videos switch ABOVE the media content.
========================================================= */
@media (min-width: 901px) {
    .about-section {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(440px, 1fr) minmax(560px, 1.18fr) !important;
        align-items: center !important;
        justify-content: initial !important;
        column-gap: clamp(40px, 5vw, 90px) !important;
        width: 100% !important;
        min-height: calc(100vh - 72px) !important;
        box-sizing: border-box !important;
        padding: 82px 4.5% 45px !important;
        overflow: visible !important;
    }

    .about-section .about-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: min(100%, 560px) !important;
        max-width: 560px !important;
        justify-self: center !important;
        align-self: center !important;
        box-sizing: border-box !important;
        padding: 32px 30px !important;
        margin: 0 !important;
        border: 1px solid rgba(175,235,255,.28) !important;
        border-radius: 30px !important;
        background: rgba(2,20,48,.42) !important;
        backdrop-filter: blur(calc(16px * var(--blur-scale, 1))) !important;
        box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 0 35px rgba(70,190,255,.035) !important;
    }

    .about-section .about-text {
        margin-top: 22px !important;
        font-size: clamp(18px, 1.25vw, 22px) !important;
        line-height: 1.58 !important;
    }

    .about-section .about-traits {
        margin-top: 28px !important;
        gap: clamp(24px, 2.8vw, 42px) !important;
    }

    .about-section .messages-media-column {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 720px !important;
        justify-self: center !important;
        align-self: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Switch stays directly above the selected media. */
    .about-section .malak-switch-wrap {
        order: 1 !important;
        width: auto !important;
        margin: 0 auto 14px !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 20 !important;
    }

    .about-section .malak-media-panel {
        order: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .about-section .malak-switch-wrap + .malak-media-panel {
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-section .malak-stack-viewer {
        width: 100% !important;
        margin: 0 auto !important;
        gap: 14px !important;
    }

    .about-section .malak-stack {
        width: min(100%, 390px) !important;
        flex: 0 0 390px !important;
        height: 488px !important;
        min-height: 488px !important;
    }

    .about-section .malak-stack .malak-stack-card {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    .about-section .malak-media-panel #aboutPhotoDots,
    .about-section .malak-media-panel #aboutVideoDots {
        margin-top: 10px !important;
    }

    .about-section .malak-media-panel #aboutPhotoCounter,
    .about-section .malak-media-panel #aboutVideoCounter {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .about-section {
        grid-template-columns: minmax(380px, .92fr) minmax(470px, 1.08fr) !important;
        column-gap: 30px !important;
        padding-left: 3% !important;
        padding-right: 3% !important;
    }

    .about-section .about-card {
        padding: 28px 24px !important;
    }

    .about-section .about-text {
        font-size: 18px !important;
    }

    .about-section .malak-stack {
        width: 350px !important;
        flex-basis: 350px !important;
        height: 438px !important;
        min-height: 438px !important;
    }
}

@media (max-width: 900px) {
    .about-section .messages-media-column {
        width: 100% !important;
        margin-top: 30px !important;
    }

    .about-section .malak-switch-wrap + .malak-media-panel {
        margin-top: 0 !important;
        padding-left: 0 !important;
    }
}

/* Tablets (iPad-size screens, roughly 701–900px wide, mostly in
   portrait) keep the same two-column "computer" composition as
   desktop, just scaled down — instead of collapsing to the
   stacked phone layout. */
@media (max-width: 900px) and (min-width: 701px) {
    .about-section {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(280px, .95fr) minmax(300px, 1.05fr) !important;
        align-items: center !important;
        justify-content: initial !important;
        column-gap: 22px !important;
        width: 100% !important;
        min-height: calc(100vh - 72px) !important;
        box-sizing: border-box !important;
        padding: 78px 3.5% 40px !important;
        overflow: visible !important;
    }

    .about-section .about-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: center !important;
        align-self: center !important;
        box-sizing: border-box !important;
        padding: 24px 20px !important;
        margin: 0 !important;
    }

    .about-section .about-text {
        font-size: 16px !important;
        margin-top: 16px !important;
        line-height: 1.5 !important;
    }

    .about-section .about-traits {
        margin-top: 18px !important;
        gap: 18px !important;
    }

    .about-section .messages-media-column {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: center !important;
        align-self: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .about-section .malak-switch-wrap {
        order: 1 !important;
        width: auto !important;
        margin: 0 auto 10px !important;
    }

    .about-section .malak-media-panel {
        order: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-section .malak-stack-viewer {
        width: 100% !important;
        margin: 0 auto !important;
        gap: 10px !important;
    }

    .about-section .malak-stack {
        width: min(100%, 280px) !important;
        flex: 0 0 280px !important;
        height: 350px !important;
        min-height: 350px !important;
    }

    .about-section .malak-stack .malak-stack-card {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 20px !important;
    }
}

/* Messages typewriter cursor */
.about-text.messages-typewriter {
    min-height: 7.2em;
}

.about-text.messages-typewriter::after {
    content: "|";
    display: inline-block;
    margin-left: 2px;
    color: #47d9ff;
    text-shadow: 0 0 10px rgba(71, 217, 255, .8);
    animation: messagesCaretBlink .9s infinite;
}

.about-text.messages-typewriter.done::after {
    content: "";
}

@keyframes messagesCaretBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* =========================================================
   FOR YOU — Message left / Video stack right
   Same two-column composition as Messages, but video-only.
========================================================= */
.foryou-section {
    width: 100%;
    min-height: calc(100vh - 82px);
    box-sizing: border-box;
    padding: 100px 5% 50px;
}

.foryou-section > .section-title {
    margin-bottom: 28px;
}

.foryou-layout {
    width: 100%;
    min-height: 610px;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(500px, 1.1fr);
    align-items: center;
    justify-content: center;
    column-gap: clamp(40px, 5vw, 90px);
    box-sizing: border-box;
}

.foryou-message-card {
    width: min(100%, 560px);
    justify-self: center;
    box-sizing: border-box;
    padding: 34px 30px;
    border: 1px solid rgba(175,235,255,.28);
    border-radius: 30px;
    background: rgba(2,20,48,.42);
    backdrop-filter: blur(calc(16px * var(--blur-scale, 1)));
    -webkit-backdrop-filter: blur(calc(16px * var(--blur-scale, 1)));
    box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 0 35px rgba(70,190,255,.035);
    text-align: center;
}

.foryou-message-card .about-text {
    margin-top: 22px;
    font-size: clamp(18px, 1.25vw, 22px);
    line-height: 1.58;
}

.foryou-video-column {
    width: 100%;
    max-width: 720px;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.foryou-video-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
    color: #dffaff;
}

.foryou-video-title h3 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 30px;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(62,218,255,.35);
}

.foryou-video-title span {
    color: #8deaff;
}

.foryou-video-column .malak-stack-viewer {
    width: 100%;
    margin: 0 auto;
    gap: 14px;
}

.foryou-video-stack {
    width: min(100%, 390px);
    flex: 0 0 390px;
    height: 488px;
    min-height: 488px;
}

.foryou-video-stack .malak-stack-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 24px;
}

.foryou-video-column .ocean-stack-dots {
    margin-top: 10px;
}

.foryou-video-column .ocean-photo-counter {
    margin-top: 5px;
    margin-bottom: 0;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .foryou-layout {
        grid-template-columns: minmax(380px, .92fr) minmax(470px, 1.08fr);
        column-gap: 30px;
    }

    .foryou-section {
        padding-left: 3%;
        padding-right: 3%;
    }
}

@media (max-width: 900px) {
    .foryou-section {
        padding: 105px 5% 45px;
    }

    .foryou-layout {
        grid-template-columns: 1fr;
        gap: 42px;
        min-height: 0;
    }

    .foryou-message-card,
    .foryou-video-column {
        width: 100%;
        max-width: 620px;
    }

    .foryou-video-stack {
        width: min(100%, 390px);
        flex-basis: 390px;
    }
}

/* Tablets (roughly 701–900px wide, mostly in portrait) keep the
   same message-left / video-right composition as desktop, just
   scaled down — instead of collapsing to the stacked phone layout. */
@media (max-width: 900px) and (min-width: 701px) {
    .foryou-layout {
        grid-template-columns: minmax(280px, .95fr) minmax(300px, 1.05fr) !important;
        column-gap: 22px !important;
        min-height: 0 !important;
    }

    .foryou-message-card,
    .foryou-video-column {
        width: 100% !important;
        max-width: none !important;
    }

    .foryou-message-card {
        padding: 24px 20px !important;
    }

    .foryou-message-card .about-text {
        font-size: 16px !important;
        margin-top: 16px !important;
        line-height: 1.5 !important;
    }

    .foryou-video-title h3 {
        font-size: 24px !important;
    }

    .foryou-video-stack {
        width: min(100%, 280px) !important;
        flex-basis: 280px !important;
        height: 350px !important;
        min-height: 350px !important;
    }

    .foryou-video-stack .malak-stack-card {
        border-radius: 20px !important;
    }
}

@media (max-width: 520px) {
    .foryou-video-stack {
        flex-basis: 78vw;
        height: 104vw;
        min-height: 0;
    }
}

/* =========================================================
   PERFORMANCE — lighter blur + fewer moving background pieces
   on tablets and phones.

   backdrop-filter is one of the most GPU-expensive CSS effects,
   and this site uses it in 30+ places (navbar, cards, buttons...).
   A desktop GPU shrugs it off; most tablets and phones can't keep
   up with that many blurred, semi-transparent layers stacked and
   animating at once, which is what shows up as slowness/jank.
   Turning the blur radius down on smaller screens (via the
   --blur-scale variable used by every backdrop-filter rule) keeps
   the glass look while cutting the GPU cost dramatically.

   The floating background bubbles are purely decorative and
   animate forever, so trimming their count on smaller screens
   also directly reduces how much the GPU has to composite on
   every frame.
========================================================= */
@media (max-width: 1024px) {
    :root {
        --blur-scale: 0.45;
    }

    .bubble-7,
    .bubble-8,
    .bubble-9,
    .bubble-10,
    .bubble-11,
    .bubble-12 {
        display: none;
    }
}

@media (max-width: 600px) {
    :root {
        --blur-scale: 0.3;
    }

    .bubble-4,
    .bubble-5,
    .bubble-6 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --blur-scale: 0.3;
    }

    .bubble,
    .stars,
    .moon-glow {
        animation: none !important;
    }
}


/* =================================================
   HEART MESSAGE INTRO — HOME PAGE
================================================= */


.heart-message-intro {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    overflow: hidden;
}

.heart-message-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

/* كل قلب عبارة عن بطاقة قلب حقيقية (SVG)، والنص مقصوص على شكل القلب
   بالظبط عن طريق clip-path، فمستحيل الكلام يطلع بره حدود القلب */
.intro-heart {
    --heart-size: 200px;
    position: absolute;
    width: var(--heart-size);
    height: var(--heart-size);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(.15);
    transition: opacity .5s ease, transform .5s ease;
}

.intro-heart-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter:
        drop-shadow(0 0 14px rgba(110, 225, 255, .8))
        drop-shadow(0 8px 16px rgba(0, 0, 0, .4));
}

/* الدايرة الصغيرة اللي بتحمل رقم ترتيب ظهور كل قلب (1، 2، 3...) */
.intro-heart-number {
    position: absolute;
    top: -4%;
    right: -4%;
    z-index: 4;
    width: 15%;
    height: 15%;
    min-width: 22px;
    min-height: 22px;
    max-width: 30px;
    max-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(150deg, #fdfeff 0%, #bdeeff 32%, #4fc3f0 68%, #0f6fb8 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow:
        0 0 10px rgba(120, 230, 255, .65),
        0 3px 8px rgba(2, 20, 40, .55),
        inset 0 1px 1px rgba(255, 255, 255, .8);
    color: #08243f;
    font-family: "Cormorant Garamond", "Cairo", serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.intro-heart-number-final {
    top: -3%;
    right: -3%;
    width: 11%;
    height: 11%;
    min-width: 32px;
    min-height: 32px;
    max-width: 42px;
    max-height: 42px;
    font-size: 17px;
    z-index: 6;
}

@media (max-width: 700px) {
    .intro-heart-number {
        min-width: 19px;
        min-height: 19px;
        max-width: 24px;
        max-height: 24px;
        font-size: 11px;
    }

    .intro-heart-number-final {
        min-width: 28px;
        min-height: 28px;
        max-width: 34px;
        max-height: 34px;
        font-size: 15px;
    }
}

/* مساحة النص مقصوصة على شكل القلب نفسه (clip-path)، فحتى لو النص
   طال شوية بيتقص على حدود القلب بدل ما يطلع على الخلفية الغامقة */
.intro-heart-message {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 96%;
    height: 82%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6%;
    box-sizing: border-box;
    overflow: hidden;
    clip-path: url(#introHeartClip);
    -webkit-clip-path: url(#introHeartClip);
    transform: translate(-50%, -50%) scale(.72);
    text-align: center;
    color: #ffffff;
    font-family: "Cairo", "Tajawal", "Montserrat", sans-serif;
    font-size: clamp(11px, 1.05vw, 15px);
    line-height: 1.5;
    font-weight: 800;
    direction: rtl;
    text-shadow:
        -1px -1px 0 rgba(3, 18, 36, .95),
         1px -1px 0 rgba(3, 18, 36, .95),
        -1px  1px 0 rgba(3, 18, 36, .95),
         1px  1px 0 rgba(3, 18, 36, .95),
         0 2px 3px rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
}

.intro-heart.is-visible {
    animation: introHeartAppear .85s cubic-bezier(.17,.84,.32,1.25) forwards;
}

.intro-heart.is-visible .intro-heart-message {
    animation: introHeartMessageIn .7s .25s ease forwards;
}

/* إخفاء/إظهار القلب بالكامل (الشكل + الكلام مع بعض) */
.intro-heart.is-hidden-all {
    opacity: 0 !important;
    transform: scale(.7) !important;
    pointer-events: none !important;
}

.intro-heart-final {
    --heart-size: clamp(340px, 38vw, 500px);
    left: 50%;
    top: 50%;
}

.intro-heart-final .intro-heart-message {
    width: 92%;
    height: 74%;
    top: 46%;
    padding: 0 4%;
    font-size: clamp(10px, 1.05vw, 14px);
    line-height: 1.42;
}

.intro-heart-final .intro-heart-float {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.intro-heart-final.is-visible {
    animation: finalHeartAppear .95s cubic-bezier(.17,.84,.32,1.25) forwards;
}

.intro-heart-final.is-visible .intro-heart-float {
    animation: finalHeartFloat 3.6s 1.95s ease-in-out infinite alternate;
}

.intro-heart-final.is-visible .intro-heart-message {
    animation: introHeartMessageIn .9s .3s ease forwards;
}

.heart-message-toggle {
    position: absolute;
    left: 50%;
    bottom: clamp(25px, 5vh, 52px);
    transform: translateX(-50%) translateY(20px);
    min-width: 190px;
    padding: 12px 24px;
    border: 1px solid rgba(120, 230, 255, .75);
    border-radius: 999px;
    background: rgba(2, 28, 55, .82);
    backdrop-filter: blur(12px);
    color: #f4fcff;
    font-family: "Cairo", "Tajawal", "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 0 22px rgba(40, 200, 255, .25);
    transition: opacity .7s ease, transform .7s ease, border-color .3s ease;
}

.heart-message-toggle.is-ready {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.heart-message-toggle:hover {
    border-color: rgba(180, 245, 255, 1);
}

.heart-message-toggle-icon {
    margin-right: 7px;
    font-size: 17px;
    vertical-align: -2px;
}

@keyframes introHeartAppear {
    0% { opacity: 0; transform: scale(.15) rotate(-12deg); }
    65% { opacity: 1; transform: scale(1.08) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes finalHeartAppear {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-8deg); }
    65% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes introHeartMessageIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes finalHeartFloat {
    from { transform: translateY(-5px); }
    to { transform: translateY(5px); }
}

/* أماكن القلوب الصغيرة */
.intro-heart-1 { left: 7%; top: 18%; }
.intro-heart-2 { right: 7%; top: 20%; }
.intro-heart-3 { left: 20%; top: 52%; }
.intro-heart-4 { right: 20%; top: 51%; }
.intro-heart-5 { left: 5%; top: 66%; }
.intro-heart-6 { right: 5%; top: 67%; }

/* القلب الأخير مثبت في مركز الشاشة بالضبط */
.intro-heart-final {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.15);
}
.intro-heart-final.is-visible {
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 700px) {
    .intro-heart {
        --heart-size: 148px;
    }

    .intro-heart-message {
        width: 96%;
        height: 80%;
        padding: 0 5%;
        font-size: 10px;
        line-height: 1.4;
    }

    .intro-heart-1 { left: 1%; top: 16%; }
    .intro-heart-2 { right: 1%; top: 19%; }
    .intro-heart-3 { left: 1%; top: 43%; }
    .intro-heart-4 { right: 1%; top: 45%; }
    .intro-heart-5 { left: 1%; top: 69%; }
    .intro-heart-6 { right: 1%; top: 71%; }

    .intro-heart-final {
        --heart-size: min(330px, 84vw);
        left: 50%;
        top: 47%;
    }

    .intro-heart-final .intro-heart-message {
        width: 88%;
        height: 72%;
        top: 46%;
        padding: 0 6%;
        font-size: 9px;
        line-height: 1.32;
    }

    .heart-message-toggle {
        bottom: 18px;
        min-width: 170px;
        padding: 10px 17px;
        font-size: 11px;
    }
}


/* Hide the message-heart overlay on the Home page only. All original message text remains unchanged in the HTML. */
.heart-message-intro {
    display: none !important;
}