@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=DM+Serif+Display:ital@0;1&family=Fredoka:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Yeseva+One&display=swap');

/* ========================================================================== 
   Wish Link card studio
   Six visual identities share the occasion palette, but not the same cover,
   type or opening motion. The card is treated as an object before it becomes
   a form: the opening ritual is the signature of the feature.
   ========================================================================== */

.wl-scope {
    --wl-font-body: "Manrope", system-ui, sans-serif;
    --wl-font-display: "Cormorant Garamond", Georgia, serif;
    --wl-font-utility: "Manrope", system-ui, sans-serif;
    --wl-paper: #fffdf8;
    --wl-ink: var(--wl-deep-c);
    --wl-line: hsl(var(--wl-deep) / .17);
    --wl-soft: hsl(var(--wl-primary) / .08);
    --wl-card-shadow: 0 28px 80px -34px hsl(var(--wl-deep) / .48),
                      0 12px 28px -20px hsl(var(--wl-deep) / .32);
    font-family: var(--wl-font-body);
}

.wl-design-keepsake {
    --wl-font-display: "Cormorant Garamond", Georgia, serif;
    --wl-paper: #fffaf0;
}

.wl-design-botanical {
    --wl-font-display: "DM Serif Display", Georgia, serif;
    --wl-paper: hsl(var(--wl-bg));
}

.wl-design-celestial {
    --wl-font-display: "Cormorant Garamond", Georgia, serif;
    --wl-paper: hsl(var(--wl-deep));
    --wl-ink: hsl(var(--wl-bg));
    --wl-line: hsl(var(--wl-accent) / .4);
}

.wl-design-celebration {
    --wl-font-display: "Fredoka", system-ui, sans-serif;
    --wl-font-body: "Manrope", system-ui, sans-serif;
    --wl-paper: #fffdf5;
}

.wl-design-festival {
    --wl-font-display: "Yeseva One", Georgia, serif;
    --wl-paper: hsl(var(--wl-bg));
}

.wl-design-modern {
    --wl-font-display: "Manrope", system-ui, sans-serif;
    --wl-font-utility: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --wl-paper: #fff;
}

.wl-scope :focus-visible {
    outline: 3px solid hsl(var(--wl-accent));
    outline-offset: 4px;
}

/* ---------------------------------------------------------------- builder */

.wl-builder {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 18%, hsl(var(--wl-accent) / .13), transparent 24rem),
        radial-gradient(circle at 92% 36%, hsl(var(--wl-primary) / .10), transparent 28rem),
        var(--wl-bg-c);
}

.wl-builder-head {
    position: relative;
    overflow: hidden;
    padding: 2rem 0 3.1rem;
    border-bottom: 1px solid hsl(var(--wl-deep) / .08);
}

.wl-builder-head::after {
    content: "";
    position: absolute;
    width: 22rem;
    height: 22rem;
    right: -7rem;
    bottom: -15rem;
    border-radius: 50%;
    border: 1px solid hsl(var(--wl-primary) / .14);
    box-shadow: 0 0 0 3rem hsl(var(--wl-primary) / .035),
                0 0 0 7rem hsl(var(--wl-primary) / .025);
    pointer-events: none;
}

.wl-back-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: hsl(var(--wl-deep) / .7);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.wl-back-link:hover { color: var(--wl-primary-c); }

.wl-builder-intro {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
}

.wl-builder-intro .wl-eyebrow { margin-bottom: .8rem; }
.wl-builder-intro .wl-title {
    max-width: 13ch;
    font-family: var(--wl-font-display);
    font-size: clamp(2.35rem, 5vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: .94;
    margin-bottom: 1rem;
}
.wl-builder-intro .wl-title em { font-weight: inherit; font-style: italic; }
.wl-builder-intro .wl-sub { margin: 0; text-align: left; max-width: 38rem; }

.wl-builder-progress {
    display: flex;
    gap: .55rem;
    list-style: none;
    padding: 0;
    margin: 0 0 .45rem;
}

.wl-builder-progress li {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .7rem;
    border-radius: 999px;
    color: hsl(var(--wl-deep) / .45);
    font-size: .78rem;
    font-weight: 700;
}

.wl-builder-progress li span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid hsl(var(--wl-deep) / .18);
    border-radius: 50%;
    font-size: .68rem;
}

.wl-builder-progress .is-current {
    background: hsl(var(--wl-primary) / .1);
    color: var(--wl-primary-c);
}
.wl-builder-progress .is-current span { border-color: var(--wl-primary-c); }

.wl-builder-main { padding-top: 3rem; padding-bottom: 5rem; }

.wl-form-section {
    padding: 1.7rem;
    margin-bottom: 1rem;
    border-radius: 1.25rem;
    border: 1px solid hsl(var(--wl-deep) / .1);
    box-shadow: 0 14px 36px -32px hsl(var(--wl-deep) / .5);
}

.wl-form-heading {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.35rem;
}

.wl-form-step {
    flex: 0 0 auto;
    color: var(--wl-primary-c);
    font-family: var(--wl-font-utility);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding-top: .3rem;
}

.wl-form-heading h2 {
    margin: 0 0 .2rem;
    color: var(--wl-deep-c);
    font-size: 1.05rem;
    font-weight: 800;
}

.wl-form-heading p {
    margin: 0;
    color: hsl(var(--wl-deep) / .58);
    font-size: .83rem;
    line-height: 1.5;
}

.wl-builder .wl-input,
.wl-builder .wl-textarea {
    border-width: 1px;
    border-color: hsl(var(--wl-deep) / .15);
    border-radius: .7rem;
    background: hsl(var(--wl-bg) / .5);
}

.wl-message-input {
    min-height: 12rem;
    font-family: var(--wl-font-display) !important;
    font-size: 1.24rem !important;
    line-height: 1.55 !important;
}

.wl-writing-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .55rem;
    color: hsl(var(--wl-deep) / .5);
    font-size: .75rem;
}

.wl-theme-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.wl-theme-choice { min-width: 0; }
.wl-theme-choice > input { position: absolute; opacity: 0; pointer-events: none; }

.wl-theme-option {
    position: relative;
    display: grid !important;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    min-height: 6.35rem;
    padding: .75rem !important;
    text-align: left !important;
    border: 1px solid hsl(var(--wl-deep) / .13) !important;
    border-radius: .9rem !important;
    background: #fff !important;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.wl-theme-option:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--wl-primary) / .42) !important;
}

.wl-theme-choice input:checked + .wl-theme-option {
    border-color: var(--wl-primary-c) !important;
    background: hsl(var(--wl-primary) / .04) !important;
    box-shadow: 0 0 0 3px hsl(var(--wl-primary) / .1);
}

.wl-theme-choice input:focus-visible + .wl-theme-option {
    outline: 3px solid hsl(var(--wl-accent));
    outline-offset: 3px;
}

.wl-theme-copy { min-width: 0; }
.wl-theme-copy strong {
    display: block;
    color: var(--wl-deep-c);
    font-size: .83rem;
    line-height: 1.25;
    margin-bottom: .25rem;
}
.wl-theme-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: hsl(var(--wl-deep) / .53);
    font-size: .67rem;
    font-weight: 500;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wl-theme-check {
    position: absolute;
    top: .42rem;
    right: .42rem;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--wl-primary-c);
    color: #fff;
    font-size: .65rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .16s ease, transform .16s ease;
}
.wl-theme-choice input:checked + .wl-theme-option .wl-theme-check { opacity: 1; transform: scale(1); }

.wl-theme-art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.8rem;
    overflow: hidden;
    border-radius: .45rem;
    box-shadow: 0 7px 15px -10px rgba(0,0,0,.55);
    color: var(--wl-deep-c);
    background: var(--wl-paper);
}

.wl-theme-art::before,
.wl-theme-art::after { content: ""; position: absolute; pointer-events: none; }
.wl-theme-art-mark { position: relative; z-index: 2; font-size: 1rem; }
.wl-theme-art-line { position: relative; z-index: 2; width: 1.4rem; height: 1px; margin: .32rem 0; background: currentColor; opacity: .35; }
.wl-theme-art-name { position: relative; z-index: 2; font-family: var(--wl-font-display); font-size: .55rem; font-weight: 700; }

.wl-theme-art.wl-design-keepsake { background: linear-gradient(145deg, #fffaf0, #f2e3c7); }
.wl-theme-art.wl-design-keepsake::before { inset: .32rem; border: 1px solid hsl(var(--wl-primary) / .32); }
.wl-theme-art.wl-design-keepsake::after { width: 1.05rem; height: 1.05rem; bottom: .38rem; border-radius: 50%; background: var(--wl-primary-c); box-shadow: inset 0 0 0 3px hsl(var(--wl-deep) / .13); }

.wl-theme-art.wl-design-botanical { background: linear-gradient(160deg, hsl(var(--wl-bg)), #fff); }
.wl-theme-art.wl-design-botanical::before { width: 4rem; height: 4rem; border: 9px double hsl(var(--wl-primary) / .22); border-radius: 55% 40% 52% 45%; transform: rotate(18deg); }
.wl-theme-art.wl-design-botanical::after { width: 2rem; height: .7rem; top: .2rem; right: -.4rem; border-radius: 100%; background: hsl(var(--wl-primary) / .32); transform: rotate(35deg); }

.wl-theme-art.wl-design-celestial { color: hsl(var(--wl-accent)); background: radial-gradient(circle at 70% 20%, hsl(var(--wl-primary) / .55), transparent 28%), hsl(var(--wl-deep)); }
.wl-theme-art.wl-design-celestial::before { width: 1.3rem; height: 1.3rem; top: .38rem; right: .5rem; border-radius: 50%; box-shadow: -.35rem .12rem 0 hsl(var(--wl-accent)); }
.wl-theme-art.wl-design-celestial::after { inset: .35rem; border: 1px solid hsl(var(--wl-accent) / .34); }

.wl-theme-art.wl-design-celebration { background: linear-gradient(135deg, hsl(var(--wl-accent) / .35), #fff 55%); }
.wl-theme-art.wl-design-celebration::before { inset: 0; background: radial-gradient(circle, var(--wl-primary-c) 0 2px, transparent 3px) 0 0/14px 14px; opacity: .5; transform: rotate(12deg) scale(1.2); }
.wl-theme-art.wl-design-celebration::after { width: 5rem; height: 1rem; bottom: .5rem; left: -.2rem; background: hsl(var(--wl-accent)); transform: rotate(-8deg); }

.wl-theme-art.wl-design-festival { color: hsl(var(--wl-accent)); background: linear-gradient(150deg, hsl(var(--wl-deep)), hsl(var(--wl-primary))); }
.wl-theme-art.wl-design-festival::before { inset: .3rem; border: 2px solid hsl(var(--wl-accent) / .62); border-radius: 2rem 2rem .25rem .25rem; }
.wl-theme-art.wl-design-festival::after { width: 1.8rem; height: 1.8rem; top: -.8rem; border: 1px solid hsl(var(--wl-accent) / .6); transform: rotate(45deg); }

.wl-theme-art.wl-design-modern { background: #fff; border: 1px solid hsl(var(--wl-deep) / .18); border-radius: .15rem; }
.wl-theme-art.wl-design-modern::before { width: 150%; height: .65rem; top: .5rem; background: var(--wl-primary-c); transform: rotate(-8deg); }
.wl-theme-art.wl-design-modern::after { width: .5rem; height: .5rem; right: .42rem; bottom: .42rem; background: hsl(var(--wl-accent)); }

.wl-privacy-note { display: flex; gap: .75rem; align-items: flex-start; margin: 1rem 0; }
.wl-privacy-note > span { font-size: 1.4rem; line-height: 1; }
.wl-privacy-note p { margin: 0; font-size: .78rem; line-height: 1.55; }
.wl-create-btn { width: 100%; min-height: 3.5rem; border-radius: .8rem; }

/* --------------------------------------------------------- builder preview */

.wl-preview-sticky { position: sticky; top: 1.25rem; }
.wl-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.wl-preview-toolbar > div { display: flex; flex-direction: column; }
.wl-preview-toolbar span { color: hsl(var(--wl-deep) / .5); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wl-preview-toolbar strong { color: var(--wl-deep-c); font-size: .86rem; }
.wl-replay-btn {
    border: 0;
    background: transparent;
    color: var(--wl-primary-c);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.wl-card-theatre {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 43rem;
    overflow: hidden;
    border: 1px solid hsl(var(--wl-deep) / .1);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 50% 10%, hsl(var(--wl-accent) / .18), transparent 17rem),
        linear-gradient(165deg, hsl(var(--wl-bg)), hsl(var(--wl-primary) / .09));
    box-shadow: 0 28px 70px -46px hsl(var(--wl-deep) / .55);
    isolation: isolate;
}

.wl-card-theatre::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .34;
    background-image: radial-gradient(hsl(var(--wl-deep) / .16) .7px, transparent .7px);
    background-size: 16px 16px;
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.wl-preview-stars { position: absolute; inset: 0; pointer-events: none; }
.wl-preview-stars i { position: absolute; width: .3rem; height: .3rem; border-radius: 50%; background: hsl(var(--wl-accent)); opacity: .55; }
.wl-preview-stars i:nth-child(1) { left: 12%; top: 15%; }
.wl-preview-stars i:nth-child(2) { right: 11%; top: 24%; width: .5rem; height: .5rem; }
.wl-preview-stars i:nth-child(3) { left: 16%; bottom: 18%; width: .45rem; height: .45rem; }
.wl-preview-stars i:nth-child(4) { right: 18%; bottom: 11%; }

.wl-preview-card,
.wl-preview-cover {
    width: min(82%, 22rem);
    min-height: 34rem;
    border-radius: .4rem;
    box-shadow: var(--wl-card-shadow);
}

.wl-preview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2.25rem 2rem;
    overflow: hidden;
    background: var(--wl-paper);
    color: var(--wl-ink);
    text-align: center;
}

.wl-preview-cover {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.4rem;
    overflow: hidden;
    color: var(--wl-ink);
    background: var(--wl-paper);
    text-align: center;
    transform-origin: center bottom;
}

.wl-preview-cover::before,
.wl-preview-cover::after { content: ""; position: absolute; pointer-events: none; }
.wl-preview-cover-kicker,
.wl-preview-tap { font-family: var(--wl-font-utility); font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.wl-preview-cover-name { max-width: 11ch; margin: .8rem 0 1.25rem; font-family: var(--wl-font-display); font-size: 2rem; font-weight: 600; line-height: 1; }
.wl-preview-seal { position: relative; z-index: 2; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--wl-primary-c); color: #fff; box-shadow: 0 6px 18px hsl(var(--wl-deep) / .24); }
.wl-preview-tap { opacity: .6; font-size: .55rem; }

.wl-card-ornament { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: 1.2rem; border-radius: 50%; background: hsl(var(--wl-primary) / .09); font-size: 1.4rem; }
.wl-card-kicker { margin: 0 0 .65rem; font-family: var(--wl-font-utility); font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.wl-preview-card h2,
.wl-finished-head h1 { margin: 0; font-family: var(--wl-font-display); font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 600; line-height: .95; letter-spacing: -.025em; }
.wl-card-from { margin: .65rem 0 0; font-size: .76rem; opacity: .62; }
.wl-card-rule { display: flex; align-items: center; justify-content: center; width: 100%; margin: 1.5rem 0; }
.wl-card-rule::before,
.wl-card-rule::after { content: ""; flex: 1; height: 1px; background: var(--wl-line); }
.wl-card-rule span { width: .42rem; height: .42rem; margin: 0 .7rem; background: hsl(var(--wl-accent)); transform: rotate(45deg); }
.wl-card-message { width: 100%; max-height: 10.5rem; overflow: auto; margin: 0; color: var(--wl-ink); font-family: var(--wl-font-display); font-size: 1rem; line-height: 1.65; text-align: left; white-space: pre-wrap; scrollbar-width: thin; }
.wl-preview-response { width: 100%; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--wl-line); }
.wl-preview-response > p { margin: 0 0 .65rem; font-size: .68rem; opacity: .58; }
.wl-preview-response .wl-btn { padding: .55rem 1rem; font-size: .7rem; }
.wl-preview-response .wl-reaction { padding: .35rem; font-size: 1.15rem; pointer-events: none; }
.wl-card-question { font-family: var(--wl-font-display); font-size: 1rem !important; font-weight: 700; opacity: 1 !important; }
.wl-preview-caption { margin: .7rem .3rem 0; color: hsl(var(--wl-deep) / .52); font-size: .69rem; text-align: center; }

/* Design identities inside previews and finished cards */
.wl-design-keepsake .wl-preview-card,
.wl-design-keepsake .wl-preview-cover,
.wl-design-keepsake .wl-cover-face,
.wl-design-keepsake .wl-card-inner { background-color: #fffaf0; background-image: linear-gradient(90deg, rgba(113,79,42,.025) 50%, transparent 50%), linear-gradient(rgba(113,79,42,.02) 50%, transparent 50%); background-size: 7px 7px; }
.wl-design-keepsake .wl-preview-card::before,
.wl-design-keepsake .wl-card-inner::before { content: ""; position: absolute; inset: 1rem; border: 1px solid hsl(var(--wl-primary) / .22); pointer-events: none; }
.wl-design-keepsake .wl-preview-cover::before { inset: 1rem; border: 1px solid hsl(var(--wl-primary) / .28); }

.wl-design-botanical .wl-preview-card,
.wl-design-botanical .wl-preview-cover,
.wl-design-botanical .wl-cover-face,
.wl-design-botanical .wl-card-inner { background: radial-gradient(ellipse at 10% 0%, hsl(var(--wl-primary) / .13), transparent 30%), radial-gradient(ellipse at 100% 100%, hsl(var(--wl-accent) / .18), transparent 34%), var(--wl-paper); }
.wl-design-botanical .wl-preview-card::before,
.wl-design-botanical .wl-preview-cover::before,
.wl-design-botanical .wl-card-inner::after { content: ""; position: absolute; width: 9rem; height: 4rem; right: -3rem; top: 1rem; border: 1rem double hsl(var(--wl-primary) / .17); border-radius: 100%; transform: rotate(38deg); pointer-events: none; }
.wl-design-botanical .wl-card-ornament,
.wl-design-botanical .wl-finished-ornament { border: 1px solid hsl(var(--wl-primary) / .3); background: transparent; }

.wl-design-celestial .wl-card-theatre { background: radial-gradient(circle at 50% 15%, hsl(var(--wl-primary) / .75), transparent 35%), hsl(var(--wl-deep)); }
.wl-design-celestial .wl-preview-card,
.wl-design-celestial .wl-preview-cover,
.wl-design-celestial .wl-cover-face,
.wl-design-celestial .wl-card-inner { color: hsl(var(--wl-bg)); background: radial-gradient(circle at 70% 12%, hsl(var(--wl-primary) / .48), transparent 23%), radial-gradient(circle, hsl(var(--wl-accent) / .8) 0 1px, transparent 1.5px) 0 0/26px 26px, hsl(var(--wl-deep)); }
.wl-design-celestial .wl-preview-cover::before,
.wl-design-celestial .wl-card-inner::before { content: ""; position: absolute; width: 3.2rem; height: 3.2rem; top: 1.3rem; right: 1.5rem; border-radius: 50%; box-shadow: -1rem .35rem 0 hsl(var(--wl-accent)); pointer-events: none; }
.wl-design-celestial .wl-card-ornament,
.wl-design-celestial .wl-finished-ornament { color: hsl(var(--wl-deep)); background: hsl(var(--wl-accent)); }
.wl-design-celestial .wl-btn-ghost { color: hsl(var(--wl-bg)); background: transparent; border-color: hsl(var(--wl-accent) / .55); }

.wl-design-celebration .wl-card-theatre { background: linear-gradient(145deg, hsl(var(--wl-accent) / .45), hsl(var(--wl-bg)) 55%, hsl(var(--wl-primary) / .28)); }
.wl-design-celebration .wl-preview-card,
.wl-design-celebration .wl-preview-cover,
.wl-design-celebration .wl-cover-face,
.wl-design-celebration .wl-card-inner { background: linear-gradient(165deg, #fff 0 78%, hsl(var(--wl-accent) / .35) 78%); }
.wl-design-celebration .wl-preview-card::before,
.wl-design-celebration .wl-preview-cover::before,
.wl-design-celebration .wl-card-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, hsl(var(--wl-primary)) 0 3px, transparent 3.5px) 7px 7px/41px 39px, radial-gradient(circle, hsl(var(--wl-accent)) 0 2px, transparent 2.5px) 0 0/29px 31px; opacity: .12; pointer-events: none; }
.wl-design-celebration .wl-card-ornament,
.wl-design-celebration .wl-finished-ornament { border-radius: .55rem; transform: rotate(-5deg); }

.wl-design-festival .wl-card-theatre { background: radial-gradient(circle at 50% 42%, hsl(var(--wl-accent) / .44), transparent 18rem), hsl(var(--wl-deep)); }
.wl-design-festival .wl-preview-card,
.wl-design-festival .wl-preview-cover,
.wl-design-festival .wl-cover-face,
.wl-design-festival .wl-card-inner { background: radial-gradient(circle at 50% 0, hsl(var(--wl-accent) / .22), transparent 30%), var(--wl-paper); }
.wl-design-festival .wl-preview-card::before,
.wl-design-festival .wl-preview-cover::before,
.wl-design-festival .wl-card-inner::before { content: ""; position: absolute; inset: .85rem; border: 2px solid hsl(var(--wl-accent) / .58); border-radius: 9rem 9rem .35rem .35rem; box-shadow: inset 0 0 0 5px hsl(var(--wl-primary) / .08); pointer-events: none; }
.wl-design-festival .wl-card-ornament,
.wl-design-festival .wl-finished-ornament { color: hsl(var(--wl-accent)); background: hsl(var(--wl-deep)); box-shadow: 0 0 28px hsl(var(--wl-accent) / .42); }

.wl-design-modern .wl-card-theatre { background: linear-gradient(135deg, hsl(var(--wl-bg)) 0 48%, hsl(var(--wl-primary) / .16) 48% 100%); }
.wl-design-modern .wl-preview-card,
.wl-design-modern .wl-preview-cover,
.wl-design-modern .wl-cover-face,
.wl-design-modern .wl-card-inner { border-radius: 0; background: #fff; }
.wl-design-modern .wl-preview-card::before,
.wl-design-modern .wl-preview-cover::before,
.wl-design-modern .wl-card-inner::before { content: ""; position: absolute; width: 120%; height: 1.1rem; left: -10%; top: 1.2rem; background: var(--wl-primary-c); transform: rotate(-4deg); pointer-events: none; }
.wl-design-modern .wl-card-ornament,
.wl-design-modern .wl-finished-ornament { border-radius: 0; background: hsl(var(--wl-accent)); }
.wl-design-modern .wl-card-kicker { font-family: var(--wl-font-utility); }

/* Preview choreography: cover exits, card arrives. */
@keyframes wl-preview-cover-letter { 0%, 24% { opacity: 1; transform: translateY(0) rotateX(0); } 65%, 100% { opacity: 0; transform: translateY(9rem) rotateX(-22deg); visibility: hidden; } }
@keyframes wl-preview-cover-unfold { 0%, 24% { opacity: 1; transform: scale(1); clip-path: inset(0); } 72%, 100% { opacity: 0; transform: scale(1.12); clip-path: inset(50% 0 50%); visibility: hidden; } }
@keyframes wl-preview-cover-curtain { 0%, 24% { opacity: 1; transform: scaleX(1); } 75%, 100% { opacity: 0; transform: scaleX(0); visibility: hidden; } }
@keyframes wl-preview-cover-burst { 0%, 30% { opacity: 1; transform: scale(1) rotate(0); } 60% { opacity: 1; transform: scale(1.08) rotate(-2deg); } 100% { opacity: 0; transform: scale(.4) rotate(8deg); visibility: hidden; } }
@keyframes wl-preview-cover-flip { 0%, 28% { opacity: 1; transform: perspective(900px) rotateY(0); } 100% { opacity: 0; transform: perspective(900px) rotateY(90deg); visibility: hidden; } }
@keyframes wl-preview-card-arrive { from { opacity: 0; transform: translateY(2rem) scale(.96); } to { opacity: 1; transform: none; } }

.wl-card-theatre.is-previewing .wl-preview-card { animation: wl-preview-card-arrive .65s .62s cubic-bezier(.2,.8,.2,1) both; }
.wl-card-theatre.is-previewing[data-reveal="envelope"] .wl-preview-cover { animation: wl-preview-cover-letter 1s .12s ease both; }
.wl-card-theatre.is-previewing[data-reveal="unfold"] .wl-preview-cover { animation: wl-preview-cover-unfold 1s .12s ease both; }
.wl-card-theatre.is-previewing[data-reveal="curtain"] .wl-preview-cover { animation: wl-preview-cover-curtain 1s .12s cubic-bezier(.75,0,.2,1) both; }
.wl-card-theatre.is-previewing[data-reveal="burst"] .wl-preview-cover { animation: wl-preview-cover-burst .9s .12s cubic-bezier(.3,1.3,.4,1) both; }
.wl-card-theatre.is-previewing[data-reveal="flip"] .wl-preview-cover { animation: wl-preview-cover-flip 1s .12s ease-in-out both; transform-origin: left center; }

/* -------------------------------------------------------- recipient stage */

html:has(.wl-experience) { background: #17131c; }
body.wl-experience { margin: 0; min-height: 100vh; overflow-x: hidden; }
.wl-experience {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% -10%, hsl(var(--wl-primary) / .5), transparent 36rem),
        linear-gradient(145deg, hsl(var(--wl-deep)), color-mix(in srgb, hsl(var(--wl-deep)) 78%, #09080c));
    color: hsl(var(--wl-bg));
}

.wl-ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.wl-ambient-orb { position: absolute; width: min(48vw, 32rem); aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .2; background: hsl(var(--wl-accent)); }
.wl-ambient-orb-a { top: -18rem; left: -10rem; }
.wl-ambient-orb-b { right: -14rem; bottom: -17rem; background: hsl(var(--wl-primary)); }
.wl-ambient-line { position: absolute; width: 70vw; height: 70vw; max-width: 60rem; max-height: 60rem; left: 50%; top: 50%; border: 1px solid hsl(var(--wl-accent) / .14); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 5rem hsl(var(--wl-accent) / .025), 0 0 0 11rem hsl(var(--wl-accent) / .02); }
.wl-ambient-symbol { position: absolute; right: 4vw; top: 8vh; color: transparent; font-size: clamp(9rem, 28vw, 24rem); opacity: .04; filter: grayscale(1); transform: rotate(12deg); text-shadow: 0 0 0 hsl(var(--wl-bg)); }

.wl-experience .wl-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1rem, 3vw, 2rem);
    background: transparent;
}

.wl-cover-wrap { width: min(94vw, 32rem); text-align: center; }
.wl-arrival-line { margin: 0 0 1rem; color: hsl(var(--wl-bg) / .62); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.wl-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    perspective: 1200px;
}

.wl-cover-object {
    position: relative;
    display: block;
    width: min(84vw, 24rem);
    aspect-ratio: .75;
    transform-style: preserve-3d;
    filter: drop-shadow(0 30px 38px rgba(0,0,0,.34));
    transition: transform .35s ease, filter .35s ease;
}
.wl-cover:hover .wl-cover-object { transform: translateY(-.5rem) rotateX(2deg); filter: drop-shadow(0 38px 45px rgba(0,0,0,.42)); }
.wl-cover-back { position: absolute; inset: .6rem -.35rem -.5rem .5rem; border-radius: .45rem; background: hsl(var(--wl-accent) / .32); transform: translateZ(-1px) rotate(1.5deg); }
.wl-cover-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .45rem;
    padding: 2.25rem;
    color: var(--wl-ink);
    background: var(--wl-paper);
    backface-visibility: hidden;
}
.wl-cover-face::before { content: ""; position: absolute; inset: .8rem; border: 1px solid hsl(var(--wl-primary) / .28); pointer-events: none; }
.wl-cover-corner { position: absolute; width: 4rem; height: 4rem; border: solid hsl(var(--wl-primary) / .38); }
.wl-cover-corner-a { top: 1.1rem; left: 1.1rem; border-width: 1px 0 0 1px; }
.wl-cover-corner-b { right: 1.1rem; bottom: 1.1rem; border-width: 0 1px 1px 0; }
.wl-cover-kicker { position: relative; z-index: 2; font-family: var(--wl-font-utility); font-size: .65rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .58; }
.wl-cover-name { position: relative; z-index: 2; max-width: 12ch; margin: .85rem 0; font-family: var(--wl-font-display); font-size: clamp(2.3rem, 9vw, 3.6rem); font-weight: 600; line-height: .9; letter-spacing: -.03em; }
.wl-cover-rule { position: relative; z-index: 2; width: 3rem; height: 1px; margin: .4rem 0 .9rem; background: hsl(var(--wl-accent)); }
.wl-cover-from { position: relative; z-index: 2; font-size: .77rem; opacity: .66; }
.wl-cover-seal { position: relative; z-index: 2; display: grid; place-items: center; width: 4rem; height: 4rem; margin-top: 2rem; border-radius: 50%; background: var(--wl-primary-c); color: #fff; font-size: 1.35rem; box-shadow: inset 0 0 0 4px rgba(255,255,255,.12), 0 7px 18px hsl(var(--wl-deep) / .3); }
.wl-envelope-flap { display: none; }

.wl-open-prompt { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.35rem; padding: .65rem 1rem; border-radius: 999px; background: hsl(var(--wl-bg) / .1); color: hsl(var(--wl-bg) / .84); font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.wl-open-pulse { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--wl-accent)); box-shadow: 0 0 0 0 hsl(var(--wl-accent) / .55); animation: wl-open-pulse 1.8s ease-out infinite; }

@keyframes wl-open-pulse { 70%,100% { box-shadow: 0 0 0 .65rem transparent; } }
@keyframes wl-cover-envelope-open {
    0%, 38% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
    64% { opacity: 1; transform: translateY(1.2rem) rotateX(-7deg) scale(1.02); }
    100% { opacity: 0; transform: translateY(9rem) rotateX(-30deg) scale(.9); }
}
@keyframes wl-cover-unfold-open { 45% { transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.18); clip-path: inset(50% 0); } }
@keyframes wl-cover-burst-open { 45% { transform: scale(1.12) rotate(-2deg); } 100% { opacity: 0; transform: scale(.4) rotate(9deg); } }
@keyframes wl-cover-flip-open { to { opacity: 0; transform: rotateY(100deg); } }
@keyframes wl-cover-fade-open { to { opacity: 0; transform: translateY(-1rem); } }
@keyframes wl-flap-open {
    0%, 12% { transform: rotateX(0); }
    65%, 100% { transform: rotateX(180deg); }
}
@keyframes wl-letter-peek {
    0%, 18% { opacity: 1; transform: translate(-50%, 38%); }
    62% { opacity: 1; transform: translate(-50%, -46%); }
    100% { transform: translate(-50%, -30%); opacity: 0; }
}
@keyframes wl-reduced-open { from { opacity: 1; } to { opacity: 0; } }
@keyframes wl-reduced-card-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wl-reduced-letter {
    0% { opacity: 0; transform: translate(-50%, 38%); }
    48% { opacity: 1; transform: translate(-50%, 32%); }
    100% { opacity: 0; transform: translate(-50%, 28%); }
}

.wl-cover-envelope.is-opening .wl-cover-object { animation: wl-cover-envelope-open 1.28s cubic-bezier(.35,.02,.25,1) both; }
.wl-cover-envelope.is-opening .wl-envelope-flap { animation: wl-flap-open .78s cubic-bezier(.35,.02,.2,1) forwards; }
.wl-cover-unfold.is-opening .wl-cover-object { animation: wl-cover-unfold-open .9s ease-in both; }
.wl-cover-burst.is-opening .wl-cover-object { animation: wl-cover-burst-open .82s cubic-bezier(.4,1.2,.55,1) both; }
.wl-cover-flip.is-opening .wl-cover-object { transform-origin: left center; animation: wl-cover-flip-open .9s ease-in both; }
.wl-cover-fade.is-opening .wl-cover-object,
.wl-cover-curtain.is-opening .wl-cover-object { animation: wl-cover-fade-open .5s ease-in both; }

.wl-design-keepsake .wl-cover-object { aspect-ratio: 1.12; margin-top: 3rem; }
.wl-design-keepsake .wl-cover-object::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 20%; width: 78%; height: 85%; border-radius: .2rem; background: linear-gradient(180deg,#fffdf8,#f8eedb); box-shadow: 0 12px 24px rgba(72,45,20,.22); opacity: 0; transform: translate(-50%,38%); }
.wl-design-keepsake .wl-cover.is-opening .wl-cover-object::after,
.wl-design-keepsake .wl-cover-envelope.is-opening .wl-cover-object::after { animation: wl-letter-peek 1.18s .08s cubic-bezier(.2,.75,.2,1) both; }
.wl-design-keepsake .wl-cover-face { justify-content: flex-start; padding-top: 4.6rem; background: linear-gradient(155deg, #f6dfba, #e9c995); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
.wl-design-keepsake .wl-cover-face::before { inset: auto 0 0; height: 62%; border: 0; background: linear-gradient(32deg, transparent 49.5%, rgba(113,79,42,.2) 50%, transparent 50.5%), linear-gradient(-32deg, transparent 49.5%, rgba(113,79,42,.2) 50%, transparent 50.5%); }
.wl-design-keepsake .wl-cover-kicker,
.wl-design-keepsake .wl-cover-name,
.wl-design-keepsake .wl-cover-rule,
.wl-design-keepsake .wl-cover-from { opacity: 0; }
.wl-design-keepsake .wl-cover-seal { position: absolute; left: 50%; top: 48%; margin: 0; transform: translate(-50%,-50%); }
.wl-design-keepsake .wl-envelope-flap { position: absolute; z-index: 4; display: block; left: 0; right: 0; top: 0; height: 53%; background: linear-gradient(165deg, #f9e7c8, #e8c68d); clip-path: polygon(0 0,100% 0,50% 100%); transform-origin: top; backface-visibility: hidden; }

.wl-design-botanical .wl-cover-face::after { content: ""; position: absolute; width: 13rem; height: 5rem; top: -1.3rem; right: -4rem; border: 1.2rem double hsl(var(--wl-primary) / .2); border-radius: 100%; transform: rotate(30deg); }
.wl-design-botanical .wl-cover-seal { border: 1px solid hsl(var(--wl-primary) / .4); background: transparent; color: var(--wl-primary-c); box-shadow: none; }
.wl-design-celestial .wl-cover-face::after { content: ""; position: absolute; width: 4rem; height: 4rem; top: 2rem; right: 2rem; border-radius: 50%; box-shadow: -1.15rem .35rem 0 hsl(var(--wl-accent)); }
.wl-design-celebration .wl-cover-name { transform: rotate(-3deg); }
.wl-design-festival .wl-cover-face::before { inset: .8rem; border: 2px solid hsl(var(--wl-accent) / .58); border-radius: 10rem 10rem .35rem .35rem; }
.wl-design-modern .wl-cover-face::after { content: ""; position: absolute; width: 120%; height: 1.2rem; left: -10%; top: 1.6rem; background: var(--wl-primary-c); transform: rotate(-5deg); }

.wl-opening-panels { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.wl-opening-panels div { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(135deg, hsl(var(--wl-deep)), hsl(var(--wl-primary))); box-shadow: 0 0 60px rgba(0,0,0,.35); }
.wl-opening-panels div:first-child { left: 0; }
.wl-opening-panels div:last-child { right: 0; }
.wl-opening-panels.is-active div:first-child { animation: wl-panel-left 1.35s .18s cubic-bezier(.75,0,.2,1) forwards; }
.wl-opening-panels.is-active div:last-child { animation: wl-panel-right 1.35s .18s cubic-bezier(.75,0,.2,1) forwards; }
@keyframes wl-panel-left { to { transform: translateX(-102%); } }
@keyframes wl-panel-right { to { transform: translateX(102%); } }

/* --------------------------------------------------------- finished card */

.wl-experience .wl-finished-card {
    position: relative;
    width: min(94vw, 39rem);
    margin: auto;
    padding: 0;
    border-radius: .6rem;
    background: transparent;
    box-shadow: none;
    color: var(--wl-ink);
    text-align: left;
}

.wl-card-inner {
    position: relative;
    overflow: hidden;
    min-height: min(82vh, 43rem);
    padding: clamp(2rem, 7vw, 4rem);
    border-radius: .6rem;
    background: var(--wl-paper);
    box-shadow: 0 36px 90px -30px rgba(0,0,0,.6);
}

.wl-card-replay {
    display: block;
    margin: 0 0 .75rem auto;
    padding: .45rem .7rem;
    border: 1px solid hsl(var(--wl-bg) / .18);
    border-radius: 999px;
    background: hsl(var(--wl-deep) / .48);
    color: hsl(var(--wl-bg) / .78);
    backdrop-filter: blur(8px);
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.wl-finished-head { position: relative; z-index: 2; text-align: center; }
.wl-finished-ornament { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1.4rem; border-radius: 50%; background: hsl(var(--wl-primary) / .1); font-size: 1.6rem; }
.wl-finished-head h1 { font-size: clamp(2.9rem, 12vw, 5.5rem); overflow-wrap: anywhere; }
.wl-experience .wl-reveal-message { position: relative; z-index: 2; margin: 0 0 2rem; color: var(--wl-ink); font-family: var(--wl-font-display); font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: 1.75; text-align: left; white-space: pre-wrap; }

.wl-reply-form { position: relative; z-index: 2; padding-top: 1.5rem; border-top: 1px solid var(--wl-line); }
.wl-question-wrap { margin-bottom: 1.2rem; text-align: center; }
.wl-question-label { margin: 0 0 .35rem; font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.wl-experience .wl-question { margin: 0; color: var(--wl-ink); font-family: var(--wl-font-display); font-size: clamp(1.45rem, 5vw, 2rem); }
.wl-note-field { margin: 1.2rem 0; }
.wl-note-field .wl-label { color: var(--wl-ink); font-size: .8rem; }
.wl-note-field .wl-label span { opacity: .5; font-weight: 500; }
.wl-experience .wl-textarea { min-height: 6rem; border-width: 1px; border-color: var(--wl-line); background: color-mix(in srgb, var(--wl-paper) 92%, hsl(var(--wl-primary))); color: var(--wl-ink); }
.wl-answer-row { display: flex; justify-content: center; gap: .7rem; }
.wl-reaction-fieldset { margin: 0; padding: 0; border: 0; }
.wl-reaction-fieldset legend { width: 100%; margin-bottom: .8rem; color: var(--wl-ink); font-size: .78rem; font-weight: 700; text-align: center; opacity: .62; }
.wl-experience .wl-reaction { background: color-mix(in srgb, var(--wl-paper) 94%, hsl(var(--wl-primary))); border-color: var(--wl-line); }
.wl-reply-state { position: relative; z-index: 2; display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border: 1px solid hsl(var(--wl-primary) / .2); border-radius: .7rem; background: hsl(var(--wl-primary) / .07); }
.wl-reply-state > span { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: var(--wl-primary-c); color: #fff; }
.wl-reply-state strong { display: block; font-size: .9rem; }
.wl-reply-state p { margin: .2rem 0 0; font-size: .76rem; opacity: .65; }
.wl-creator-preview { position: relative; z-index: 2; display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border: 1px dashed hsl(var(--wl-accent) / .65); border-radius: .7rem; background: hsl(var(--wl-accent) / .09); }
.wl-creator-preview > span { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: hsl(var(--wl-accent)); color: hsl(var(--wl-deep)); font-weight: 900; }
.wl-creator-preview strong { display: block; font-size: .88rem; }
.wl-creator-preview p { margin: .25rem 0 0; font-size: .75rem; line-height: 1.5; opacity: .66; }
.wl-card-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--wl-line); font-size: .64rem; line-height: 1.4; }
.wl-card-footer span { opacity: .5; }
.wl-card-footer a { color: var(--wl-primary-c); font-weight: 800; text-decoration: none; }
.wl-design-celestial .wl-card-footer a { color: hsl(var(--wl-accent)); }

/* Distinct finished-card entrance motions. */
@keyframes wl-letter-arrive { from { opacity: 0; transform: translateY(6rem) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wl-unfold-arrive { from { opacity: 0; transform: perspective(1000px) rotateX(-28deg) scaleY(.72); transform-origin: top; } to { opacity: 1; transform: none; } }
@keyframes wl-curtain-arrive { from { opacity: 0; transform: scale(.92); filter: blur(9px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wl-burst-arrive { 0% { opacity: 0; transform: scale(.55) rotate(-4deg); } 65% { opacity: 1; transform: scale(1.035) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes wl-flip-arrive { from { opacity: 0; transform: perspective(1100px) rotateY(-88deg); transform-origin: left center; } to { opacity: 1; transform: none; } }
@keyframes wl-fade-arrive { from { opacity: 0; transform: translateY(1.3rem); } to { opacity: 1; transform: none; } }

.wl-anim-letter { animation: wl-letter-arrive .8s cubic-bezier(.2,.8,.2,1) both; }
.wl-anim-unfold { animation: wl-unfold-arrive .85s cubic-bezier(.2,.8,.2,1) both; }
.wl-anim-curtain { animation: wl-curtain-arrive .8s .22s ease both; }
.wl-anim-burst { animation: wl-burst-arrive .7s cubic-bezier(.25,1.35,.45,1) both; }
.wl-anim-flip { animation: wl-flip-arrive .85s ease both; }
.wl-anim-fade { animation: wl-fade-arrive .7s ease both; }

.wl-particles { z-index: 30; }
.wl-particle {
    position: absolute;
    left: 0;
    bottom: -3rem;
    transform: translateX(var(--wl-x));
    animation: wl-particle-rise var(--wl-duration) var(--wl-delay) cubic-bezier(.2,.6,.3,1) forwards;
    will-change: transform, opacity;
}
@keyframes wl-particle-rise {
    0% { opacity: 0; transform: translate(var(--wl-x), 0) rotate(0); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(var(--wl-x) + var(--wl-drift)), -108vh) rotate(var(--wl-spin)); }
}

/* Occasion details subtly change the atmosphere while every theme remains
   available. These are signatures, not separate hard-coded card layouts. */
.wl-experience[data-occasion="diwali"] .wl-ambient-line,
.wl-experience[data-occasion="eid"] .wl-ambient-line { border-style: double; transform: translate(-50%,-50%) rotate(45deg); border-radius: 28%; }
.wl-experience[data-occasion="christmas"] .wl-ambient-line { border-radius: 0; transform: translate(-50%,-50%) rotate(30deg); }
.wl-experience[data-occasion="birthday"] .wl-ambient-symbol,
.wl-experience[data-occasion="newyear"] .wl-ambient-symbol { transform: rotate(-12deg); }

/* ------------------------------------------------ occasion art directions */

.wl-occasion-scene,
.wl-cover-motifs,
.wl-card-motifs,
.wl-occasion-hero-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.wl-occasion-scene { z-index: 0; }
.wl-occasion-scene span,
.wl-cover-motifs i,
.wl-card-motifs span { position: absolute; display: block; font-style: normal; filter: drop-shadow(0 .35rem .55rem hsl(var(--wl-deep) / .16)); }

.wl-occasion-scene span:nth-child(1) { left: 8%; top: 9%; font-size: 2.2rem; transform: rotate(-10deg); }
.wl-occasion-scene span:nth-child(2) { right: 7%; top: 18%; font-size: 2rem; transform: rotate(11deg); }
.wl-occasion-scene span:nth-child(3) { right: 10%; bottom: 8%; font-size: 2.5rem; transform: rotate(-7deg); }

.wl-cover-motifs { z-index: 1; }
.wl-cover-motifs i { opacity: .88; }
.wl-cover-motifs i:nth-child(1) { left: 1.4rem; top: 1.3rem; font-size: 1.6rem; transform: rotate(-9deg); }
.wl-cover-motifs i:nth-child(2) { right: 1.4rem; top: 1.5rem; font-size: 1.55rem; transform: rotate(8deg); }
.wl-cover-motifs i:nth-child(3) { right: 1.5rem; bottom: 1.45rem; font-size: 1.75rem; transform: rotate(-7deg); }

.wl-card-motifs { z-index: 1; opacity: .84; }
.wl-card-motifs span:nth-child(1) { left: 1.2rem; top: 1.1rem; font-size: 1.5rem; }
.wl-card-motifs span:nth-child(2) { right: 1.2rem; top: 1.1rem; font-size: 1.45rem; }
.wl-card-motifs span:nth-child(3) { right: 1.4rem; bottom: 1.2rem; font-size: 1.7rem; }

/* Occasion landing pages use an image-led split hero. Keep this explicit so
   data attributes used by the global catalogue cannot inherit its layout. */
.wl-occasion-page > .wl-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 35rem;
    overflow: hidden;
    padding: clamp(4rem,8vw,7rem) max(1.25rem,calc((100vw - 1160px) / 2));
    text-align: left;
}
.wl-occasion-page > .wl-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 48%,hsl(var(--wl-accent) / .22),transparent 31rem); pointer-events: none; }
.wl-occasion-page > .wl-hero > .wl-title,
.wl-occasion-page > .wl-hero > .wl-sub { width: min(46%,34rem); margin-left: 0; margin-right: 0; }
.wl-occasion-hero-art { z-index: 1; left: 43%; display: flex; align-items: center; justify-content: center; opacity: 1; }
.wl-occasion-hero-art img { width: min(55vw,48rem); height: auto; max-height: 32rem; object-fit: contain; filter: drop-shadow(0 1.6rem 2rem hsl(var(--wl-deep) / .2)); animation: wl-hero-art-float 6s ease-in-out infinite; }
@keyframes wl-hero-art-float { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-.65rem) rotate(.5deg); } }
.wl-hero > .wl-eyebrow,
.wl-hero > .wl-title,
.wl-hero > .wl-sub,
.wl-hero > .wl-btn { position: relative; z-index: 1; }

.wl-showcase-motifs { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .5rem; }
.wl-showcase-motifs i { font-style: normal; font-size: 1.2rem; }
.wl-showcase-motifs i:first-child { transform: rotate(-10deg); }
.wl-showcase-motifs i:last-child { transform: rotate(10deg); }
.wl-showcase-motifs .wl-showcase-symbol { position: static; display: grid; margin: 0; }

/* The supporting motif positions are deliberately different per occasion. A
   Christmas cover reads as tree/bell/Santa; Diwali as diya/light/fireworks;
   Lunar New Year as envelope/dragon/lantern, and so on. */
.wl-template-christmas-story .wl-cover-motifs i:nth-child(1) { left: .8rem; top: auto; bottom: .8rem; font-size: 4.8rem; transform: none; }
.wl-template-christmas-story .wl-cover-motifs i:nth-child(2) { right: 1rem; top: 1rem; font-size: 2.35rem; }
.wl-template-christmas-story .wl-cover-motifs i:nth-child(3) { right: .8rem; bottom: .85rem; font-size: 2.9rem; }
.wl-template-christmas-story .wl-cover-face,
.wl-template-christmas-story .wl-card-inner { box-shadow: inset 0 -8rem 0 hsl(var(--wl-primary) / .07), 0 36px 90px -30px rgba(0,0,0,.5); }

.wl-template-balloon-party .wl-cover-motifs i:nth-child(2) { right: .8rem; top: .7rem; font-size: 3.8rem; }
.wl-template-balloon-party .wl-cover-motifs i:nth-child(3) { left: .7rem; right: auto; bottom: .8rem; font-size: 3rem; }
.wl-template-balloon-party .wl-cover-name { transform: rotate(-2deg); }

.wl-template-rangoli-lights .wl-cover-motifs i:nth-child(1) { left: 50%; top: .7rem; font-size: 2.5rem; transform: translateX(-50%); }
.wl-template-rangoli-lights .wl-cover-motifs i:nth-child(2) { right: .8rem; top: 2.8rem; font-size: 2.6rem; }
.wl-template-rangoli-lights .wl-cover-motifs i:nth-child(3) { left: .7rem; right: auto; bottom: .8rem; font-size: 3rem; }
.wl-template-rangoli-lights .wl-cover-face::before { border-radius: 50% 50% 14% 14%; border-width: 2px; }

.wl-template-crescent-lantern .wl-cover-motifs i:nth-child(1) { left: auto; right: 1rem; top: .9rem; font-size: 3rem; }
.wl-template-crescent-lantern .wl-cover-motifs i:nth-child(2) { left: .8rem; right: auto; top: 1.1rem; font-size: 2.5rem; }
.wl-template-crescent-lantern .wl-cover-motifs i:nth-child(3) { right: 1.2rem; bottom: 1rem; font-size: 1.8rem; }

.wl-template-red-lantern .wl-cover-motifs i:nth-child(1) { left: 1rem; top: .8rem; font-size: 2.8rem; }
.wl-template-red-lantern .wl-cover-motifs i:nth-child(2) { right: .7rem; top: auto; bottom: .8rem; font-size: 4.2rem; }
.wl-template-red-lantern .wl-cover-motifs i:nth-child(3) { right: 1rem; top: 1rem; bottom: auto; font-size: 2.6rem; }
.wl-template-red-lantern .wl-cover-face { box-shadow: inset 0 0 0 .45rem hsl(var(--wl-accent) / .16); }

.wl-template-moon-festival .wl-cover-motifs i:nth-child(1) { left: auto; right: 1rem; top: .6rem; font-size: 4rem; }
.wl-template-moon-festival .wl-cover-motifs i:nth-child(2) { left: .9rem; top: .8rem; font-size: 2.3rem; }
.wl-template-moon-festival .wl-cover-motifs i:nth-child(3) { right: 1rem; bottom: .8rem; font-size: 2.8rem; }

.wl-template-haunted .wl-cover-face,
.wl-template-haunted .wl-card-inner { box-shadow: inset 0 0 0 999px hsl(var(--wl-deep) / .06), 0 36px 90px -30px rgba(0,0,0,.6); }
.wl-template-haunted .wl-cover-motifs i:nth-child(1) { left: .7rem; top: .5rem; font-size: 4.4rem; }
.wl-template-haunted .wl-cover-motifs i:nth-child(2) { right: .8rem; top: 1rem; font-size: 3.4rem; }
.wl-template-haunted .wl-cover-motifs i:nth-child(3) { right: .7rem; bottom: .6rem; font-size: 3.2rem; }

.wl-template-spring-hunt .wl-cover-motifs i:nth-child(1) { left: .8rem; top: 1rem; font-size: 3.6rem; }
.wl-template-spring-hunt .wl-cover-motifs i:nth-child(2) { right: .7rem; top: .8rem; font-size: 3.7rem; }
.wl-template-spring-hunt .wl-cover-motifs i:nth-child(3) { right: 1rem; bottom: .7rem; font-size: 3rem; }

.wl-template-autumn-table .wl-cover-motifs i:nth-child(1) { left: .7rem; bottom: .7rem; top: auto; font-size: 4.1rem; }
.wl-template-autumn-table .wl-cover-motifs i:nth-child(2) { right: .8rem; top: .8rem; font-size: 3rem; }
.wl-template-autumn-table .wl-cover-motifs i:nth-child(3) { right: .7rem; bottom: .7rem; font-size: 3.1rem; }

.wl-template-colour-splash .wl-cover-face,
.wl-template-colour-splash .wl-card-inner { background-image: radial-gradient(circle at 8% 13%,hsl(var(--wl-primary) / .22) 0 7%,transparent 7.5%),radial-gradient(circle at 92% 22%,hsl(var(--wl-accent) / .28) 0 8%,transparent 8.5%),radial-gradient(circle at 70% 93%,hsl(48 92% 58% / .22) 0 9%,transparent 9.5%); }
.wl-template-colour-splash .wl-cover-motifs i { font-size: 3rem; }

.wl-template-masquerade .wl-cover-motifs i:nth-child(1) { left: 50%; top: .7rem; font-size: 4rem; transform: translateX(-50%); }
.wl-template-masquerade .wl-cover-motifs i:nth-child(2) { right: .7rem; top: 1.2rem; font-size: 3.2rem; }
.wl-template-masquerade .wl-cover-motifs i:nth-child(3) { left: .7rem; right: auto; bottom: .7rem; font-size: 3rem; }

.wl-template-festival-lights .wl-cover-motifs i:nth-child(1) { left: 50%; top: .8rem; font-size: 3.2rem; transform: translateX(-50%); }
.wl-template-festival-lights .wl-cover-motifs i:nth-child(2) { left: .9rem; top: 1rem; font-size: 2rem; }
.wl-template-festival-lights .wl-cover-motifs i:nth-child(3) { right: .9rem; top: 1rem; bottom: auto; font-size: 2rem; }

.wl-template-floral-vellum .wl-cover-motifs i:nth-child(1),
.wl-template-garden-memory .wl-cover-motifs i:nth-child(1) { left: .7rem; top: .7rem; font-size: 3.6rem; }
.wl-template-floral-vellum .wl-cover-motifs i:nth-child(2),
.wl-template-garden-memory .wl-cover-motifs i:nth-child(2) { right: .7rem; top: .8rem; font-size: 3rem; }
.wl-template-floral-vellum .wl-cover-motifs i:nth-child(3),
.wl-template-garden-memory .wl-cover-motifs i:nth-child(3) { right: .8rem; bottom: .7rem; font-size: 2.6rem; }

.wl-template-midnight-fireworks .wl-cover-motifs i:nth-child(1) { left: .6rem; top: .6rem; font-size: 4rem; }
.wl-template-midnight-fireworks .wl-cover-motifs i:nth-child(2) { right: .7rem; top: .8rem; font-size: 2.8rem; }
.wl-template-midnight-fireworks .wl-cover-motifs i:nth-child(3) { right: .9rem; bottom: .8rem; font-size: 2.2rem; }

.wl-template-academic .wl-cover-motifs i:nth-child(1) { left: 50%; top: .7rem; font-size: 3.2rem; transform: translateX(-50%); }
.wl-template-academic .wl-cover-motifs i:nth-child(2) { left: .8rem; top: auto; bottom: .8rem; font-size: 2.7rem; }
.wl-template-academic .wl-cover-motifs i:nth-child(3) { right: .8rem; bottom: .8rem; font-size: 2.5rem; }

.wl-template-rose-letter .wl-cover-motifs i:nth-child(2),
.wl-template-ring-night .wl-cover-motifs i:nth-child(2),
.wl-template-magpie-stars .wl-cover-motifs i:nth-child(2) { font-size: 3rem; }
.wl-template-digital-love .wl-cover-motifs i { font-family: var(--wl-font-utility); }

/* Each occasion keeps all six selectable designs, then layers on its own visual
   signature. The translucent patterns work on both light and dark designs. */
.wl-template-rose-letter :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle at 16% 12%,hsl(var(--wl-primary) / .19) 0 6%,transparent 6.5%),radial-gradient(circle at 86% 86%,hsl(var(--wl-accent) / .15) 0 8%,transparent 8.5%); }
.wl-template-balloon-party :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle,hsl(var(--wl-primary) / .18) 0 4px,transparent 4.5px),radial-gradient(circle,hsl(var(--wl-accent) / .22) 0 3px,transparent 3.5px); background-position: 0 0,18px 20px; background-size: 39px 43px,47px 51px; }
.wl-template-champagne-keepsake :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: linear-gradient(125deg,transparent 0 42%,hsl(var(--wl-accent) / .15) 42% 43%,transparent 43% 100%),radial-gradient(circle at 80% 15%,hsl(var(--wl-accent) / .2),transparent 22%); }
.wl-template-floral-vellum :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(ellipse at 0 0,hsl(var(--wl-primary) / .2),transparent 30%),radial-gradient(ellipse at 100% 100%,hsl(var(--wl-accent) / .2),transparent 32%); }
.wl-template-garden-memory :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: repeating-radial-gradient(ellipse at 12% 88%,hsl(var(--wl-primary) / .1) 0 4px,transparent 5px 18px); }
.wl-template-classic-award :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: linear-gradient(90deg,transparent 0 8%,hsl(var(--wl-accent) / .14) 8% 9%,transparent 9% 91%,hsl(var(--wl-accent) / .14) 91% 92%,transparent 92%); }
.wl-template-academic :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: repeating-linear-gradient(135deg,hsl(var(--wl-primary) / .08) 0 1px,transparent 1px 18px); }
.wl-template-scrapbook :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: linear-gradient(8deg,transparent 0 76%,hsl(var(--wl-primary) / .11) 76% 77%,transparent 77%),linear-gradient(-7deg,transparent 0 18%,hsl(var(--wl-accent) / .14) 18% 19%,transparent 19%); }
.wl-template-ring-night :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle at 50% 35%,transparent 0 17%,hsl(var(--wl-accent) / .2) 17.5% 18%,transparent 18.5%),radial-gradient(circle at 50% 35%,hsl(var(--wl-primary) / .13),transparent 38%); }
.wl-template-midnight-fireworks :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: repeating-conic-gradient(from 12deg at 82% 18%,hsl(var(--wl-accent) / .18) 0 2deg,transparent 2deg 18deg),radial-gradient(circle at 18% 78%,hsl(var(--wl-primary) / .18),transparent 22%); }
.wl-template-christmas-story :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle,#fff 0 2px,transparent 2.5px),linear-gradient(152deg,transparent 0 72%,hsl(var(--wl-primary) / .13) 72%); background-size: 31px 31px,auto; }
.wl-template-spring-hunt :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(ellipse at 15% 18%,hsl(var(--wl-primary) / .18) 0 5%,transparent 5.5%),radial-gradient(ellipse at 88% 74%,hsl(var(--wl-accent) / .22) 0 7%,transparent 7.5%); }
.wl-template-haunted :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: linear-gradient(115deg,transparent 0 47%,hsl(var(--wl-accent) / .1) 47.5% 48%,transparent 48.5%),radial-gradient(circle at 77% 16%,hsl(var(--wl-accent) / .19),transparent 17%); }
.wl-template-autumn-table :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(ellipse at 10% 90%,hsl(var(--wl-primary) / .19),transparent 23%),linear-gradient(22deg,transparent 0 70%,hsl(var(--wl-accent) / .13) 70% 72%,transparent 72%); }
.wl-template-masquerade :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: repeating-conic-gradient(from 25deg at 50% 0,hsl(var(--wl-accent) / .13) 0 7deg,transparent 7deg 18deg); }
.wl-template-crescent-lantern :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle at 78% 14%,hsl(var(--wl-accent) / .24),transparent 16%),repeating-linear-gradient(90deg,transparent 0 37px,hsl(var(--wl-primary) / .08) 38px 39px); }
.wl-template-rangoli-lights :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: repeating-radial-gradient(circle at 50% 94%,hsl(var(--wl-accent) / .18) 0 2px,transparent 3px 16px),radial-gradient(circle at 50% 100%,hsl(var(--wl-primary) / .18),transparent 38%); }
.wl-template-colour-splash :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle at 8% 13%,hsl(var(--wl-primary) / .28) 0 7%,transparent 7.5%),radial-gradient(circle at 92% 22%,hsl(var(--wl-accent) / .3) 0 8%,transparent 8.5%),radial-gradient(circle at 70% 93%,hsl(48 92% 58% / .22) 0 9%,transparent 9.5%); }
.wl-template-festival-lights :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(ellipse at 50% 4%,hsl(var(--wl-accent) / .25),transparent 26%),repeating-linear-gradient(120deg,transparent 0 28px,hsl(var(--wl-primary) / .08) 29px 30px); }
.wl-template-red-lantern :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: linear-gradient(90deg,hsl(var(--wl-accent) / .12),transparent 12% 88%,hsl(var(--wl-accent) / .12)),repeating-linear-gradient(0deg,transparent 0 34px,hsl(var(--wl-primary) / .07) 35px 36px); }
.wl-template-moon-festival :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle at 76% 18%,hsl(var(--wl-accent) / .28) 0 11%,transparent 11.5%),linear-gradient(175deg,transparent 0 80%,hsl(var(--wl-primary) / .1) 80%); }
.wl-template-magpie-stars :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: radial-gradient(circle,hsl(var(--wl-accent) / .55) 0 1px,transparent 1.5px),linear-gradient(155deg,transparent 0 47%,hsl(var(--wl-primary) / .1) 48%,transparent 49%); background-size: 25px 25px,auto; }
.wl-template-digital-love :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) { background-image: linear-gradient(90deg,hsl(var(--wl-primary) / .08) 1px,transparent 1px),linear-gradient(hsl(var(--wl-accent) / .08) 1px,transparent 1px); background-size: 18px 18px; }

/* Occasion choreography overrides the selected design's base reveal while the
   design still controls the cover construction, typography and card surface. */
@keyframes wl-open-rose { 0%,22%{opacity:1;transform:none}55%{transform:translateY(-.7rem) rotate(-2deg) scale(1.04)}100%{opacity:0;transform:translateY(-4rem) rotate(8deg) scale(.9)} }
@keyframes wl-open-balloon { 0%,20%{opacity:1;transform:none}52%{transform:translateY(-1.5rem) scale(1.08)}72%{transform:translateY(.4rem) scale(.98)}100%{opacity:0;transform:translateY(-5rem) scale(1.35)} }
@keyframes wl-open-champagne { 0%,28%{opacity:1;transform:none}58%{transform:translateY(-.6rem) rotate(1.5deg)}100%{opacity:0;filter:blur(5px);transform:translateY(-3rem) rotate(-4deg) scale(.94)} }
@keyframes wl-open-vellum { 0%,24%{opacity:1;clip-path:inset(0);transform:none}65%{clip-path:inset(0 0 44%);transform:translateY(-.5rem)}100%{opacity:0;clip-path:inset(0 0 100%);transform:translateY(-2rem)} }
@keyframes wl-open-garden { 0%,25%{opacity:1;transform:none}60%{transform:scale(1.08) rotate(.8deg)}100%{opacity:0;filter:blur(7px);transform:scale(1.24) rotate(-2deg)} }
@keyframes wl-open-award { 0%,24%{opacity:1;transform:none}55%{transform:translateX(1rem) rotate(1deg)}100%{opacity:0;transform:translateX(-115%) rotate(-4deg)} }
@keyframes wl-open-academic { 0%,24%{opacity:1;transform:none}58%{transform:translateY(-1.3rem) rotate(-6deg)}100%{opacity:0;transform:translateY(-115%) rotate(14deg) scale(.86)} }
@keyframes wl-open-scrapbook { 0%,24%{opacity:1;transform:rotate(-1deg)}56%{transform:translate(-.7rem,-.5rem) rotate(-4deg)}100%{opacity:0;transform:translate(115%,1rem) rotate(11deg)} }
@keyframes wl-open-ring { 0%,25%{opacity:1;transform:none}58%{transform:scale(.95)}100%{opacity:0;filter:blur(8px);transform:scale(1.5)} }
@keyframes wl-open-midnight { 0%,28%{opacity:1;transform:none}58%{filter:brightness(1.3);transform:scale(.84)}100%{opacity:0;filter:brightness(2) blur(8px);transform:scale(1.65)} }
@keyframes wl-open-christmas { 0%,25%{opacity:1;transform:none;clip-path:inset(0)}58%{transform:rotateX(-8deg) scale(1.03);clip-path:inset(0 0 14%)}100%{opacity:0;transform:rotateX(-28deg) translateY(4rem);clip-path:inset(0 0 100%)} }
@keyframes wl-open-spring { 0%,25%{opacity:1;clip-path:ellipse(75% 75%);transform:none}60%{clip-path:ellipse(48% 65%);transform:scale(1.08)}100%{opacity:0;clip-path:ellipse(0 40%);transform:scale(1.2)} }
@keyframes wl-open-haunted { 0%,24%{opacity:1;transform:perspective(900px) rotateY(0)}52%{transform:perspective(900px) skewY(-2deg) rotateY(-12deg)}100%{opacity:0;transform:perspective(900px) translateX(-45%) rotateY(-112deg)} }
@keyframes wl-open-autumn { 0%,25%{opacity:1;transform:none}60%{transform:translate(.6rem,.5rem) rotate(5deg)}100%{opacity:0;transform:translateY(105%) rotate(36deg) scale(.8)} }
@keyframes wl-open-mask { 0%,26%{opacity:1;transform:perspective(900px) rotateY(0) scale(1)}62%{transform:perspective(900px) rotateY(38deg) scale(1.06)}100%{opacity:0;transform:perspective(900px) rotateY(180deg) scale(.78)} }
@keyframes wl-open-crescent { 0%,25%{opacity:1;transform:none}58%{filter:brightness(1.25);transform:translateY(-1rem)}100%{opacity:0;transform:translateY(-120%) scale(.82)} }
@keyframes wl-open-rangoli { 0%,25%{opacity:1;clip-path:circle(75%);transform:none}58%{filter:brightness(1.4);transform:scale(1.05)}100%{opacity:0;filter:brightness(1.8);clip-path:circle(0 at 50% 58%);transform:scale(.88)} }
@keyframes wl-open-colour { 0%,24%{opacity:1;transform:none}58%{filter:saturate(1.8);transform:rotate(-3deg) scale(1.08)}100%{opacity:0;filter:saturate(2) blur(9px);transform:rotate(15deg) scale(1.6)} }
@keyframes wl-open-lights { 0%,26%{opacity:1;filter:brightness(1);transform:none}55%{filter:brightness(1.45);transform:translateY(-.4rem)}100%{opacity:0;filter:brightness(2.2) blur(7px);transform:translateY(-2.5rem) scale(1.1)} }
@keyframes wl-open-lantern { 0%,25%{opacity:1;clip-path:inset(0);transform:none}58%{clip-path:inset(0 12%);transform:scale(1.04)}100%{opacity:0;clip-path:inset(0 50%);transform:scale(.9)} }
@keyframes wl-open-moon { 0%,26%{opacity:1;clip-path:circle(75%);transform:none}58%{transform:translateY(-.8rem) scale(1.05)}100%{opacity:0;clip-path:circle(0 at 76% 18%);transform:translateY(-3rem) scale(.45)} }
@keyframes wl-open-magpie { 0%,25%{opacity:1;transform:none}55%{transform:translateX(-1rem) rotate(-3deg)}100%{opacity:0;transform:translateX(115%) rotate(9deg) scale(.9)} }
@keyframes wl-open-digital { 0%,24%{opacity:1;transform:none}52%{filter:contrast(1.4);transform:scale(.96)}100%{opacity:0;filter:contrast(2) blur(5px);transform:scale(1.18)} }

.wl-template-rose-letter :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-rose 1.05s cubic-bezier(.3,.7,.2,1) both; }
.wl-template-balloon-party :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-balloon 1.08s cubic-bezier(.25,1.35,.4,1) both; }
.wl-template-champagne-keepsake :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-champagne 1.08s ease both; }
.wl-template-floral-vellum :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-vellum 1.12s ease-in-out both; }
.wl-template-garden-memory :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-garden 1.16s ease both; }
.wl-template-classic-award :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-award 1.02s cubic-bezier(.7,0,.25,1) both; }
.wl-template-academic :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-academic 1.08s cubic-bezier(.2,.75,.3,1) both; }
.wl-template-scrapbook :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-scrapbook 1.1s ease-in both; }
.wl-template-ring-night :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-ring 1.15s ease-in both; }
.wl-template-midnight-fireworks :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-midnight 1.05s cubic-bezier(.3,1.1,.4,1) both; }
.wl-template-christmas-story :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-christmas 1.18s ease-in both; transform-origin:center top; }
.wl-template-spring-hunt :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-spring 1.08s ease both; }
.wl-template-haunted :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-haunted 1.16s ease-in both; transform-origin:left center; }
.wl-template-autumn-table :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-autumn 1.14s ease-in both; transform-origin:80% 10%; }
.wl-template-masquerade :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-mask 1.13s ease-in-out both; }
.wl-template-crescent-lantern :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-crescent 1.12s ease-in both; }
.wl-template-rangoli-lights :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-rangoli 1.16s ease both; }
.wl-template-colour-splash :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-colour 1.06s cubic-bezier(.3,1.2,.45,1) both; }
.wl-template-festival-lights :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-lights 1.15s ease both; }
.wl-template-red-lantern :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-lantern 1.12s ease-in-out both; }
.wl-template-moon-festival :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-moon 1.14s ease-in both; }
.wl-template-magpie-stars :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-magpie 1.1s ease-in-out both; }
.wl-template-digital-love :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover) { animation:wl-open-digital 1s steps(8,end) both; }

/* In the builder the template class and theatre are the same element, while
   the recipient template class lives on the body. Keep both DOM shapes wired
   to the same occasion motion. */
.wl-card-theatre.wl-template-rose-letter.is-previewing .wl-preview-cover { animation:wl-open-rose 1.05s cubic-bezier(.3,.7,.2,1) both; }
.wl-card-theatre.wl-template-balloon-party.is-previewing .wl-preview-cover { animation:wl-open-balloon 1.08s cubic-bezier(.25,1.35,.4,1) both; }
.wl-card-theatre.wl-template-champagne-keepsake.is-previewing .wl-preview-cover { animation:wl-open-champagne 1.08s ease both; }
.wl-card-theatre.wl-template-floral-vellum.is-previewing .wl-preview-cover { animation:wl-open-vellum 1.12s ease-in-out both; }
.wl-card-theatre.wl-template-garden-memory.is-previewing .wl-preview-cover { animation:wl-open-garden 1.16s ease both; }
.wl-card-theatre.wl-template-classic-award.is-previewing .wl-preview-cover { animation:wl-open-award 1.02s cubic-bezier(.7,0,.25,1) both; }
.wl-card-theatre.wl-template-academic.is-previewing .wl-preview-cover { animation:wl-open-academic 1.08s cubic-bezier(.2,.75,.3,1) both; }
.wl-card-theatre.wl-template-scrapbook.is-previewing .wl-preview-cover { animation:wl-open-scrapbook 1.1s ease-in both; }
.wl-card-theatre.wl-template-ring-night.is-previewing .wl-preview-cover { animation:wl-open-ring 1.15s ease-in both; }
.wl-card-theatre.wl-template-midnight-fireworks.is-previewing .wl-preview-cover { animation:wl-open-midnight 1.05s cubic-bezier(.3,1.1,.4,1) both; }
.wl-card-theatre.wl-template-christmas-story.is-previewing .wl-preview-cover { animation:wl-open-christmas 1.18s ease-in both; transform-origin:center top; }
.wl-card-theatre.wl-template-spring-hunt.is-previewing .wl-preview-cover { animation:wl-open-spring 1.08s ease both; }
.wl-card-theatre.wl-template-haunted.is-previewing .wl-preview-cover { animation:wl-open-haunted 1.16s ease-in both; transform-origin:left center; }
.wl-card-theatre.wl-template-autumn-table.is-previewing .wl-preview-cover { animation:wl-open-autumn 1.14s ease-in both; transform-origin:80% 10%; }
.wl-card-theatre.wl-template-masquerade.is-previewing .wl-preview-cover { animation:wl-open-mask 1.13s ease-in-out both; }
.wl-card-theatre.wl-template-crescent-lantern.is-previewing .wl-preview-cover { animation:wl-open-crescent 1.12s ease-in both; }
.wl-card-theatre.wl-template-rangoli-lights.is-previewing .wl-preview-cover { animation:wl-open-rangoli 1.16s ease both; }
.wl-card-theatre.wl-template-colour-splash.is-previewing .wl-preview-cover { animation:wl-open-colour 1.06s cubic-bezier(.3,1.2,.45,1) both; }
.wl-card-theatre.wl-template-festival-lights.is-previewing .wl-preview-cover { animation:wl-open-lights 1.15s ease both; }
.wl-card-theatre.wl-template-red-lantern.is-previewing .wl-preview-cover { animation:wl-open-lantern 1.12s ease-in-out both; }
.wl-card-theatre.wl-template-moon-festival.is-previewing .wl-preview-cover { animation:wl-open-moon 1.14s ease-in both; }
.wl-card-theatre.wl-template-magpie-stars.is-previewing .wl-preview-cover { animation:wl-open-magpie 1.1s ease-in-out both; }
.wl-card-theatre.wl-template-digital-love.is-previewing .wl-preview-cover { animation:wl-open-digital 1s steps(8,end) both; }

/* ---------------------------------------------------------- global catalogue */

.wl-global-hero { min-height: 34rem; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.wl-global-hero .wl-title { max-width: 18ch; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(2.8rem,6vw,5.5rem); font-weight: 600; letter-spacing: -.035em; }
.wl-global-hero .wl-sub { max-width: 48rem; }
.wl-world-orbit { position: absolute; width: min(76vw,52rem); aspect-ratio: 1; left: 50%; top: 50%; border: 1px solid hsl(var(--wl-primary) / .1); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.wl-world-orbit::before { content: ""; position: absolute; inset: 15%; border: 1px dashed hsl(var(--wl-accent) / .23); border-radius: 50%; }
.wl-world-orbit span { position: absolute; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #fff; box-shadow: var(--wl-shadow-sm); font-size: 1.35rem; }
.wl-world-orbit span:nth-child(1) { left: 10%; top: 19%; }
.wl-world-orbit span:nth-child(2) { right: 8%; top: 23%; }
.wl-world-orbit span:nth-child(3) { left: -1.6rem; top: 50%; transform: translateY(-50%); }
.wl-world-orbit span:nth-child(4) { right: -1.6rem; top: 50%; transform: translateY(-50%); }
.wl-world-orbit span:nth-child(5) { left: 33%; bottom: -1rem; }
.wl-world-orbit span:nth-child(6) { right: 29%; top: -1rem; }

.wl-catalogue-section { background: linear-gradient(180deg,hsl(var(--wl-bg)),#fff 48%,hsl(var(--wl-primary) / .035)); }
.wl-catalogue-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.wl-catalogue-heading .wl-eyebrow { margin-bottom: .75rem; }
.wl-catalogue-heading .wl-section-title { margin: 0; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(2.4rem,5vw,4rem); font-weight: 600; letter-spacing: -.03em; }
.wl-catalogue-heading > p { max-width: 31rem; margin: 0 0 .4rem; color: hsl(var(--wl-deep) / .6); font-size: .9rem; line-height: 1.65; }

.wl-market-filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem; border: 1px solid hsl(var(--wl-deep) / .09); border-radius: 1rem; background: hsl(var(--wl-bg) / .68); }
.wl-market-filters button { padding: .58rem .9rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: hsl(var(--wl-deep) / .64); font-size: .72rem; font-weight: 800; cursor: pointer; transition: background .16s ease,color .16s ease,border-color .16s ease; }
.wl-market-filters button:hover { color: var(--wl-primary-c); }
.wl-market-filters button.is-active { border-color: hsl(var(--wl-primary) / .25); background: #fff; color: var(--wl-primary-c); box-shadow: 0 4px 16px -10px hsl(var(--wl-deep) / .4); }
.wl-filter-status { margin: .8rem .25rem 1.25rem; color: hsl(var(--wl-deep) / .5); font-size: .72rem; font-weight: 700; }

.wl-global-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .9rem; }
.wl-global-occasion { min-height: 18rem; padding: 0; border: 1px solid hsl(var(--wl-deep) / .1); border-radius: 1rem; background: #fff; text-align: left; }
.wl-global-occasion[hidden] { display: none; }
.wl-global-card-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; min-height: 8.2rem; overflow: hidden; background: radial-gradient(circle at 50% 20%,var(--wl-o-accent),transparent 58%),var(--wl-o-bg); }
.wl-global-card-art::before { content: ""; position: absolute; width: 7rem; height: 7rem; border: 1px solid var(--wl-o-primary); border-radius: 50%; opacity: .16; }
.wl-global-card-art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(.96); filter: drop-shadow(0 .65rem .75rem hsl(var(--wl-deep) / .2)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.wl-global-occasion:hover .wl-global-card-art img { transform: scale(1.045) translateY(-.1rem); }
.wl-global-occasion > .wl-occasion-region,
.wl-global-occasion > .wl-occasion-name,
.wl-global-occasion > .wl-occasion-tag,
.wl-global-occasion > .wl-occasion-open { margin-left: 1rem; margin-right: 1rem; }
.wl-occasion-region { display: block; margin-top: .85rem; color: var(--wl-o-primary); font-size: .59rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.wl-global-occasion .wl-occasion-name { margin-top: .25rem; color: var(--wl-deep-c); font-family: "Cormorant Garamond",Georgia,serif; font-size: 1.35rem; line-height: 1; }
.wl-global-occasion .wl-occasion-tag { min-height: 2.7em; font-size: .69rem; }
.wl-occasion-open { display: block; margin-top: .8rem; margin-bottom: 1rem; color: var(--wl-o-primary); font-size: .67rem; font-weight: 800; }

.wl-global-occasion.wl-template-christmas-story .wl-global-card-art { background: radial-gradient(circle at 50% 10%,var(--wl-o-accent),transparent 45%),linear-gradient(160deg,var(--wl-o-bg),hsl(150 34% 88%)); }
.wl-global-occasion.wl-template-haunted .wl-global-card-art { background: radial-gradient(circle at 50% 10%,var(--wl-o-primary),transparent 48%),hsl(265 45% 18%); }
.wl-global-occasion.wl-template-red-lantern .wl-global-card-art { background: linear-gradient(145deg,hsl(2 72% 35%),hsl(2 80% 52%)); }
.wl-global-occasion.wl-template-colour-splash .wl-global-card-art { background: radial-gradient(circle at 15% 25%,hsl(326 78% 55% / .5),transparent 25%),radial-gradient(circle at 85% 70%,hsl(184 72% 44% / .5),transparent 28%),hsl(48 100% 94%); }
.wl-global-occasion.wl-template-masquerade .wl-global-card-art { background: linear-gradient(135deg,hsl(322 65% 31%),hsl(276 52% 22%),hsl(48 90% 50%)); }

/* ------------------------------------------------------ public theme gallery */

.wl-public-theme-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 0 50%, hsl(var(--wl-accent) / .12), transparent 25rem),
        hsl(var(--wl-primary) / .035);
}

.wl-showcase-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.6rem;
}
.wl-showcase-heading .wl-eyebrow { margin-bottom: .7rem; }
.wl-showcase-heading .wl-section-title {
    max-width: 16ch;
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1;
}
.wl-showcase-heading > p { max-width: 25rem; margin: 0 0 .2rem; color: hsl(var(--wl-deep) / .62); font-size: .9rem; line-height: 1.6; }

.wl-public-theme-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.wl-theme-showcase-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid hsl(var(--wl-deep) / .1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 18px 36px -34px hsl(var(--wl-deep) / .5);
    color: var(--wl-deep-c);
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}
.wl-theme-showcase-card:hover,
.wl-theme-showcase-card:focus-visible { color: var(--wl-deep-c); transform: translateY(-5px); box-shadow: 0 25px 45px -32px hsl(var(--wl-deep) / .48); }

.wl-showcase-art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    overflow: hidden;
    background: var(--wl-paper);
    color: var(--wl-ink);
}
.wl-showcase-art::before,
.wl-showcase-art::after { content: ""; position: absolute; pointer-events: none; }
.wl-showcase-symbol { position: relative; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .65rem; border-radius: 50%; background: var(--wl-primary-c); color: #fff; }
.wl-showcase-for { position: relative; z-index: 2; font-family: var(--wl-font-display); font-size: 1.15rem; font-weight: 700; }
.wl-showcase-open { position: relative; z-index: 2; margin-top: .7rem; font-family: var(--wl-font-utility); font-size: .55rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.wl-showcase-copy { display: block; padding: 1rem; }
.wl-showcase-copy strong { display: block; margin-bottom: .25rem; font-size: .88rem; }
.wl-showcase-copy small { display: block; min-height: 2.7em; color: hsl(var(--wl-deep) / .54); font-size: .7rem; line-height: 1.35; }
.wl-showcase-copy > span { display: block; margin-top: .8rem; color: var(--wl-primary-c); font-size: .7rem; font-weight: 800; }

.wl-theme-showcase-card.wl-design-keepsake .wl-showcase-art { background: linear-gradient(150deg,#fffaf0,#f0dbb8); }
.wl-theme-showcase-card.wl-design-keepsake .wl-showcase-art::before { inset: .75rem; border: 1px solid hsl(var(--wl-primary) / .28); }
.wl-theme-showcase-card.wl-design-botanical .wl-showcase-art { background: radial-gradient(ellipse at 0 0,hsl(var(--wl-primary) / .18),transparent 35%),var(--wl-paper); }
.wl-theme-showcase-card.wl-design-botanical .wl-showcase-art::before { width: 10rem; height: 4rem; right: -3rem; top: 0; border: 1rem double hsl(var(--wl-primary) / .2); border-radius: 100%; transform: rotate(32deg); }
.wl-theme-showcase-card.wl-design-celestial .wl-showcase-art { background: radial-gradient(circle at 70% 15%,hsl(var(--wl-primary) / .55),transparent 25%),radial-gradient(circle,hsl(var(--wl-accent) / .8) 0 1px,transparent 1.5px) 0 0/24px 24px,hsl(var(--wl-deep)); }
.wl-theme-showcase-card.wl-design-celestial .wl-showcase-art::after { width: 2.5rem; height: 2.5rem; right: 1.2rem; top: 1rem; border-radius: 50%; box-shadow: -.7rem .2rem 0 hsl(var(--wl-accent)); }
.wl-theme-showcase-card.wl-design-celebration .wl-showcase-art { background: linear-gradient(145deg,hsl(var(--wl-accent) / .38),#fff); }
.wl-theme-showcase-card.wl-design-celebration .wl-showcase-art::before { inset: 0; background: radial-gradient(circle,var(--wl-primary-c) 0 2px,transparent 3px) 0 0/26px 26px; opacity: .22; transform: rotate(7deg); }
.wl-theme-showcase-card.wl-design-festival .wl-showcase-art { background: radial-gradient(circle,hsl(var(--wl-accent) / .25),transparent 32%),hsl(var(--wl-deep)); }
.wl-theme-showcase-card.wl-design-festival .wl-showcase-art::before { inset: .7rem; border: 2px solid hsl(var(--wl-accent) / .62); border-radius: 7rem 7rem .2rem .2rem; }
.wl-theme-showcase-card.wl-design-modern .wl-showcase-art { background: #fff; }
.wl-theme-showcase-card.wl-design-modern .wl-showcase-art::before { width: 120%; height: 1rem; left: -10%; top: 1.1rem; background: var(--wl-primary-c); transform: rotate(-5deg); }

/* Occasion tiles now read like small covers instead of identical white cards. */
.wl-occasion { position: relative; overflow: hidden; isolation: isolate; }
.wl-occasion::before { content: ""; position: absolute; z-index: -1; width: 7rem; height: 7rem; right: -3.5rem; top: -3.5rem; border-radius: 50%; background: var(--wl-o-primary, var(--wl-primary-c)); opacity: .1; transition: transform .25s ease; }
.wl-occasion:hover::before { transform: scale(1.35); }
.wl-occasion[data-occasion="diwali"]::before,
.wl-occasion[data-occasion="eid"]::before { border-radius: 22%; transform: rotate(45deg); }
.wl-occasion[data-occasion="christmas"]::before { border-radius: 0; transform: rotate(30deg); }

/* ----------------------------------------------------- Raksha Bandhan thread */

.wl-template-rakhi-thread,
[data-occasion="raksha-bandhan"] {
    --wl-rakhi-saffron: 35 91% 52%;
    --wl-rakhi-kumkum: 352 73% 48%;
    --wl-rakhi-indigo: 258 43% 22%;
    --wl-rakhi-role-wash: 43 78% 91%;
    --wl-rakhi-role-ink: 258 43% 22%;
}

[data-occasion="raksha-bandhan"][data-recipient-role="brother"],
.wl-template-rakhi-thread[data-recipient-role="brother"] {
    --wl-rakhi-role-wash: 225 72% 91%;
    --wl-rakhi-role-ink: 244 46% 29%;
}

[data-occasion="raksha-bandhan"][data-recipient-role="sister"],
.wl-template-rakhi-thread[data-recipient-role="sister"] {
    --wl-rakhi-role-wash: 341 77% 92%;
    --wl-rakhi-role-ink: 340 57% 31%;
}

.wl-occasion-page[data-occasion="raksha-bandhan"] > .wl-hero {
    background:
        radial-gradient(circle at 12% 22%, hsl(var(--wl-rakhi-saffron) / .18), transparent 18rem),
        linear-gradient(120deg, hsl(43 78% 97%), hsl(45 72% 93%));
}

.wl-occasion-page[data-occasion="raksha-bandhan"] > .wl-hero::before {
    content: "";
    position: absolute;
    left: -4vw;
    right: -4vw;
    bottom: 2.15rem;
    height: .34rem;
    background: repeating-linear-gradient(90deg,
        hsl(var(--wl-rakhi-saffron)) 0 1.3rem,
        hsl(var(--wl-rakhi-kumkum)) 1.3rem 2.05rem,
        hsl(var(--wl-rakhi-indigo)) 2.05rem 2.35rem);
    box-shadow: 0 .15rem 0 hsl(var(--wl-accent) / .32);
    transform: rotate(-1.7deg);
}

.wl-rakhi-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.wl-rakhi-paths { position: relative; overflow: hidden; background: hsl(43 72% 98%); }
.wl-rakhi-paths::before { content: ""; position: absolute; width: 28rem; height: 28rem; right: -13rem; top: -14rem; border: 1px solid hsl(var(--wl-rakhi-saffron) / .22); border-radius: 50%; box-shadow: 0 0 0 3rem hsl(var(--wl-rakhi-kumkum) / .035),0 0 0 6rem hsl(var(--wl-rakhi-indigo) / .025); }
.wl-rakhi-paths-heading { max-width: 48rem; margin-bottom: 2rem; }
.wl-rakhi-paths-heading p { max-width: 40rem; color: hsl(var(--wl-deep) / .72); }
.wl-rakhi-path-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.wl-rakhi-path { position: relative; min-height: 21rem; padding: 2rem; overflow: hidden; border: 1px solid hsl(var(--wl-rakhi-indigo) / .12); border-radius: 1.35rem; color: hsl(var(--wl-rakhi-indigo)); text-decoration: none; isolation: isolate; transition: transform .25s ease,box-shadow .25s ease; }
.wl-rakhi-path::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(145deg,#fff 5%,var(--wl-rakhi-card-wash)); }
.wl-rakhi-path:hover { color: hsl(var(--wl-rakhi-indigo)); transform: translateY(-.3rem); box-shadow: 0 1.25rem 3rem hsl(var(--wl-rakhi-indigo) / .12); }
.wl-rakhi-path-brother { --wl-rakhi-card-wash: hsl(225 72% 91%); }
.wl-rakhi-path-sister { --wl-rakhi-card-wash: hsl(341 77% 92%); }
.wl-rakhi-path-number { display: block; margin-bottom: 3.8rem; color: hsl(var(--wl-rakhi-kumkum)); font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(3rem,7vw,5.5rem); font-weight: 700; line-height: .9; opacity: .86; }
.wl-rakhi-path strong { display: block; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(1.65rem,3vw,2.25rem); line-height: 1; }
.wl-rakhi-path p { max-width: 27rem; margin: .8rem 0 1.2rem; color: hsl(var(--wl-rakhi-indigo) / .72); }
.wl-rakhi-path em { color: hsl(var(--wl-rakhi-kumkum)); font-style: normal; font-weight: 800; }
.wl-rakhi-path-thread,.wl-rakhi-band { display: flex; align-items: center; position: relative; }
.wl-rakhi-path-thread { position: absolute; left: 0; right: 0; top: 7.4rem; justify-content: center; }
.wl-rakhi-path-thread::before,.wl-rakhi-path-thread::after,.wl-rakhi-band::before,.wl-rakhi-band::after { content: ""; height: .24rem; flex: 1; background: repeating-linear-gradient(90deg,hsl(var(--wl-rakhi-saffron)) 0 .65rem,hsl(var(--wl-rakhi-kumkum)) .65rem 1.05rem,hsl(var(--wl-rakhi-indigo)) 1.05rem 1.2rem); }
.wl-rakhi-path-thread b,.wl-rakhi-band b { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; border: .42rem double hsl(var(--wl-rakhi-saffron)); border-radius: 50%; background: hsl(var(--wl-rakhi-kumkum)); box-shadow: 0 0 0 .22rem hsl(43 78% 96%),0 0 0 .33rem hsl(var(--wl-rakhi-indigo) / .38); }
.wl-rakhi-path-thread i,.wl-rakhi-band i { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: hsl(var(--wl-rakhi-indigo)); }

.wl-rakhi-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.wl-rakhi-role { position: relative; cursor: pointer; }
.wl-rakhi-role input { position: absolute; opacity: 0; pointer-events: none; }
.wl-rakhi-role-card { display: block; min-height: 9.4rem; padding: 1.15rem; border: 1px solid hsl(var(--wl-deep) / .13); border-radius: 1rem; background: var(--wl-role-card-bg,#fff); transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.wl-rakhi-role-brother { --wl-role-card-bg: hsl(225 72% 97%); }
.wl-rakhi-role-sister { --wl-role-card-bg: hsl(341 77% 97%); }
.wl-rakhi-role input:checked + .wl-rakhi-role-card { border-color: hsl(var(--wl-rakhi-kumkum)); box-shadow: 0 0 0 .2rem hsl(var(--wl-rakhi-kumkum) / .12); transform: translateY(-.1rem); }
.wl-rakhi-role input:focus-visible + .wl-rakhi-role-card { outline: .2rem solid hsl(var(--wl-rakhi-indigo) / .28); outline-offset: .15rem; }
.wl-rakhi-role-card strong,.wl-rakhi-role-card small { display: block; }
.wl-rakhi-role-card strong { margin-top: 1rem; color: hsl(var(--wl-rakhi-indigo)); font-family: "Cormorant Garamond",Georgia,serif; font-size: 1.45rem; line-height: 1; }
.wl-rakhi-role-card small { margin-top: .3rem; color: hsl(var(--wl-rakhi-indigo) / .62); }
.wl-rakhi-band { width: 100%; justify-content: center; }
.wl-rakhi-band b { width: 1.75rem; height: 1.75rem; border-width: .3rem; }

.wl-template-rakhi-thread :is(.wl-preview-cover,.wl-cover-face,.wl-card-inner) {
    background-image:
        radial-gradient(circle at 82% 16%,hsl(var(--wl-rakhi-saffron) / .2),transparent 22%),
        radial-gradient(circle at 12% 88%,hsl(var(--wl-rakhi-role-wash) / .82),transparent 34%),
        repeating-linear-gradient(135deg,transparent 0 21px,hsl(var(--wl-rakhi-indigo) / .035) 22px 23px);
}
.wl-template-rakhi-thread .wl-cover-motifs i:nth-child(1) { left: 50%; top: .7rem; font-size: 3.2rem; transform: translateX(-50%); }
.wl-template-rakhi-thread .wl-cover-motifs i:nth-child(2) { left: .8rem; top: auto; bottom: .8rem; font-size: 2.8rem; }
.wl-template-rakhi-thread .wl-cover-motifs i:nth-child(3) { right: .8rem; bottom: .8rem; font-size: 2.7rem; }
.wl-template-rakhi-thread :is(.wl-preview-cover,.wl-cover-face)::after { content: ""; position: absolute; z-index: 1; left: -7%; right: -7%; top: 47%; height: .3rem; background: repeating-linear-gradient(90deg,hsl(var(--wl-rakhi-saffron)) 0 .8rem,hsl(var(--wl-rakhi-kumkum)) .8rem 1.35rem,hsl(var(--wl-rakhi-indigo)) 1.35rem 1.55rem); box-shadow: 0 .16rem 0 hsl(var(--wl-accent) / .3); pointer-events: none; }
.wl-template-rakhi-thread :is(.wl-preview-seal,.wl-cover-seal) { z-index: 2; border: .35rem double hsl(var(--wl-rakhi-saffron)); background: hsl(var(--wl-rakhi-kumkum)); box-shadow: 0 0 0 .18rem hsl(43 78% 96%),0 0 0 .34rem hsl(var(--wl-rakhi-role-ink) / .25); }
.wl-template-rakhi-thread :is(.wl-preview-cover-kicker,.wl-cover-kicker,.wl-card-kicker) { color: hsl(var(--wl-rakhi-role-ink)); }
.wl-rakhi-promise { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin: 1.7rem 0; color: hsl(var(--wl-rakhi-role-ink)); text-align: center; }
.wl-rakhi-promise span { height: .2rem; background: repeating-linear-gradient(90deg,hsl(var(--wl-rakhi-saffron)) 0 .55rem,hsl(var(--wl-rakhi-kumkum)) .55rem .9rem,hsl(var(--wl-rakhi-indigo)) .9rem 1.05rem); }
.wl-rakhi-promise p { max-width: 22rem; margin: 0; font-family: "Cormorant Garamond",Georgia,serif; font-size: 1.08rem; font-weight: 700; line-height: 1.25; }

@keyframes wl-open-rakhi { 0%,24%{opacity:1;transform:none}48%{transform:scale(1.035)}66%{clip-path:inset(0);transform:translateX(-.5rem)}100%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-4rem)} }
.wl-template-rakhi-thread :is(.wl-cover.is-opening .wl-cover-object,.wl-card-theatre.is-previewing .wl-preview-cover),
.wl-card-theatre.wl-template-rakhi-thread.is-previewing .wl-preview-cover { animation:wl-open-rakhi 1.18s cubic-bezier(.35,.75,.2,1) both; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    .wl-builder-intro { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
    .wl-preview-sticky { position: relative; top: auto; }
    .wl-card-theatre { min-height: 39rem; }
    .wl-preview-card,
    .wl-preview-cover { min-height: 31rem; }
    .wl-public-theme-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-global-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .wl-catalogue-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
}

@media (max-width: 767.98px) {
    .wl-global-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .wl-world-orbit { width: 40rem; opacity: .56; }
}

@media (max-width: 575.98px) {
	.wl-rakhi-path-grid,.wl-rakhi-role-grid { grid-template-columns: 1fr; }
	.wl-rakhi-path { min-height: 19rem; padding: 1.35rem; }
	.wl-rakhi-hero-actions { justify-content: center; }
    .wl-builder-head { padding: 1.25rem 0 2.2rem; }
    .wl-back-link { margin-bottom: 1.4rem; }
    .wl-builder-intro .wl-title { font-size: 2.65rem; }
    .wl-builder-progress { width: 100%; gap: .15rem; justify-content: space-between; }
    .wl-builder-progress li { padding: .4rem; font-size: .67rem; }
    .wl-builder-main { padding-top: 1.5rem; }
    .wl-form-section { padding: 1.2rem; }
    .wl-theme-gallery { grid-template-columns: 1fr; }
    .wl-theme-option { min-height: 5.8rem; }
    .wl-card-theatre { min-height: 37rem; border-radius: 1rem; }
    .wl-preview-card,
    .wl-preview-cover { width: 88%; min-height: 30rem; padding: 2.3rem 1.4rem 1.5rem; }
    .wl-preview-card h2 { font-size: 2.45rem; }
    .wl-cover-wrap { width: 100%; }
    .wl-cover-object { width: min(88vw, 22rem); }
    .wl-card-inner { min-height: 0; padding: 2.2rem 1.35rem 1.5rem; }
    .wl-finished-head h1 { font-size: 3.4rem; }
    .wl-experience .wl-reveal-message { font-size: 1.13rem; line-height: 1.65; }
    .wl-card-footer { flex-direction: column; text-align: center; }
    .wl-answer-row { align-items: stretch; flex-direction: column; }
    .wl-answer-row .wl-btn { width: 100%; }
    .wl-showcase-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
    .wl-public-theme-gallery { grid-template-columns: 1fr; }
    .wl-global-hero { min-height: 31rem; }
    .wl-global-hero .wl-title { font-size: 3rem; }
    .wl-market-filters { flex-wrap: nowrap; overflow-x: auto; border-radius: .8rem; scrollbar-width: thin; }
    .wl-market-filters button { flex: 0 0 auto; }
    .wl-global-grid { grid-template-columns: 1fr; }
    .wl-global-occasion { min-height: 0; }
    .wl-global-card-art { min-height: 7.4rem; }
    .wl-occasion-page > .wl-hero { align-items: center; justify-content: flex-start; min-height: 43rem; padding: 3rem 1.1rem 19rem; text-align: center; }
    .wl-occasion-page > .wl-hero > .wl-title,
    .wl-occasion-page > .wl-hero > .wl-sub { width: 100%; margin-left: auto; margin-right: auto; }
    .wl-occasion-hero-art { inset: auto 0 0; height: 21rem; }
    .wl-occasion-hero-art img { width: min(96vw,36rem); max-height: 21rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-card-theatre.is-previewing .wl-preview-cover { display: none; animation: none !important; }
    .wl-card-theatre.is-previewing .wl-preview-card,
    .wl-anim-letter,
    .wl-anim-unfold,
    .wl-anim-curtain,
    .wl-anim-burst,
    .wl-anim-flip,
    .wl-anim-fade,
    .wl-opening-panels div,
    .wl-open-pulse,
    .wl-occasion-hero-art img,
    .wl-particle { animation: none !important; }
    .wl-cover.is-opening .wl-cover-object { animation: wl-reduced-open .56s ease both !important; }
    .wl-cover.is-opening .wl-envelope-flap { animation: none !important; transform: rotateX(180deg); }
    .wl-design-keepsake .wl-cover.is-opening .wl-cover-object::after { animation: wl-reduced-letter .42s ease both !important; }
    .wl-card-is-open .wl-finished-card { animation: wl-reduced-card-in .35s ease both !important; }
    .wl-cover:hover .wl-cover-object { transform: none; }
}