/* ── Envelope Scene ── */
#envelope-scene {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    background:
        radial-gradient(ellipse 72% 58% at 50% 40%, rgba(189, 154, 95, 0.16) 0%, transparent 62%),
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(61, 79, 95, 0.28) 0%, transparent 55%),
        var(--envelope-scene-bg);
    perspective: 1000px;
    transition: opacity 1.5s ease-in-out;
}

.envelope-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem 1.75rem;
    width: min(100%, 380px);
}

.envelope-dom-root {
    position: relative;
    width: min(360px, 92vw);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: min(300px, 48vh);
}

#envelope-scene.renderer-three .envelope-dom-root {
    display: none;
}

#envelope-scene.renderer-dom .envelope-canvas-host {
    display: none !important;
}

.envelope-wrapper--dom {
    flex-shrink: 0;
}

.envelope-canvas-host {
    position: relative;
    width: min(360px, 92vw);
    height: min(300px, 48vh);
    min-height: 240px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.65s ease, visibility 0.65s;
}

.envelope-canvas-host.is-visible {
    opacity: 1;
    visibility: visible;
}

.envelope-canvas-host canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.envelope-card-anchor {
    position: fixed;
    width: 2px;
    height: 2px;
    margin: -1px 0 0 -1px;
    pointer-events: none;
    opacity: 0;
    z-index: 55;
}

.wax-seal--overlay {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s, transform 0.25s ease;
}

.wax-seal--overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.envelope-ambient {
    position: absolute;
    inset: -10% -6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.14) 0%, transparent 68%);
    filter: blur(26px);
    pointer-events: none;
    animation: ambient-pulse 5s ease-in-out infinite;
}

.envelope-spotlight {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(340px, 92vw);
    height: 270px;
    transform: translate(-50%, -54%);
    border-radius: 42% 42% 50% 50%;
    background: radial-gradient(
        ellipse at 50% 32%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 38%,
        transparent 72%
    );
    pointer-events: none;
}

@keyframes ambient-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

#envelope-scene.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#envelope-scene.is-removed {
    display: none;
}

/* Req 16: Loading */
.envelope-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--envelope-scene-bg);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.envelope-loading.is-visible {
    opacity: 1;
    visibility: visible;
}

.envelope-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(189, 154, 95, 0.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: envelope-spin 0.9s linear infinite;
}

.envelope-loading-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
}

@keyframes envelope-spin {
    to { transform: rotate(360deg); }
}

/* Req 15: Welcome */
.envelope-welcome {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    color: var(--gold);
    text-align: center;
    z-index: 15;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.envelope-welcome.is-visible {
    opacity: 1;
    visibility: visible;
}

.envelope-welcome.is-fading {
    opacity: 0;
}

/* Hint & Req 17: Instructions */
.envelope-hint {
    margin: 0;
    padding: 0 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s;
}

.envelope-hint.is-visible {
    opacity: 1;
}

.envelope-instruction {
    position: absolute;
    left: 50%;
    top: calc(50% + 4.5rem);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.envelope-instruction.is-visible {
    opacity: 1;
    animation: instruction-bounce 1.2s ease-in-out infinite;
}

.instruction-arrow {
    font-size: 1.5rem;
    color: var(--gold);
    line-height: 1;
}

.instruction-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

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

/* ── Envelope 3D wrapper ── */
.envelope-wrapper {
    position: relative;
    width: min(320px, 90vw);
    height: 236px;
    background-color: #3d4f5f;
    transform-style: preserve-3d;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    border-radius: 6px;
    transition: opacity 0.6s ease, visibility 0.6s, overflow 0s 1.2s;
    /* Req 3: envelope shadow */
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55))
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.envelope-wrapper.is-visible {
    opacity: 1;
    visibility: visible;
}

.envelope-wrapper.is-open {
    overflow: visible;
    transition-delay: 0s;
}

/* DOM renderer: لا filter على الـwrapper — كان يقطع interpolate لـtransform على الغطاء/الكارت */
.envelope-wrapper.envelope-wrapper--dom {
    filter: none;
    box-shadow:
        0 26px 48px rgba(0, 0, 0, 0.52),
        0 12px 28px rgba(0, 0, 0, 0.3);
    perspective: 1100px;
    perspective-origin: 50% 26%;
}

.envelope-wrapper.envelope-wrapper--dom.is-open .envelope-pocket-shade {
    transition: opacity var(--env-pocket-fade-ms, 520ms) ease;
}

/* Req 4: paper texture base */
.envelope-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #ebe4d6;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 120px 120px;
}

/* Req 1: patterns */
.envelope-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image: url('../assets/envelope/patterns/islamic-pattern.svg');
    background-size: 48px 48px;
    z-index: 1;
}

.envelope-pattern--flap {
    inset: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

/* Req 5: ribbon — belly band at pocket */
.envelope-ribbon {
    position: absolute;
    top: auto;
    bottom: 18px;
    left: -3%;
    width: 106%;
    height: 22px;
    transform: rotate(-4deg);
    z-index: 4;
    background: linear-gradient(
        180deg,
        #f5e6a8 0%,
        #d4af37 35%,
        #a6844f 50%,
        #d4af37 65%,
        #f5e6a8 100%
    );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Req 6: flowers */
.envelope-flower {
    position: absolute;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    animation: flower-enter 0.8s ease forwards;
}

.envelope-flower--tl { top: -8px; left: -6px; animation-delay: 0.1s; }
.envelope-flower--tr { top: -8px; right: -6px; animation-delay: 0.2s; }
.envelope-flower--bl { bottom: 8px; left: -4px; animation-delay: 0.3s; }
.envelope-flower--br { bottom: 8px; right: -4px; animation-delay: 0.4s; }

.envelope-wrapper.is-visible .envelope-flower {
    opacity: 1;
}

@keyframes flower-enter {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.envelope-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 160px solid #4a5f72;
    border-right: 160px solid #4a5f72;
    border-bottom: 110px solid #3d4f5f;
    z-index: 3;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.card-inside {
    position: absolute;
    top: 108px;
    left: 14px;
    width: calc(100% - 28px);
    height: 128px;
    background: linear-gradient(180deg, #fffefb 0%, #f8f4ec 100%);
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.05),
        0 6px 18px rgba(0, 0, 0, 0.2);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid var(--gold);
    border-radius: 6px;
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.envelope-wrapper--dom .card-inside {
    transition:
        transform var(--env-card-duration-ms, 1.85s) cubic-bezier(0.22, 1, 0.36, 1)
            var(--env-card-delay-ms, 280ms),
        box-shadow var(--env-card-duration-ms, 1.85s) ease var(--env-card-delay-ms, 280ms);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.envelope-wrapper.is-visible:not(.is-open) .card-inside {
    animation: card-peek 3.2s ease-in-out infinite;
}

@keyframes card-peek {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.envelope-pocket-shade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 106px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(36, 48, 58, 0.88) 0%,
        rgba(42, 56, 68, 0.35) 72%,
        transparent 100%
    );
}

.envelope-wrapper.is-open .envelope-pocket-shade {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-inside-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
}

.card-eyebrow {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(189, 154, 95, 0.85);
    text-transform: uppercase;
}

/* Req 4: card texture */
.card-inside::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    opacity: 0.08;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 100px 100px;
}

.card-inside h2 {
    margin: 0;
    font-family: 'Amiri', serif;
    color: var(--gold);
    font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    border-top: 120px solid #2a3844;
    transform-origin: top center;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
    z-index: 4;
    transform-style: preserve-3d;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.envelope-wrapper--dom .envelope-flap {
    transition:
        transform var(--env-flap-ms, 1.35s) cubic-bezier(0.33, 1, 0.68, 1),
        filter var(--env-flap-ms, 1.35s) ease-out;
    transform: translate3d(0, 0, 0);
    transform-origin: top center;
    backface-visibility: hidden;
}

/* Req 2: Wax seal + shimmer */
.wax-seal {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 35% 35%, #e8c96a, #8b6b22);
    border: none;
    border-radius: 50%;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.45),
        inset 0 2px 6px rgba(255, 255, 255, 0.35);
    z-index: 5;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: 1.5rem;
    transition:
        transform 0.25s ease,
        opacity 0.5s ease,
        box-shadow 0.25s ease;
    animation: seal-pulse 2s infinite;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.35);
    overflow: hidden;
}

.wax-seal::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 236, 179, 0.65) 50%,
        transparent 65%
    );
    animation: seal-shimmer 2.5s ease-in-out infinite;
    pointer-events: none;
}

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

.wax-seal:disabled {
    cursor: default;
    animation: none;
}

/* Req 14: hover */
@media (hover: hover) {
    .wax-seal:hover:not(:disabled) {
        transform: translateX(-50%) scale(1.1);
        animation: seal-pulse-hover 1.2s infinite;
    }
}

@keyframes seal-pulse-hover {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.65); }
    70% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

@keyframes seal-pulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* Req 11: melt */
.wax-seal.is-melting {
    animation: seal-melt 700ms ease forwards;
    pointer-events: none;
}

.wax-seal.is-melted {
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(0.4);
    pointer-events: none;
}

@keyframes seal-melt {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(14px) scale(0.35);
    }
}

/* Req 7: shake */
.envelope-wrapper.is-shaking {
    animation: envelope-shake 400ms ease-in-out;
}

@keyframes envelope-shake {
    0%, 100% { transform: rotate(0) translate(0, 0); }
    20% { transform: rotate(-3deg) translate(-3px, 1px); }
    40% { transform: rotate(3deg) translate(3px, -1px); }
    60% { transform: rotate(-2deg) translate(-2px, 0); }
    80% { transform: rotate(2deg) translate(2px, 0); }
}

/* Open states — non-DOM (legacy markup) */
#envelope-wrapper.is-open:not(.envelope-wrapper--dom) .envelope-flap,
.envelope-wrapper.is-open:not(.envelope-wrapper--dom) .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* DOM renderer: flap + preserve-3d without parent filter jank */
#envelope-wrapper.envelope-wrapper--dom.is-open .envelope-flap,
.envelope-wrapper--dom.is-open .envelope-flap {
    transform: translate3d(0, -0.5px, 2px) rotateX(178deg);
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.22));
}

#envelope-wrapper.is-open .wax-seal:not(.is-melting),
.envelope-wrapper.is-open .wax-seal:not(.is-melting) {
    opacity: 0;
    transform: translateX(-50%) scale(0);
    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Req 10: smooth card reveal */
.envelope-wrapper.is-smooth-reveal.is-open:not(.envelope-wrapper--dom) .card-inside,
#envelope-wrapper.is-smooth-reveal.is-open:not(.envelope-wrapper--dom) .card-inside {
    transition-delay: 300ms;
    transition-duration: 1.8s;
    transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1);
    transform: translateY(-120px) scale(1.1);
    z-index: 6;
}

.envelope-wrapper--dom.is-smooth-reveal.is-open .card-inside,
#envelope-wrapper.envelope-wrapper--dom.is-smooth-reveal.is-open .card-inside {
    transition-property: transform, box-shadow;
    transition-delay: var(--env-card-delay-ms, 320ms);
    transition-duration: var(--env-card-duration-ms, 2200ms);
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translate3d(0, -118px, 3px) scale(1.1);
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.05),
        0 18px 36px rgba(0, 0, 0, 0.24);
    z-index: 6;
}

#envelope-wrapper.is-open:not(.envelope-wrapper--dom) .card-inside,
.envelope-wrapper.is-open:not(.envelope-wrapper--dom) .card-inside {
    animation: none;
    transform: translateY(-130px) scale(1.08);
    z-index: 6;
}

.envelope-wrapper--dom.is-open:not(.is-smooth-reveal) .card-inside {
    animation: none;
    transform: translate3d(0, -128px, 3px) scale(1.08);
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.05),
        0 16px 32px rgba(0, 0, 0, 0.22);
    z-index: 6;
}

/* Req 20: instant reduced path */
.envelope-wrapper.is-instant.is-open .envelope-flap,
.envelope-wrapper.is-instant.is-open .card-inside {
    transition: none;
}

.envelope-wrapper.is-instant.is-open .card-inside {
    transform: translate3d(0, -100px, 0) scale(1.05);
}

/* Req 8: golden particles */
.gold-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: radial-gradient(circle, #f5e6a8, #bd9a5f);
    pointer-events: none;
    z-index: 25;
    animation: gold-particle-fly 1s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes gold-particle-fly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.3);
    }
}

/* Feature toggles via config — hide when disabled */
#envelope-scene.no-patterns .envelope-pattern { display: none; }
#envelope-scene.no-shimmer .wax-seal::before { display: none; }
#envelope-scene.no-texture .envelope-wrapper::before,
#envelope-scene.no-texture .card-inside::before { display: none; }
#envelope-scene.no-ribbon .envelope-ribbon { display: none; }
#envelope-scene.no-flowers .envelope-flower { display: none; }
#envelope-scene.no-shadows .envelope-wrapper,
#envelope-scene.no-shadows .envelope-front,
#envelope-scene.no-shadows .envelope-flap,
#envelope-scene.no-shadows .wax-seal {
    filter: none;
}

#envelope-scene.no-hover .wax-seal:hover:not(:disabled) {
    transform: translateX(-50%);
    animation: seal-pulse 2s infinite;
}

/* Reduced motion */
#envelope-scene.reduced-motion .envelope-spinner,
#envelope-scene.reduced-motion .wax-seal::before,
#envelope-scene.reduced-motion .envelope-instruction.is-visible,
#envelope-scene.reduced-motion .envelope-ambient,
#envelope-scene.reduced-motion .envelope-wrapper.is-visible:not(.is-open) .card-inside,
#envelope-scene.reduced-motion .envelope-flower {
    animation: none;
}

#envelope-scene.reduced-motion .wax-seal::before {
    background: linear-gradient(135deg, #d4af37, #f5e6a8);
    transform: none;
    inset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .envelope-spinner,
    .wax-seal::before,
    .envelope-instruction.is-visible,
    .envelope-flower,
    .envelope-ambient,
    .envelope-wrapper.is-visible:not(.is-open) .card-inside {
        animation: none !important;
    }

    .envelope-flap,
    .card-inside,
    #envelope-scene,
    .envelope-wrapper,
    .envelope-welcome,
    .envelope-loading {
        transition: none !important;
    }

    .wax-seal {
        animation: none;
    }
}

@media (max-width: 340px) {
    .envelope-wrapper {
        transform: scale(0.9);
        transform-origin: center center;
    }
}