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

.events {
    --band-h: 20px;
    --gold-deep: #86662a;
    --win-w: min(44cqi, 210px, 22svh);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--band-h) + 40px) 16px calc(var(--band-h) + 50px);
    background: url(../assets/letter/marble.webp) center top / 100% auto repeat-y, #f2ede3;
    color: var(--ink);
    text-align: center;
    container: events / inline-size;
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent
}

html.is-tablet .events,
html:not(.is-tablet) .card .events {
    --band-h: 26px
}

.ev-mehndi {
    --tone: #f3a623;
    --tone-ink: #8a5606;
    --tone-glow: rgba(255, 170, 40, .5)
}

.ev-nikah {
    --tone: #ec93a8;
    --tone-ink: #9b3c56;
    --tone-glow: rgba(240, 130, 160, .46)
}

.ev-baraat {
    --tone: #d3283f;
    --tone-ink: #911428;
    --tone-glow: rgba(215, 36, 62, .42)
}

.ev-walima {
    --tone: #d5dde8;
    --tone-ink: #4d5b6d;
    --tone-glow: rgba(170, 190, 220, .62)
}

.ev-head>* {
    margin: 0
}

.ev-kicker {
    font: 600 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    padding-left: .28em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.ev-title {
    font: 400 clamp(44px, 12.5cqi, 72px)/1.15 "Alex Brush", cursive;
    padding: 0 .3em .1em;
    background: linear-gradient(180deg, rgba(255, 240, 200, .25), transparent 40%, rgba(70, 42, 8, .42)), url(../assets/hero/gold.webp) 0 0 / 4em 4em;
    -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.5px rgba(60, 36, 6, .45))
}

.ev-list {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 9cqi, 48px);
    width: 100%;
    max-width: 560px;
    margin-top: clamp(14px, 4cqi, 26px)
}

.ev {
    display: grid;
    grid-template-columns: var(--win-w) minmax(0, 1fr);
    grid-template-areas: "win info";
    column-gap: clamp(12px, 4.5cqi, 28px);
    align-items: center
}

.ev:nth-child(2n) {
    grid-template-columns: minmax(0, 1fr) var(--win-w);
    grid-template-areas: "info win"
}

@container events (min-width: 640px) {
    .ev-list {
        --win-w: min(21.5cqi, 19svh, 230px);
        flex-direction: row;
        align-items: flex-start;
        max-width: 1200px;
        gap: clamp(14px, 2.6cqi, 40px)
    }
    .ev,
    .ev:nth-child(2n) {
        flex: 1 1 0;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "win" "info";
        justify-items: center;
        align-items: start;
        row-gap: clamp(10px, 1.6cqi, 18px)
    }
}

@container events (min-width: 640px) {
    .events.is-some .ev-list {
        justify-content: center
    }
    .events.is-some .ev,
    .events.is-some .ev:nth-child(2n) {
        flex: 0 1 calc((100% - (3*clamp(14px, 2.6cqi, 40px)))/4)
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .events {
        padding-block: calc(var(--band-h) + 22px) calc(var(--band-h) + 28px)
    }
    html.is-tablet .ev-list {
        --win-w: min(19cqi, 16svh, 230px);
        margin-top: 6px;
        gap: clamp(12px, 1.6cqi, 24px)
    }
    html.is-tablet .events.is-some .ev,
    html.is-tablet .events.is-some .ev:nth-child(2n) {
        flex-basis: calc((100% - (3*clamp(12px, 1.6cqi, 24px)))/4)
    }
    html.is-tablet .ev-title {
        font-size: clamp(44px, 8svh, 64px)
    }
}

.ev-win {
    grid-area: win;
    position: relative;
    display: block;
    width: var(--win-w);
    aspect-ratio: var(--win-r);
    padding: 0;
    border: 0;
    border-radius: calc(var(--win-w) * .2) calc(var(--win-w) * .2) 4px 4px;
    background: none;
    cursor: pointer;
    perspective: calc(var(--win-w) * 4.2);
    -webkit-tap-highlight-color: transparent
}

.ev-win:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 5px
}

.ev.is-open .ev-win {
    cursor: default
}

.ev-win>span {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.ev-win>.ev-light {
    inset: -18% -70% -8%;
    background: radial-gradient(closest-side, var(--tone-glow), transparent);
    opacity: 0
}

.ev-scene {
    -webkit-mask: url(../assets/events/arch.webp) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/events/arch.webp) 0 0 / 100% 100% no-repeat;
    background: #1a0f08
}

.ev-scene img {
    position: absolute;
    left: var(--arch-l);
    top: var(--arch-t);
    width: calc(var(--arch-r) - var(--arch-l));
    height: calc(var(--arch-b) - var(--arch-t));
    object-fit: cover;
    max-width: none;
    filter: brightness(.3);
    transform-origin: 50% 70%;
    user-select: none;
    -webkit-user-select: none
}

.ev-frame {
    background: url(../assets/events/frame.webp) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 calc(var(--win-w) * .04) calc(var(--win-w) * .05) rgba(60, 40, 10, .35))
}

.ev-tint,
.ev-shine {
    -webkit-mask: url(../assets/events/frame-mirrors.webp) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/events/frame-mirrors.webp) 0 0 / 100% 100% no-repeat
}

.ev-tint {
    background: radial-gradient(ellipse 60% 45% at 50% 52%, var(--tone), color-mix(in srgb, var(--tone) 55%, transparent));
    mix-blend-mode: multiply;
    opacity: 0
}

.ev-shine {
    background: linear-gradient(160deg, transparent 38%, rgba(255, 255, 255, .95) 48%, rgba(255, 250, 230, .8) 52%, transparent 62%) 0 0 / 100% 300% no-repeat;
    mix-blend-mode: screen;
    animation: ev-shine 7.5s ease-in-out infinite
}

.ev:nth-child(2) .ev-shine {
    animation-delay: 1.9s
}

.ev:nth-child(3) .ev-shine {
    animation-delay: 3.8s
}

.ev:nth-child(4) .ev-shine {
    animation-delay: 5.7s
}

@keyframes ev-shine {
    0% {
        background-position: 0 100%;
        opacity: 1
    }
    22% {
        background-position: 0 0;
        opacity: 1
    }
    23%,
    to {
        background-position: 0 0;
        opacity: 0
    }
}

.ev-win>.ev-leaf {
    transform-style: preserve-3d
}

.ev-leaf-l {
    transform-origin: var(--arch-l) 50%
}

.ev-leaf-r {
    transform-origin: var(--arch-r) 50%
}

.ev-leaf>i {
    position: absolute;
    inset: 0;
    background: url(../assets/events/shutters.webp) 0 0 / 100% 100% no-repeat;
    -webkit-mask: url(../assets/events/shutters.webp) 0 0 / 100% 100% no-repeat;
    mask: url(../assets/events/shutters.webp) 0 0 / 100% 100% no-repeat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.ev-leaf-l>i {
    clip-path: inset(0 calc(100% - var(--split)) 0 0)
}

.ev-leaf-r>i {
    clip-path: inset(0 0 0 var(--split))
}

.ev-leaf>i+i {
    filter: brightness(.62) saturate(.85)
}

.ev-leaf-l>i+i {
    transform: rotateY(180deg);
    transform-origin: calc((var(--arch-l) + var(--split)) / 2) 50%
}

.ev-leaf-r>i+i {
    transform: rotateY(180deg);
    transform-origin: calc((var(--split) + var(--arch-r)) / 2) 50%
}

.ev-leaf>i:first-child:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 34% 26% at 50% 56%, rgba(255, 236, 180, .55), transparent);
    mix-blend-mode: screen;
    animation: ev-seep 3.6s ease-in-out infinite alternate;
    transition: opacity .5s ease
}

.ev:nth-child(2n) .ev-leaf>i:first-child:after {
    animation-delay: -1.8s
}

@keyframes ev-seep {
    0% {
        opacity: .35
    }
    to {
        opacity: .9
    }
}

.events:not(.is-ready) .ev-leaf,
.ev.is-open .ev-leaf>i:first-child:after {
    opacity: 0
}

.ev.is-open .ev-leaf-l {
    transform: rotateY(-112deg)
}

.ev.is-open .ev-leaf-r {
    transform: rotateY(112deg)
}

.events:not(.is-ready) .ev-scene img,
.ev.is-open .ev-scene img {
    filter: none
}

.ev.is-open .ev-light {
    opacity: 1
}

.ev.is-open .ev-tint {
    opacity: .55
}

.ev-walima.is-open .ev-tint {
    opacity: .4
}

.ev-info {
    grid-area: info;
    display: grid;
    justify-items: center;
    width: 100%;
    container-type: inline-size
}

.ev-info>* {
    margin: 0
}

.ev-name {
    font: 400 clamp(32px, 20cqi, 46px)/1.1 "Alex Brush", cursive;
    padding: 0 .25em .08em;
    background: linear-gradient(180deg, rgba(255, 240, 200, .25), transparent 40%, rgba(70, 42, 8, .42)), url(../assets/hero/gold.webp) 0 0 / 4em 4em;
    -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.5px rgba(60, 36, 6, .45))
}

.ev-gem {
    position: relative;
    width: min(100%, 120px);
    height: 12px;
    margin: 2px 0 8px !important;
    background: linear-gradient(90deg, transparent, rgba(134, 102, 42, .7) 30%, rgba(134, 102, 42, .7) 70%, transparent) center / 100% 1px no-repeat
}

.ev-gem:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    translate: -50% -50%;
    rotate: 45deg;
    background: radial-gradient(circle at 32% 30%, #fff 0, var(--tone) 38%, var(--tone-ink) 100%);
    box-shadow: 0 0 0 1.5px #c9a45c, 0 0 0 2.5px #6f502080, 0 1px 3px #0000004d
}

.ev-when>span {
    display: block
}

.ev-when {
    font-variant-numeric: lining-nums
}

.ev-day,
.ev-dmy {
    font: 700 clamp(10.5px, 6.6cqi, 13px)/1.45 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.ev-time {
    margin-top: 2px;
    font: italic 500 clamp(15px, 8.8cqi, 18px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.ev-tap,
.ev-more {
    grid-row: 4;
    grid-column: 1
}

.ev-tap {
    align-self: start;
    margin-top: 14px !important;
    font: italic 500 clamp(14px, 8cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--gold-deep);
    animation: ev-tap 2.8s ease-in-out infinite;
    transition: opacity .4s ease
}

@keyframes ev-tap {
    0%,
    to {
        opacity: .45
    }
    50% {
        opacity: 1
    }
}

.ev-tap {
    display: none !important
}

.events:not(.is-ready) .ev-tap,
.ev.is-open .ev-tap {
    opacity: 0;
    animation: none;
    visibility: hidden
}

.ev-more {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px !important
}

.events.is-ready .ev:not(.is-open) .ev-more {
    visibility: hidden
}

.ev-more>* {
    margin: 0
}

.ev-venue>span {
    display: block
}

.ev-place {
    font: 600 clamp(16px, 9.4cqi, 20px)/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    text-wrap: balance
}

.ev-addr {
    font: 500 clamp(14px, 8cqi, 16px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #0b3d31c7
}

.ev-dress {
    font: italic 500 clamp(14.5px, 8.4cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    text-wrap: balance
}

.ev-dress>span {
    display: block;
    font: normal 700 clamp(10px, 6cqi, 12px)/1.4 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tone-ink)
}

.ev-prog {
    margin: 2px 0 6px !important
}

.ev-prog-k {
    margin: 0;
    font: 700 clamp(10px, 6cqi, 12px)/1.4 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tone-ink)
}

.ev-prog ol {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font: 500 clamp(14px, 8cqi, 16px)/1.4 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.ev-prog li {
    text-align: center;
    text-wrap: balance
}

.ev-prog li span {
    margin-right: .35em;
    font-weight: 700
}

.ev-actions {
    position: relative;
    display: grid;
    gap: 7px;
    width: min(100%, 210px);
    margin-top: 2px !important
}

@container (min-width: 250px) {
    .ev-actions {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        width: 100%
    }
    .ev-actions .ev-btn {
        gap: .3em;
        padding-inline: 6px;
        font-size: 13px;
        letter-spacing: 0;
        white-space: nowrap
    }
}

.ev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid rgba(134, 102, 42, .55);
    border-radius: 999px;
    background: #fffcf4b8;
    box-shadow: 0 1px 2px #3c280a1f;
    color: var(--ink);
    font: 700 clamp(12.5px, 7.4cqi, 14.5px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .05em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.ev-btn svg {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: var(--tone-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ev-btn:hover {
    background: #fffdf8;
    border-color: var(--tone-ink)
}

.ev-btn:focus-visible,
.ev-cal-menu a:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px
}

.ev-cal-menu {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: calc(100% - 30px);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: min(250px, 92vw);
    padding: 6px;
    border: 1px solid rgba(134, 102, 42, .6);
    border-radius: 12px;
    background: #fffaf0;
    box-shadow: 0 8px 22px #281c064d;
    text-align: left
}

.ev-cal-menu[hidden] {
    display: none
}

.ev-cal-menu a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    font: 700 15px/1.2 Cormorant Garamond, Georgia, serif;
    text-decoration: none
}

.ev-cal-menu a small {
    display: block;
    font: italic 500 13px/1.3 Cormorant Garamond, Georgia, serif;
    color: #0b3d31b3
}

.ev-cal-menu a:hover {
    background: #86662a1f
}

.ev-win,
.ev-info,
.ev-head {
    transition: opacity 1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1)
}

.ev-info {
    transition-delay: .15s
}

.events.is-ready .ev:not(.is-seen) .ev-win {
    opacity: 0;
    translate: 0 22px
}

.events.is-ready .ev:not(.is-seen) .ev-info {
    opacity: 0;
    translate: 0 12px
}

.events.is-ready:not(.is-seen) .ev-head {
    opacity: 0
}

@media(prefers-reduced-motion:reduce) {
    .ev-win,
    .ev-info,
    .ev-head {
        transition: none
    }
    .ev-shine,
    .ev-tap,
    .ev-leaf>i:first-child:after {
        animation: none;
        transition: none
    }
    .ev-shine {
        opacity: 0
    }
}