/* ===== Premium Valentine's Theme ===== */
:root {
    --deep-burgundy: #722f37;
    --rose-gold: #b76e79;
    --blush: #de98ab;
    --champagne: #f7e7ce;
    --cream: #fffaf0;
    --dark-wine: #4a1c24;
    --gold: #d4af37;
    --soft-gold: #f4d03f;
}

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

body {
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    background: radial-gradient(ellipse at bottom, #1a0a0d 0%, #0d0507 50%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* ===== Particle Canvas ===== */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ===== Rose Petals ===== */
.petals-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.petal {
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--rose-gold), var(--blush));
    border-radius: 50% 0 50% 50%;
    opacity: 0.7;
    animation: petalFall linear infinite;
    box-shadow: 0 0 10px rgba(183, 110, 121, 0.3);
}

@keyframes petalFall {
    0% {
        transform: translateY(-100px) rotate(0deg) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(100vh) rotate(720deg) translateX(100px);
        opacity: 0;
    }
}

/* ===== Ambient Orbs ===== */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    animation: orbFloat 8s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(183, 110, 121, 0.4), transparent);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(114, 47, 55, 0.3), transparent);
    bottom: -150px;
    right: -150px;
    animation-delay: -3s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(222, 152, 171, 0.25), transparent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -5s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(30px, -30px) scale(1.1);
    }

    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }

    75% {
        transform: translate(20px, 30px) scale(1.05);
    }
}

/* ===== Floating Polaroid Photos ===== */
.polaroid-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.polaroid {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 120px;
    background: white;
    padding: 8px 8px 25px 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transform: rotate(calc((var(--delay) / 1s) * 15deg - 10deg));
    animation: polaroidFloat 6s ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0.85;
    transition: all 0.3s ease;
}

.polaroid:hover {
    opacity: 1;
    transform: rotate(0deg) scale(1.1);
    z-index: 20;
    pointer-events: auto;
}

.polaroid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

@keyframes polaroidFloat {

    0%,
    100% {
        transform: rotate(calc((var(--delay) / 1s) * 15deg - 10deg)) translateY(0);
    }

    50% {
        transform: rotate(calc((var(--delay) / 1s) * 15deg - 5deg)) translateY(-15px);
    }
}

@media (max-width: 768px) {
    .polaroid {
        width: 80px;
        padding: 5px 5px 15px 5px;
    }
}

/* ===== Main Container ===== */
.main-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* ===== 3D Heart Frame ===== */
.heart-frame {
    perspective: 1000px;
    margin-bottom: 30px;
}

.heart-3d {
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    animation: heartRotate 4s ease-in-out infinite;
}

.heart-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.heart-face::before {
    content: '❤️';
    font-size: 60px;
    filter: drop-shadow(0 0 20px rgba(183, 110, 121, 0.8));
}

.heart-face.back {
    transform: rotateY(180deg);
}

.heart-face.back::before {
    content: '💕';
}

@keyframes heartRotate {

    0%,
    100% {
        transform: rotateY(0deg) scale(1);
    }

    25% {
        transform: rotateY(180deg) scale(1.1);
    }

    50% {
        transform: rotateY(360deg) scale(1);
    }

    75% {
        transform: rotateY(540deg) scale(1.1);
    }
}

/* ===== Question Card ===== */
.question-card {
    position: relative;
    width: 90vw;
    max-width: 500px;
    padding: 3px;
    background: linear-gradient(135deg, var(--gold), var(--rose-gold), var(--gold));
    border-radius: 20px;
    animation: borderShimmer 3s linear infinite;
}

@keyframes borderShimmer {
    0% {
        background-position: 0% 50%;
    }

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

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

.question-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--gold), var(--rose-gold), var(--champagne), var(--gold));
    background-size: 300% 300%;
    border-radius: 22px;
    z-index: -1;
    animation: borderShimmer 3s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
}

.card-content {
    background: linear-gradient(180deg, rgba(26, 10, 13, 0.95), rgba(13, 5, 7, 0.98));
    border-radius: 17px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

/* ===== Decorative Corners ===== */
.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--rose-gold);
    opacity: 0.6;
}

.corner-tl {
    top: 15px;
    left: 15px;
    border-right: none;
    border-bottom: none;
}

.corner-tr {
    top: 15px;
    right: 15px;
    border-left: none;
    border-bottom: none;
}

.corner-bl {
    bottom: 15px;
    left: 15px;
    border-right: none;
    border-top: none;
}

.corner-br {
    bottom: 15px;
    right: 15px;
    border-left: none;
    border-top: none;
}

/* ===== Name Animation ===== */
.name-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.name-letter {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--gold), var(--champagne), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: letterFloat 2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.1s);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
}

@keyframes letterFloat {

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

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

/* ===== Romantic Divider ===== */
.romantic-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.divider-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rose-gold), transparent);
}

.divider-heart {
    color: var(--rose-gold);
    font-size: 1.2rem;
    animation: heartPulse 1.5s ease-in-out infinite;
}

@keyframes heartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

/* ===== Question ===== */
.question {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--champagne);
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: 1px;
    animation: textGlow 3s ease-in-out infinite;
}

@keyframes textGlow {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(247, 231, 206, 0.3);
    }

    50% {
        text-shadow: 0 0 30px rgba(247, 231, 206, 0.6), 0 0 50px rgba(183, 110, 121, 0.3);
    }
}

/* ===== Heartbeat Animation ===== */
.heartbeat-container {
    display: flex;
    justify-content: center;
    margin: 25px 0;
}

.heartbeat svg {
    width: 50px;
    height: 50px;
    fill: var(--rose-gold);
    animation: heartbeat 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(183, 110, 121, 0.6));
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.25);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.15);
    }
}

/* ===== Message ===== */
.message {
    min-height: 35px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--blush);
    text-align: center;
    margin-bottom: 30px;
    opacity: 0;
    transition: all 0.4s ease;
}

.message.visible {
    opacity: 1;
    animation: messageAppear 0.5s ease;
}

@keyframes messageAppear {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Buttons ===== */
.buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Yes Button - Premium Design */
.btn-yes {
    position: relative;
    padding: 18px 50px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--cream);
    background: linear-gradient(135deg, var(--deep-burgundy), var(--rose-gold));
    border: 2px solid var(--gold);
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 40px rgba(183, 110, 121, 0.4),
        inset 0 0 20px rgba(212, 175, 55, 0.1);
    animation: yesButtonGlow 2s ease-in-out infinite;
}

.btn-yes:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 50px rgba(183, 110, 121, 0.6),
        inset 0 0 30px rgba(212, 175, 55, 0.2);
}

.btn-yes::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@keyframes yesButtonGlow {

    0%,
    100% {
        box-shadow: 0 10px 40px rgba(183, 110, 121, 0.4);
    }

    50% {
        box-shadow: 0 10px 60px rgba(183, 110, 121, 0.7), 0 0 30px rgba(212, 175, 55, 0.3);
    }
}

/* No Button - Escaping Style */
.btn-no {
    position: fixed;
    padding: 12px 35px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--blush);
    background: transparent;
    border: 1px solid var(--rose-gold);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 100;
    opacity: 0.7;
}

.btn-no:hover {
    opacity: 1;
}

/* No button diminishing stages */
.btn-no.shrink-1 {
    transform: scale(0.85);
    opacity: 0.65;
}

.btn-no.shrink-2 {
    transform: scale(0.7);
    opacity: 0.55;
}

.btn-no.shrink-3 {
    transform: scale(0.55);
    opacity: 0.45;
}

.btn-no.shrink-4 {
    transform: scale(0.4);
    opacity: 0.35;
}

.btn-no.shrink-5 {
    transform: scale(0.25);
    opacity: 0.25;
    font-size: 0.7rem;
    padding: 6px 15px;
}

/* ===== Celebration Screen - Complete Redesign ===== */
.celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    overflow: hidden;
}

.celebration.active {
    opacity: 1;
    visibility: visible;
}

/* Solid Black Matte Background */
.celebration-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: 0;
}

/* ===== Balloons ===== */
.balloons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.balloon {
    position: absolute;
    bottom: -150px;
    font-size: 4rem;
    animation: balloonRise linear forwards;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}

@keyframes balloonRise {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-120vh) rotate(20deg);
        opacity: 0.8;
    }
}

/* ===== Confetti / Party Poppers ===== */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    width: 12px;
    height: 12px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0.6;
    }
}

/* ===== Envelope Scene - YouTube Reference Style ===== */
.envelope-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* Envelope Container */
.envelope {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    z-index: 20;
    /* Chain animations: appear first, then fade out as letter expands */
    animation:
        envelopeAppear 0.3s ease forwards,
        envelopeFadeOut 1.2s ease 0.8s forwards;
}

@keyframes envelopeAppear {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Envelope fades out gradually as letter expands (runs parallel with letterRiseAndExpand) */
@keyframes envelopeFadeOut {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Envelope Back */
.envelope-back {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: linear-gradient(180deg, #f5d5c8, #e8c4b8);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Envelope Front Pocket */
.envelope-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, #fae5dc, #f0d0c4);
    border-radius: 0 0 12px 12px;
    z-index: 3;
}

/* Wax Seal */
.wax-seal {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.8rem;
    z-index: 4;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
    animation: sealBounce 0.8s ease 0.3s;
}

@keyframes sealBounce {

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

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

/* Envelope Flap */
.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-top: 100px solid #e0b8ac;
    transform-origin: top center;
    z-index: 5;
    animation: flapOpen 0.5s ease 0.4s forwards;
}

.envelope-flap::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -150px;
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-top: 100px solid #d4a898;
}

@keyframes flapOpen {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(180deg);
    }
}

/* Hide envelope when letter expands */
.envelope.hidden {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s ease;
}

/* ===== LETTER PAPER - Expands to Fullscreen ===== */
.letter-paper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 300px;
    background: linear-gradient(180deg, #fffef8 0%, #f8f4e8 100%);
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
    z-index: 15;
    overflow: hidden;
    transform: translate(-50%, -50%) translateY(50px);
    animation: letterRiseAndExpand 1.2s ease 0.8s forwards;
}

.paper-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(200, 180, 160, 0.08) 2px,
            rgba(200, 180, 160, 0.08) 4px);
    pointer-events: none;
}

.paper-lines {
    position: absolute;
    top: 50px;
    left: 40px;
    right: 40px;
    height: 180px;
    background: repeating-linear-gradient(180deg,
            transparent 0px,
            transparent 26px,
            rgba(180, 160, 140, 0.3) 26px,
            rgba(180, 160, 140, 0.3) 28px);
    opacity: 0.7;
}

/* Letter content - hidden initially */
.letter-inner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* Letter content visible after expansion */
.letter-paper.expanded .letter-inner-content {
    opacity: 1;
    pointer-events: auto;
    animation: contentFadeIn 0.8s ease forwards;
}

@keyframes contentFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Letter Rise and Expand Animation */
@keyframes letterRiseAndExpand {
    0% {
        transform: translate(-50%, -50%) translateY(50px);
        width: 240px;
        height: 300px;
        border-radius: 8px;
    }

    25% {
        transform: translate(-50%, -50%) translateY(-100px);
        width: 240px;
        height: 300px;
        border-radius: 8px;
    }

    50% {
        transform: translate(-50%, -50%) translateY(-120px);
        width: 280px;
        height: 350px;
        border-radius: 6px;
    }

    100% {
        transform: translate(-50%, -50%) translateY(0);
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

/* Letter message styles */
.letter-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 25;
    padding: 30px;
    max-width: 600px;
}

.letter-message h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-weight: 600;
    color: #722f37;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.letter-message .main-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: #444;
    line-height: 1.8;
    margin-bottom: 15px;
}

.letter-message .footer-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    color: #b76e79;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px dashed #b76e79;
}

/* ===== Polaroid Wall ===== */
.polaroid-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.wall-polaroid {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: rotate(var(--rotate));
    width: 130px;
    background: white;
    padding: 8px;
    padding-bottom: 35px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: polaroidDrop 0.5s ease forwards;
    transition: transform 0.3s ease;
}

.wall-polaroid:nth-child(1) {
    animation-delay: 2.2s;
}

.wall-polaroid:nth-child(2) {
    animation-delay: 2.3s;
}

.wall-polaroid:nth-child(3) {
    animation-delay: 2.4s;
}

.wall-polaroid:nth-child(4) {
    animation-delay: 2.5s;
}

.wall-polaroid:nth-child(5) {
    animation-delay: 2.6s;
}

.wall-polaroid:nth-child(6) {
    animation-delay: 2.7s;
}

.wall-polaroid:nth-child(7) {
    animation-delay: 2.8s;
}

.wall-polaroid:nth-child(8) {
    animation-delay: 2.9s;
}

.wall-polaroid:nth-child(9) {
    animation-delay: 3.0s;
}

.wall-polaroid:nth-child(10) {
    animation-delay: 3.1s;
}

.wall-polaroid:nth-child(11) {
    animation-delay: 3.2s;
}

.wall-polaroid:nth-child(12) {
    animation-delay: 3.3s;
}

.wall-polaroid:nth-child(13) {
    animation-delay: 3.4s;
}

.wall-polaroid:nth-child(14) {
    animation-delay: 3.5s;
}

.wall-polaroid:nth-child(15) {
    animation-delay: 3.6s;
}

.wall-polaroid:nth-child(16) {
    animation-delay: 3.7s;
}

.wall-polaroid:nth-child(17) {
    animation-delay: 3.8s;
}

.wall-polaroid:nth-child(18) {
    animation-delay: 3.9s;
}

@keyframes polaroidDrop {
    0% {
        opacity: 0;
        transform: rotate(var(--rotate)) translateY(-30px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: rotate(var(--rotate)) translateY(0) scale(1);
    }
}

.wall-polaroid:hover {
    transform: rotate(0deg) scale(1.3) !important;
    z-index: 100;
    pointer-events: auto;
}

.polaroid-image {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
    overflow: hidden;
}

.polaroid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tape effect */
.polaroid-tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 35px;
    height: 18px;
    background: rgba(255, 235, 180, 0.85);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Pin effect */
.polaroid-pin {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #ff6b6b, #c0392b);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.polaroid-pin::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .name-letter {
        font-size: 3rem;
    }

    .question {
        font-size: 1.4rem;
    }

    .card-content {
        padding: 40px 25px;
    }

    .btn-yes {
        padding: 15px 35px;
        font-size: 1.2rem;
    }

    .envelope {
        width: 220px;
        height: 150px;
    }

    .envelope-back {
        height: 120px;
    }

    .envelope-front {
        height: 80px;
    }

    .envelope-flap {
        border-left: 110px solid transparent;
        border-right: 110px solid transparent;
        border-top: 75px solid #e0b8ac;
    }

    .envelope-flap::after {
        top: -75px;
        left: -110px;
        border-left: 110px solid transparent;
        border-right: 110px solid transparent;
        border-top: 75px solid #d4a898;
    }

    .letter-paper {
        width: 180px;
        height: 220px;
    }

    .letter-message h1 {
        font-size: 1.8rem;
    }

    .letter-message .main-text {
        font-size: 1rem;
    }

    .wall-polaroid {
        width: 60px;
        padding: 4px;
        padding-bottom: 18px;
    }

    .polaroid-tape {
        width: 25px;
        height: 12px;
    }

    .polaroid-pin {
        width: 10px;
        height: 10px;
    }
}

/* ===== Cherry Blossom / Sakura - Japanese Minimalist Art ===== */
.sakura-branch {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    animation: branchFadeIn 1.5s ease 2.5s forwards;
}

@keyframes branchFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Branch Positions - Enhanced Size */
.branch-top-left {
    top: -10px;
    left: -10px;
    width: 220px;
    height: 180px;
}

.branch-top-right {
    top: -10px;
    right: -10px;
    width: 220px;
    height: 180px;
    transform: scaleX(-1);
}

.branch-bottom-left {
    bottom: -10px;
    left: -10px;
    width: 200px;
    height: 160px;
    transform: scaleY(-1);
}

.branch-bottom-right {
    bottom: -10px;
    right: -10px;
    width: 200px;
    height: 160px;
    transform: scale(-1, -1);
}

/* Minimalist Branch Lines */
.branch-main {
    position: absolute;
    width: 100%;
    height: 100%;
}

.branch-main::before {
    content: '';
    position: absolute;
    top: 30px;
    left: -10px;
    width: 180px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #6b4f3c 20%, #4a3728);
    border-radius: 4px;
    transform: rotate(22deg);
}

.branch-main::after {
    content: '';
    position: absolute;
    top: 60px;
    left: 80px;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #6b4f3c, #4a3728, transparent);
    border-radius: 3px;
    transform: rotate(40deg);
}

/* Cherry Blossoms - Enhanced Pink Flowers */
.blossom {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff0f3, #ffd1dc, #ffb6c1, #ff91a4);
    box-shadow:
        0 0 15px rgba(255, 182, 193, 0.7),
        0 0 30px rgba(255, 145, 175, 0.4),
        0 0 45px rgba(255, 182, 193, 0.2);
    animation: blossomPulse 2.5s ease-in-out infinite;
}

@keyframes blossomPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* 5-petal flower effect using pseudo elements */
.blossom::before,
.blossom::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.blossom::before {
    width: 80%;
    height: 80%;
    top: -30%;
    left: 10%;
}

.blossom::after {
    width: 70%;
    height: 70%;
    top: 10%;
    left: -25%;
}

/* Individual blossom positions and sizes - ENHANCED */
.b1 {
    width: 22px;
    height: 22px;
    top: 20px;
    left: 45px;
    animation-delay: 0s;
}

.b2 {
    width: 18px;
    height: 18px;
    top: 12px;
    left: 85px;
    animation-delay: 0.4s;
}

.b3 {
    width: 26px;
    height: 26px;
    top: 45px;
    left: 110px;
    animation-delay: 0.8s;
}

.b4 {
    width: 15px;
    height: 15px;
    top: 70px;
    left: 140px;
    animation-delay: 1.2s;
}

.b5 {
    width: 20px;
    height: 20px;
    top: 35px;
    left: 155px;
    animation-delay: 0.6s;
}

/* Additional blossoms for more density */
.b6 {
    width: 12px;
    height: 12px;
    top: 55px;
    left: 70px;
    animation-delay: 1s;
}

.b7 {
    width: 16px;
    height: 16px;
    top: 80px;
    left: 100px;
    animation-delay: 0.3s;
}

/* ===== Falling Sakura Petals ===== */
.sakura-petals-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 30;
}

.sakura-petal {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(ellipse at 30% 30%, #ffd1dc, #ffb6c1);
    border-radius: 50% 0 50% 50%;
    opacity: 0.8;
    animation: sakuraFall linear forwards;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.4);
}

@keyframes sakuraFall {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    100% {
        transform: translateY(100vh) rotate(360deg) translateX(50px);
        opacity: 0.3;
    }
}

/* Responsive sakura */
@media (max-width: 768px) {
    .sakura-branch {
        display: none;
    }

    .sakura-petal {
        width: 8px;
        height: 8px;
    }
}