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

.letter {
    position: relative;
    background: #3a0a12
}

.letter.is-scrubbed {
    height: 260vh;
    height: 260svh
}

.letter-stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    container: lstage / size
}

.letter.is-scrubbed .letter-stage {
    position: sticky;
    top: 0
}

.l-bg {
    position: absolute;
    inset: 0;
    background: #3a0a12 url(../assets/letter/bg-phone.webp) center / cover no-repeat
}

.l-scroll {
    --u: 1;
    --sheet-w: min(77cqw, 38cqh);
    --rh: calc(var(--sheet-w) * .2266);
    --edge: calc(var(--u) * 100% + (1 - var(--u)) * var(--rh) * .85);
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sheet-w);
    transform: translate(-50%, calc(var(--u) * -50% - (1 - var(--u)) * var(--rh) * .425));
    --shadow: 0 calc(var(--sheet-w) * .025) calc(var(--sheet-w) * .04) rgba(16, 0, 4, .5)
}

.l-win {
    position: relative;
    overflow: hidden;
    margin: 0 calc(var(--sheet-w) * -.1);
    padding: 0 calc(var(--sheet-w) * .1)
}

.l-sheet {
    position: relative;
    container: sheet / inline-size;
    background: linear-gradient(90deg, rgba(120, 72, 30, .16), transparent 7%, transparent 93%, rgba(120, 72, 30, .16)), #f3e8d2 url(../assets/letter/paper.webp) center / cover;
    color: #4a1622;
    text-align: center;
    box-shadow: var(--shadow)
}

.l-sheet:before {
    content: "";
    position: absolute;
    inset: 12.5cqi 5cqi;
    border: max(1px, .5cqi) solid rgba(178, 136, 66, .9);
    box-shadow: inset 0 0 0 max(1px, .45cqi) #f6ecd6e6, inset 0 0 0 max(2px, .75cqi) #7a233180;
    pointer-events: none
}

.l-curl {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--sheet-w) * .14);
    background: linear-gradient(#5a321000, #5a321038);
    opacity: 0;
    pointer-events: none
}

.l-sheet-in {
    position: relative;
    padding: 15cqi 10.5cqi 31cqi
}

.l-sheet-in>* {
    position: relative;
    margin: 0
}

.l-roll {
    position: absolute;
    left: -14.35%;
    width: 128.7%;
    aspect-ratio: 1400 / 247;
    translate: 0 -50%;
    background: url(../assets/letter/roll-compact.webp) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(var(--shadow));
    pointer-events: none
}

.l-roll-top {
    top: 0
}

.l-roll-bottom {
    top: var(--edge);
    scale: 1 calc(1 - var(--u) * .12)
}

.l-head,
.l-rule {
    height: auto
}

.l-head {
    display: block;
    width: 50cqi;
    margin: 0 auto
}

.l-verse {
    margin-top: 1cqi !important;
    text-wrap: balance;
    font-family: Amiri Quran, Amiri, serif;
    font-size: 5.4cqi;
    line-height: 2.05;
    background: linear-gradient(180deg, #b88a45, #9c6e2c 60%, #845a20);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .012em rgba(140, 98, 38, .7)
}

.l-verse-en {
    margin-top: 1.4cqi !important;
    text-wrap: balance;
    font: italic 500 4.2cqi/1.42 Cormorant Garamond, Georgia, serif;
    color: #6b3a3f
}

.l-verse-ref {
    margin-top: 1.6cqi !important;
    font: 600 2.6cqi/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: #a07a3c
}

.l-rule {
    display: block;
    width: 36cqi;
    margin: 3cqi auto 0
}

.l-greeting {
    margin-top: 3.2cqi !important;
    font: 400 8.4cqi/1.25 Pinyon Script, cursive;
    color: #5e1424;
    text-shadow: 0 .012em 0 rgba(255, 255, 255, .7)
}

.l-body p {
    margin: 1.6cqi 0 0;
    text-wrap: pretty;
    font: 500 4.85cqi/1.5 Cormorant Garamond, Georgia, serif
}

.l-closing {
    margin-top: 3.2cqi !important;
    font: italic 500 4.5cqi/1.3 Cormorant Garamond, Georgia, serif;
    color: #6b3a3f
}

.l-signature {
    margin-top: .4cqi !important;
    font: 400 9.6cqi/1.25 Pinyon Script, cursive;
    color: #5e1424;
    text-shadow: 0 .012em 0 rgba(255, 255, 255, .7)
}

.l-ink {
    --w: 1;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--w) * 125% - 25%), transparent calc(var(--w) * 125%));
    mask-image: linear-gradient(90deg, #000 calc(var(--w) * 125% - 25%), transparent calc(var(--w) * 125%))
}

.l-seal {
    position: absolute;
    left: 50%;
    bottom: 11.8cqi;
    width: 17cqi;
    translate: -50% 0;
    aspect-ratio: 1;
    rotate: -9deg;
    filter: drop-shadow(0 .6cqi .8cqi rgba(40, 0, 8, .35))
}

.l-seal img {
    width: 100%
}

.l-monogram {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: .04em;
    font: 600 5.6cqi/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .02em;
    color: #7c1f2b;
    text-shadow: 0 -.12cqi .06cqi rgba(20, 0, 4, .75), 0 .14cqi .08cqi rgba(255, 170, 170, .32)
}

.l-monogram i {
    font: italic 500 .7em/1 Cormorant Garamond, Georgia, serif;
    margin: 0 .04em
}

.l-hint {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + var(--hint-gap, 11cqh));
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqh;
    font: 600 max(11px, 2.4cqw)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: #f4ead9d9;
    opacity: 0;
    pointer-events: none
}

.letter.is-near .l-scroll,
.letter.is-scrubbed.is-near .l-win,
.letter.is-scrubbed.is-near .l-sheet,
.letter.is-scrubbed.is-near .l-curl {
    will-change: transform
}

.letter.is-scrubbed.is-near .l-reveal {
    will-change: opacity, transform
}

.letter.is-scrubbed.is-near .l-ink {
    will-change: transform
}

.letter.is-scrubbed .l-roll-bottom {
    top: 0;
    translate: none;
    scale: none
}

.letter.is-scrubbed.is-near .l-roll-bottom {
    will-change: transform
}

.l-hint i {
    position: relative;
    width: 1px;
    height: 5cqh;
    overflow: hidden;
    background: #f4ead933
}

.l-hint i:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, #f4ead9e6);
    animation: scroll-drip 2.2s cubic-bezier(.6, 0, .4, 1) infinite
}

@container lstage (min-aspect-ratio: 5 / 8) {
    .l-bg {
        background-image: url(../assets/letter/bg-tab.webp)
    }
    .l-scroll {
        --sheet-w: min(64cqw, 54cqh)
    }
    .l-roll {
        left: -23.15%;
        width: 146.3%;
        aspect-ratio: 1600 / 248;
        background-image: url(../assets/letter/roll.webp)
    }
    .l-sheet-in {
        padding: 14cqi 11cqi 26.5cqi
    }
    .l-head {
        width: 40cqi
    }
    .l-verse {
        margin-top: 1cqi !important;
        font-size: 4.3cqi
    }
    .l-verse-en {
        font-size: 3.2cqi;
        margin-top: 1cqi !important
    }
    .l-verse-ref {
        font-size: 2.05cqi;
        margin-top: 1.2cqi !important
    }
    .l-rule {
        width: 28cqi;
        margin-top: 2.4cqi
    }
    .l-greeting {
        font-size: 6.6cqi;
        margin-top: 2.4cqi !important
    }
    .l-body p {
        font-size: 3.55cqi;
        margin-top: 1.2cqi
    }
    .l-closing {
        font-size: 3.4cqi;
        margin-top: 2.4cqi !important
    }
    .l-signature {
        font-size: 7.4cqi
    }
    .l-seal {
        width: 13cqi;
        bottom: 12cqi
    }
    .l-monogram {
        font-size: 4.3cqi
    }
    .l-hint {
        font-size: max(11px, 1.7cqw);
        --hint-gap: 9cqh
    }
}

@container lstage (min-aspect-ratio: 6 / 5) {
    .l-bg {
        background-image: url(../assets/letter/bg-land.webp)
    }
    .l-scroll {
        --sheet-w: min(56cqw, 66cqh)
    }
    .l-roll {
        left: -23.15%;
        width: 146.3%;
        aspect-ratio: 1600 / 248;
        background-image: url(../assets/letter/roll.webp)
    }
    .l-sheet-in {
        padding: 13cqi 12cqi 22.5cqi
    }
    .l-head {
        width: 24cqi
    }
    .l-verse {
        margin-top: .8cqi !important;
        font-size: 3.2cqi;
        line-height: 1.95
    }
    .l-verse-en {
        font-size: 2.45cqi;
        margin-top: .6cqi !important
    }
    .l-verse-ref {
        font-size: 1.6cqi;
        margin-top: .9cqi !important
    }
    .l-rule {
        width: 21cqi;
        margin-top: 1.6cqi
    }
    .l-greeting {
        font-size: 5cqi;
        margin-top: 1.6cqi !important
    }
    .l-body p {
        font-size: 2.85cqi;
        margin-top: .8cqi
    }
    .l-closing {
        font-size: 2.6cqi;
        margin-top: 1.6cqi !important
    }
    .l-signature {
        font-size: 5.6cqi
    }
    .l-seal {
        width: 9.5cqi;
        bottom: 12cqi
    }
    .l-monogram {
        font-size: 3.15cqi
    }
    .l-hint {
        font-size: max(11px, 1.15cqw);
        --hint-gap: 10cqh
    }
}

@media(prefers-reduced-motion:reduce) {
    .l-hint i:after {
        animation: none
    }
}