/* Recipient reveal (founder playbook §13, Peak 2) + the composer's live preview.
   Global (not scoped) so the Accept page and the gift-detail composer preview share one mood system.
   Pure CSS: the feel -> see -> claim sequence reveals via a peer checkbox; no Lottie, no heavy JS,
   so the claim page stays under the <2s budget. Each mood sets --ra (accent) and --rb (soft background). */

.reveal {
    --ra: #E8186D;
    --ra-soft: #FFF0F6;
    --rb: #FFF7FB;
    --r-ink: #1C1B2E;
}

/* One class per wrapping paper, so the reveal is painted in the paper the sender actually chose.
   Keep these in step with the generated .gw-pal--* tokens in gift-wrap.css. */
.paper-blue-circles    { --ra: #2F7DD1; --ra-soft: #E8F2FC; --rb: #F4F9FE; }
.paper-pink-hearts     { --ra: #E8186D; --ra-soft: #FFF0F6; --rb: #FFF7FB; }
.paper-yellow-stars    { --ra: #B07A12; --ra-soft: #FDF4DC; --rb: #FDFAF0; }
.paper-pink-stripes    { --ra: #DB338A; --ra-soft: #FFF1F7; --rb: #FFF8FB; }
.paper-silver-sparkles { --ra: #8C93A3; --ra-soft: #F1F2F5; --rb: #F9FAFB; }
.paper-polka-dots      { --ra: #7C4DFF; --ra-soft: #FBFAFE; --rb: #FCFBFF; }

/* --- Step 1: the note (always visible) --- */
.reveal-note {
    position: relative;
    z-index: 0; /* stacking context so the animated mood layer (::before, z-index:-1) sits behind the text */
    overflow: hidden;
    border-radius: 18px;
    border: 0.5px solid #ECE7EF;
    background: var(--rb);
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(28, 27, 46, 0.05);
}

/* Per-mood animated ambience lives on these two layers, behind the note's content (see "Mood ambience" below). */
.reveal-note::before,
.reveal-note::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* The sender's signature emoji, oversized and faint, as a background motif. */
.reveal-motif {
    position: absolute;
    top: -18px;
    right: -8px;
    font-size: 120px;
    line-height: 1;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.reveal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ra);
}

.reveal-from {
    margin: 10px 0 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--r-ink);
}

.reveal-msg {
    margin: 16px auto 0;
    max-width: 420px;
    border-radius: 12px;
    background: var(--ra-soft);
    padding: 16px 18px;
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
    color: var(--r-ink);
}

.reveal-sound {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 18px 0 0;
    font-size: 12px;
    color: #6B6980;
    cursor: pointer;
}

.reveal-open {
    display: inline-block;
    margin: 14px auto 0;
    cursor: pointer;
    border-radius: 999px;
    background: var(--ra);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 30px;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.reveal-open:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.reveal-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* --- Step 2 + 3: the gift + claim, revealed on open (the "envelope opening") --- */
.reveal-gift {
    max-height: 0;
    opacity: 0;
    transform: translateY(8px);
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}

.reveal-toggle:checked ~ .reveal-open {
    display: none;
}

.reveal-toggle:checked ~ .reveal-sound {
    display: none;
}

.reveal-toggle:checked ~ .reveal-gift {
    max-height: 5000px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 18px;
    text-align: left;
}

.reveal-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 5 / 4;
    background: var(--ra-soft);
}

.reveal-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reveal-hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 56px;
}

.reveal-reason {
    margin-top: 14px;
    border-left: 3px solid var(--ra);
    padding: 4px 0 4px 14px;
    font-size: 14px;
    line-height: 1.6;
    color: #4A4860;
}

.reveal-reason-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ra);
    margin-bottom: 4px;
}

/* The sender's signature emoji as a sign-off at the foot of the note (not buried in the headline). */
.reveal-sign {
    margin: 16px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ra);
}

.reveal-sign-emoji {
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    transform-origin: center bottom;
    animation: gm-sign 2.6s ease-in-out infinite;
}

@keyframes gm-sign {
    0%, 100% { transform: rotate(-7deg) scale(1); }
    50%      { transform: rotate(7deg) scale(1.14); }
}

/* --- Paper ambience (CSS-only). Each paper plays a lively one-shot BURST (::after) that decelerates and fades
   to nothing, settling into a subtle, slow ambient loop (::before). Re-selecting a paper, or opening the
   preview popup, re-renders the card and replays the burst. Mirrors the .gw-amb--* loops in gift-wrap.css. --- */

/* Blue circles — a soft glow blooms and fades, leaving a slow drifting cloud. */
.paper-blue-circles .reveal-note::before {
    background-image: radial-gradient(55% 45% at 35% 40%, rgba(47, 125, 209, 0.12), transparent 70%);
    background-size: 130% 130%;
    animation: gm-cross 12s linear infinite;
}
.paper-blue-circles .reveal-note::after {
    background-image:
        radial-gradient(circle, rgba(47, 125, 209, 0.5) 3.5px, transparent 4.5px),
        radial-gradient(circle, rgba(126, 178, 232, 0.4) 2.5px, transparent 3.5px);
    background-size: 58px 58px, 88px 88px;
    animation: gm-burst-fade 2.8s ease-out forwards;
}

/* Pink hearts — a flurry rising that settles to a faint drift. */
.paper-pink-hearts .reveal-note::before {
    background-image: radial-gradient(circle, rgba(232, 24, 109, 0.14) 2.5px, transparent 3.5px);
    background-size: 108px 108px;
    animation: gm-rise 8s linear infinite;
}
.paper-pink-hearts .reveal-note::after {
    background-image:
        radial-gradient(circle, rgba(232, 24, 109, 0.5) 3px, transparent 4px),
        radial-gradient(circle, rgba(255, 138, 180, 0.4) 2.5px, transparent 3.5px);
    background-size: 56px 56px, 86px 86px;
    animation: gm-burst-rise 2.6s cubic-bezier(0.16, 0.8, 0.3, 1) forwards;
}

/* Yellow stars — a gold sweep + sparkle that flares then rests as a faint shimmer. */
.paper-yellow-stars .reveal-note::before {
    background-image: linear-gradient(115deg, transparent 42%, rgba(176, 122, 18, 0.12) 50%, transparent 58%);
    background-size: 220% 100%;
    animation: gm-sweep 6s linear infinite;
}
.paper-yellow-stars .reveal-note::after {
    background-image:
        linear-gradient(115deg, transparent 36%, rgba(176, 122, 18, 0.4) 50%, transparent 64%),
        radial-gradient(circle, rgba(232, 178, 31, 0.6) 1.6px, transparent 2.6px);
    background-size: 220% 100%, 80px 80px;
    animation: gm-burst-sweep 2.4s ease-out forwards;
}

/* Pink stripes — a warm breath of colour that rises and settles into a gentle pulse. */
.paper-pink-stripes .reveal-note::before {
    background-image: radial-gradient(70% 60% at 50% 100%, rgba(219, 51, 138, 0.12), transparent 70%);
    animation: gm-breathe 6s ease-in-out infinite;
}
.paper-pink-stripes .reveal-note::after {
    background-image: radial-gradient(circle, rgba(219, 51, 138, 0.5) 2.5px, transparent 3.5px);
    background-size: 84px 84px;
    animation: gm-burst-rise 2.8s cubic-bezier(0.16, 0.8, 0.3, 1) forwards;
}

/* Silver sparkles — a sparkle that flares then twinkles faintly. */
.paper-silver-sparkles .reveal-note::before {
    background-image: radial-gradient(circle, rgba(140, 147, 163, 0.16) 1.4px, transparent 2.4px);
    background-size: 96px 96px;
    background-position: 28px 24px;
    animation: gm-twinkle 3.2s ease-in-out infinite;
}
.paper-silver-sparkles .reveal-note::after {
    background-image:
        radial-gradient(circle, rgba(140, 147, 163, 0.7) 2px, transparent 3px),
        radial-gradient(circle, rgba(198, 203, 214, 0.62) 1.5px, transparent 2.5px);
    background-size: 56px 56px, 84px 84px;
    background-position: 12px 16px, 52px 44px;
    animation: gm-burst-fade 2.6s ease-out forwards;
}

/* Colourful polka dots — a confetti pop that rains down then thins out. */
.paper-polka-dots .reveal-note::before {
    background-image:
        radial-gradient(circle, rgba(124, 77, 255, 0.16) 2.5px, transparent 3.5px),
        radial-gradient(circle, rgba(31, 163, 156, 0.14) 2.5px, transparent 3.5px);
    background-size: 100px 100px, 138px 138px;
    animation: gm-fall 8s linear infinite;
}
.paper-polka-dots .reveal-note::after {
    background-image:
        radial-gradient(circle, rgba(232, 24, 109, 0.72) 3px, transparent 4px),
        radial-gradient(circle, rgba(47, 125, 209, 0.72) 3px, transparent 4px),
        radial-gradient(circle, rgba(217, 166, 46, 0.66) 2.5px, transparent 3.5px),
        radial-gradient(circle, rgba(31, 163, 156, 0.66) 2.5px, transparent 3.5px);
    background-size: 48px 48px, 68px 68px, 88px 88px, 112px 112px;
    animation: gm-burst-fall 2.8s cubic-bezier(0.16, 0.8, 0.3, 1) forwards;
}

/* Subtle, slow ambient loops (the resting state after the burst). */
@keyframes gm-fall    { to { background-position: 0 220px; } }
@keyframes gm-rise    { to { background-position: 0 -220px; } }
@keyframes gm-sweep   { 0% { background-position: 200% 0; } 100% { background-position: -120% 0; } }
@keyframes gm-cross   { 0% { background-position: -25% 35%; } 100% { background-position: 125% 45%; } }
@keyframes gm-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
@keyframes gm-breathe { 0%, 100% { background-size: 95% 95%; opacity: 0.7; } 50% { background-size: 125% 125%; opacity: 1; } }

/* One-shot bursts: dense + energetic, decelerate (ease-out / soft cubic) and fade to nothing. */
@keyframes gm-burst-fall  { 0% { opacity: 1; background-position: 0 -60px; } 100% { opacity: 0; background-position: 0 320px; } }
@keyframes gm-burst-rise  { 0% { opacity: 1; background-position: 0 60px; } 100% { opacity: 0; background-position: 0 -320px; } }
@keyframes gm-burst-sweep { 0% { opacity: 1; background-position: 200% 0, 0 0; } 100% { opacity: 0; background-position: -120% 0, 0 0; } }
@keyframes gm-burst-fade  { 0% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0; transform: scale(1); } }

/* Reduced-motion: skip the slide/fade and all mood ambience, just show it. */
@media (prefers-reduced-motion: reduce) {
    .reveal-gift {
        transition: none;
    }

    .reveal-note::before,
    .reveal-note::after,
    .reveal-sign-emoji {
        animation: none;
    }
}

/* --- Composer live preview reuse (gift-detail card): adopt the chosen mood's colours --- */
.gf-preview-card.reveal {
    background: var(--rb);
    border-color: #ECE7EF;
}

.gf-preview-card.reveal .gf-preview-from {
    color: var(--ra);
}

.gf-preview-emoji {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 8px;
}

.gf-preview-emoji:empty {
    display: none;
}

/* Preview header: label on the left, the "preview their experience" trigger on the right. */
.gf-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.gf-preview-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ra, #E8186D);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.gf-preview-btn:hover {
    text-decoration: underline;
}

/* The "why this gift" reason, echoed in the composer preview so the field visibly feeds the reveal. */
.gf-preview-reason {
    margin-top: 12px;
    border-left: 3px solid var(--ra);
    padding: 4px 0 4px 12px;
    text-align: left;
    font-size: 13px;
    line-height: 1.55;
    color: #4A4860;
}

.gf-preview-reason-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ra);
    margin-bottom: 3px;
}

/* --- Composer left column: the always-on live render of the recipient's reveal --- */
.gm-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.gm-preview-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gh-ink, #1C1B2E);
}

/* Keep the live preview in view while the editor scrolls (two-column layout only). */
/* Mobile-first: the editor is the whole screen; the live-preview column is hidden and reached via a button
   (the "Preview their experience" popup). The side-by-side preview is a wide-screen enhancement. */
.gm-preview-col { display: none; }

/* The on-demand preview button shown in the editor on small screens (the live column replaces it on desktop). */
.gm-preview-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 13px 16px;
    border: 1.5px solid var(--gh-line, #ECE7EF);
    border-radius: 999px;
    background: #fff;
    color: var(--gh-ink, #1C1B2E);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

@media (min-width: 768px) {
    /* Balanced, centred columns: a compact reveal preview + a readable-width editor. Capping the editor
       (rather than letting it take 1fr) keeps the form and its primary button from stretching on wide screens. */
    .gm-grid {
        grid-template-columns: minmax(0, 380px) minmax(0, 560px);
        justify-content: center;
    }
    .gm-preview-col {
        display: block;
        position: sticky;
        top: 24px;
    }
    /* Desktop shows the always-on live preview, so the in-editor button isn't needed. */
    .gm-preview-mobile { display: none; }
}

.gm-live-gift {
    margin-top: 18px;
    text-align: left;
}

.gm-msg-empty {
    color: #8A88A0;
    opacity: 0.9;
}

/* --- Recipient-experience preview popup (composer) --- */
.gf-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 32px 16px;
    background: rgba(28, 27, 46, 0.55);
}

.gf-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    border-radius: 22px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 30px 60px -20px rgba(28, 27, 46, 0.5);
}

.gf-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #6B6980;
    cursor: pointer;
}

.gf-modal-eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B6980;
    text-align: center;
}

.gf-modal-item {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--r-ink, #1C1B2E);
}