/* =========================================================
   MAAMVERSE PRIVATE WISH
   SCROLLING EXPERIENCE V30
========================================================= */

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

*[hidden] {
    display: none !important;
}

:root {
    --bg: #050611;
    --bg-soft: #090b19;

    --panel: rgba(16, 18, 39, .76);
    --panel-deep: rgba(10, 12, 28, .88);

    --text: #f7f7ff;
    --muted: #a0a4b7;
    --muted-2: #60657a;

    --accent: #9c7cff;
    --accent-rgb: 156, 124, 255;

    --accent-2: #637fff;
    --accent-2-rgb: 99, 127, 255;

    --warm: #ffbc73;
    --success: #7ce9bd;

    --border: rgba(255, 255, 255, .09);

    --page-width: 1320px;
}


html {
    scroll-behavior: smooth;
}


body {
    min-width: 100%;
    min-height: 100%;

    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--bg);

    overflow-x: hidden;

    -webkit-tap-highlight-color: transparent;
}


button,
input {
    font: inherit;
}



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

#liveCanvas {
    position: fixed;
    inset: 0;

    z-index: -5;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(var(--accent-rgb), .10),
            transparent 39%
        ),
        linear-gradient(
            180deg,
            rgba(7, 8, 21, .40),
            rgba(3, 4, 12, .87)
        );
}


.ambient {
    position: fixed;

    z-index: -3;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(120px);

    opacity: .10;
}


.ambient-one {
    width: 420px;
    height: 420px;

    left: -170px;
    top: 18%;

    background: var(--accent);

    animation:
        ambientOne
        14s
        ease-in-out
        infinite
        alternate;
}


.ambient-two {
    width: 520px;
    height: 520px;

    right: -230px;
    top: 48%;

    background: var(--accent-2);

    animation:
        ambientTwo
        18s
        ease-in-out
        infinite
        alternate;
}


.ambient-three {
    width: 330px;
    height: 330px;

    left: 37%;
    bottom: -160px;

    background: #bc68ff;

    animation:
        ambientThree
        16s
        ease-in-out
        infinite
        alternate;
}


@keyframes ambientOne {
    to {
        transform:
            translate(100px, -70px)
            scale(1.18);
    }
}


@keyframes ambientTwo {
    to {
        transform:
            translate(-90px, 100px)
            scale(.88);
    }
}


@keyframes ambientThree {
    to {
        transform:
            translate(70px, -80px)
            scale(1.15);
    }
}



/* =========================================================
   SCROLL PROGRESS
========================================================= */

.scroll-progress {
    position: fixed;

    z-index: 2500;

    right: 10px;
    top: 50%;

    width: 3px;
    height: 145px;

    overflow: hidden;

    border-radius: 99px;

    transform:
        translateY(-50%);

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


.scroll-progress span {
    display: block;

    width: 100%;
    height: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            180deg,
            var(--accent),
            var(--accent-2)
        );

    box-shadow:
        0 0 14px
        rgba(var(--accent-rgb), .8);
}



/* =========================================================
   OPENING
========================================================= */

.wish-opening {
    position: fixed;
    inset: 0;

    z-index: 5000;

    display: grid;
    place-items: center;

    min-height: 100dvh;

    padding:
        max(
            24px,
            env(safe-area-inset-top)
        )
        18px
        max(
            24px,
            env(safe-area-inset-bottom)
        );

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(var(--accent-rgb), .12),
            transparent 32%
        ),
        rgba(4, 5, 15, .96);

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


.wish-opening.is-closing {
    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.04);
}


.opening-card {
    position: relative;

    z-index: 5;

    width:
        min(
            620px,
            100%
        );

    padding:
        clamp(
            26px,
            5vw,
            54px
        );

    text-align: center;

    border:
        1px solid
        rgba(var(--accent-rgb), .18);

    border-radius: 36px;

    background:
        linear-gradient(
            145deg,
            rgba(28, 30, 60, .82),
            rgba(12, 14, 31, .82)
        );

    backdrop-filter:
        blur(24px);

    box-shadow:
        0 40px 120px
        rgba(0, 0, 0, .42),
        inset 0 1px 0
        rgba(255, 255, 255, .04);
}


.opening-card::before {
    content: "";

    position: absolute;

    inset: -1px;

    z-index: -1;

    padding: 1px;

    border-radius: inherit;

    background:
        conic-gradient(
            from var(--opening-angle, 0deg),
            transparent 0deg,
            transparent 280deg,
            rgba(var(--accent-rgb), .8),
            rgba(255, 255, 255, .8),
            transparent 340deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    animation:
        openingBorder
        7s
        linear
        infinite;
}


@property --opening-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


@keyframes openingBorder {
    to {
        --opening-angle: 360deg;
    }
}


.opening-brand {
    width: max-content;

    max-width: 100%;

    margin:
        0 auto
        28px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: white;

    text-decoration: none;

    text-align: left;
}


.opening-brand img {
    width: 47px;
    height: 47px;

    object-fit: contain;
}


.opening-brand div {
    display: flex;
    flex-direction: column;
}


.opening-brand strong {
    font-size: 17px;

    letter-spacing: 3px;
}


.opening-brand span {
    margin-top: 2px;

    color: #7a7f94;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 3px;
}


.opening-icon {
    width: 100px;
    height: 100px;

    margin:
        0 auto
        26px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(var(--accent-rgb), .25);

    border-radius: 31px;

    font-size: 44px;

    background:
        radial-gradient(
            circle,
            rgba(var(--accent-rgb), .19),
            rgba(255, 255, 255, .02)
        );

    box-shadow:
        0 0 60px
        rgba(var(--accent-rgb), .12);

    animation:
        openingIconFloat
        3.4s
        ease-in-out
        infinite;
}


@keyframes openingIconFloat {
    50% {
        transform:
            translateY(-9px)
            rotate(2deg);

        box-shadow:
            0 0 80px
            rgba(var(--accent-rgb), .24);
    }
}


.opening-kicker,
.section-kicker,
.hero-kicker {
    color: var(--accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 4px;
}


.opening-card h1 {
    max-width: 520px;

    margin:
        18px auto;

    font-size:
        clamp(
            38px,
            6vw,
            66px
        );

    line-height: 1.02;

    letter-spacing: -3px;
}


.opening-card p {
    max-width: 430px;

    margin:
        0 auto;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.7;
}


.open-wish-button {
    width: 100%;

    min-height: 61px;

    margin-top: 31px;

    padding:
        0 23px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-2)
        );

    font-weight: 800;

    letter-spacing: .8px;

    cursor: pointer;

    box-shadow:
        0 18px 50px
        rgba(var(--accent-rgb), .23);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.open-wish-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 25px 65px
        rgba(var(--accent-rgb), .34);
}


.opening-secure {
    margin-top: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: #696f83;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;
}


.opening-secure i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 12px
        var(--success);
}


.opening-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(var(--accent-rgb), .12);

    border-radius: 50%;

    pointer-events: none;
}


.orbit-a {
    width: 780px;
    height: 340px;

    animation:
        openingOrbitA
        14s
        linear
        infinite;
}


.orbit-b {
    width: 440px;
    height: 760px;

    animation:
        openingOrbitB
        17s
        linear
        infinite;
}


@keyframes openingOrbitA {
    from {
        transform:
            translate(-50%, -50%)
            rotate(12deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(372deg);
    }
}


@keyframes openingOrbitB {
    from {
        transform:
            translate(-50%, -50%)
            rotate(38deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(-322deg);
    }
}



/* =========================================================
   HEADER
========================================================= */

.wish-view-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    padding:
        max(
            11px,
            env(safe-area-inset-top)
        )
        clamp(
            18px,
            4vw,
            64px
        )
        10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        linear-gradient(
            180deg,
            rgba(5, 6, 17, .93),
            rgba(5, 6, 17, .76),
            rgba(5, 6, 17, 0)
        );

    backdrop-filter:
        blur(13px);
}


.wish-view-brand {
    display: flex;

    align-items: center;

    gap: 10px;

    color: white;

    text-decoration: none;
}


.wish-view-brand img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}


.wish-view-brand div {
    display: flex;

    flex-direction: column;
}


.wish-view-brand strong {
    font-size: 12px;

    letter-spacing: 2.7px;
}


.wish-view-brand span {
    color: #676c80;

    font-size: 6px;

    letter-spacing: 2.3px;

    font-weight: 800;
}


.wish-logout-button {
    min-height: 42px;

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    color: #b5b9ca;

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

    cursor: pointer;
}



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

.wish-hero {
    position: relative;

    min-height:
        calc(
            100svh - 66px
        );

    display: grid;

    place-items: center;

    padding:
        70px 20px
        100px;

    overflow: hidden;
}


.hero-light {
    position: absolute;

    left: 50%;
    top: 48%;

    width: 620px;
    height: 620px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--accent-rgb), .13),
            transparent 65%
        );

    filter: blur(10px);

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


@keyframes heroLight {
    50% {
        transform:
            translate(-50%, -50%)
            scale(1.15);

        opacity: .75;
    }
}


.hero-content {
    position: relative;

    z-index: 5;

    width:
        min(
            1050px,
            100%
        );

    text-align: center;
}


.hero-icon {
    margin:
        24px auto
        23px;

    font-size: 60px;

    filter:
        drop-shadow(
            0 0 28px
            rgba(var(--accent-rgb), .35)
        );

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


@keyframes heroIconFloat {
    50% {
        transform:
            translateY(-10px)
            rotate(-3deg);
    }
}


.hero-for {
    color: #555a6f;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 4px;
}


.hero-content > h1 {
    margin:
        11px auto
        20px;

    font-size:
        clamp(
            52px,
            9vw,
            110px
        );

    line-height: .95;

    letter-spacing: -6px;

    background:
        linear-gradient(
            90deg,
            #fff,
            #ddd5ff,
            var(--accent)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color: transparent;
}


.hero-divider {
    width:
        min(
            520px,
            80%
        );

    margin:
        0 auto
        20px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.hero-divider span {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--accent-rgb), .45)
        );
}


.hero-divider span:last-child {
    transform:
        scaleX(-1);
}


.hero-divider i {
    color: var(--accent);

    font-style: normal;
}


.hero-content h2 {
    font-size:
        clamp(
            30px,
            5vw,
            58px
        );

    line-height: 1.08;

    letter-spacing: -2px;
}


.hero-subtitle {
    margin-top: 19px;

    color: var(--muted);

    font-size: 15px;
}


.hero-sender {
    margin-top: 27px;

    color: #72778c;

    font-size: 12px;
}


.hero-sender strong {
    margin-left: 5px;

    color: var(--accent);
}


.scroll-cue {
    margin-top: 65px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    color: #52576a;

    font-size: 7px;

    letter-spacing: 2.5px;
}


.scroll-cue i {
    font-style: normal;

    color: var(--accent);

    animation:
        scrollCue
        1.5s
        ease-in-out
        infinite;
}


@keyframes scrollCue {
    50% {
        transform:
            translateY(7px);
    }
}



/* =========================================================
   COMMON SECTION
========================================================= */

.wish-section {
    position: relative;

    width:
        min(
            var(--page-width),
            calc(100% - 42px)
        );

    min-height: 75svh;

    margin:
        0 auto;

    padding:
        110px 0;

    display: grid;

    align-items: center;
}


.section-number {
    position: absolute;

    left: 0;
    top: 65px;

    color: #42475a;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 3px;
}


.reveal-section {
    opacity: 0;

    transform:
        translateY(45px);

    filter:
        blur(7px);

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


.reveal-section.is-visible {
    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}



/* =========================================================
   LIVE CARDS
========================================================= */

.live-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(var(--accent-rgb), .18);

    background:
        linear-gradient(
            145deg,
            rgba(25, 27, 55, .75),
            rgba(10, 12, 29, .88)
        );

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .30);
}


.live-card::before {
    content: "";

    position: absolute;

    width: 45%;
    height: 220%;

    left: -70%;
    top: -60%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .05),
            rgba(var(--accent-rgb), .13),
            transparent
        );

    transform:
        rotate(19deg);

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


@keyframes cardSweep {
    0%,
    70% {
        left: -70%;
    }

    100% {
        left: 130%;
    }
}



/* =========================================================
   MEMORY
========================================================= */

.memory-layout {
    display: grid;

    grid-template-columns:
        .72fr
        1.28fr;

    align-items: center;

    gap:
        clamp(
            35px,
            6vw,
            85px
        );
}


.memory-copy h2 {
    margin:
        17px 0;

    font-size:
        clamp(
            39px,
            5vw,
            67px
        );

    line-height: 1.03;

    letter-spacing: -3px;
}


.memory-copy > p {
    max-width: 480px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.75;
}


.memory-status {
    margin-top: 30px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #60657a;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;
}


.memory-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--warm);

    box-shadow:
        0 0 13px
        var(--warm);
}


.memory-frame {
    position: relative;

    padding: 12px;

    border:
        1px solid
        rgba(var(--accent-rgb), .27);

    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--accent-rgb), .12),
            rgba(255, 255, 255, .012)
        );

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

    transform:
        perspective(1200px)
        rotateY(-2deg);

    transition:
        transform .5s ease;
}


.memory-frame:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        translateY(-5px);
}


.memory-photo-stage {
    position: relative;

    width: 100%;

    height:
        clamp(
            380px,
            58vw,
            610px
        );

    max-height: 62svh;

    overflow: hidden;

    display: grid;

    place-items: center;

    border-radius: 23px;

    background: #070812;

    isolation: isolate;
}


.memory-backdrop {
    position: absolute;

    z-index: 0;

    inset: -35px;

    width:
        calc(
            100% + 70px
        );

    height:
        calc(
            100% + 70px
        );

    object-fit: cover;

    filter:
        blur(28px)
        brightness(.46)
        saturate(1.18);

    transform:
        scale(1.07);

    opacity: .9;
}


.memory-main-image {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    filter:
        brightness(.83);

    transform:
        scale(1.035);

    transition:
        transform 1.4s ease,
        filter 1.4s ease;
}


.memory-section.is-visible
.memory-main-image {
    transform:
        scale(1);

    filter:
        brightness(1);
}


.memory-photo-glass {
    position: absolute;

    z-index: 3;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .06),
            transparent 28%,
            transparent 70%,
            rgba(var(--accent-rgb), .06)
        );
}


.memory-scan {
    position: absolute;

    z-index: 4;

    top: -30%;
    bottom: -30%;

    left: -35%;

    width: 22%;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .14),
            rgba(var(--accent-rgb), .18),
            transparent
        );

    transform:
        skewX(-12deg);
}


.memory-section.is-visible
.memory-scan {
    animation:
        memoryScan
        1.4s
        .35s
        ease
        forwards;
}


@keyframes memoryScan {
    20% {
        opacity: 1;
    }

    100% {
        left: 125%;

        opacity: 0;
    }
}


.memory-meta {
    padding:
        13px 8px
        4px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.memory-meta span,
.memory-meta strong {
    color: #666b80;

    font-size: 7px;

    letter-spacing: 2px;
}


.memory-corner {
    position: absolute;

    z-index: 10;

    width: 36px;
    height: 36px;
}


.corner-tl {
    left: -3px;
    top: -3px;

    border-top:
        2px solid
        var(--accent);

    border-left:
        2px solid
        var(--accent);
}


.corner-tr {
    right: -3px;
    top: -3px;

    border-top:
        2px solid
        var(--accent);

    border-right:
        2px solid
        var(--accent);
}


.corner-bl {
    left: -3px;
    bottom: -3px;

    border-bottom:
        2px solid
        var(--accent);

    border-left:
        2px solid
        var(--accent);
}


.corner-br {
    right: -3px;
    bottom: -3px;

    border-bottom:
        2px solid
        var(--accent);

    border-right:
        2px solid
        var(--accent);
}


.image-error {
    margin-top: 10px;

    color: #ff96aa;
}



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

.message-card {
    width:
        min(
            1050px,
            100%
        );

    margin: auto;

    padding:
        clamp(
            35px,
            6vw,
            75px
        );

    border-radius: 35px;

    text-align: center;
}


.message-heart {
    margin:
        28px auto;

    font-size: 43px;

    animation:
        heartBeat
        2.2s
        ease-in-out
        infinite;
}


@keyframes heartBeat {
    50% {
        transform:
            scale(1.13);

        filter:
            drop-shadow(
                0 0 18px
                rgba(255, 85, 126, .30)
            );
    }
}


.wish-message {
    max-width: 850px;

    margin: auto;

    color: #e0e1eb;

    font-size:
        clamp(
            20px,
            2.5vw,
            31px
        );

    line-height: 1.65;

    white-space: pre-line;

    overflow-wrap: anywhere;
}


.message-signature {
    margin-top: 40px;
}


.message-signature span {
    display: block;

    color: #595e73;

    font-size: 7px;

    letter-spacing: 3px;
}


.message-signature strong {
    display: block;

    margin-top: 7px;

    color: var(--accent);

    font-size: 15px;
}



/* =========================================================
   BOND
========================================================= */

.bond-card {
    width:
        min(
            960px,
            100%
        );

    margin: auto;

    padding:
        clamp(
            38px,
            6vw,
            74px
        );

    text-align: center;
}


.bond-symbol-row {
    width:
        min(
            580px,
            100%
        );

    margin:
        0 auto
        43px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;
}


.bond-symbol {
    width: 72px;
    height: 72px;

    flex:
        0 0 72px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(var(--accent-rgb), .18);

    border-radius: 23px;

    font-size: 31px;

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

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


.bond-symbol:last-child {
    animation-delay: -.9s;
}


@keyframes bondFloat {
    50% {
        transform:
            translateY(-7px);
    }
}


.bond-line {
    flex: 1;

    display: flex;

    align-items: center;
}


.bond-line span {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--accent-rgb), .55)
        );
}


.bond-line span:last-child {
    transform:
        scaleX(-1);
}


.bond-line i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 19px
        var(--accent);

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


@keyframes bondPulse {
    50% {
        transform:
            scale(1.8);

        opacity: .55;
    }
}


.bond-card h2 {
    max-width: 810px;

    margin:
        18px auto;

    font-size:
        clamp(
            37px,
            5.2vw,
            68px
        );

    line-height: 1.04;

    letter-spacing: -3px;
}


.bond-card > p {
    max-width: 690px;

    margin: auto;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.75;
}



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

.surprise-card {
    width:
        min(
            1000px,
            100%
        );

    min-height: 560px;

    margin: auto;

    padding:
        clamp(
            38px,
            6vw,
            72px
        );

    display: grid;

    place-items: center;

    border-radius: 36px;

    text-align: center;
}


.surprise-locked,
.surprise-revealed {
    width: 100%;
}


.secret-ring {
    position: relative;

    width: 120px;
    height: 120px;

    margin:
        0 auto
        30px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(var(--accent-rgb), .35);

    border-radius: 50%;

    font-size: 35px;

    color: var(--accent);

    box-shadow:
        0 0 70px
        rgba(var(--accent-rgb), .12);
}


.secret-ring::before,
.secret-ring::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(var(--accent-rgb), .17);

    border-radius: 50%;
}


.secret-ring::before {
    inset: -15px;

    animation:
        secretOrbit
        4s
        linear
        infinite;
}


.secret-ring::after {
    inset: -29px;

    animation:
        secretOrbit
        6s
        linear
        infinite
        reverse;
}


@keyframes secretOrbit {
    to {
        transform:
            rotate(360deg)
            scale(.98);
    }
}


.surprise-locked h2 {
    max-width: 720px;

    margin:
        17px auto;

    font-size:
        clamp(
            34px,
            5vw,
            63px
        );

    line-height: 1.05;

    letter-spacing: -2.5px;
}


.surprise-locked > p {
    color: var(--muted);

    line-height: 1.65;
}


.reveal-surprise-button {
    min-width: 240px;

    min-height: 56px;

    margin-top: 29px;

    padding:
        0 23px;

    border: 0;

    border-radius: 17px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-2)
        );

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 16px 40px
        rgba(var(--accent-rgb), .20);
}


.surprise-revealed {
    animation:
        revealSecret
        .95s
        cubic-bezier(.2, .8, .2, 1)
        both;
}


@keyframes revealSecret {
    from {
        opacity: 0;

        transform:
            scale(.9)
            translateY(25px);

        filter:
            blur(12px);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);
    }
}


.surprise-heart {
    margin:
        28px auto;

    font-size: 50px;

    animation:
        secretHeart
        2s
        ease-in-out
        infinite;
}


@keyframes secretHeart {
    50% {
        transform:
            translateY(-7px)
            scale(1.10);
    }
}


.surprise-message {
    max-width: 800px;

    margin: auto;

    color: #e2e3ee;

    font-size:
        clamp(
            20px,
            2.6vw,
            31px
        );

    line-height: 1.65;

    white-space: pre-line;

    overflow-wrap: anywhere;
}



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

.music-card {
    width:
        min(
            1080px,
            100%
        );

    margin: auto;

    padding:
        clamp(
            32px,
            5vw,
            60px
        );

    display: grid;

    grid-template-columns:
        .78fr
        1.22fr;

    align-items: center;

    gap: 55px;

    border-radius: 35px;
}


.music-visual {
    position: relative;

    min-height: 280px;

    display: grid;

    place-items: center;
}


#musicVisualizer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.music-main-button {
    position: relative;

    z-index: 4;

    width: 104px;
    height: 104px;

    border:
        1px solid
        rgba(var(--accent-rgb), .38);

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle,
            rgba(var(--accent-rgb), .28),
            rgba(7, 8, 20, .94) 67%
        );

    font-size: 25px;

    cursor: pointer;

    box-shadow:
        0 0 70px
        rgba(var(--accent-rgb), .18);
}


.music-card.playing
.music-main-button {
    animation:
        musicCore
        1.3s
        ease-in-out
        infinite;
}


@keyframes musicCore {
    50% {
        transform:
            scale(1.07);

        box-shadow:
            0 0 95px
            rgba(var(--accent-rgb), .34);
    }
}


.music-copy h2 {
    max-width: 600px;

    margin:
        18px 0;

    font-size:
        clamp(
            35px,
            4.5vw,
            60px
        );

    line-height: 1.05;

    letter-spacing: -2.5px;
}


.music-copy > p {
    color: var(--muted);

    font-size: 15px;

    line-height: 1.7;
}


.music-state {
    display: block;

    margin-top: 27px;

    color: var(--success);

    font-size: 8px;

    letter-spacing: 2px;
}



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

.wish-final {
    position: relative;

    min-height: 100svh;

    padding:
        110px 22px;

    display: grid;

    place-items: center;

    overflow: hidden;

    text-align: center;
}


.wish-final::before {
    content: "";

    position: absolute;

    width: 780px;
    height: 780px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--accent-rgb), .12),
            transparent 66%
        );

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


@keyframes finaleGlow {
    50% {
        transform:
            translate(-50%, -50%)
            scale(1.16);
    }
}


.final-content {
    position: relative;

    z-index: 5;

    width:
        min(
            900px,
            100%
        );
}


.final-icon {
    margin:
        25px auto;

    font-size: 64px;

    animation:
        finalIconFloat
        3.2s
        ease-in-out
        infinite;
}


@keyframes finalIconFloat {
    50% {
        transform:
            translateY(-9px);
    }
}


.final-content h2 {
    font-size:
        clamp(
            46px,
            7vw,
            89px
        );

    line-height: .98;

    letter-spacing: -4px;
}


.final-content > p {
    max-width: 720px;

    margin:
        27px auto;

    color: var(--muted);

    font-size:
        clamp(
            15px,
            1.7vw,
            19px
        );

    line-height: 1.75;
}


.final-name,
.final-signature {
    margin-top: 28px;
}


.final-name span,
.final-signature span {
    display: block;

    color: #555a6f;

    font-size: 7px;

    letter-spacing: 3px;
}


.final-name strong {
    display: block;

    margin-top: 6px;

    font-size:
        clamp(
            24px,
            4vw,
            40px
        );
}


.final-signature strong {
    display: block;

    margin-top: 7px;

    color: var(--accent);

    font-size: 17px;
}


.final-line {
    width: 190px;
    height: 1px;

    margin:
        28px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent),
            transparent
        );
}


.final-brand {
    margin-top: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #6b7084;

    font-size: 11px;
}


.final-brand img {
    width: 40px;
    height: 40px;

    object-fit: contain;
}


.final-brand strong {
    color: #a5a9b8;
}


.final-particles i {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 15px
        var(--accent);

    animation:
        finalParticle
        6s
        ease-in-out
        infinite;
}


.final-particles i:nth-child(1) {
    left: 15%;
    top: 25%;
}


.final-particles i:nth-child(2) {
    left: 29%;
    top: 62%;

    animation-delay: -1s;
}


.final-particles i:nth-child(3) {
    right: 14%;
    top: 30%;

    animation-delay: -2s;
}


.final-particles i:nth-child(4) {
    right: 29%;
    bottom: 22%;

    animation-delay: -3s;
}


.final-particles i:nth-child(5) {
    left: 47%;
    top: 16%;

    animation-delay: -4s;
}


.final-particles i:nth-child(6) {
    right: 42%;
    bottom: 14%;

    animation-delay: -5s;
}


@keyframes finalParticle {
    50% {
        transform:
            translateY(-25px)
            scale(1.8);

        opacity: .35;
    }
}



/* =========================================================
   FOOTER
========================================================= */

.wish-footer {
    padding:
        28px 20px
        max(
            28px,
            env(safe-area-inset-bottom)
        );

    text-align: center;

    color: #404558;

    font-size: 7px;

    letter-spacing: 3px;
}



/* =========================================================
   FLOATING MUSIC
========================================================= */

.floating-music {
    position: fixed;

    z-index: 1800;

    right:
        max(
            18px,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            18px,
            env(safe-area-inset-bottom)
        );
}


.floating-music button {
    min-height: 52px;

    padding:
        7px 14px
        7px 8px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(var(--accent-rgb), .20);

    border-radius: 18px;

    color: white;

    background:
        rgba(
            9,
            10,
            25,
            .84
        );

    backdrop-filter:
        blur(18px);

    cursor: pointer;

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


.floating-music-icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-2)
        );
}


.floating-music.playing
.floating-music-icon {
    animation:
        floatingMusicPulse
        1.3s
        ease-in-out
        infinite;
}


@keyframes floatingMusicPulse {
    50% {
        transform:
            scale(1.08);

        box-shadow:
            0 0 24px
            rgba(var(--accent-rgb), .55);
    }
}


.floating-music-info {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.floating-music-info small {
    color: #676c81;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 2px;
}


.floating-music-info strong {
    margin-top: 2px;

    color: #d5d7e3;

    font-size: 10px;
}



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

@media (max-width: 720px) {

    .scroll-progress {
        right: 4px;

        height: 110px;
    }


    .opening-card {
        border-radius: 27px;

        padding:
            28px 21px;
    }


    .opening-brand {
        margin-bottom: 20px;
    }


    .opening-brand img {
        width: 40px;
        height: 40px;
    }


    .opening-brand strong {
        font-size: 13px;
    }


    .opening-icon {
        width: 82px;
        height: 82px;

        border-radius: 26px;

        font-size: 36px;
    }


    .opening-card h1 {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            );

        letter-spacing: -2px;
    }


    .opening-card p {
        font-size: 13px;

        line-height: 1.55;
    }


    .open-wish-button {
        min-height: 55px;

        font-size: 12px;
    }


    .opening-orbit {
        opacity: .55;
    }


    .wish-view-header {
        padding:
            max(
                7px,
                env(safe-area-inset-top)
            )
            10px
            5px;
    }


    .wish-view-brand img {
        width: 35px;
        height: 35px;
    }


    .wish-view-brand strong {
        font-size: 9px;
    }


    .wish-view-brand span {
        font-size: 5px;
    }


    .wish-logout-button {
        min-height: 35px;

        padding:
            0 10px;

        font-size: 10px;
    }


    .wish-hero {
        min-height:
            calc(
                100svh - 52px
            );

        padding:
            50px 14px
            70px;
    }


    .hero-icon {
        margin:
            19px auto;

        font-size: 47px;
    }


    .hero-content > h1 {
        font-size:
            clamp(
                48px,
                15vw,
                72px
            );

        letter-spacing: -3px;
    }


    .hero-content h2 {
        font-size:
            clamp(
                27px,
                8vw,
                39px
            );

        letter-spacing: -1.3px;
    }


    .hero-subtitle {
        font-size: 12px;

        line-height: 1.5;
    }


    .hero-sender {
        font-size: 11px;

        line-height: 1.6;
    }


    .scroll-cue {
        margin-top: 45px;
    }


    .wish-section {
        width:
            calc(
                100% - 26px
            );

        min-height: auto;

        padding:
            90px 0;
    }


    .section-number {
        top: 51px;

        font-size: 6px;
    }


    .memory-layout {
        grid-template-columns:
            1fr;

        gap: 28px;
    }


    .memory-copy {
        text-align: center;
    }


    .memory-copy h2 {
        margin:
            12px 0;

        font-size:
            clamp(
                34px,
                10vw,
                48px
            );

        letter-spacing: -1.7px;
    }


    .memory-copy > p {
        margin: auto;

        font-size: 13px;

        line-height: 1.55;
    }


    .memory-status {
        justify-content: center;

        margin-top: 19px;
    }


    .memory-frame {
        padding: 7px;

        border-radius: 23px;

        transform: none;
    }


    .memory-frame:hover {
        transform: none;
    }


    .memory-photo-stage {
        height:
            min(
                62svh,
                530px
            );

        min-height: 300px;

        border-radius: 18px;
    }


    .memory-backdrop {
        inset: -24px;

        width:
            calc(
                100% + 48px
            );

        height:
            calc(
                100% + 48px
            );

        filter:
            blur(22px)
            brightness(.44)
            saturate(1.15);
    }


    .memory-meta {
        padding:
            9px 5px
            2px;
    }


    .memory-meta span,
    .memory-meta strong {
        font-size: 5px;

        letter-spacing: 1px;
    }


    .message-card,
    .surprise-card {
        border-radius: 25px;

        padding:
            35px 19px;
    }


    .wish-message,
    .surprise-message {
        font-size:
            clamp(
                18px,
                5.4vw,
                24px
            );

        line-height: 1.55;
    }


    .bond-card {
        padding:
            28px 8px;
    }


    .bond-symbol-row {
        gap: 12px;

        margin-bottom: 30px;
    }


    .bond-symbol {
        width: 55px;
        height: 55px;

        flex-basis: 55px;

        border-radius: 18px;

        font-size: 25px;
    }


    .bond-card h2 {
        font-size:
            clamp(
                34px,
                10vw,
                47px
            );

        letter-spacing: -1.8px;
    }


    .bond-card > p {
        font-size: 13px;

        line-height: 1.6;
    }


    .surprise-card {
        min-height: 500px;
    }


    .secret-ring {
        width: 95px;
        height: 95px;

        font-size: 29px;
    }


    .surprise-locked h2 {
        font-size:
            clamp(
                32px,
                9vw,
                45px
            );

        letter-spacing: -1.5px;
    }


    .music-card {
        grid-template-columns:
            1fr;

        gap: 20px;

        border-radius: 25px;

        text-align: center;

        padding:
            30px 18px;
    }


    .music-visual {
        min-height: 220px;
    }


    .music-main-button {
        width: 88px;
        height: 88px;
    }


    .music-copy h2 {
        margin:
            12px auto;

        font-size:
            clamp(
                31px,
                9vw,
                43px
            );

        letter-spacing: -1.5px;
    }


    .music-copy > p {
        font-size: 12px;

        line-height: 1.55;
    }


    .music-state {
        margin-top: 18px;
    }


    .wish-final {
        min-height: 90svh;

        padding:
            90px 18px;
    }


    .final-icon {
        font-size: 50px;
    }


    .final-content h2 {
        font-size:
            clamp(
                42px,
                12vw,
                62px
            );

        letter-spacing: -2.5px;
    }


    .final-content > p {
        font-size: 13px;

        line-height: 1.6;
    }


    .floating-music {
        right: 9px;

        bottom:
            max(
                9px,
                env(safe-area-inset-bottom)
            );
    }


    .floating-music button {
        width: 45px;
        height: 45px;

        min-height: 45px;

        padding: 5px;

        border-radius: 15px;
    }


    .floating-music-icon {
        width: 33px;
        height: 33px;
    }


    .floating-music-info {
        display: none;
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }

}/* =========================================================
   MAAMVERSE — CINEMATIC OPENING V31
========================================================= */

.cinematic-opening {
    position: fixed;
    inset: 0;

    z-index: 5000;

    width: 100%;
    height: 100dvh;
    min-height: 100dvh;

    display: grid;
    place-items: center;

    padding:
        max(18px, env(safe-area-inset-top))
        20px
        max(18px, env(safe-area-inset-bottom));

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(154, 124, 255, .12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #080919 0%,
            #03040c 100%
        );
}


/* remove old card feel */

.cinematic-opening .opening-card {
    display: none;
}


/* =========================================================
   AURORA
========================================================= */

.opening-aurora {
    position: absolute;

    width: 48vw;
    height: 48vw;

    min-width: 420px;
    min-height: 420px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    opacity: .17;
}


.aurora-one {
    left: -16vw;
    top: -20vw;

    background:
        rgba(129, 92, 255, .78);

    animation:
        openingAuroraOne
        13s
        ease-in-out
        infinite
        alternate;
}


.aurora-two {
    right: -18vw;
    bottom: -25vw;

    background:
        rgba(67, 111, 255, .68);

    animation:
        openingAuroraTwo
        16s
        ease-in-out
        infinite
        alternate;
}


@keyframes openingAuroraOne {

    to {
        transform:
            translate(15vw, 11vh)
            scale(1.18);
    }

}


@keyframes openingAuroraTwo {

    to {
        transform:
            translate(-13vw, -10vh)
            scale(.92);
    }

}


/* =========================================================
   SUBTLE GRID
========================================================= */

.opening-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .11;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 74%
        );
}


/* =========================================================
   BRAND
========================================================= */

.cinematic-brand {
    position: absolute;

    top:
        max(
            22px,
            env(safe-area-inset-top)
        );

    left:
        max(
            28px,
            env(safe-area-inset-left)
        );

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 10px;

    color: white;

    text-decoration: none;

    opacity: 0;

    animation:
        cinematicFadeDown
        .8s
        .15s
        ease
        forwards;
}


.cinematic-brand img {
    width: 46px;
    height: 46px;

    object-fit: contain;
}


.cinematic-brand div {
    display: flex;

    flex-direction: column;
}


.cinematic-brand strong {
    font-size: 14px;

    letter-spacing: 3px;
}


.cinematic-brand span {
    margin-top: 2px;

    color: #686e83;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 3px;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.cinematic-opening-content {
    position: relative;
    z-index: 10;

    width:
        min(
            920px,
            100%
        );

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================================
   GIFT UNIVERSE
========================================================= */

.gift-universe {
    position: relative;

    width: 190px;
    height: 190px;

    margin-bottom: 8px;

    display: grid;

    place-items: center;

    opacity: 0;

    transform:
        scale(.72);

    animation:
        giftUniverseEnter
        1s
        .25s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


@keyframes giftUniverseEnter {

    to {
        opacity: 1;

        transform:
            scale(1);
    }

}


.gift-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(154,124,255,.22);

    border-radius: 50%;
}


.gift-orbit.orbit-one {
    width: 170px;
    height: 95px;

    animation:
        giftOrbitOne
        7s
        linear
        infinite;
}


.gift-orbit.orbit-two {
    width: 118px;
    height: 180px;

    animation:
        giftOrbitTwo
        9s
        linear
        infinite;
}


.gift-orbit.orbit-three {
    width: 145px;
    height: 145px;

    animation:
        giftOrbitThree
        12s
        linear
        infinite;
}


@keyframes giftOrbitOne {

    from {
        transform:
            translate(-50%,-50%)
            rotate(14deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(374deg);
    }

}


@keyframes giftOrbitTwo {

    from {
        transform:
            translate(-50%,-50%)
            rotate(52deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(-308deg);
    }

}


@keyframes giftOrbitThree {

    from {
        transform:
            translate(-50%,-50%)
            rotate(-28deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(332deg);
    }

}


/* moving orbit points */

.gift-star {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #a68aff;

    box-shadow:
        0 0 18px
        rgba(166,138,255,.95);
}


.star-one {
    animation:
        giftStarOne
        4.5s
        linear
        infinite;
}


.star-two {
    width: 5px;
    height: 5px;

    animation:
        giftStarTwo
        6.2s
        linear
        infinite;
}


.star-three {
    width: 4px;
    height: 4px;

    background:
        #fff;

    animation:
        giftStarThree
        7.4s
        linear
        infinite;
}


@keyframes giftStarOne {

    from {
        transform:
            rotate(0deg)
            translateX(83px);
    }

    to {
        transform:
            rotate(360deg)
            translateX(83px);
    }

}


@keyframes giftStarTwo {

    from {
        transform:
            rotate(150deg)
            translateX(67px);
    }

    to {
        transform:
            rotate(510deg)
            translateX(67px);
    }

}


@keyframes giftStarThree {

    from {
        transform:
            rotate(240deg)
            translateX(90px);
    }

    to {
        transform:
            rotate(600deg)
            translateX(90px);
    }

}


/* gift itself */

.cinematic-gift {
    position: relative;
    z-index: 5;

    width: 94px;
    height: 94px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(154,124,255,.33);

    border-radius: 30px;

    font-size: 42px;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(154,124,255,.20),
            rgba(57,72,154,.08)
        ),
        rgba(10,12,28,.92);

    box-shadow:
        0 0 75px
        rgba(154,124,255,.16);

    animation:
        cinematicGiftFloat
        3.2s
        ease-in-out
        infinite;
}


@keyframes cinematicGiftFloat {

    50% {
        transform:
            translateY(-8px)
            rotate(2deg);

        box-shadow:
            0 0 95px
            rgba(154,124,255,.30);
    }

}


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

.cinematic-kicker {
    display: block;

    color:
        #a487ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 5px;

    opacity: 0;

    animation:
        cinematicFadeUp
        .75s
        .72s
        ease
        forwards;
}


.cinematic-title {
    max-width: 850px;

    margin:
        18px auto
        15px;

    font-size:
        clamp(
            42px,
            6.2vw,
            76px
        );

    line-height: .98;

    letter-spacing: -4px;

    text-wrap: balance;

    opacity: 0;

    transform:
        translateY(28px);

    filter:
        blur(10px);

    animation:
        cinematicTitleEnter
        1s
        .88s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


@keyframes cinematicTitleEnter {

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }

}


.cinematic-description {
    max-width: 540px;

    margin: 0 auto;

    color:
        #9ba0b4;

    font-size: 15px;

    line-height: 1.6;

    opacity: 0;

    animation:
        cinematicFadeUp
        .8s
        1.15s
        ease
        forwards;
}


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

.cinematic-open-button {
    position: relative;

    width:
        min(
            390px,
            100%
        );

    min-height: 60px;

    margin-top: 29px;

    padding:
        0 20px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 19px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #8f6fff,
            #567dff
        );

    font-weight: 800;

    letter-spacing: .8px;

    cursor: pointer;

    box-shadow:
        0 18px 50px
        rgba(113,91,255,.24);

    opacity: 0;

    animation:
        cinematicFadeUp
        .8s
        1.38s
        ease
        forwards;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.cinematic-open-button::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -45%;

    width: 28%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.42),
            transparent
        );

    transform:
        rotate(22deg);

    animation:
        buttonLightPass
        4.5s
        2s
        ease-in-out
        infinite;
}


@keyframes buttonLightPass {

    0%,
    65% {
        left: -45%;
    }

    100% {
        left: 135%;
    }

}


.cinematic-open-button:hover {
    transform:
        translateY(-4px);

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


.cinematic-open-button:active {
    transform:
        scale(.98);
}


/* =========================================================
   STATUS
========================================================= */

.cinematic-status {
    margin-top: 19px;

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        #62677b;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2.4px;

    opacity: 0;

    animation:
        cinematicFadeUp
        .8s
        1.62s
        ease
        forwards;
}


.cinematic-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #79e8bb;

    box-shadow:
        0 0 14px
        #79e8bb;

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


@keyframes accessPulse {

    50% {
        opacity: .38;

        transform:
            scale(1.55);
    }

}


/* =========================================================
   PARTICLES
========================================================= */

.opening-particles i {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(220,215,255,.75);

    box-shadow:
        0 0 12px
        rgba(154,124,255,.65);

    animation:
        openingParticle
        6s
        ease-in-out
        infinite;
}


.opening-particles i:nth-child(1) {
    left: 10%;
    top: 22%;
}


.opening-particles i:nth-child(2) {
    left: 18%;
    top: 67%;

    animation-delay: -1s;
}


.opening-particles i:nth-child(3) {
    left: 31%;
    top: 13%;

    animation-delay: -2s;
}


.opening-particles i:nth-child(4) {
    right: 11%;
    top: 23%;

    animation-delay: -3s;
}


.opening-particles i:nth-child(5) {
    right: 18%;
    top: 69%;

    animation-delay: -4s;
}


.opening-particles i:nth-child(6) {
    right: 30%;
    top: 14%;

    animation-delay: -5s;
}


.opening-particles i:nth-child(7) {
    left: 43%;
    bottom: 8%;

    animation-delay: -2.4s;
}


.opening-particles i:nth-child(8) {
    right: 43%;
    top: 9%;

    animation-delay: -3.5s;
}


@keyframes openingParticle {

    50% {
        transform:
            translateY(-25px)
            scale(1.7);

        opacity: .25;
    }

}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.opening-bottom-note {
    position: absolute;

    left: 50%;

    bottom:
        max(
            16px,
            env(safe-area-inset-bottom)
        );

    transform:
        translateX(-50%);

    color:
        #3f4457;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 3px;

    white-space: nowrap;
}


/* =========================================================
   OPEN TRANSITION
========================================================= */

.opening-flash {
    position: absolute;
    inset: 0;

    z-index: 100;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.95),
            rgba(154,124,255,.38) 18%,
            transparent 55%
        );
}


.cinematic-opening.is-closing
.opening-flash {
    animation:
        wishPortalFlash
        .78s
        ease
        forwards;
}


@keyframes wishPortalFlash {

    0% {
        opacity: 0;

        transform:
            scale(.2);
    }

    35% {
        opacity: .9;
    }

    100% {
        opacity: 0;

        transform:
            scale(1.8);
    }

}


.cinematic-opening.is-closing
.gift-universe {
    animation:
        giftExit
        .7s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


@keyframes giftExit {

    to {
        opacity: 0;

        transform:
            scale(1.7)
            rotate(12deg);

        filter:
            blur(12px);
    }

}


/* keep your existing JS closing behavior */

.cinematic-opening.is-closing {
    opacity: 0;

    visibility: hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}


/* =========================================================
   GENERIC ENTRANCE
========================================================= */

@keyframes cinematicFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(18px);

        filter:
            blur(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }

}


@keyframes cinematicFadeDown {

    from {
        opacity: 0;

        transform:
            translateY(-14px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 720px) {

    .cinematic-opening {
        padding:
            max(
                14px,
                env(safe-area-inset-top)
            )
            14px
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }


    .cinematic-brand {
        left: 14px;

        top:
            max(
                12px,
                env(safe-area-inset-top)
            );
    }


    .cinematic-brand img {
        width: 37px;
        height: 37px;
    }


    .cinematic-brand strong {
        font-size: 10px;
    }


    .cinematic-brand span {
        font-size: 5px;
    }


    .gift-universe {
        width: 145px;
        height: 145px;

        margin-bottom: 5px;
    }


    .gift-orbit.orbit-one {
        width: 132px;
        height: 74px;
    }


    .gift-orbit.orbit-two {
        width: 92px;
        height: 140px;
    }


    .gift-orbit.orbit-three {
        width: 112px;
        height: 112px;
    }


    .cinematic-gift {
        width: 76px;
        height: 76px;

        border-radius: 25px;

        font-size: 34px;
    }


    .star-one {
        animation-name:
            giftStarOneMobile;
    }


    .star-two {
        animation-name:
            giftStarTwoMobile;
    }


    .star-three {
        animation-name:
            giftStarThreeMobile;
    }


    @keyframes giftStarOneMobile {

        from {
            transform:
                rotate(0deg)
                translateX(65px);
        }

        to {
            transform:
                rotate(360deg)
                translateX(65px);
        }

    }


    @keyframes giftStarTwoMobile {

        from {
            transform:
                rotate(150deg)
                translateX(52px);
        }

        to {
            transform:
                rotate(510deg)
                translateX(52px);
        }

    }


    @keyframes giftStarThreeMobile {

        from {
            transform:
                rotate(240deg)
                translateX(68px);
        }

        to {
            transform:
                rotate(600deg)
                translateX(68px);
        }

    }


    .cinematic-kicker {
        font-size: 7px;

        letter-spacing: 3.2px;
    }


    .cinematic-title {
        max-width: 440px;

        margin:
            13px auto
            11px;

        font-size:
            clamp(
                34px,
                10.5vw,
                48px
            );

        line-height: 1;

        letter-spacing: -2px;
    }


    .cinematic-description {
        max-width: 370px;

        font-size: 12px;

        line-height: 1.5;
    }


    .cinematic-open-button {
        width:
            min(
                330px,
                94%
            );

        min-height: 53px;

        margin-top: 21px;

        border-radius: 17px;

        font-size: 11px;
    }


    .cinematic-status {
        margin-top: 14px;

        font-size: 6px;
    }


    .opening-bottom-note {
        font-size: 5px;

        letter-spacing: 2px;
    }


    .opening-aurora {
        filter:
            blur(80px);
    }

}


/* =========================================================
   SHORT LAPTOP DISPLAY
========================================================= */

@media (max-height: 760px) and (min-width: 721px) {

    .gift-universe {
        width: 145px;
        height: 145px;
    }


    .cinematic-gift {
        width: 75px;
        height: 75px;

        font-size: 34px;
    }


    .cinematic-title {
        margin:
            10px auto;

        font-size:
            clamp(
                37px,
                5vw,
                57px
            );
    }


    .cinematic-description {
        font-size: 13px;
    }


    .cinematic-open-button {
        min-height: 52px;

        margin-top: 18px;
    }


    .cinematic-status {
        margin-top: 11px;
    }

}

/* =========================================================
   MAAMVERSE V32
   MASTER TYPOGRAPHY + FIXED MEMORY FRAME
   Opening design intentionally preserved.
========================================================= */

/* =========================================================
   MASTER FONT SYSTEM
========================================================= */

:root {
    --mv-font-ui:
        "Manrope",
        "Noto Sans Bengali",
        Arial,
        sans-serif;

    --mv-font-display:
        "Cormorant Garamond",
        "Noto Serif Bengali",
        Georgia,
        serif;

    --mv-font-celebration:
        "DM Serif Display",
        "Noto Serif Bengali",
        Georgia,
        serif;

    --mv-font-script:
        "Parisienne",
        "Noto Serif Bengali",
        cursive;

    --mv-font-reading:
        "Noto Serif Bengali",
        "Cormorant Garamond",
        Georgia,
        serif;
}

/* Opening stays exactly on the existing visual system. */
.wish-view-page {
    font-family: var(--mv-font-ui);
}

/* Recipient identity */
#recipientName {
    font-family: var(--mv-font-display);
    font-weight: 600;
    letter-spacing: -2.5px;
    text-wrap: balance;
}

/* Master wish title */
#wishTitle {
    font-family: var(--mv-font-celebration);
    font-weight: 400;
    letter-spacing: -1px;
    text-wrap: balance;
}

/* Wish-type personalities */
body[data-wish-type="birthday"] #wishTitle {
    font-family: var(--mv-font-celebration);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.8px;
}

body[data-wish-type="wedding"] #wishTitle,
body[data-wish-type="anniversary"] #wishTitle,
body[data-wish-type="love"] #wishTitle {
    font-family: var(--mv-font-script);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.05;
}

body[data-wish-type="congratulations"] #wishTitle {
    font-family: var(--mv-font-celebration);
    font-style: italic;
    font-weight: 400;
}

body[data-wish-type="graduation"] #wishTitle {
    font-family: var(--mv-font-celebration);
    font-weight: 400;
}

body[data-wish-type="eid"] #wishTitle {
    font-family: var(--mv-font-display);
    font-weight: 600;
    letter-spacing: -.5px;
}

body[data-wish-type="get-well"] #wishTitle {
    font-family: var(--mv-font-display);
    font-style: italic;
    font-weight: 600;
}

body[data-wish-type="farewell"] #wishTitle {
    font-family: var(--mv-font-display);
    font-weight: 600;
}

body[data-wish-type="friendship"] #wishTitle,
body[data-wish-type="custom"] #wishTitle {
    font-family: var(--mv-font-celebration);
    font-weight: 400;
}

/* Editorial section titles */
.memory-copy h2,
.bond-card h2,
.surprise-locked h2,
.music-copy h2,
.final-content h2 {
    font-family: var(--mv-font-display);
    font-weight: 600;
    letter-spacing: -1.5px;
    text-wrap: balance;
}

.memory-copy h2 {
    font-style: italic;
}

.final-content h2 {
    font-weight: 600;
    line-height: .98;
}

/* Emotional messages — especially Bangla */
.wish-message,
.surprise-message {
    font-family: var(--mv-font-reading);
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
}

/* Sender/UI stays crisp and modern */
.message-signature strong,
.final-signature strong,
.hero-sender strong,
.section-number,
.section-kicker,
.hero-kicker,
.hero-for,
.memory-status,
.memory-meta,
.music-state {
    font-family: var(--mv-font-ui);
}

/* =========================================================
   MEMORY FRAME — STRAIGHT, STABLE, PREMIUM
========================================================= */

.memory-frame {
    position: relative;
    width: 100%;
    padding: 10px;
    overflow: visible;
    border-radius: 30px;

    border:
        1px solid
        rgba(var(--accent-rgb), .25);

    background:
        linear-gradient(
            145deg,
            rgba(var(--accent-rgb), .11),
            rgba(255, 255, 255, .018)
        );

    box-shadow:
        0 32px 90px
        rgba(0, 0, 0, .40);

    transform: none !important;

    transition:
        box-shadow .45s ease,
        border-color .45s ease;
}

/* Travelling perimeter light — CSS only, no DOM injection. */
.memory-frame::before {
    content: "";
    position: absolute;
    z-index: 20;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;

    background:
        conic-gradient(
            from var(--memory-border-angle, 0deg),
            transparent 0deg,
            transparent 275deg,
            rgba(var(--accent-rgb), .12) 290deg,
            rgba(var(--accent-rgb), .90) 315deg,
            rgba(255, 255, 255, .76) 326deg,
            transparent 344deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation:
        memoryBorderTravel
        8s
        linear
        infinite;
}

@property --memory-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes memoryBorderTravel {
    to {
        --memory-border-angle: 360deg;
    }
}

.memory-frame:hover {
    transform: none !important;

    border-color:
        rgba(var(--accent-rgb), .38);

    box-shadow:
        0 38px 110px rgba(0, 0, 0, .48),
        0 0 55px rgba(var(--accent-rgb), .06);
}

/* =========================================================
   MEMORY PHOTO STAGE — FULL PHOTO, NO CROP
========================================================= */

.memory-photo-stage {
    position: relative;
    width: 100%;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 16 / 10;

    overflow: hidden;
    display: grid;
    place-items: center;

    border-radius: 22px;
    background: #060711;
    isolation: isolate;
}

/* Same photo becomes a soft cinematic fill behind the real image. */
.memory-backdrop {
    position: absolute;
    z-index: 0;
    inset: -40px;

    width: calc(100% + 80px);
    height: calc(100% + 80px);

    object-fit: cover;
    object-position: center;

    filter:
        blur(32px)
        brightness(.40)
        saturate(1.12);

    transform: scale(1.10);
    opacity: .90;
}

.memory-photo-stage::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            transparent 30%,
            rgba(3, 4, 12, .22) 100%
        );
}

/* Critical fix: the actual uploaded image is never zoom-cropped. */
.memory-main-image {
    position: relative;
    z-index: 2;
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;

    filter:
        brightness(1)
        contrast(1.01);

    transition:
        filter .8s ease;
}

.memory-section.is-visible .memory-main-image {
    transform: none !important;

    filter:
        brightness(1)
        contrast(1.01);
}

.memory-photo-glass {
    z-index: 3;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .055),
            transparent 24%,
            transparent 72%,
            rgba(var(--accent-rgb), .055)
        );
}

.memory-meta {
    padding:
        12px 7px
        3px;
}

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

@media (max-width: 720px) {
    #recipientName {
        letter-spacing: -1.2px;
    }

    body[data-wish-type="wedding"] #wishTitle,
    body[data-wish-type="anniversary"] #wishTitle,
    body[data-wish-type="love"] #wishTitle {
        font-size:
            clamp(
                36px,
                12vw,
                55px
            );

        line-height: 1.08;
    }

    .memory-copy h2,
    .bond-card h2,
    .surprise-locked h2,
    .music-copy h2,
    .final-content h2 {
        letter-spacing: -.8px;
    }

    .wish-message,
    .surprise-message {
        line-height: 1.70;
    }

    .memory-frame {
        width: 100%;
        padding: 7px;
        border-radius: 23px;
        transform: none !important;
    }

    .memory-frame:hover {
        transform: none !important;
    }

    .memory-photo-stage {
        aspect-ratio: 4 / 3;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 17px;
    }

    .memory-backdrop {
        inset: -28px;
        width: calc(100% + 56px);
        height: calc(100% + 56px);

        filter:
            blur(24px)
            brightness(.38)
            saturate(1.10);
    }

    .memory-main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .memory-frame::before {
        animation: none;
    }
}



/* =========================================================
   MAAMVERSE V34
   SMART MEDIA + LIVE DEPTH + MASTER MOTION
   Base: working scrolling/API version.
========================================================= */

:root {
    --mv-v34-glow: rgba(var(--accent-rgb), .34);
}


/* =========================================================
   SMART ADAPTIVE MEMORY FRAME
========================================================= */

.memory-frame {
    --mv-photo-ratio: 1.6;
    --mv-rx: 0deg;
    --mv-ry: 0deg;
    --mv-mx: 50%;
    --mv-my: 50%;
    --mv-lift: 0px;

    justify-self: center;
    width: 100%;
    max-width: 100%;
}

.memory-frame.mv-photo-portrait {
    max-width: 560px;
}

.memory-frame.mv-photo-tall {
    max-width: 490px;
}

.memory-frame.mv-photo-square {
    max-width: 650px;
}

.memory-frame.mv-photo-landscape,
.memory-frame.mv-photo-wide {
    max-width: 100%;
}

.memory-photo-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(72svh, 720px) !important;
    aspect-ratio: var(--mv-photo-ratio, 1.6) !important;
    overflow: hidden;
}

.memory-main-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    filter: brightness(1) contrast(1.02) saturate(1.02) !important;
}

.memory-section.is-visible .memory-main-image {
    transform: none !important;
}

.memory-backdrop {
    object-fit: cover !important;
    object-position: center !important;
    opacity: .72;
    filter:
        blur(34px)
        brightness(.42)
        saturate(1.18) !important;
}


/* =========================================================
   MASTER 3D CARDS
========================================================= */

.mv-tilt-card {
    --mv-rx: 0deg;
    --mv-ry: 0deg;
    --mv-mx: 50%;
    --mv-my: 50%;
    --mv-lift: 0px;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    transition:
        transform .18s ease-out,
        box-shadow .35s ease,
        border-color .35s ease,
        filter .35s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .mv-tilt-card {
        transform:
            perspective(1250px)
            rotateX(var(--mv-rx))
            rotateY(var(--mv-ry))
            translate3d(0, var(--mv-lift), 0) !important;
    }

    .mv-tilt-card:hover {
        border-color:
            rgba(var(--accent-rgb), .42) !important;

        box-shadow:
            0 40px 105px rgba(0, 0, 0, .44),
            0 0 52px rgba(var(--accent-rgb), .08),
            inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    }
}

/* Pointer-following light. Does not add DOM children, so layout stays safe. */
.mv-tilt-card::after {
    content: "";
    position: absolute;
    z-index: 40;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background:
        radial-gradient(
            360px circle at var(--mv-mx) var(--mv-my),
            rgba(var(--accent-rgb), .15),
            rgba(var(--accent-rgb), .055) 28%,
            transparent 62%
        );

    opacity: 0;
    transition: opacity .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .mv-tilt-card:hover::after {
        opacity: 1;
    }
}


/* =========================================================
   LIVE BORDER ENERGY
========================================================= */

.mv-live-border {
    animation:
        mvV34BorderBreath
        4.8s
        ease-in-out
        infinite;
}

@keyframes mvV34BorderBreath {
    0%, 100% {
        border-color:
            rgba(var(--accent-rgb), .18);

        box-shadow:
            0 28px 86px rgba(0, 0, 0, .28),
            0 0 0 rgba(var(--accent-rgb), 0);
    }

    50% {
        border-color:
            rgba(var(--accent-rgb), .34);

        box-shadow:
            0 32px 95px rgba(0, 0, 0, .34),
            0 0 34px rgba(var(--accent-rgb), .075);
    }
}

/* Memory keeps its travelling perimeter beam from V32. */
.memory-frame.mv-live-border {
    animation: none;
}


/* =========================================================
   MASTER TEXT MOTION
========================================================= */

.mv-live-title {
    perspective: 900px;
    transform-style: preserve-3d;
    cursor: default;
}

.mv-word {
    display: inline-block;
    opacity: 0;

    transform:
        translate3d(0, .72em, 0)
        rotateX(-22deg);

    transform-origin:
        50% 100%;

    transition:
        opacity .72s ease var(--mv-word-delay, 0ms),
        transform .72s cubic-bezier(.16, .84, .24, 1) var(--mv-word-delay, 0ms),
        color .26s ease,
        text-shadow .26s ease,
        filter .26s ease;

    will-change:
        transform,
        opacity;
}

.reveal-section.is-visible .mv-word,
.hero-content.is-visible .mv-word,
.wish-final.is-visible .mv-word {
    opacity: 1;
    transform:
        translate3d(0, 0, 0)
        rotateX(0deg);
}

@media (hover: hover) and (pointer: fine) {
    .mv-live-title .mv-word:hover {
        color: var(--accent);

        transform:
            translate3d(0, -5px, 24px)
            rotateX(-2deg)
            scale(1.035);

        text-shadow:
            0 0 18px rgba(var(--accent-rgb), .24),
            0 0 42px rgba(var(--accent-rgb), .12);
    }
}

.mv-live-title.mv-title-tap .mv-word {
    color: var(--accent);
    text-shadow:
        0 0 18px rgba(var(--accent-rgb), .22);
}


/* =========================================================
   WISH-TYPE MASTER TYPOGRAPHY
========================================================= */

body[data-wish-type="birthday"] #wishTitle,
body[data-wish-type="birthday"] #finalTitle {
    font-family: var(--mv-font-celebration);
    font-style: italic;
}

body[data-wish-type="wedding"] #wishTitle,
body[data-wish-type="anniversary"] #wishTitle,
body[data-wish-type="love"] #wishTitle {
    font-family: var(--mv-font-script);
    font-weight: 400;
    letter-spacing: .01em;
}

body[data-wish-type="wedding"] #finalTitle,
body[data-wish-type="anniversary"] #finalTitle,
body[data-wish-type="love"] #finalTitle {
    font-family: var(--mv-font-display);
    font-style: italic;
}

body[data-wish-type="congratulations"] #wishTitle,
body[data-wish-type="graduation"] #wishTitle {
    font-family: var(--mv-font-celebration);
}

body[data-wish-type="eid"] #wishTitle,
body[data-wish-type="farewell"] #wishTitle,
body[data-wish-type="friendship"] #wishTitle,
body[data-wish-type="get-well"] #wishTitle,
body[data-wish-type="custom"] #wishTitle {
    font-family: var(--mv-font-display);
}

#recipientName {
    font-family: var(--mv-font-display);
    font-weight: 600;
}

.wish-message,
.surprise-message {
    font-family: var(--mv-font-reading);
}


/* =========================================================
   DEPTH FOR INNER CONTENT
========================================================= */

@media (hover: hover) and (pointer: fine) {
    .mv-tilt-card > * {
        transform: translateZ(12px);
    }

    .memory-frame .memory-photo-stage {
        transform: translateZ(18px);
    }

    .memory-frame .memory-meta {
        transform: translateZ(22px);
    }
}


/* =========================================================
   MOBILE LIVE MOTION
========================================================= */

@media (hover: none), (pointer: coarse) {
    .mv-tilt-card {
        transform: none !important;
        animation:
            mvMobileBreathe
            6s
            ease-in-out
            infinite;
    }

    .memory-frame.mv-tilt-card {
        animation: none;
    }

    .mv-card-tap {
        transform:
            scale(.992) !important;

        filter:
            brightness(1.06);
    }

    @keyframes mvMobileBreathe {
        0%, 100% {
            box-shadow:
                0 24px 72px rgba(0, 0, 0, .26),
                0 0 0 rgba(var(--accent-rgb), 0);
        }

        50% {
            box-shadow:
                0 28px 78px rgba(0, 0, 0, .31),
                0 0 28px rgba(var(--accent-rgb), .055);
        }
    }
}


/* =========================================================
   RESPONSIVE PHOTO RULES
========================================================= */

@media (max-width: 900px) {
    .memory-frame,
    .memory-frame.mv-photo-portrait,
    .memory-frame.mv-photo-tall,
    .memory-frame.mv-photo-square,
    .memory-frame.mv-photo-landscape,
    .memory-frame.mv-photo-wide {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
    }

    .memory-photo-stage {
        aspect-ratio:
            var(--mv-photo-ratio, 1.4) !important;

        max-height:
            min(72svh, 680px) !important;
    }
}

@media (max-width: 620px) {
    .memory-frame,
    .memory-frame.mv-photo-portrait,
    .memory-frame.mv-photo-tall,
    .memory-frame.mv-photo-square,
    .memory-frame.mv-photo-landscape,
    .memory-frame.mv-photo-wide {
        max-width: 100%;
    }

    .memory-photo-stage {
        aspect-ratio:
            var(--mv-photo-ratio, 1.15) !important;

        max-height:
            70svh !important;
    }

    .mv-live-title .mv-word {
        transition-duration:
            .58s;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .mv-live-border,
    .mv-tilt-card {
        animation: none !important;
        transform: none !important;
    }

    .mv-word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =========================================================
   MAAMVERSE V35 — TARGETED FIXES
   1) Recipient name stays visible and premium.
   2) Memory frame follows the REAL photo without cropping.
========================================================= */

/* ---------------------------------------------------------
   HERO RECIPIENT NAME — DO NOT SPLIT INTO TRANSPARENT WORDS
--------------------------------------------------------- */

#recipientName {
    position: relative;
    display: inline-block;
    max-width: min(1100px, 96vw);

    font-family: var(--mv-font-display);
    font-weight: 600;
    line-height: .96;
    letter-spacing: -0.045em;
    text-wrap: balance;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #e6deff 46%,
            var(--accent) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter:
        drop-shadow(
            0 0 22px
            rgba(var(--accent-rgb), .10)
        );

    transition:
        transform .30s ease,
        filter .30s ease,
        letter-spacing .30s ease;
}

@media (hover: hover) and (pointer: fine) {
    #recipientName:hover {
        transform:
            translateY(-4px)
            scale(1.012);

        letter-spacing: -0.035em;

        filter:
            drop-shadow(
                0 0 26px
                rgba(var(--accent-rgb), .24)
            );
    }
}


/* ---------------------------------------------------------
   TRUE AUTO-FIT MEMORY PHOTO
   The stage height is created by the real image itself.
   No forced aspect ratio. No crop.
--------------------------------------------------------- */

.memory-frame,
.memory-frame.mv-photo-landscape,
.memory-frame.mv-photo-wide,
.memory-frame.mv-photo-square,
.memory-frame.mv-photo-portrait,
.memory-frame.mv-photo-tall {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* sensible desktop widths by real image orientation */
.memory-frame.mv-photo-landscape,
.memory-frame.mv-photo-wide {
    width: 100%;
    max-width: 920px;
}

.memory-frame.mv-photo-square {
    width: min(100%, 700px);
}

.memory-frame.mv-photo-portrait {
    width: min(100%, 590px);
}

.memory-frame.mv-photo-tall {
    width: min(100%, 520px);
}

.memory-photo-stage {
    position: relative;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* Critical V35 fix: no forced frame ratio. */
    aspect-ratio: auto !important;

    display: grid;
    place-items: center;

    overflow: hidden;
    border-radius: 22px;
    background: #060711;
    isolation: isolate;
}

/* Main image remains in normal layout flow.
   Its intrinsic ratio determines the stage height. */
.memory-main-image {
    position: relative;
    z-index: 2;

    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: min(72svh, 720px) !important;

    object-fit: contain !important;
    object-position: center !important;

    margin-inline: auto;

    transform: none !important;

    filter:
        brightness(1)
        contrast(1.02)
        saturate(1.02) !important;
}

.memory-section.is-visible .memory-main-image {
    transform: none !important;
}

/* Blurred copy fills only the empty background area. */
.memory-backdrop {
    position: absolute !important;
    z-index: 0 !important;

    inset: -34px !important;

    width: calc(100% + 68px) !important;
    height: calc(100% + 68px) !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: .68 !important;

    transform: scale(1.08) !important;

    filter:
        blur(30px)
        brightness(.40)
        saturate(1.16) !important;
}

/* Soft vignette above backdrop, below real image. */
.memory-photo-stage::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            transparent 38%,
            rgba(3, 4, 12, .12) 74%,
            rgba(3, 4, 12, .24) 100%
        );
}

/* Existing scan/glass stay above the real image. */
.memory-photo-glass {
    z-index: 3;
}

.memory-scan {
    z-index: 4;
}


/* ---------------------------------------------------------
   TABLET / MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {
    .memory-frame,
    .memory-frame.mv-photo-landscape,
    .memory-frame.mv-photo-wide,
    .memory-frame.mv-photo-square,
    .memory-frame.mv-photo-portrait,
    .memory-frame.mv-photo-tall {
        width: 100%;
        max-width: 760px;
    }

    .memory-photo-stage {
        aspect-ratio: auto !important;
        max-height: none !important;
    }

    .memory-main-image {
        max-width: 100% !important;
        max-height: 68svh !important;
    }
}

@media (max-width: 620px) {
    #recipientName {
        max-width: 94vw;
        letter-spacing: -0.03em;
    }

    .memory-frame,
    .memory-frame.mv-photo-landscape,
    .memory-frame.mv-photo-wide,
    .memory-frame.mv-photo-square,
    .memory-frame.mv-photo-portrait,
    .memory-frame.mv-photo-tall {
        width: 100%;
        max-width: 100%;
    }

    .memory-photo-stage {
        aspect-ratio: auto !important;
        border-radius: 17px;
    }

    .memory-main-image {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 66svh !important;
    }
}


/* =========================================================
   MAAMVERSE V36 — LIVE INTERACTION POLISH
   Keeps V35 layout/photo logic intact.
   Adds stronger 3D depth, pointer light, travelling edges,
   staggered section choreography and a cinematic finale.
========================================================= */

/* ---------------------------------------------------------
   GLOBAL POINTER AURA — DESKTOP ONLY
--------------------------------------------------------- */

.v36-pointer-aura {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    pointer-events: none;

    opacity: 0;
    transform:
        translate3d(-50%, -50%, 0)
        scale(.82);

    background:
        radial-gradient(
            circle,
            rgba(var(--accent-rgb), .12) 0%,
            rgba(var(--accent-rgb), .055) 30%,
            transparent 69%
        );

    filter: blur(4px);

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

    will-change:
        left,
        top,
        opacity,
        transform;
}

.v36-pointer-aura.is-visible {
    opacity: .82;
    transform:
        translate3d(-50%, -50%, 0)
        scale(1);
}

.v36-pointer-aura.is-hot {
    opacity: 1;
    transform:
        translate3d(-50%, -50%, 0)
        scale(1.12);
}


/* ---------------------------------------------------------
   STRONGER 3D CARD FEEL
--------------------------------------------------------- */

.mv-tilt-card {
    --mv-v36-lift: 0px;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    transition:
        transform .20s cubic-bezier(.2,.8,.2,1),
        border-color .28s ease,
        box-shadow .28s ease,
        filter .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .mv-tilt-card.mv-v36-hovering {
        border-color:
            rgba(var(--accent-rgb), .43) !important;

        box-shadow:
            0 38px 110px rgba(0,0,0,.40),
            0 0 0 1px rgba(var(--accent-rgb), .085),
            0 0 52px rgba(var(--accent-rgb), .12) !important;

        filter:
            saturate(1.035)
            brightness(1.018);
    }

    .mv-tilt-card.mv-v36-hovering::after {
        opacity: .96 !important;
    }
}


/* ---------------------------------------------------------
   TRAVELLING BORDER LIGHT
   CSS only; no injected layout children.
--------------------------------------------------------- */

.live-card {
    position: relative;
    isolation: isolate;
}

.live-card::before {
    content: "";
    position: absolute;
    z-index: 45;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 35%,
            rgba(var(--accent-rgb), .20) 43%,
            rgba(var(--accent-rgb), .90) 49%,
            rgba(255,255,255,.82) 51%,
            rgba(var(--accent-rgb), .62) 54%,
            transparent 63%,
            transparent 100%
        );

    background-size:
        310% 310%;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: .44;

    animation:
        mvV36BorderTravel
        7.5s
        linear
        infinite;
}

@keyframes mvV36BorderTravel {
    0% {
        background-position:
            180% 0%;
    }

    50% {
        background-position:
            10% 100%;
    }

    100% {
        background-position:
            -170% 0%;
    }
}

@media (hover: hover) and (pointer: fine) {
    .live-card.mv-v36-hovering::before {
        opacity: .88;
        animation-duration: 4.6s;
    }
}

/* Memory keeps its already-correct V35 perimeter treatment. */
.memory-frame::before {
    opacity: .92;
}


/* ---------------------------------------------------------
   MEMORY — TRUE PHOTO STAYS FULLY VISIBLE
   Only the blurred background receives parallax movement.
--------------------------------------------------------- */

.memory-frame {
    --mv-v36-bg-x: 0px;
    --mv-v36-bg-y: 0px;
}

.memory-backdrop {
    transform:
        translate3d(
            var(--mv-v36-bg-x),
            var(--mv-v36-bg-y),
            0
        )
        scale(1.11) !important;

    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        filter .32s ease,
        opacity .32s ease;

    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .memory-frame.mv-v36-hovering .memory-backdrop {
        filter:
            blur(27px)
            brightness(.44)
            saturate(1.22) !important;

        opacity: .76 !important;
    }

    .memory-frame.mv-v36-hovering .memory-main-image {
        transform:
            translateZ(10px) !important;

        filter:
            brightness(1.025)
            contrast(1.025)
            saturate(1.035) !important;
    }
}


/* ---------------------------------------------------------
   TITLE DEPTH + WORD LIGHT
--------------------------------------------------------- */

.mv-live-title {
    --mv-v36-title-rx: 0deg;
    --mv-v36-title-ry: 0deg;

    transform:
        perspective(1000px)
        rotateX(var(--mv-v36-title-rx))
        rotateY(var(--mv-v36-title-ry));

    transition:
        transform .24s cubic-bezier(.2,.8,.2,1),
        filter .28s ease;

    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .mv-live-title.mv-v36-title-hot {
        filter:
            drop-shadow(
                0 8px 20px
                rgba(var(--accent-rgb), .10)
            );
    }

    .mv-live-title.mv-v36-title-hot .mv-word {
        text-shadow:
            0 0 18px rgba(var(--accent-rgb), .12);
    }
}

/* Recipient name stays unsplit, but now has the same depth response. */
#recipientName {
    --mv-v36-title-rx: 0deg;
    --mv-v36-title-ry: 0deg;

    transform:
        perspective(1000px)
        rotateX(var(--mv-v36-title-rx))
        rotateY(var(--mv-v36-title-ry));

    transition:
        transform .24s cubic-bezier(.2,.8,.2,1),
        filter .30s ease,
        letter-spacing .30s ease;
}

@media (hover: hover) and (pointer: fine) {
    #recipientName.mv-v36-title-hot {
        filter:
            drop-shadow(
                0 0 28px
                rgba(var(--accent-rgb), .25)
            );
    }
}


/* ---------------------------------------------------------
   SECTION ENTRANCE CHOREOGRAPHY
--------------------------------------------------------- */

.reveal-section.mv-v36-enter .section-number,
.reveal-section.mv-v36-enter .section-kicker,
.reveal-section.mv-v36-enter .hero-kicker,
.reveal-section.mv-v36-enter .hero-icon,
.reveal-section.mv-v36-enter .hero-divider,
.reveal-section.mv-v36-enter .hero-subtitle,
.reveal-section.mv-v36-enter .hero-sender,
.reveal-section.mv-v36-enter .memory-status,
.reveal-section.mv-v36-enter .memory-copy > p,
.reveal-section.mv-v36-enter .message-heart,
.reveal-section.mv-v36-enter .message-signature,
.reveal-section.mv-v36-enter .bond-symbol-row,
.reveal-section.mv-v36-enter .surprise-heart,
.reveal-section.mv-v36-enter .music-state,
.reveal-section.mv-v36-enter .final-name,
.reveal-section.mv-v36-enter .final-signature,
.reveal-section.mv-v36-enter .final-brand {
    animation:
        mvV36Rise
        .78s
        cubic-bezier(.16,.84,.24,1)
        both;
}

.reveal-section.mv-v36-enter .hero-icon,
.reveal-section.mv-v36-enter .message-heart,
.reveal-section.mv-v36-enter .bond-symbol-row,
.reveal-section.mv-v36-enter .surprise-heart {
    animation-delay: .10s;
}

.reveal-section.mv-v36-enter .hero-divider,
.reveal-section.mv-v36-enter .memory-copy > p,
.reveal-section.mv-v36-enter .message-signature,
.reveal-section.mv-v36-enter .music-state,
.reveal-section.mv-v36-enter .final-name {
    animation-delay: .18s;
}

.reveal-section.mv-v36-enter .hero-subtitle,
.reveal-section.mv-v36-enter .memory-status,
.reveal-section.mv-v36-enter .final-signature {
    animation-delay: .26s;
}

.reveal-section.mv-v36-enter .hero-sender,
.reveal-section.mv-v36-enter .final-brand {
    animation-delay: .34s;
}

@keyframes mvV36Rise {
    from {
        opacity: 0;
        transform:
            translate3d(0, 22px, 0)
            scale(.985);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
        filter: blur(0);
    }
}


/* ---------------------------------------------------------
   FINAL CONSTELLATION
--------------------------------------------------------- */

.wish-final {
    isolation: isolate;
}

.v36-final-constellation {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .66;
}

.wish-final .final-particles {
    z-index: 2;
}

.wish-final .final-content {
    z-index: 4;
}

.wish-final.mv-v36-enter .final-icon {
    filter:
        drop-shadow(
            0 0 28px
            rgba(var(--accent-rgb), .22)
        );
}


/* ---------------------------------------------------------
   MOBILE — LIVE BUT LIGHTER
--------------------------------------------------------- */

@media (hover: none), (pointer: coarse) {
    .v36-pointer-aura {
        display: none;
    }

    .mv-live-title,
    #recipientName {
        transform: none !important;
    }

    .mv-live-title {
        animation:
            mvV36MobileTitleBreath
            7.2s
            ease-in-out
            infinite;
    }

    @keyframes mvV36MobileTitleBreath {
        0%, 100% {
            filter:
                drop-shadow(
                    0 0 0
                    rgba(var(--accent-rgb), 0)
                );
        }

        50% {
            filter:
                drop-shadow(
                    0 0 18px
                    rgba(var(--accent-rgb), .11)
                );
        }
    }

    .live-card::before {
        opacity: .34;
        animation-duration: 10s;
    }

    .memory-backdrop {
        transform:
            scale(1.10) !important;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .v36-pointer-aura,
    .v36-final-constellation {
        display: none !important;
    }

    .live-card::before,
    .mv-live-title {
        animation: none !important;
    }

    .memory-backdrop,
    .mv-live-title,
    #recipientName {
        transform: none !important;
        transition: none !important;
    }
}



/* =========================================================
   MAAMVERSE V37 — VISIBLE LIVE EFFECT INTENSITY
   Layout, API, photo-fit and soundtrack remain unchanged.
========================================================= */

/* ---------------------------------------------------------
   POINTER AURA — MORE VISIBLE, STILL SOFT
--------------------------------------------------------- */

.v36-pointer-aura {
    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(var(--accent-rgb), .18) 0%,
            rgba(var(--accent-rgb), .085) 29%,
            rgba(var(--accent-rgb), .026) 52%,
            transparent 72%
        );

    filter: blur(2px);
}

.v36-pointer-aura.is-visible {
    opacity: .92;
}

.v36-pointer-aura.is-hot {
    opacity: 1;
    transform:
        translate3d(-50%, -50%, 0)
        scale(1.17);
}


/* ---------------------------------------------------------
   3D CARDS — STRONG ENOUGH TO READ ON SCREEN RECORDING
--------------------------------------------------------- */

.mv-tilt-card {
    transition:
        transform .14s cubic-bezier(.18,.82,.22,1),
        border-color .24s ease,
        box-shadow .24s ease,
        filter .24s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .mv-tilt-card.mv-v37-hot {
        border-color:
            rgba(var(--accent-rgb), .58) !important;

        box-shadow:
            0 44px 120px rgba(0,0,0,.46),
            0 0 0 1px rgba(var(--accent-rgb), .13),
            0 0 72px rgba(var(--accent-rgb), .18),
            inset 0 1px 0 rgba(255,255,255,.08) !important;

        filter:
            saturate(1.07)
            brightness(1.035);
    }

    .mv-tilt-card.mv-v37-hot::after {
        opacity: 1 !important;
    }

    .mv-tilt-card::after {
        background:
            radial-gradient(
                430px circle at var(--mv-mx) var(--mv-my),
                rgba(255,255,255,.115) 0%,
                rgba(var(--accent-rgb), .24) 12%,
                rgba(var(--accent-rgb), .095) 31%,
                transparent 67%
            ) !important;
    }
}


/* ---------------------------------------------------------
   TRAVELLING BORDER — CLEARER PERIMETER LIGHT
--------------------------------------------------------- */

.live-card::before {
    opacity: .66;

    background:
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 31%,
            rgba(var(--accent-rgb), .12) 39%,
            rgba(var(--accent-rgb), .82) 47%,
            rgba(255,255,255,.96) 50%,
            rgba(var(--accent-rgb), .90) 53%,
            rgba(var(--accent-rgb), .14) 61%,
            transparent 69%,
            transparent 100%
        );

    background-size: 285% 285%;

    animation-duration: 5.8s;
}

@media (hover: hover) and (pointer: fine) {
    .live-card.mv-v37-hot::before {
        opacity: 1;
        animation-duration: 3.5s;
    }
}

.memory-frame::before {
    opacity: 1 !important;
    animation-duration: 5.8s !important;
    filter:
        drop-shadow(
            0 0 7px
            rgba(var(--accent-rgb), .26)
        );
}


/* ---------------------------------------------------------
   PHOTO DEPTH — MAIN PHOTO NEVER CROPS OR ZOOMS
--------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .memory-frame.mv-v37-hot .memory-backdrop {
        filter:
            blur(25px)
            brightness(.47)
            saturate(1.28) !important;

        opacity: .82 !important;
    }

    .memory-frame.mv-v37-hot .memory-main-image {
        transform:
            translateZ(18px) !important;

        filter:
            brightness(1.045)
            contrast(1.035)
            saturate(1.055) !important;
    }

    .memory-frame.mv-v37-hot .memory-meta {
        transform:
            translateZ(30px) !important;
    }
}


/* ---------------------------------------------------------
   TITLES — DEPTH + LIGHT SWEEP
--------------------------------------------------------- */

.mv-live-title,
#recipientName {
    position: relative;
    isolation: isolate;
}

.mv-live-title::after,
#recipientName::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: -22%;
    bottom: -22%;
    left: -28%;
    width: 18%;
    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.06),
            rgba(var(--accent-rgb), .30),
            rgba(255,255,255,.18),
            transparent
        );

    filter: blur(7px);
    transform: skewX(-18deg);
}

@media (hover: hover) and (pointer: fine) {
    .mv-live-title.mv-v37-title-hot,
    #recipientName.mv-v37-title-hot {
        filter:
            drop-shadow(
                0 10px 28px
                rgba(var(--accent-rgb), .20)
            );
    }

    .mv-live-title.mv-v37-title-hot::after,
    #recipientName.mv-v37-title-hot::after {
        animation:
            mvV37TitleSweep
            .92s
            cubic-bezier(.2,.8,.2,1)
            both;
    }

    .mv-live-title.mv-v37-title-hot .mv-word {
        text-shadow:
            0 0 16px rgba(var(--accent-rgb), .20),
            0 0 36px rgba(var(--accent-rgb), .11);
    }

    .mv-live-title .mv-word:hover {
        color: #ffffff;
        transform:
            translate3d(0, -7px, 34px)
            rotateX(-4deg)
            scale(1.055);

        text-shadow:
            0 0 14px rgba(255,255,255,.22),
            0 0 30px rgba(var(--accent-rgb), .35),
            0 0 58px rgba(var(--accent-rgb), .15);
    }

    #recipientName.mv-v37-title-hot {
        letter-spacing: .012em;
        text-shadow:
            0 0 24px rgba(var(--accent-rgb), .24),
            0 0 52px rgba(var(--accent-rgb), .10);
    }
}

@keyframes mvV37TitleSweep {
    0% {
        left: -28%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 112%;
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   SECTION STAGGER — MORE CINEMATIC, NO LAYOUT CHANGE
--------------------------------------------------------- */

.mv-v37-unit {
    opacity: 0;
    transform:
        translate3d(0, 30px, 0)
        scale(.982);
    filter: blur(7px);
}

.reveal-section.mv-v37-enter .mv-v37-unit,
.wish-final.mv-v37-enter .mv-v37-unit {
    animation:
        mvV37UnitIn
        .88s
        cubic-bezier(.16,.84,.24,1)
        var(--mv-v37-delay, 0ms)
        both;
}

@keyframes mvV37UnitIn {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 30px, 0)
            scale(.982);
        filter: blur(7px);
    }

    70% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
        filter: blur(0);
    }
}


/* ---------------------------------------------------------
   FINALE — STRONGER VISIBLE CONSTELLATION TRACE
--------------------------------------------------------- */

.v36-final-constellation {
    opacity: .82;
}

.v37-final-trace {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .96;
    mix-blend-mode: screen;
}

.wish-final.mv-v37-finale-hot .final-icon {
    animation:
        mvV37FinalIconPulse
        2.5s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0 0 34px
            rgba(var(--accent-rgb), .34)
        );
}

@keyframes mvV37FinalIconPulse {
    0%, 100% {
        transform:
            translateY(0)
            scale(1);
    }

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


/* ---------------------------------------------------------
   MOBILE — VISIBLE LIFE WITHOUT DESKTOP TILT
--------------------------------------------------------- */

@media (hover: none), (pointer: coarse) {
    .live-card::before {
        opacity: .50;
        animation-duration: 8.6s;
    }

    .memory-frame::before {
        opacity: .90 !important;
        animation-duration: 7.4s !important;
    }

    .mv-live-title {
        animation:
            mvV37MobileTitleGlow
            5.8s
            ease-in-out
            infinite;
    }

    @keyframes mvV37MobileTitleGlow {
        0%, 100% {
            filter:
                drop-shadow(
                    0 0 0
                    rgba(var(--accent-rgb), 0)
                );
        }

        50% {
            filter:
                drop-shadow(
                    0 0 22px
                    rgba(var(--accent-rgb), .16)
                );
        }
    }

    .mv-tilt-card:not(.memory-frame) {
        animation-duration: 5.2s;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .v37-final-trace {
        display: none !important;
    }

    .mv-v37-unit {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    .mv-live-title::after,
    #recipientName::after {
        display: none !important;
    }
}

/* =========================================================
   MAAMVERSE V38 — TIGHTER FLOW + STRONGER LIVE DEPTH
   Keeps V37 layout, API, photo-fit, opening and soundtrack.
========================================================= */

/* ---------------------------------------------------------
   TIGHTER SCROLL FLOW — REMOVE DEAD VERTICAL SPACE
--------------------------------------------------------- */
.wish-section {
    min-height: auto !important;
    padding: 82px 0 !important;
}

.section-number {
    top: 30px !important;
}

.memory-section {
    padding-top: 78px !important;
}

.wish-final {
    min-height: 88svh !important;
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

/* ---------------------------------------------------------
   TRUE TRAVELLING PERIMETER LIGHT
--------------------------------------------------------- */
@property --mv-v38-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.live-card::before {
    content: "" !important;
    position: absolute !important;
    z-index: 6 !important;
    inset: -1px !important;
    width: auto !important;
    height: auto !important;
    left: -1px !important;
    top: -1px !important;
    padding: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;

    background:
        conic-gradient(
            from var(--mv-v38-border-angle),
            transparent 0deg,
            transparent 246deg,
            rgba(var(--accent-rgb), .12) 265deg,
            rgba(var(--accent-rgb), .88) 292deg,
            rgba(255,255,255,.98) 304deg,
            rgba(var(--accent-rgb), .92) 316deg,
            rgba(var(--accent-rgb), .14) 340deg,
            transparent 360deg
        ) !important;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;

    opacity: .92 !important;
    filter:
        drop-shadow(
            0 0 8px
            rgba(var(--accent-rgb), .34)
        ) !important;

    animation:
        mvV38PerimeterLight
        4.6s
        linear
        infinite !important;
}

@keyframes mvV38PerimeterLight {
    to {
        --mv-v38-border-angle: 360deg;
    }
}

@media (hover: hover) and (pointer: fine) {
    .live-card.mv-v37-hot::before,
    .live-card.mv-v36-hovering::before {
        opacity: 1 !important;
        animation-duration: 2.9s !important;
        filter:
            drop-shadow(
                0 0 13px
                rgba(var(--accent-rgb), .52)
            ) !important;
    }
}

/* ---------------------------------------------------------
   STRONGER DESKTOP 3D / SPOTLIGHT
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .mv-tilt-card {
        transform:
            perspective(980px)
            rotateX(var(--mv-rx))
            rotateY(var(--mv-ry))
            translate3d(0, var(--mv-lift), 0) !important;
    }

    .mv-tilt-card.mv-v37-hot {
        box-shadow:
            0 52px 135px rgba(0,0,0,.50),
            0 0 0 1px rgba(var(--accent-rgb), .18),
            0 0 92px rgba(var(--accent-rgb), .23),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .mv-tilt-card::after {
        background:
            radial-gradient(
                500px circle at var(--mv-mx) var(--mv-my),
                rgba(255,255,255,.16) 0%,
                rgba(var(--accent-rgb), .31) 12%,
                rgba(var(--accent-rgb), .12) 34%,
                transparent 68%
            ) !important;
    }

    .memory-frame.mv-v37-hot .memory-main-image {
        transform:
            translateZ(24px) !important;
    }

    .memory-frame.mv-v37-hot .memory-meta {
        transform:
            translateZ(40px) !important;
    }
}

/* ---------------------------------------------------------
   TITLE HOVER — MORE READABLE IN RECORDINGS
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .mv-live-title.mv-v37-title-hot,
    #recipientName.mv-v37-title-hot {
        filter:
            drop-shadow(
                0 12px 34px
                rgba(var(--accent-rgb), .28)
            ) !important;
    }

    .mv-live-title .mv-word:hover {
        transform:
            translate3d(0, -8px, 42px)
            rotateX(-5deg)
            scale(1.07) !important;

        text-shadow:
            0 0 16px rgba(255,255,255,.30),
            0 0 38px rgba(var(--accent-rgb), .44),
            0 0 70px rgba(var(--accent-rgb), .20) !important;
    }
}

/* ---------------------------------------------------------
   FINALE — MAKE CONNECTED CONSTELLATION OBVIOUS
--------------------------------------------------------- */
.v37-final-trace {
    opacity: 1 !important;
    filter:
        drop-shadow(
            0 0 8px
            rgba(var(--accent-rgb), .30)
        );
}

.wish-final.mv-v37-finale-hot::before {
    opacity: .95;
    transform:
        translate(-50%, -50%)
        scale(1.10);
}

/* ---------------------------------------------------------
   MOBILE — TIGHTER, ALIVE, NOT HEAVY
--------------------------------------------------------- */
@media (max-width: 720px) {
    .wish-section {
        padding: 66px 0 !important;
    }

    .section-number {
        top: 24px !important;
    }

    .memory-section {
        padding-top: 62px !important;
    }

    .wish-final {
        min-height: auto !important;
        padding-top: 76px !important;
        padding-bottom: 76px !important;
    }

    .live-card::before {
        opacity: .72 !important;
        animation-duration: 6.8s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-card::before {
        animation: none !important;
    }
}


/* =========================================================
   MAAMVERSE V39 — FINAL MOTION FINISH
   Keeps V38 layout, API, smart photo-fit, opening and music.
========================================================= */

/* ---------------------------------------------------------
   TIGHTER RHYTHM — LESS EMPTY SCROLL BETWEEN SECTIONS
--------------------------------------------------------- */
.wish-section {
    padding: 70px 0 !important;
}

.section-number {
    top: 24px !important;
}

.memory-section {
    padding-top: 68px !important;
}

.wish-final {
    min-height: 82svh !important;
    padding-top: 78px !important;
    padding-bottom: 78px !important;
}

/* ---------------------------------------------------------
   BRIGHTER MOVING PERIMETER — VISIBLE BUT NOT NEON-HEAVY
--------------------------------------------------------- */
.live-card::before {
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 10px rgba(var(--accent-rgb), .46))
        drop-shadow(0 0 22px rgba(var(--accent-rgb), .18)) !important;
    animation-duration: 4.1s !important;
}

@media (hover: hover) and (pointer: fine) {
    .live-card.mv-v37-hot::before,
    .live-card.mv-v36-hovering::before {
        animation-duration: 2.45s !important;
        filter:
            drop-shadow(0 0 14px rgba(var(--accent-rgb), .68))
            drop-shadow(0 0 34px rgba(var(--accent-rgb), .28)) !important;
    }

    /* Clearer 3D in screen recordings while remaining controlled. */
    .mv-tilt-card.mv-v37-hot {
        box-shadow:
            0 58px 150px rgba(0,0,0,.54),
            0 0 0 1px rgba(var(--accent-rgb), .24),
            0 0 110px rgba(var(--accent-rgb), .27),
            inset 0 1px 0 rgba(255,255,255,.12) !important;
    }

    .mv-tilt-card::after {
        background:
            radial-gradient(
                540px circle at var(--mv-mx) var(--mv-my),
                rgba(255,255,255,.20) 0%,
                rgba(var(--accent-rgb), .36) 11%,
                rgba(var(--accent-rgb), .15) 31%,
                transparent 66%
            ) !important;
    }

    .memory-frame.mv-v37-hot .memory-main-image {
        transform: translateZ(30px) !important;
    }

    .memory-frame.mv-v37-hot .memory-meta {
        transform: translateZ(48px) !important;
    }
}

/* ---------------------------------------------------------
   TITLE HOVER — SHIMMER + DEPTH THAT READS ON VIDEO
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .mv-live-title.mv-v37-title-hot,
    #recipientName.mv-v37-title-hot {
        filter:
            drop-shadow(0 13px 38px rgba(var(--accent-rgb), .34))
            drop-shadow(0 0 22px rgba(255,255,255,.08)) !important;
    }

    .mv-live-title .mv-word:hover {
        transform:
            translate3d(0, -10px, 50px)
            rotateX(-6deg)
            scale(1.085) !important;

        text-shadow:
            0 0 18px rgba(255,255,255,.36),
            0 0 44px rgba(var(--accent-rgb), .52),
            0 0 82px rgba(var(--accent-rgb), .23) !important;
    }
}

/* ---------------------------------------------------------
   FINALE — OBVIOUS CONSTELLATION + COMPLETION PULSE
--------------------------------------------------------- */
.v37-final-trace {
    opacity: 1 !important;
    filter:
        brightness(1.16)
        drop-shadow(0 0 9px rgba(var(--accent-rgb), .42))
        drop-shadow(0 0 22px rgba(var(--accent-rgb), .18));
}

.wish-final::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: min(52vw, 560px);
    aspect-ratio: 1;
    border: 1px solid rgba(var(--accent-rgb), .0);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.28);
    opacity: 0;
    pointer-events: none;
}

.wish-final.mv-v39-final-live::after {
    animation: mvV39FinalPulse 2.15s .95s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes mvV39FinalPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.28);
        border-color: rgba(var(--accent-rgb), .62);
        box-shadow:
            0 0 0 0 rgba(var(--accent-rgb), .18),
            inset 0 0 60px rgba(var(--accent-rgb), .08);
    }

    28% {
        opacity: .88;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.35);
        border-color: rgba(var(--accent-rgb), .03);
        box-shadow:
            0 0 0 45px rgba(var(--accent-rgb), 0),
            inset 0 0 100px rgba(var(--accent-rgb), 0);
    }
}

.wish-final.mv-v39-final-live .final-icon {
    filter:
        drop-shadow(0 0 38px rgba(var(--accent-rgb), .42)) !important;
}

/* ---------------------------------------------------------
   MOBILE — TIGHTER SPACING + LIGHTWEIGHT LIFE
--------------------------------------------------------- */
@media (max-width: 720px) {
    .wish-section {
        padding: 56px 0 !important;
    }

    .section-number {
        top: 18px !important;
    }

    .memory-section {
        padding-top: 54px !important;
    }

    .wish-final {
        min-height: auto !important;
        padding-top: 66px !important;
        padding-bottom: 66px !important;
    }

    .live-card::before {
        opacity: .76 !important;
        animation-duration: 6.2s !important;
    }

    .wish-final::after {
        width: 82vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wish-final::after {
        display: none !important;
    }
}