/* =========================================
   BOBA BIRTHDAY WEBSITE
   VERSION 2
   Premium Interactive Design
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: 'Poppins', sans-serif;
    background: #090909;
    color: white;
    overflow-x: hidden;

}

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

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background:

        radial-gradient(circle at top left, #ff7eb3 0%, transparent 30%),

        radial-gradient(circle at bottom right, #ffd166 0%, transparent 25%),

        radial-gradient(circle at center, #3d2a55 0%, transparent 40%),

        #090909;

    z-index: -2;

}

body::after {

    content: "";

    position: fixed;

    inset: 0;

    background:

        linear-gradient(rgba(255, 255, 255, .02), transparent);

    z-index: -1;

}

/* ===========================
LOADER
=========================== */

#loader {

    position: fixed;

    inset: 0;

    background: #090909;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 99999;

    transition: 1s;

}

.loader-logo {

    text-align: center;

    width: 350px;

}

.loader-logo span {

    letter-spacing: 8px;

    text-transform: uppercase;

    opacity: .6;

}

.loader-logo h1 {

    font-size: 58px;

    font-family: 'Playfair Display', serif;

    margin: 25px 0;

}

.progress {

    width: 100%;

    height: 8px;

    background: #222;

    border-radius: 30px;

    overflow: hidden;

}

.progress-bar {

    height: 100%;

    width: 0;

    background:

        linear-gradient(90deg, #ff7eb3, #ffd166);

    animation: loading 3s forwards;

}

@keyframes loading {

    100% {

        width: 100%;

    }

}

/* ===========================
PHONE
=========================== */

#phone {

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    opacity: 0;

    transform: translateY(40px);

    transition: 1s;

}


.phone-wallpaper {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(180deg, #1d1d35, #090909);

}

.phone-time {

    position: absolute;

    top: 60px;

    width: 100%;

    text-align: center;

    font-size: 70px;

    font-weight: 600;

    z-index: 2;

}

.notification-card {

    position: absolute;

    top: 180px;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    padding: 18px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    gap: 18px;

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

    backdrop-filter: blur(20px);

    cursor: pointer;

    transition: .35s;

    z-index: 2;

    animation:
        notificationDrop 1s ease,
        floatCard 3s ease-in-out infinite 1s;

}

.notification-card:hover {

    transform: translateX(-50%) scale(1.03);

}

.notify-left {

    font-size: 38px;

}

.notify-right h3 {

    font-size: 18px;

}

.notify-right p {

    opacity: .75;

    margin-top: 5px;

}

.unlock-text {

    position: absolute;

    bottom: 40px;

    width: 100%;

    text-align: center;

    opacity: .65;

    letter-spacing: 2px;

}

/* =========================================
   ENVELOPE
========================================= */

#envelope-section {

    opacity: 0;

    transform: translateY(70px);

    transition: 1s;

}

.envelope-wrapper {

    perspective: 2000px;

}

.envelope {

    cursor: pointer;

    transition: .4s;

}

.envelope:hover {

    transform: translateY(-8px) scale(1.02);

}

.envelope-front {

    height: 260px;

    background: linear-gradient(135deg, #f7d9df, #ebbdc9);

    border-radius: 15px;

    position: relative;

    overflow: hidden;

    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);

}

.envelope-front::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(45deg,
            transparent 49.5%,
            #f0c7d2 50%);

}

.envelope-front::after {

    content: "💌";

    position: absolute;

    left: 50%;

    top: 50%;

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

    font-size: 65px;

}

.envelope-letter {

    padding: 0 30px;

    margin-top: -60px;

}

.letter {

    background: #fffdf9;

    color: #222;

    border-radius: 20px;

    padding: 60px;

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

    transform: translateY(90px);

    opacity: 0;

    transition: 1s;

}

.letter.show {

    transform: translateY(0);

    opacity: 1;

}

.letter h2 {

    font-family: 'Playfair Display', serif;

    font-size: 42px;

    margin-bottom: 35px;

}

#typing {

    white-space: pre-line;

    font-size: 20px;

    line-height: 2;

}

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

.intro-photo {

    position: relative;

    height: 100vh;

    overflow: hidden;

}

.intro-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: brightness(.45);

}

.intro-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 30px;

}

.intro-overlay h1 {

    font-family: 'Playfair Display', serif;

    font-size: 72px;

    margin-bottom: 25px;

}

.intro-overlay p {

    max-width: 750px;

    font-size: 26px;

    line-height: 2;

    opacity: .9;

}

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

.memories {

    opacity: 0;

    transform: translateY(70px);

    transition: 1s;
}

.title {

    text-align: center;

    margin-bottom: 80px;

}

.title h2 {

    font-size: 58px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 15px;

}

.title p {

    opacity: .8;

    font-size: 20px;

}

.gallery {

    columns: 3 280px;

    column-gap: 22px;

}

.card {

    overflow: hidden;

    border-radius: 22px;

    margin-bottom: 22px;

    break-inside: avoid;

    background: #111;

}

.card img {

    width: 100%;

    display: block;

    transition: .5s;

    cursor: pointer;

}

.card:hover img {

    transform: scale(1.08);

}

/* =========================================
   TIMELINE
========================================= */

.timeline {

    padding: 140px 8%;

}

.timeline-header {

    text-align: center;

    margin-bottom: 80px;

}

.timeline-header h2 {

    font-family: 'Playfair Display', serif;

    font-size: 58px;

    margin-bottom: 15px;

}

.timeline-container {

    position: relative;

    max-width: 1100px;

    margin: auto;

}

.timeline-container::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    bottom: 0;

    width: 3px;

    background: #e8b69d;

}

.timeline-item {

    width: 50%;

    padding: 35px;

    position: relative;

}

.timeline-item.left {

    margin-right: auto;

}

.timeline-item.right {

    margin-left: auto;

}

.timeline-content {

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

    backdrop-filter: blur(25px);

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

    padding: 35px;

    border-radius: 25px;

    transition: .35s;

}

.timeline-content:hover {

    transform: translateY(-8px);

}

.timeline-content span {

    color: #ffd166;

    display: block;

    margin-bottom: 12px;

    font-weight: 600;

}

.timeline-content h3 {

    margin-bottom: 15px;

    font-size: 28px;

    font-family: 'Playfair Display', serif;

}

.timeline-content p {

    line-height: 1.9;

    opacity: .9;

}

/* =========================================
   COUNTDOWN
========================================= */

.countdown {

    padding: 140px 8%;

    text-align: center;

}

.countdown h2 {

    font-size: 58px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 60px;

}

.counter {

    display: flex;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;

}

.counter div {

    width: 170px;

    height: 170px;

    border-radius: 25px;

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

    backdrop-filter: blur(25px);

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

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transition: .35s;

}

.counter div:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);

}

.counter span {

    font-size: 56px;

    font-weight: 700;

    color: #ffd166;

}

.counter p {

    margin-top: 12px;

    opacity: .75;

}

/* =========================================
MESSAGE
========================================= */

.message {

    padding: 140px 8%;

    display: flex;

    justify-content: center;

}

.glass-card {

    width: 900px;

    max-width: 100%;

    padding: 70px;

    border-radius: 30px;

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

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

    backdrop-filter: blur(30px);

    text-align: center;

}

.glass-card h2 {

    font-size: 52px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 35px;

}

.glass-card p {

    font-size: 22px;

    line-height: 2;

    opacity: .9;

}

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

.final-photo {

    position: relative;

    height: 100vh;

    overflow: hidden;

}

.final-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: brightness(.45);

    transition: 2s;

}

.final-photo:hover img {

    transform: scale(1.05);

}

.final-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px;

}

.final-overlay h1 {

    font-size: 90px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 30px;

}

.final-overlay p {

    font-size: 24px;

    max-width: 750px;

    line-height: 2;

}

/* =========================================
QUOTE
========================================= */

.quote-section {

    padding: 140px 8%;

    text-align: center;

}

.quote-container {

    max-width: 850px;

    margin: auto;

}

.quote-container h2 {

    font-size: 60px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 30px;

}

.quote-container p {

    font-size: 24px;

    line-height: 2;

    opacity: .85;

}

/* =========================================
SURPRISE
========================================= */

.surprise {

    padding: 120px 8%;

    display: flex;

    justify-content: center;

}

.surprise-card {

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

    backdrop-filter: blur(25px);

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

    padding: 70px;

    border-radius: 30px;

    max-width: 720px;

    text-align: center;

}

.surprise-card h2 {

    font-size: 50px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 25px;

}

.surprise-card p {

    font-size: 20px;

    line-height: 2;

    margin-bottom: 40px;

}

#heartButton {

    padding: 18px 50px;

    font-size: 20px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    background: linear-gradient(90deg, #ff7eb3, #ffd166);

    transition: .35s;

}

#heartButton:hover {

    transform: scale(1.08);

    box-shadow: 0 15px 40px rgba(255, 126, 179, .35);

}

/* =========================================
GOODBYE
========================================= */

.goodbye {

    padding: 180px 8%;

    text-align: center;

}

.goodbye h1 {

    font-size: 82px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 35px;

}

.goodbye p {

    font-size: 24px;

    line-height: 2;

    max-width: 800px;

    margin: auto;

}

.goodbye h3 {

    margin-top: 60px;

    font-size: 34px;

    color: #ffd166;

}

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

#musicToggle {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 70px;

    height: 70px;

    border: none;

    border-radius: 50%;

    background: linear-gradient(135deg, #ff7eb3, #ffd166);

    font-size: 30px;

    cursor: pointer;

    z-index: 999;

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

    transition: .35s;

}

#musicToggle:hover {

    transform: scale(1.12) rotate(10deg);

}

/* =========================================
CONFETTI
========================================= */

#confetti {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 500;

}

/* =========================================
MOBILE — General tablets & phones ≤768px
========================================= */

@media (max-width: 768px) {

    .timeline-container::before {
        display: none;
    }

    .timeline-item {
        width: 100%;
        margin: 0;
        padding: 15px 0;
    }

    .timeline-item.left,
    .timeline-item.right {
        margin: 0;
    }

    .hero h1,
    .intro-overlay h1,
    .final-overlay h1,
    .goodbye h1 {
        font-size: 52px;
    }

    .counter div {
        width: 130px;
        height: 130px;
    }

    .gallery {
        columns: 1;
    }
}

/* =========================================
   iPHONE 13 — 390 × 844 logical pixels
   Also covers 12, 14 (same width)
========================================= */

@media (max-width: 430px) {

    /* ── Safe areas (Dynamic Island / home indicator) ── */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        -webkit-text-size-adjust: 100%;
    }

    /* ── Loader ── */
    .loader-logo {
        width: 90vw;
        padding: 0 20px;
    }

    .loader-logo h1 {
        font-size: 36px;
        margin: 16px 0;
    }

    .loader-logo span {
        font-size: 11px;
        letter-spacing: 5px;
    }

    /* ── Phone section: fill the full screen on mobile ── */
    #phone {
        padding: 0;
        height: 100dvh; /* dynamic viewport for iOS Safari */
    }

    .iphone {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .dynamic-island {
        top: 14px;
        width: 120px;
        height: 34px;
    }

    .phone-time {
        font-size: 48px;
        top: 52px;
    }

    .phone-date {
        font-size: 17px;
        top: 108px;
    }

    .notification-card {
        top: 160px;
        width: 92%;
        padding: 14px 16px;
        border-radius: 18px;
        gap: 14px;
    }

    .notify-left {
        font-size: 30px;
    }

    .notify-right h3 {
        font-size: 15px;
    }

    .notify-right p {
        font-size: 13px;
    }

    .unlock-text {
        bottom: calc(28px + env(safe-area-inset-bottom));
        font-size: 13px;
        letter-spacing: 1.5px;
    }

    /* ── Envelope ── */
    #envelope-section {
        padding: 60px 16px;
    }

    .envelope-front {
        height: 180px;
    }

    .envelope-front::after {
        font-size: 48px;
    }

    .envelope-letter {
        padding: 0 16px;
        margin-top: -40px;
    }

    .letter {
        padding: 36px 24px;
        border-radius: 18px;
    }

    .letter h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }

    #typing {
        font-size: 15px;
        line-height: 1.85;
    }

    /* ── Intro / final full-bleed photos ── */
    .intro-overlay h1,
    .final-overlay h1 {
        font-size: 38px;
        margin-bottom: 16px;
    }

    .intro-overlay p {
        font-size: 16px;
        line-height: 1.75;
        padding: 0 10px;
    }

    .final-overlay h1 {
        font-size: 42px;
    }

    .final-overlay p {
        font-size: 15px;
        line-height: 1.8;
    }

    /* ── Gallery ── */
    .memories {
        padding: 60px 16px;
    }

    .title h2 {
        font-size: 34px;
    }

    .title p {
        font-size: 15px;
    }

    .title {
        margin-bottom: 40px;
    }

    .gallery {
        columns: 1;
        column-gap: 0;
    }

    .card {
        border-radius: 16px;
        margin-bottom: 16px;
    }

    /* ── Lightbox ── */
    #lightbox img {
        max-width: 96%;
        max-height: 80vh;
        border-radius: 16px;
    }

    #closeLightbox {
        top: calc(16px + env(safe-area-inset-top));
        right: 20px;
        font-size: 44px;
    }

    #prevPhoto,
    #nextPhoto {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    #prevPhoto {
        left: 10px;
    }

    #nextPhoto {
        right: 10px;
    }

    /* ── Timeline ── */
    .timeline {
        padding: 70px 16px;
    }

    .timeline-header h2 {
        font-size: 34px;
    }

    .timeline-header p {
        font-size: 15px;
    }

    .timeline-container::before {
        display: none;
    }

    .timeline-item {
        width: 100%;
        padding: 10px 0;
    }

    .timeline-item.left,
    .timeline-item.right {
        margin: 0;
    }

    .timeline-content {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .timeline-content h3 {
        font-size: 22px;
    }

    .timeline-content p {
        font-size: 14px;
    }

    /* ── Countdown ── */
    .countdown {
        padding: 70px 16px;
    }

    .countdown h2 {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .counter {
        gap: 12px;
    }

    .counter div {
        width: 80px;
        height: 80px;
        border-radius: 18px;
    }

    .counter span {
        font-size: 32px;
    }

    .counter p {
        font-size: 11px;
        margin-top: 6px;
    }

    /* ── Message ── */
    .message {
        padding: 70px 16px;
    }

    .glass-card {
        padding: 36px 24px;
        border-radius: 22px;
    }

    .glass-card h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .glass-card p {
        font-size: 15px;
        line-height: 1.85;
    }

    /* ── Quote ── */
    .quote-section {
        padding: 70px 16px;
    }

    .quote-container h2 {
        font-size: 26px;
    }

    .quote-container p {
        font-size: 15px;
    }

    /* ── Surprise card ── */
    .surprise {
        padding: 70px 16px;
    }

    .surprise-card {
        padding: 40px 24px;
        border-radius: 22px;
    }

    .surprise-card h2 {
        font-size: 30px;
    }

    .surprise-card p {
        font-size: 15px;
    }

    #heartButton {
        padding: 16px 40px;
        font-size: 17px;
        /* 44px minimum touch target */
        min-height: 44px;
    }

    /* ── Celebration / final ── */
    #celebration {
        padding: 80px 20px calc(60px + env(safe-area-inset-bottom));
    }

    #celebration h1 {
        font-size: 52px;
    }

    #celebration h2 {
        font-size: 26px;
    }

    #celebration p {
        font-size: 15px;
        line-height: 1.85;
    }

    /* ── Music button ── */
    #musicToggle {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 56px;
        height: 56px;
        font-size: 24px;
        /* meet 44px touch target */
        min-width: 44px;
        min-height: 44px;
    }

    /* ── Cake emoji button (fixed top-right) ── */
    .cake-btn {
        top: calc(16px + env(safe-area-inset-top)) !important;
        right: 16px !important;
        font-size: 32px !important;
    }

    /* ── Disable cursor glow on touch ── */
    .cursorGlow {
        display: none;
    }
}

/* =========================================
REAL ENVELOPE
========================================= */

.envelope {

    position: relative;

    cursor: pointer;

}

.envelope-lid {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 140px;

    background: linear-gradient(135deg, #ffd4df, #e8b2c3);

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

    transform-origin: top;

    transition: 1s;

    z-index: 10;

    border-radius: 15px 15px 0 0;

}

.envelope.open .envelope-lid {

    transform: rotateX(180deg);

}

.envelope-letter {

    transition: 1s;

}

.envelope.open .envelope-letter {

    transform: translateY(-120px);

}

.envelope::after {

    content: "Click the envelope 💌";

    position: absolute;

    bottom: -45px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 18px;

    opacity: .75;

}

/* ==========================================
PREMIUM LIGHTBOX
========================================== */

#lightbox {

    position: fixed;

    inset: 0;

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

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 999999;

    backdrop-filter: blur(15px);

}

#lightbox.show {

    display: flex;

    animation: fade .35s;

}

#lightbox img {

    max-width: 85%;

    max-height: 85%;

    border-radius: 25px;

    box-shadow: 0 30px 80px rgba(0, 0, 0, .65);

    animation: zoom .35s;

}

#closeLightbox {

    position: absolute;

    top: 30px;

    right: 45px;

    font-size: 55px;

    cursor: pointer;

}

#prevPhoto,

#nextPhoto {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 70px;

    height: 70px;

    border: none;

    border-radius: 50%;

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

    color: white;

    font-size: 30px;

    cursor: pointer;

    backdrop-filter: blur(15px);

}

#prevPhoto {

    left: 40px;

}

#nextPhoto {

    right: 40px;

}

@keyframes zoom {

    from {

        transform: scale(.8);

        opacity: 0;

    }

    to {

        transform: scale(1);

        opacity: 1;

    }

}

@keyframes fade {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

/* ==========================================
PREMIUM IPHONE
========================================== */

.iphone {

    width: 380px;

    height: 780px;

    border-radius: 55px;

    background: #000;

    overflow: hidden;

    position: relative;

    border: 10px solid #1d1d1d;

    box-shadow: 0 40px 120px rgba(0, 0, 0, .6);

}

.dynamic-island {

    position: absolute;

    top: 16px;

    left: 50%;

    transform: translateX(-50%);

    width: 135px;

    height: 34px;

    background: #000;

    border-radius: 40px;

    z-index: 20;

}

.phone-date {

    position: absolute;

    top: 135px;

    width: 100%;

    text-align: center;

    font-size: 22px;

    opacity: .85;

    letter-spacing: 1px;

    z-index: 5;

}




.notification-card:hover {

    transform: translateX(-50%) scale(1.05);

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

}

/* ==========================================
FINAL CELEBRATION
========================================== */

#celebration {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    text-align: center;

    padding: 80px 20px;

    position: relative;

    overflow: hidden;

}

#celebration h1 {

    font-size: 90px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 20px;

    animation: fadeUp 1.5s ease forwards;

    opacity: 0;

}

#celebration h2 {

    font-size: 40px;

    font-weight: 300;

    margin-bottom: 40px;

    opacity: 0;

    animation: fadeUp 1.8s ease forwards;

    animation-delay: .4s;

}

#celebration p {

    max-width: 700px;

    font-size: 22px;

    line-height: 2;

    opacity: 0;

    animation: fadeUp 2.2s ease forwards;

    animation-delay: .8s;

}

.firework {

    position: fixed;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 999999;

}

.sparkle {

    position: fixed;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: white;

    pointer-events: none;

    z-index: 99999;

}

@keyframes fadeUp {

    0% {

        opacity: 0;

        transform: translateY(50px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes explode {

    0% {

        transform: translate(0, 0) scale(1);

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

/* ==========================================
PREMIUM BACKGROUND PARTICLES
========================================== */

.particle {

    position: fixed;

    width: 8px;

    height: 8px;

    border-radius: 50%;

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

    pointer-events: none;

    z-index: -1;

    filter: blur(1px);

}

.cursorGlow {

    position: fixed;

    width: 35px;

    height: 35px;

    border-radius: 50%;

    background: rgba(255, 190, 220, .18);

    pointer-events: none;

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

    backdrop-filter: blur(5px);

    z-index: 999999;

    transition: transform .08s linear;

}

.gallery img {

    transition: .45s;

}

.gallery img:hover {

    transform: scale(1.08) rotate(.5deg);

    box-shadow: 0 25px 60px rgba(255, 255, 255, .12);

}


@keyframes floatCard {

    0% {

        transform: translateX(-50%) translateY(0);

    }

    50% {

        transform: translateX(-50%) translateY(-6px);

    }

    100% {

        transform: translateX(-50%) translateY(0);

    }

}

#musicToggle {

    animation: musicPulse 2s infinite;

}

@keyframes musicPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.1);

    }

    100% {

        transform: scale(1);

    }

}

@keyframes notificationDrop {

    0% {

        opacity: 0;

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

    }

    100% {

        opacity: 1;

        transform: translate(-50%, 0);

    }

}