/*! © 2026 Dastan Invites, dastaninvites.com. All rights reserved. This invitation's design, code, artwork and music may not be copied, reused or resold. */

:root {
    --sky: #6aa9ef;
    --snow: #fbfaf6;
    --blossom: #f3d6d2;
    --wool: #efe7d9;
    --walnut: #73442a;
    --ink: #3a2415;
    --madder: #9e2b25;
    --saffron: #d99a2b;
    --moss: #5f6f3a;
    --glacier: #9fd3dc;
    --copper: #9a593c;
    --table: #2a1a10;
    --mehndi: var(--saffron);
    --nikah: var(--moss);
    --baraat: var(--madder);
    --walima: #34406b;
    --card-w: min(100%, max( 75svh, 360px));
    --seam-h: 44px;
    --band-w: 54px
}

html.is-tablet {
    --card-w: 100%
}

html.is-tablet,
html:not(.is-tablet) .card {
    --seam-h: 56px;
    --band-w: 74px
}

@media(max-aspect-ratio:5/8) {
    html:not(.is-tablet) .card {
        --seam-h: 44px;
        --band-w: 54px
    }
}

*,
*:before,
*:after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}

html,
body {
    margin: 0;
    background: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(255, 226, 190, .12), transparent 70%), radial-gradient(ellipse at 50% 40%, #4a2f1d, #2a1a10 62%, #170d07) fixed;
    background-color: var(--table)
}

body {
    min-height: 100vh
}

img {
    display: block;
    max-width: 100%
}

.card {
    position: relative;
    width: var(--card-w);
    margin: 0 auto;
    background: var(--sky);
    box-shadow: 0 0 60px #0a050299
}

@media(max-aspect-ratio:3/4),
(max-width:360px) {
    html,
    body {
        background: var(--sky)
    }
    .card {
        box-shadow: none
    }
}

html.is-tablet,
html.is-tablet body {
    background: var(--sky)
}

html.is-tablet .card {
    box-shadow: none
}

@property --glint {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 118%;
}

.snow {
    background: linear-gradient(104deg, transparent 40%, rgba(255, 214, 140, .95) 46.5%, transparent 53%) var(--glint) 0 / 200% 100% no-repeat, linear-gradient(180deg, #fff, #fffdf8 45%, #f2ede4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 .14em rgba(60, 120, 190, .55)) drop-shadow(0 .02em .03em rgba(20, 60, 110, .7))
}

.seam-edged {
    position: relative
}

.seam {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: calc(var(--seam-h) * var(--seam-r, 1.39));
    background: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
    filter: drop-shadow(0 3px 3px rgba(40, 20, 8, .38));
    pointer-events: none
}

.seam-top {
    top: calc(var(--seam-h) * var(--seam-r, 1.39) * var(--seam-c, .61) * -1)
}

.seam-bot {
    bottom: calc(var(--seam-h) * var(--seam-r, 1.39) * (var(--seam-c, .61) - 1))
}

.seam i {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
    mask: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
    mix-blend-mode: screen
}

.seam i:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 36%;
    height: 100%;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 238, 205, .7) 50%, transparent 62%);
    transform: translate(-142.2222%);
    animation: kh-seam-glint 10s ease-in-out 2.5s infinite
}

.seam-bot i:before {
    animation-delay: 7s
}

@keyframes kh-seam-glint {
    0% {
        transform: translate(-142.2222%)
    }
    30%,
    to {
        transform: translate(320%)
    }
}

.wool {
    position: relative;
    z-index: 1;
    container-type: inline-size;
    background: url(../assets/theme/wool-l.webp) 0 0 / var(--band-w) auto repeat-y, url(../assets/theme/wool-r.webp) 100% 0 / var(--band-w) auto repeat-y, url(../assets/theme/wool.webp) 50% 0 / calc(var(--band-w) * var(--tile-px, 603) / var(--band-px, 208)) auto repeat, var(--wool);
    color: var(--ink)
}

.wool.wool-plain {
    background: url(../assets/theme/wool.webp) 50% 0 / calc(var(--band-w) * var(--tile-px, 603) / var(--band-px, 208)) auto repeat, var(--wool)
}

.wool-sun {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse 85% 38% at 22% 8%, rgba(255, 248, 228, .42), transparent 70%), linear-gradient(180deg, rgba(90, 60, 30, .06), transparent 20%, transparent 80%, rgba(90, 60, 30, .08))
}

.wool-shade {
    position: absolute;
    z-index: 8;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.wool-shade:before {
    content: "";
    position: absolute;
    left: -14%;
    top: calc(var(--seam-h) * -.2);
    width: min(96cqi, 860px);
    aspect-ratio: var(--shade-r, 1.366);
    background: url(../assets/theme/shade.webp) 0 0 / 100% 100% no-repeat;
    opacity: .14;
    filter: blur(3px);
    mix-blend-mode: multiply;
    transform-origin: 0 0;
    transform: rotate(14deg);
    animation: kh-shade 12s ease-in-out infinite alternate
}

@keyframes kh-shade {
    0% {
        transform: rotate(14deg) translate(0)
    }
    40% {
        transform: rotate(15.6deg) translate(.6%, .4%)
    }
    to {
        transform: rotate(12.8deg) translate(-.5%, -.2%)
    }
}

.walnut {
    background: linear-gradient(104deg, transparent 42%, rgba(255, 228, 176, .75) 47%, transparent 52%) var(--glint) 0 / 200% 100% no-repeat, linear-gradient(180deg, #94603a, #73442a, #5a321e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 252, 244, .75)) drop-shadow(0 1px 1.2px rgba(60, 30, 12, .3))
}

@media(prefers-reduced-motion:reduce) {
    .seam i:before,
    .wool-shade:before {
        animation: none
    }
}

html.is-preloading [data-section]:not([data-section=hero]),
html.is-preloading [data-section]:not([data-section=hero]):before,
html.is-preloading [data-section]:not([data-section=hero]):after,
html.is-preloading [data-section]:not([data-section=hero]) *,
html.is-preloading [data-section]:not([data-section=hero]) *:before,
html.is-preloading [data-section]:not([data-section=hero]) *:after {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-image-source: none !important
}

.invite-clock {
    display: block;
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none
}

.invite-wait {
    display: block;
    width: 1px;
    height: 1px;
    opacity: 0
}

[data-section].is-away :is(.wool-shade, .h-sun, .b-glint, .fm-shade, .fm-sun, .cd-shade, .cd-sun):before,
[data-section].is-away .h-sun:after,
[data-section].is-away :is(.h-glint, .ev-chink, .ev-tassel, .ev-tap, .rs-tassel, .cl-flame, .cl-star) {
    animation-play-state: paused !important
}

[data-section].is-asleep :is(.seam i, .wool-shade, .h-sun, .b-glint, .fm-shade, .fm-sun, .cd-shade, .cd-sun):before,
[data-section].is-asleep .h-sun:after,
[data-section].is-asleep :is(.h-glint, .ev-chink, .ev-tassel, .ev-tap, .rs-tassel, .cl-flame, .cl-star) {
    animation: none !important
}

.ev.is-asleep .ev-in {
    display: none
}

html.is-lite :is(.seam i, .wool-shade, .h-sun, .b-glint, .fm-shade, .fm-sun, .cd-shade, .cd-sun):before,
html.is-lite .h-sun:after,
html.is-lite :is(.h-glint, .ev-chink, .ev-tassel, .rs-tassel, .cl-flame, .cl-star),
html.is-lite .music-toggle svg {
    animation: none !important
}

[data-section].is-far:before,
[data-section].is-far:after {
    animation-play-state: paused !important
}

[data-section].is-away .seam i:before {
    animation-play-state: running !important
}

[data-section].is-far .seam i:before {
    animation-play-state: paused !important
}

img,
canvas {
    -webkit-touch-callout: none;
    -webkit-user-drag: none
}

:root {
    --k0: "2ea17a381b11bea8b642"
}