:root{--paper:#f7f0e4;--ink:#5c4229;--gold:#b38d53;--gold-deep:#9c7028;--line:#d8c29a;--bg:#f8f4ed;--serif:'Noto Serif Armenian',Georgia,'Sylfaen',serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 20%,#fffdf8,var(--bg) 65%);color:var(--ink);font-family:var(--serif)}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #795822;outline-offset:5px}
[hidden]{display:none!important}
@property --sway{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- dove & cross symbols ---------- */
#dove .body{fill:var(--dove-body,#fff)}#dove .near path{fill:var(--dove-body,#fff)}#dove .far path{fill:var(--dove-far,#e3dbcc)}
#dove .beak{fill:var(--dove-beak,#e0a466)}#dove .eye{fill:var(--dove-eye,#2b2118)}
#dove .wing{transform-origin:0 0;animation:flap var(--flap-speed,.42s) ease-in-out infinite alternate}
#dove .far{animation-delay:-.06s}
@keyframes flap{from{transform:rotate(-30deg)}to{transform:rotate(38deg)}}

/* ---------- stage ---------- */
.stage{min-height:100svh;padding:24px 18px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.frame{width:min(440px,calc((100svh - 116px)*2/3),100%);aspect-ratio:2/3;position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;box-shadow:0 16px 45px #61472525,0 3px 8px #61472512;background:radial-gradient(ellipse at 50% 42%,#fffcf6 0,#f6ecdd 58%,#e8d6ba 100%)}
.scene{position:absolute;inset:0}
.foliage{position:absolute;inset:0;z-index:4;pointer-events:none}
.sprig{position:absolute;width:50%;aspect-ratio:1;left:var(--x);top:var(--y);overflow:visible;transform-origin:9.4% 87.5%;transform:translate(-9.4%,-87.5%) rotate(calc(var(--r) + var(--sway))) scale(var(--s));animation:sway var(--t,5s) ease-in-out var(--dl,0s) infinite alternate}
.sprig.soft{filter:blur(3px);opacity:.75}
@keyframes sway{from{--sway:-2.2deg}to{--sway:2.2deg}}

/* ---------- envelope cover ---------- */
.cover{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:pointer}
.envelope{position:absolute;left:7%;width:86%;top:36%;aspect-ratio:300/210;display:block;transform-origin:50% 40%}
.envelope>*{position:absolute;display:block}
.env-back{inset:0;width:100%;height:100%;z-index:0;filter:drop-shadow(0 14px 22px #6e502a40)}
.env-glow{left:-30%;right:-30%;top:-70%;height:140%;z-index:1;opacity:0;background:radial-gradient(closest-side,#fff3cfee,#ffd98a88 45%,#ffd98a00);mix-blend-mode:screen}
.env-card{left:6%;right:6%;top:5%;height:88%;z-index:2;background:#fffaf1;box-shadow:0 0 0 1px #e6d4b2 inset,0 -4px 14px #9c702822;display:flex;flex-direction:column;align-items:center;padding-top:9%}
.env-card::before{content:'';position:absolute;inset:6%;border:1px solid #c9a7684d}
.card-cross{width:5%;aspect-ratio:28/46;fill:var(--gold)}
.card-line{display:block;width:46%;height:2px;background:#e3cfa9;margin-top:8%}.card-line.short{width:30%;margin-top:5%}
.flying-dove{width:44%;aspect-ratio:200/170;left:28%;top:-8%;z-index:2;opacity:0;filter:drop-shadow(0 8px 10px #6e4f2840);transform:translateY(40%) scale(.35)}
.env-pocket{inset:0;width:100%;height:100%;z-index:3}
.env-flap{left:0;top:0;width:100%;height:60%;z-index:6;transform-origin:50% 0;transform-style:preserve-3d}
.env-flap svg{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-out{filter:drop-shadow(0 5px 6px #6e502a30)}
.flap-in{transform:rotateX(180deg)}
.seal{width:23%;aspect-ratio:1;left:38.5%;top:calc(60% - 14%);z-index:7;filter:drop-shadow(0 5px 7px #5a3c1450);animation:sealGlow 2.6s ease-in-out infinite;transition:transform .45s,opacity .45s}
@keyframes sealGlow{0%,100%{filter:drop-shadow(0 5px 7px #5a3c1450)}50%{filter:drop-shadow(0 5px 7px #5a3c1450) drop-shadow(0 0 14px #ffd98ad0)}}
.cover:hover .seal{transform:scale(1.05)}
.hint{position:absolute;bottom:16%;left:10%;width:80%;font-size:clamp(11px,2.9cqw,14px);letter-spacing:.03em;line-height:1.6;color:#6b4d2e;transition:opacity .4s;animation:hintPulse 2.6s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.55}}

.frame.open .hint{opacity:0;animation:none}
.frame.open .seal{transform:scale(.6);opacity:0;animation:none}
.frame.open .env-flap{transform:rotateX(180deg);z-index:1;transition:transform 1.1s cubic-bezier(.45,.05,.3,1) .3s,z-index 0s .82s}
.frame.open .env-glow{opacity:1;transition:opacity 1.2s .6s}
.frame.open .env-card{transform:translateY(-30%);transition:transform 1.5s cubic-bezier(.2,.7,.2,1) 1s}
.frame.open .flying-dove{animation:doveOut 2.4s cubic-bezier(.25,.6,.3,1) 1.15s forwards}
.frame.open .envelope{transform:scale(1.07);transition:transform 3.4s cubic-bezier(.3,.1,.3,1)}
.frame.open .cover{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .01s 3.55s,visibility 0s 3.55s}
@keyframes doveOut{0%{opacity:0;transform:translateY(40%) scale(.35)}18%{opacity:1}70%{transform:translateY(-112%) scale(.95) rotate(-4deg)}100%{opacity:1;transform:translateY(-102%) scale(.95) rotate(0)}}

.flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 45%,#fffdf7 0,#fff3da 55%,#f3dcae 100%)}
.frame.open .flash{animation:flash 1.8s ease-in-out 2.75s}
@keyframes flash{0%{opacity:0}45%,55%{opacity:1}100%{opacity:0}}
.sparkles{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* ---------- letter ---------- */
.letter{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12% 13% 14%;text-align:center;opacity:0;visibility:hidden;background:radial-gradient(ellipse 62% 48% at 50% 47%,#fffdf8f5 55%,#fffdf800)}
.frame.open .letter{opacity:1;visibility:visible;transition:opacity 0s 3.55s,visibility 0s 3.55s}
.letter .ln{opacity:0;transform:translateY(14px)}
.frame.open .letter .ln{animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(3.85s + var(--d)*.32s)}
@keyframes rise{to{opacity:1;transform:none}}
.cross-icon{width:4.6cqw;aspect-ratio:28/46;height:auto;fill:var(--gold-deep);margin-bottom:5cqw}
.intro-line,.letter .intro{font-size:3.3cqw;line-height:1.75;font-style:italic;font-weight:300;margin:0;color:#5e4a32}
.divider{width:46%;height:1px;margin:5cqw auto;position:relative;background:linear-gradient(90deg,#c49b5200,#c49b52 30%,#c49b52 70%,#c49b5200)}
.divider span{position:absolute;left:50%;top:50%;width:2.2cqw;aspect-ratio:1;background:#c49b52;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 1.2cqw #fffaf1}
.gold-text,.letter .title,.letter .name,.hero-caption h2{background:linear-gradient(100deg,var(--gold-deep) 0,#b8893f 35%,#f6dd9c 50%,#b8893f 65%,var(--gold-deep) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
.frame.open .letter .title,.frame.open .letter .name{animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards,shimmer 5s linear infinite;animation-delay:calc(3.85s + var(--d)*.32s),0s}
.letter .title{font-size:6.4cqw;font-weight:600;letter-spacing:.16em;margin:0 0 1cqw;padding-left:.16em}
.letter .name{font-size:12cqw;font-weight:400;line-height:1.15;margin:0;filter:drop-shadow(0 0 8px #fff8e8)}
.letter .date{font-size:3.9cqw;font-weight:600;margin:0 0 2.4cqw;color:#5a4630}
.letter .place{font-size:3.7cqw;margin:0 0 1cqw}
.letter .address{font-size:3.1cqw;font-style:italic;font-weight:300;margin:0;color:#8a7254}
.letter .button{margin-top:6cqw;font-size:3cqw}
.mini-doves{position:absolute;left:0;right:0;bottom:1.5%;height:9%;pointer-events:none}
.mini-dove{position:absolute;width:9%;aspect-ratio:200/170;--dove-body:#8b6a3e;--dove-far:#6e5130;--dove-beak:#8b6a3e;--dove-eye:#8b6a3e;opacity:0}
.mini-dove.m1{left:-12%;top:30%}.mini-dove.m2{left:100%;top:0;transform:scaleX(-1)}
.frame.open .mini-dove.m1{animation:glideR 9s ease-in-out 4.6s infinite}
.frame.open .mini-dove.m2{animation:glideL 10s ease-in-out 8s infinite}
@keyframes glideR{0%{opacity:0;translate:0 0}10%,80%{opacity:.85}50%{translate:60cqw -6cqw}100%{opacity:0;translate:125cqw 0}}
@keyframes glideL{0%{opacity:0;translate:0 0}10%,80%{opacity:.8}50%{translate:-60cqw -5cqw}100%{opacity:0;translate:-125cqw 0}}

.button{display:inline-block;border:1px solid var(--line);padding:13px 21px;color:var(--ink);background:#fffaf1b0;text-decoration:none;font:inherit;font-size:13px;cursor:pointer;transition:background .2s}
.button:hover{background:#efe2c8}
.solid{background:var(--ink);color:#fff;border-color:var(--ink)}.solid:hover{background:#86633e}
.controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:17px;min-height:43px}
.music{width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fffaf1;box-shadow:0 3px 10px #705a2512;cursor:pointer}
.music[aria-pressed=true]{background:#6b5032;color:#fff7e4}
.replay{border:0;background:transparent;font-size:12px;border-bottom:1px solid var(--line);padding:6px 0;cursor:pointer}
.status{margin:5px 0 0;font-size:11px;min-height:14px;text-align:center}

/* ---------- details ---------- */
.details{max-width:720px;margin:auto;padding:0 0 30px;background:#f6eddf;overflow:hidden;box-shadow:0 20px 60px #6c51300c;text-align:center}
.details:focus{outline:none}
.eyebrow{font-size:10px;letter-spacing:.2em;line-height:1.8;margin:0 0 18px;color:#8a6c43}
.details h2{font-size:clamp(27px,5vw,40px);font-weight:400;margin:0 0 24px}
.story-hero{padding:70px 24px 20px;background:radial-gradient(ellipse at 50% 35%,#fffdf8,#f6eddf 70%)}
.hero-photo{display:flex;justify-content:center}
.oval{position:relative;width:min(300px,70vw);aspect-ratio:3/4;border-radius:50%;overflow:hidden;background:linear-gradient(#efe1c9,#e0cba8);box-shadow:0 0 0 2px #c49b52bb,0 0 0 9px #f6eddf,0 0 0 10px #c49b5266,0 18px 50px #8a652f33}
.oval img{width:100%;height:100%;object-fit:cover;display:block;animation:slowZoom 14s ease-in-out infinite alternate}
@keyframes slowZoom{to{transform:scale(1.07)}}
.photo-placeholder{position:absolute;left:25%;top:35%;width:50%;aspect-ratio:200/170;height:auto;--dove-body:#fffaf0;--dove-far:#e6d5b5;display:none}
.oval.empty img{display:none}.oval.empty .photo-placeholder{display:block}
.hero-caption{padding:34px 20px 10px}
.hero-caption h2{font-size:clamp(40px,9vw,64px);margin:0 0 6px;display:inline-block}
.hero-caption>p{margin:0 0 24px}
blockquote{margin:24px auto 0;max-width:420px}
blockquote p{font-size:clamp(19px,4.4vw,24px);font-style:italic;line-height:1.6;margin:0}
cite{display:block;font-style:normal;font-size:13px;letter-spacing:.08em;color:#a07c42;margin-top:10px}
.section-block{padding:60px 40px;text-align:center}
.section-block h2{font-size:clamp(28px,5vw,40px);font-weight:400}
.ornament{display:block;margin:0 auto 18px;width:20px;height:33px;fill:var(--gold)}
footer .ornament{width:70px;height:60px;--dove-body:#c49b52;--dove-far:#a98140;--dove-beak:#c49b52;--dove-eye:#f6eddf}
.intro{max-width:510px;margin:0 auto 30px;line-height:2;font-size:15px}
.calendar{max-width:440px;margin:auto;padding:24px 0}
.calendar-days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.calendar-day{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;padding:18px 2px}
.calendar-day span{display:block;font-size:11px}
.calendar-day strong{font-size:40px;font-weight:400;display:block;margin-top:12px}
.calendar-day.selected:after{content:'';position:absolute;inset:-8px 4px;border:2px solid #b7936399;border-radius:50%;transform:rotate(-12deg)}
.calendar-day.selected{color:#77572e;background:#e9d8bb55}
.godparent-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:520px;margin:10px auto 0}
.godparent-grid>div:not(.amp){border:1px solid var(--line);padding:26px 12px;background:#fffaf180}
.role{display:block;font-size:11px;letter-spacing:.18em;color:#8a6c43;margin-bottom:12px}
.godparent-grid strong{font-weight:400;font-size:19px;line-height:1.4}
.amp{font-size:30px;color:var(--gold);font-style:italic}
.timeline{position:relative;margin:44px auto 0;max-width:450px}
.timeline:before{content:'';position:absolute;top:5px;bottom:25px;left:50%;width:1px;background:linear-gradient(transparent,var(--gold) 10%,var(--gold) 90%,transparent)}
.timeline-item{position:relative;width:50%;padding:0 30px 48px 0;text-align:right}
.timeline-item:nth-child(even){margin-left:50%;padding:0 0 48px 30px;text-align:left}
.timeline-item:after{content:'✦';position:absolute;right:-8px;top:3px;color:#c2a173;background:#f6eddf;font-size:15px;line-height:24px;width:16px;text-align:center}
.timeline-item:nth-child(even):after{left:-8px;right:auto}
.timeline-item time{font-size:27px;color:var(--gold)}
.timeline-item h3{margin:10px 0;font-size:18px;font-weight:400}
.timeline-item p{font-size:13px;line-height:1.7;margin:0}
.venues{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.venue-card{border:1px solid var(--line);padding:30px 18px;background:#fffaf180}
.venue-card h3{font-weight:400;font-size:20px;margin:0 0 8px}
.venue-card p{margin:0 0 18px;line-height:1.7}
.venue-card .eyebrow{margin-bottom:12px}
.muted{color:#8a7254;font-size:14px}
form{max-width:420px;margin:auto;text-align:left}
form label{display:block;font-size:14px;margin:16px 0 8px}
input:not([type=radio]){width:100%;padding:13px 14px;border:1px solid var(--line);background:#fffdf8;font:inherit;color:var(--ink)}
fieldset{border:0;padding:0;margin:20px 0 0}legend{font-size:14px;margin-bottom:6px}
fieldset label{display:flex;gap:10px;align-items:center;margin:10px 0}
input[type=radio]{accent-color:var(--ink);width:18px;height:18px}
.form-note{font-size:12px;color:#8a7254;margin:18px 0}
#formStatus{font-size:13px;line-height:1.6;margin-top:14px}
#contacts{display:grid;gap:10px;max-width:360px;margin:auto}
.contact{display:flex;justify-content:space-between;gap:12px;padding:15px 18px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);max-width:440px;margin:20px auto 0;gap:6px}
.countdown b{display:block;font-size:clamp(30px,8vw,46px);font-weight:400;color:var(--gold-deep)}
.countdown span{font-size:11px;letter-spacing:.06em}
.closing{font-size:18px;margin:55px 0 22px}
.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s,transform .9s}
.js-reveal .reveal.visible{opacity:1;transform:none}
.noscript{padding:20px;text-align:center}
@media(max-width:540px){.section-block{padding:52px 22px}.venues{grid-template-columns:1fr}.godparent-grid{grid-template-columns:1fr;gap:6px}.amp{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.letter .ln{opacity:1;transform:none}.frame.open .flying-dove{opacity:1;transform:translateY(-102%) scale(.95)}}

.cover-shot .hint{display:none}

/* ---------- հրավերի տեքստերը (երկու երեխա) ---------- */
.cross-icon{margin-bottom:3.5cqw}
.letter .greeting{font-size:5cqw;font-style:italic;font-weight:400;margin:0 0 1.5cqw;color:#5a4630}
.letter .intro{white-space:pre-line;font-size:3.2cqw;font-style:normal;font-weight:400;line-height:1.75;margin:0 0 4cqw}
.letter .name{font-size:9cqw;line-height:1.2;font-style:italic}
.letter .occasion{font-size:5.2cqw;font-style:italic;margin:.5cqw 0 0;color:#a57a2c}
.letter .divider{margin:3.6cqw auto}
.letter .date{font-size:5.4cqw;font-weight:400;font-style:italic;color:#a57a2c;margin:0}
.letter .time{font-size:4.6cqw;font-style:italic;margin:.6cqw 0 2.6cqw;color:#5a4630}
.letter .title{font-size:3.6cqw;font-weight:400;letter-spacing:.22em;margin:0 0 1.4cqw}
.letter .place{font-size:4.2cqw;font-style:italic;margin:0 0 1cqw}
.letter .address{font-size:3.2cqw;font-style:normal}
.letter-actions{display:flex;gap:2.4cqw;justify-content:center;flex-wrap:wrap;margin-top:5cqw}
.letter-actions .button{margin:0;font-size:2.7cqw;padding:2.4cqw 4cqw;border-radius:999px;letter-spacing:.05em;background:#fffaf1d9}
.letter-actions .route{letter-spacing:.14em;box-shadow:0 4px 14px #8a652f1f}

/* ավելի կոմպակտ դասավորություն երկար տեքստի համար */
.letter{padding:15% 8% 15%}
.letter .cross-icon{width:3.4cqw;margin-bottom:2.6cqw}
.letter .greeting{font-size:4.6cqw;margin-bottom:1cqw}
.letter .intro{font-size:2.95cqw;line-height:1.7;margin-bottom:3.2cqw}
.letter .name{font-size:7.6cqw}
.letter .occasion{font-size:4.6cqw}
.letter .divider{margin:3cqw auto;width:36%}
.letter .date{font-size:4.9cqw}
.letter .time{font-size:4.2cqw;margin-bottom:2.2cqw}
.letter .title{font-size:3.2cqw}
.letter .place{font-size:3.8cqw}
.letter .address{font-size:2.95cqw}
.letter-actions{margin-top:3.8cqw}
.letter-actions .button{font-size:2.5cqw;padding:2.1cqw 3.6cqw}
.letter .mini-doves{bottom:.5%;height:7%}
.frame.open .foliage{transform:scale(1.2);transition:transform 1.6s cubic-bezier(.3,.1,.3,1) 3.4s}

.venues{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:560px;margin-left:auto;margin-right:auto}

.oval img{object-position:58% 55%}