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

:root {
    --night: #12324a;
    --night-deep: #0a1f30;
    --moon: #c9d6de;
    --pearl: #f4f1e8;
    --muslin: #f0ebe0;
    --leaf: #86a093;
    --diya: #e8a23a;
    --ink: #173a52;
    --kick: #56717f;
    --table: #0b1c2a;
    --mehndi: #d9962a;
    --nikah: #e9e4d6;
    --nikah-edge: #8a979e;
    --baraat: #a3263d;
    --walima: #6f93bd;
    --card-w: min(100%, max( 75svh, 360px));
    --seam-h: 40px;
    --band-w: 56px
}

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

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

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

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

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

html,
body {
    margin: 0;
    background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(150, 185, 210, .16), transparent 70%), radial-gradient(ellipse at 50% 40%, #153a54, #0b1c2a 62%, #06121c) 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(--night);
    box-shadow: 0 0 60px #020810a6
}

.seam-edged {
    position: relative
}

.seam {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: var(--seam-h);
    pointer-events: none
}

.seam:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
    filter: drop-shadow(0 3px 3px rgba(6, 22, 36, .42))
}

.seam-top {
    top: calc(var(--seam-h) * -.5)
}

.seam-bot {
    bottom: calc(var(--seam-h) * -.5)
}

.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
}

.seam i:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 36%;
    background: linear-gradient(100deg, transparent 38%, rgba(236, 246, 255, .62) 50%, transparent 62%);
    transform: translate(-142.2%);
    will-change: transform;
    animation: mr-seam-glint 10s ease-in-out 2.5s infinite
}

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

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

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

.muslin-moon {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse 90% 40% at 28% 12%, rgba(255, 253, 246, .38), transparent 70%), linear-gradient(180deg, rgba(40, 80, 110, .07), transparent 22%, transparent 78%, rgba(40, 80, 110, .08))
}

.muslin-moon:before {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    top: -2%;
    height: min(110%, 1200px);
    background: url(../assets/theme/strings.webp) 0 0 / auto 640px repeat;
    opacity: .1;
    filter: blur(1.5px);
    transform-origin: 50% 0;
    transform: skew(-7deg);
    -webkit-mask: linear-gradient(180deg, #000 25%, transparent 95%);
    mask: linear-gradient(180deg, #000 25%, transparent 95%);
    animation: mr-strings 13s ease-in-out infinite alternate
}

@keyframes mr-strings {
    0% {
        transform: skew(-7deg) translate(0)
    }
    45% {
        transform: skew(-5.2deg) translate(.9%)
    }
    to {
        transform: skew(-8.4deg) translate(-.6%)
    }
}

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

.pearl {
    background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .95) 46.5%, transparent 53%) var(--glint) 0 / 200% 100% no-repeat, linear-gradient(90deg, #ffe8ec38, #def6f23d 35%, #e6e8ff38 65%, #fff0e233), linear-gradient(180deg, #fff, #f6f3eb 42%, #e2e9ec 72%, #c8d4dc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 9px rgba(175, 208, 235, .55)) drop-shadow(0 1.5px 1.5px rgba(4, 18, 32, .75))
}

.ink {
    background: linear-gradient(104deg, transparent 42%, rgba(214, 230, 240, .6) 47%, transparent 52%) var(--glint) 0 / 200% 100% no-repeat, linear-gradient(180deg, #2c5676, #173a52 48%, #0e283b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 1px 1.2px rgba(10, 30, 45, .35))
}

@media(prefers-reduced-motion:reduce) {
    .seam i:before,
    .glints,
    .muslin-moon: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(.seam i, .muslin-moon, .pc-glint):before,
[data-section].is-away :is(.h-scroll i, .lt-hint, .fm-stars, .fm-hang, .fm-flicker, .fm-hint, .cd-tw, .cd-clouds, .cd-hint, .cl-l, .cl-hint) {
    animation-play-state: paused !important
}

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

[data-section].is-far :is(.cd-stars, .fm-stars, .fm-flicker, .seam i),
[data-section].is-far :is(.muslin-moon, .pc-glint):before {
    display: none
}

[data-section].is-away .cd-stars {
    display: none
}

[data-section].is-far :is(.h-scroll i, .fm-hang, .cd-clouds, .cl-l) {
    animation: none !important
}

html.is-lite :is(.seam i, .muslin-moon, .pc-glint):before,
html.is-lite :is(.h-scroll i, .fm-stars, .fm-hang, .cd-tw, .cd-clouds, .cl-l),
html.is-lite .music-toggle svg {
    animation: none !important
}

html.is-lite .is-lit .fm-flicker {
    animation: none;
    opacity: .35
}

html.is-lite .music-toggle {
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}