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

.events {
    --win-w: min(36cqi, 150px, 28svh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--seam-h) * .5 + 40px) 12px calc(var(--seam-h) * .5 + 54px);
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent
}

.ev-head {
    position: relative;
    text-align: center;
    margin: 0 0 clamp(22px, 6.5cqi, 40px)
}

.ev-head>* {
    margin: 0
}

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

.ev-title {
    font: 400 clamp(56px, 17cqi, 100px)/1.1 "Italianno", cursive
}

.ev-title .walnut {
    display: inline-block;
    padding: 0 .3em .06em
}

.ev-sub {
    font: italic 500 clamp(15px, 4.3cqi, 20px)/1.4 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    opacity: .9;
    text-wrap: balance
}

.ev-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(34px, 10cqi, 52px);
    width: 100%;
    max-width: 560px;
    padding: 0 clamp(14px, 6cqi, 40px)
}

.ev {
    --tone: var(--mehndi);
    --tone-ink: color-mix(in srgb, var(--tone) 62%, #2a1608);
    --glow: color-mix(in srgb, var(--tone) 34%, transparent);
    --open: 110deg;
    display: grid;
    grid-template-columns: var(--win-w) minmax(0, 1fr);
    grid-template-areas: "win info";
    column-gap: clamp(12px, 4cqi, 26px);
    align-items: start
}

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

.ev[hidden] {
    display: none
}

.ev-nikah {
    --tone: var(--nikah)
}

.ev-baraat {
    --tone: var(--baraat)
}

.ev-walima {
    --tone: var(--walima);
    --glow: color-mix(in srgb, var(--tone) 26%, transparent)
}

@container (min-width: 560px) {
    .ev-list {
        --win-w: min(30cqi, 24svh, 190px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 900px;
        gap: clamp(36px, 7cqi, 56px) clamp(20px, 5cqi, 48px);
        padding: 0 clamp(16px, 5cqi, 56px)
    }
    .ev,
    .ev:nth-child(2n) {
        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.8cqi, 20px);
        --open: 108deg
    }
}

@container (min-width: 700px) {
    .ev-list {
        --win-w: min(19cqi, 17svh, 200px);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        max-width: 1100px;
        gap: clamp(18px, 3.6cqi, 44px)
    }
    .ev,
    .ev:nth-child(2n) {
        flex: 1 1 0
    }
}

.ev-win {
    grid-area: win;
    position: relative;
    display: block;
    width: min(var(--win-w), 100%);
    aspect-ratio: var(--win-r);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent
}

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

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

.ev-glow {
    inset: -12% -55% -8%;
    background: radial-gradient(closest-side, var(--glow), transparent);
    opacity: 0
}

.ev-frame {
    inset: 0;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 2px rgba(50, 28, 10, .3)) drop-shadow(0 8px 12px rgba(50, 28, 10, .24))
}

.ev-in {
    background: #1b0f07;
    box-shadow: inset 0 0 0 1px #00000080
}

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

.ev-scene {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(.22) saturate(.7);
    box-shadow: inset 0 6px 10px #00000073, inset 0 -3px 8px #0000004d
}

.ev-in>.ev-chink {
    left: var(--split);
    right: auto;
    width: 5cqw;
    translate: -50% 0;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .85) 35%, #fffaf0 50%, rgba(255, 244, 214, .85) 65%, transparent);
    filter: blur(.5px);
    animation: ev-chink 3.2s ease-in-out infinite alternate
}

.ev:nth-child(2n) .ev-chink {
    animation-delay: -1.6s
}

@keyframes ev-chink {
    0% {
        opacity: .5
    }
    to {
        opacity: 1
    }
}

.ev-light {
    background: radial-gradient(ellipse 80% 60% at 40% 35%, rgba(255, 240, 205, .95), rgba(255, 228, 180, .3) 55%, transparent 80%);
    mix-blend-mode: soft-light;
    opacity: 0
}

.ev-doors {
    perspective: 400cqw
}

.ev-door {
    position: absolute;
    top: 0;
    bottom: 0;
    transform-style: preserve-3d
}

.ev-door-l {
    left: 0;
    transform-origin: 0 50%
}

.ev-door-r {
    right: 0;
    transform-origin: 100% 50%
}

.ev-front,
.ev-back {
    position: absolute;
    inset: 0;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.ev-back {
    transform: rotateY(180deg);
    filter: drop-shadow(0 3px 4px rgba(30, 15, 5, .3))
}

.ev-shade {
    position: absolute;
    inset: 0;
    background: #1c0e06;
    opacity: 0
}

.ev-back .ev-shade {
    opacity: .6
}

.ev-tassel {
    position: absolute;
    translate: calc(var(--tx) * -1) 0;
    transform: translateZ(1px);
    transform-origin: var(--tx) 0;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: drop-shadow(1px 2px 1.5px rgba(40, 20, 8, .4));
    animation: ev-tassel 4.6s ease-in-out infinite alternate
}

.ev-door-r .ev-tassel {
    animation-duration: 5.3s;
    animation-delay: -2.1s
}

.ev-nikah .ev-tassel {
    animation-delay: -1.3s
}

.ev-baraat .ev-tassel {
    animation-delay: -3.4s
}

.ev-walima .ev-tassel {
    animation-delay: -.6s
}

@keyframes ev-tassel {
    0% {
        rotate: -3deg
    }
    to {
        rotate: 3deg
    }
}

:is(.ev.is-open, .events:not(.is-ready) .ev) .ev-door-l {
    transform: rotateY(calc(var(--open) * -1))
}

:is(.ev.is-open, .events:not(.is-ready) .ev) .ev-door-r {
    transform: rotateY(var(--open))
}

:is(.ev.is-open, .events:not(.is-ready) .ev) .ev-front .ev-shade {
    opacity: .5
}

:is(.ev.is-open, .events:not(.is-ready) .ev) .ev-door-l .ev-back .ev-shade {
    opacity: .42
}

:is(.ev.is-open, .events:not(.is-ready) .ev) .ev-door-r .ev-back .ev-shade {
    opacity: .1
}

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

:is(.ev.is-open, .events:not(.is-ready) .ev) .ev-glow {
    opacity: 1
}

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

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

.ev-info {
    grid-area: info;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: 100%;
    text-align: center;
    container-type: inline-size;
    color: var(--ink)
}

.ev-info>* {
    margin: 0
}

.ev-name {
    font: 400 clamp(40px, 26cqi, 54px)/1.05 "Italianno", cursive
}

.ev-name .walnut {
    display: inline-block;
    padding: 0 .28em .06em
}

.ev-rule {
    position: relative;
    width: min(100%, 120px);
    height: 12px;
    margin: 0 0 6px !important;
    background: linear-gradient(90deg, transparent, var(--tone) 25%, var(--tone) 75%, transparent) center / 100% 1px no-repeat
}

.ev-rule i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8e8 0 12%, var(--tone) 55%, color-mix(in srgb, var(--tone) 60%, #1e1008));
    box-shadow: 0 0 0 2px #f3e9d6, 0 1px 2px #28140866
}

.ev-when>span {
    display: block
}

.ev-day {
    font: 700 clamp(10px, 6.4cqi, 12.5px)/1.45 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .16em;
    padding-left: .16em;
    text-transform: uppercase;
    color: var(--tone-ink)
}

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

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

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

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

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

.ev-more {
    display: grid;
    justify-items: center;
    gap: 9px;
    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(15px, 9cqi, 19px)/1.2 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance
}

.ev-addr {
    font: italic 500 clamp(13.5px, 8cqi, 16px)/1.3 "Cormorant Garamond", Georgia, serif
}

.ev-btns {
    position: relative;
    display: grid;
    gap: 7px;
    width: min(100%, 210px)
}

@container (min-width: 290px) {
    .ev-btns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        width: 100%
    }
}

.ev-cal {
    position: relative;
    display: grid
}

.ev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid rgba(115, 68, 42, .5);
    border-radius: 999px;
    background: #fffcf499;
    color: var(--ink);
    font: 700 clamp(11px, 6.6cqi, 12.5px)/1.1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer
}

@container (max-width: 200px) {
    .ev-btn {
        padding: 6px 8px;
        font-size: 10.5px;
        letter-spacing: .05em;
        white-space: normal;
        text-wrap: balance
    }
}

.ev-btn-map {
    border-color: transparent;
    background: linear-gradient(180deg, #8d5534, #5f3520);
    color: #fbf3e6;
    box-shadow: 0 1px 2px #28140866, inset 0 1px #ffdcb440
}

.ev-btn:hover {
    filter: brightness(1.08)
}

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

.ev-cal-menu {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(100% + 6px);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: min(250px, 92vw);
    padding: 6px;
    border: 1px solid rgba(115, 68, 42, .45);
    border-radius: 12px;
    background: #fbf6ec;
    box-shadow: 0 10px 24px #2814084d;
    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: #3a2415b8
}

.ev-cal-menu a:hover {
    background: #9a593c1f
}

.ev-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

@media(prefers-reduced-motion:reduce) {
    .ev-tassel,
    .ev-chink,
    .ev-tap {
        animation: none
    }
}