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

:root {
    --cobalt: #1d3a82;
    --cobalt-deep: #0f2452;
    --firoza: #2f8f94;
    --saffron: #d9982e;
    --plaster: #efe3cc;
    --brick: #a4553a;
    --kick: #9a4b2e;
    --brass: #b0843a;
    --ink: #1b2a52;
    --table: #101d3c;
    --mehndi: #d9982e;
    --nikah: #2f8f94;
    --baraat: #b0402a;
    --walima: #1d3a82;
    --card-w: min(100%, max( 75svh, 360px));
    --seam-h: 44px
}

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

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

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

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

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

html,
body {
    margin: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(46, 78, 150, .38), transparent 70%), radial-gradient(ellipse at 50% 50%, #1b2d5a, #101d3c 62%, #08112a) 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(--plaster);
    box-shadow: 0 0 60px #02061499
}

.seam-edged {
    position: relative
}

.seam-edged:before,
.seam-edged:after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: var(--seam-h);
    background: url(../assets/theme/seam.webp) 50% 50% / auto 100% repeat-x;
    filter: drop-shadow(0 2px 3px rgba(40, 22, 10, .35));
    pointer-events: none
}

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

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

.seam-edged>i.seam-band {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: var(--seam-h);
    overflow: hidden;
    pointer-events: none
}

.seam-edged>i.seam-band-t {
    top: calc(var(--seam-h) * -.5)
}

.seam-edged>i.seam-band-b {
    bottom: calc(var(--seam-h) * -.5);
    z-index: 4
}

.seam-band:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 248, 225, .5) 50%, transparent 60%);
    transform: translate(-120%);
    animation: seam-glint 9s ease-in-out 2s infinite
}

.seam-band-b:before {
    animation-delay: 6.5s
}

@keyframes seam-glint {
    0% {
        transform: translate(-120%)
    }
    30%,
    to {
        transform: translate(270%)
    }
}

.plaster {
    position: relative;
    z-index: 1;
    container-type: inline-size;
    background: url(../assets/theme/plaster.webp) 50% 0 / 540px auto repeat, var(--plaster);
    color: var(--ink)
}

.plaster-sun {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #263a6e17, #263a6e08 30% 70%, #263a6e1a)
}

.plaster-sun:before,
.plaster-sun:after {
    content: "";
    position: absolute;
    left: var(--sun-x, -10%);
    top: var(--sun-y, 2%);
    width: var(--sun-w, min(125cqi, 980px));
    aspect-ratio: 900 / 806;
    background: url(../assets/theme/jaali.webp) center / 100% 100% no-repeat;
    animation: km-sun 44s ease-in-out infinite alternate
}

.plaster-sun:before {
    mix-blend-mode: soft-light
}

.plaster-sun:after {
    mix-blend-mode: screen;
    opacity: .42
}

@keyframes km-sun {
    0% {
        transform: translate(-3%, 1.5%) rotate(-1deg)
    }
    to {
        transform: translate(5%, -1.5%) rotate(1deg)
    }
}

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

.glaze {
    background: linear-gradient(104deg, transparent 41%, rgba(214, 232, 255, .62) 46.5%, transparent 52%) var(--glint) 0 / 200% 100% no-repeat, linear-gradient(180deg, #fff3, #fff0 36%, #0000 64%, #02081e80), linear-gradient(90deg, #1f418f, #152e6c 30%, #2346a0, #122a64 82%, #1f418f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 250, 235, .75)) drop-shadow(0 1.4px 1.2px rgba(8, 20, 55, .5))
}

@media(prefers-reduced-motion:reduce) {
    .seam-band:before,
    .plaster-sun:before,
    .plaster-sun:after,
    .glaze-glints {
        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(.h-scroll i, .lt-hint, .fm-lamp, .fm-flicker, .cd-hint, .rs-pigeon, .rs-flyer, .cl-fly-t),
[data-section].is-away :is(.plaster-sun, .b-glint):before,
[data-section].is-away .plaster-sun:after {
    animation-play-state: paused !important
}

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

[data-section].is-asleep :is(.h-scroll i, .lt-hint, .fm-lamp, .fm-flicker, .cd-hint, .rs-pigeon, .rs-flyer, .cl-fly-t),
[data-section].is-asleep :is(.plaster-sun, .b-glint, .seam-band):before,
[data-section].is-asleep .plaster-sun:after {
    animation: none !important
}

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

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

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

html.is-lite :is(.h-scroll i, .lt-hint, .fm-lamp, .fm-flicker, .cd-hint, .rs-pigeon, .cl-fly-t),
html.is-lite :is(.plaster-sun, .b-glint, .seam-band):before,
html.is-lite .plaster-sun:after,
html.is-lite .music-toggle svg {
    animation: none !important
}

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

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

html.is-lite .lt-hint {
    opacity: .9
}

html.is-lite .cd-hint {
    opacity: 1
}