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

.events {
    --bw: 125cqw;
    --bx: -12.5cqw;
    --br: var(--branch-v-r);
    --pw: 34cqw;
    --stage-h: 300cqw;
    --branch: url(../assets/events/branch-v.webp);
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 11cqw 0 5cqw;
    overflow: hidden;
    background: #f1e2da url(../assets/events/wall.webp) 0 0 / 520px repeat;
    color: var(--ink);
    container-type: inline-size
}

.ev .ev-name,
.ev .tg-when>span,
.ev-back p {
    margin: 0
}

.ev-wall {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 90cqw 70cqw at 12% 4%, #fff6e89e, #fff6e800 70%), radial-gradient(ellipse 120cqw 90cqw at 88% 62%, #fff4ec59, #fff4ec00 70%), linear-gradient(#9660581a, #96605800 7% 82%, #9660581f)
}

.ev-shade {
    position: absolute;
    width: max(115cqw, 60svh);
    aspect-ratio: 1;
    background: url(../assets/letter/shade.webp) 0 0 / 100% 100% no-repeat;
    opacity: .26;
    mix-blend-mode: multiply;
    transform-origin: 0 0;
    animation: ev-sway 8s ease-in-out infinite alternate
}

.ev-shade-a {
    left: -10cqw;
    top: -4cqw
}

.ev-shade-b {
    right: -12cqw;
    top: 44%;
    opacity: .2;
    scale: -1 1;
    transform-origin: 100% 0;
    animation-duration: 9.5s;
    animation-delay: -3s
}

@keyframes ev-sway {
    0% {
        transform: rotate(-1deg) translate(-.8%, .2%) skew(.8deg)
    }
    45% {
        transform: rotate(.5deg) translate(.6%, -.3%) skew(-.4deg)
    }
    to {
        transform: rotate(1.1deg) translate(1%, .5%) skew(-1deg)
    }
}

.ev-head {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 6cqw 3cqw
}

.ev-head p {
    margin: 0
}

.ev-kicker {
    font: 600 max(11px, 3.3cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.ev-title {
    margin: .02em 0 .06em;
    font: 700 13.5cqw/1.05 Corinthia, cursive;
    padding: 0 .2em .04em;
    white-space: nowrap;
    color: var(--rose-ink);
    --wipe: 130%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe))
}

.ev-hint {
    visibility: hidden;
    font: italic 500 max(14px, 4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.ev-head>* {
    text-shadow: 0 0 14px rgba(255, 248, 242, .9)
}

.ev-stage {
    position: relative;
    z-index: 1;
    flex: none;
    height: var(--stage-h)
}

.ev-branch {
    position: absolute;
    left: var(--bx);
    top: 0;
    width: var(--bw);
    aspect-ratio: var(--br);
    background: var(--branch) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(1.4cqw 2.4cqw 1.6cqw rgba(110, 66, 58, .22));
    pointer-events: none
}

.ev {
    --tw: calc(var(--pw) / (var(--tag-pr) - var(--tag-pl)));
    --hx: var(--hang-v-x);
    --hy: var(--hang-v-y);
    position: absolute;
    left: calc(var(--bx) + var(--hx) * var(--bw) - var(--tw) / 2);
    top: calc(var(--hy) * var(--bw) / var(--br) - var(--tw) / var(--tag-r) * .018);
    width: var(--tw)
}

.events[data-n] .ev[data-slot="0"] {
    --hang-v-x: .3;
    --hang-v-y: .157
}

.events[data-n] .ev[data-slot="1"] {
    --hang-v-x: .68;
    --hang-v-y: .322
}

.events[data-n] .ev[data-slot="2"] {
    --hang-v-x: .37;
    --hang-v-y: .54
}

.events[data-n="1"] {
    --bw: 125cqw;
    --bx: -14.9cqw;
    --br: var(--branch-h-r);
    --branch: url(../assets/events/branch-h.webp);
    --pw: 46cqw;
    --stage-h: 146cqw
}

.events[data-n="1"] .ev {
    --hx: var(--hang-h-x);
    --hy: var(--hang-h-y)
}

.events[data-n="2"] {
    --stage-h: 193cqw
}

.events[data-n="3"] {
    --stage-h: 256cqw
}

.events[data-n="1"] .ev[data-slot="0"] {
    --hang-h-x: .519;
    --hang-h-y: .33
}

.events[data-n="2"] .ev[data-slot="0"] {
    --hang-h-x: .44;
    --hang-h-y: .475
}

.events[data-n="2"] .ev[data-slot="1"] {
    --hang-h-x: .655;
    --hang-h-y: .395
}

.events[data-n="3"] .ev[data-slot="0"] {
    --hang-h-x: .235;
    --hang-h-y: .44
}

.events[data-n="3"] .ev[data-slot="1"] {
    --hang-h-x: .44;
    --hang-h-y: .475
}

.events[data-n="3"] .ev[data-slot="2"] {
    --hang-h-x: .655;
    --hang-h-y: .395
}

.ev-tag {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    container-type: inline-size
}

.tg-sway,
.tg-swing {
    display: block;
    position: relative;
    transform-origin: 50% 1%
}

.tg-art {
    width: 100%;
    height: auto;
    filter: drop-shadow(5cqw 8cqw 5cqw rgba(107, 62, 58, .2)) drop-shadow(0 .6cqw .8cqw rgba(107, 62, 58, .16))
}

.ev-tag:focus-visible {
    outline: none
}

.ev-tag:focus-visible .tg-art {
    filter: drop-shadow(0 0 0 var(--rose)) drop-shadow(0 0 1.2cqw rgba(168, 100, 106, .9))
}

.tg-words {
    position: absolute;
    left: calc(var(--tag-pl) * 100% + 8%);
    right: calc((1 - var(--tag-pr)) * 100% + 8%);
    top: calc(var(--tag-pf) * 100%);
    bottom: calc((1 - var(--tag-pb)) * 100% + 7%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4cqw;
    pointer-events: none
}

.ev-name {
    display: block;
    font: 700 30cqw/1 Corinthia, cursive;
    color: var(--rose-ink);
    padding: 0 .1em
}

.tg-when {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6cqw;
    line-height: 1.15
}

.tg-when:before {
    content: "";
    width: 22cqw;
    height: 1px;
    margin-bottom: 2.6cqw;
    background: linear-gradient(90deg, transparent, rgba(168, 100, 106, .6), transparent)
}

.ev-day {
    font: 600 max(9.5px, 7.6cqw) "Cormorant Garamond", Georgia, serif;
    letter-spacing: .22em;
    padding-left: .22em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.ev-dmy {
    font: 600 max(12px, 10.4cqw) "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.ev-time {
    font: italic 500 max(11.5px, 9.6cqw) "Cormorant Garamond", Georgia, serif;
    color: var(--rose-ink-soft)
}

.tg-tap {
    position: absolute;
    left: calc(var(--tag-pl) * 100% + 6%);
    right: calc((1 - var(--tag-pr)) * 100% + 6%);
    bottom: calc((1 - var(--tag-pb)) * 100% + 4.2%);
    font: italic 600 max(10.5px, 8cqw)/1.1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .02em;
    color: var(--sage-ink);
    pointer-events: none
}

.tg-ring {
    position: absolute;
    left: 50%;
    top: calc((var(--tag-pf) + var(--tag-pb)) * 50%);
    width: 92%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border: 2px solid rgba(168, 100, 106, .8);
    border-radius: 50%;
    box-shadow: 0 0 8px #e9a8ac99, inset 0 0 8px #e9a8ac66;
    opacity: 0;
    pointer-events: none
}

.ev-petals {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none
}

.ev-petal {
    position: absolute;
    left: 0;
    top: 0;
    perspective: 300px
}

.ev-petal b {
    display: block;
    transform-style: preserve-3d
}

.ev-petal img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .16))
}

.ev>.ev-back {
    display: none
}

.events.is-armed .ev:not(.is-hung) .tg-swing {
    opacity: 0
}

.events.is-armed:not(.is-seen) .ev-head>* {
    opacity: 0
}

html.ev-lifted {
    overflow: hidden
}

.ev-lift {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    perspective: 1600px
}

.ev-lift[hidden] {
    display: none
}

.ev-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, #fcf5f0c7, #eeded6e6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.ev-card {
    --cw: min(86vw, 400px, 84svh * var(--tag-r));
    position: relative;
    width: var(--cw);
    aspect-ratio: var(--tag-r);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    outline: none
}

.ev-turn {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d
}

.ev-face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    container-type: inline-size
}

.ev-face>img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(3cqw 6cqw 6cqw rgba(107, 62, 58, .24)) drop-shadow(0 .4cqw .8cqw rgba(107, 62, 58, .16))
}

.ev-face-back {
    transform: rotateY(180deg)
}

.ev-face .ev-back {
    position: absolute;
    left: calc(var(--tag-pl) * 100% + 8%);
    right: calc((1 - var(--tag-pr)) * 100% + 8%);
    top: 26%;
    bottom: calc((1 - var(--tag-pb)) * 100% + 5%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.6cqw;
    text-align: center
}

.eb-name {
    font: 700 19cqw/1 Corinthia, cursive;
    color: var(--rose-ink)
}

.eb-when {
    font: 600 max(13px, 6.4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    text-wrap: balance
}

.eb-when span {
    display: block;
    font-style: italic;
    font-weight: 500;
    color: var(--rose-ink-soft)
}

.eb-note {
    position: relative;
    padding-top: 3.6cqw;
    font: italic 500 max(13px, 6.4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #5b3c40e6;
    text-wrap: balance
}

.eb-note:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 26cqw;
    height: 1px;
    translate: -50% 0;
    background: linear-gradient(90deg, transparent, rgba(168, 100, 106, .6), transparent)
}

.ev-venue {
    line-height: 1.25
}

.ev-place {
    display: block;
    font: 700 max(14.5px, 7.4cqw)/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.ev-addr {
    display: block;
    font: 500 max(12.5px, 6cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #5b3c40d9
}

.ev-dress {
    font: italic 500 max(12.5px, 6cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    text-wrap: balance
}

.ev-dress>span {
    display: block;
    font: normal 700 max(9.5px, 4.4cqw)/1.5 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.ev-sw {
    display: flex;
    justify-content: center;
    gap: 1.8cqw;
    margin-top: 1.6cqw
}

.ev-sw i {
    width: 4.6cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 55%), var(--c);
    box-shadow: 0 0 0 1px #5b3c402e, 0 1px 2px #5b3c4033
}

.ev-actions {
    position: relative;
    display: grid;
    gap: 2.4cqw;
    width: 84%;
    margin-top: 1cqw
}

.ev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    min-height: max(36px, 11cqw);
    padding: 1.6cqw 3cqw;
    border: 1px solid rgba(168, 100, 106, .55);
    border-radius: 999px;
    background: #fffbf6cc;
    box-shadow: 0 1px 2px #6b3e3a1f;
    color: var(--ink);
    font: 700 max(13px, 5.4cqw)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

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

.ev-btn:hover {
    background: #fffdf9;
    border-color: var(--rose)
}

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

.ev-cal-menu {
    position: absolute;
    z-index: 3;
    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(168, 100, 106, .5);
    border-radius: 12px;
    background: #fffaf6;
    box-shadow: 0 8px 22px #5028283d;
    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: #5b3c40b3
}

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

.ev-close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(168, 100, 106, .45);
    border-radius: 50%;
    background: #fffbf6d9;
    box-shadow: 0 2px 8px #6b3e3a29;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.ev-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--rose);
    stroke-width: 1.8;
    stroke-linecap: round
}

@media(min-aspect-ratio:5/8) {
    html:root .events {
        --bw: 80cqw;
        --bx: 13cqw;
        --pw: 23cqw;
        --stage-h: 198cqw;
        padding-top: 7cqw
    }
    html:root .ev-kicker {
        font-size: max(11px, 1.9cqw)
    }
    html:root .ev-title {
        font-size: 9.5cqw
    }
    html:root .ev-hint {
        font-size: max(14px, 2.3cqw)
    }
    html:root .events[data-n="1"] {
        --bw: 104cqw;
        --bx: -4cqw;
        --pw: 30cqw;
        --stage-h: 98cqw
    }
    html:root .events[data-n="2"] {
        --stage-h: 130cqw
    }
    html:root .events[data-n="3"] {
        --stage-h: 170cqw
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .events {
        --bw: 104cqw;
        --bx: -4cqw;
        --br: var(--branch-h-r);
        --pw: 13cqw;
        --stage-h: 54cqw;
        --branch: url(../assets/events/branch-h.webp);
        padding: 3cqw 0 1cqw
    }
    html.is-tablet .ev {
        --hx: var(--hang-h-x);
        --hy: var(--hang-h-y)
    }
    html.is-tablet .events[data-n] {
        --stage-h: 54cqw
    }
    html.is-tablet .events[data-n="1"] {
        --bw: 104cqw;
        --bx: -4cqw;
        --pw: 14.5cqw
    }
    html.is-tablet .ev-kicker {
        font-size: max(11px, 1.2cqw)
    }
    html.is-tablet .ev-title {
        font-size: 5.6cqw
    }
    html.is-tablet .ev-hint {
        font-size: max(14px, 1.4cqw)
    }
    html.is-tablet .ev-head {
        padding-bottom: 1cqw
    }
    html.is-tablet .ev-shade-b {
        top: 20%
    }
}

@media(prefers-reduced-motion:reduce) {
    .ev-shade {
        animation: none
    }
    .events.is-armed .ev:not(.is-hung) .tg-swing,
    .events.is-armed:not(.is-seen) .ev-head>* {
        opacity: 1
    }
}