@font-face{font-family:MTSText;src:url('assets/fonts/MTSText-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:MTSText;src:url('assets/fonts/MTSText-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:MTSWide;src:url('assets/fonts/MTSWide-Medium.ttf') format('truetype');font-weight:500;font-display:swap}

:root{
  /* Фирменные настройки: цвета и типографика. */
  --background:#232426;
  --red:#c12732;
  --red-dark:#861b24;
  --paper:#f0ede5;
  --ink:#27272b;
  --font-text:MTSText,Arial,sans-serif;
  --font-display:MTSWide,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{min-width:280px;background:var(--background)}
body{margin:0;font-family:var(--font-text);-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 50% 42%,#38383a55 0,transparent 65%),linear-gradient(115deg,#202123 0%,var(--background) 55%,#29292b 100%);color:#dedbd5;min-height:100svh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
button,a{-webkit-tap-highlight-color:transparent}
.invitation{
  --envelope-width:min(720px,calc(100vw - 64px));
  --envelope-height:calc(var(--envelope-width) * .44);
  --read-height:clamp(230px,calc(100svh - var(--envelope-height) - 154px),760px);
  /* Текст продолжается в треугольном просвете кармана. */
  --pocket-depth:calc(var(--envelope-height) * .43);
  --seal-size:82px;
  --seal-lid-clip:polygon(0 0,100% 0,100% 24.48%,50% 50%,0 24.48%);
  --seal-base-clip:polygon(0 24.48%,50% 50%,100% 24.48%,100% 100%,0 100%);
  --duration:2350ms;
  --ease:cubic-bezier(.3,.05,.18,1);
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
}
.masthead{position:relative;z-index:10;text-align:center;margin:0 0 20px}
.eyebrow{font-size:9px;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:#aaa6a1;margin-bottom:10px}
.event-title{font-family:var(--font-display);font-size:25px;line-height:1.2;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.scene{position:relative;width:var(--envelope-width);height:calc(var(--envelope-height) + var(--read-height));flex:none;isolation:isolate;overflow:clip;overflow-clip-margin:80px}
.envelope{position:absolute;bottom:0;left:0;width:100%;height:var(--envelope-height);transform:translateY(calc(var(--read-height) * -.5));transition:transform calc(var(--duration) * .45) var(--ease) calc(var(--duration) * .52)}
.envelope::after{content:"";position:absolute;inset:80% 4% -7%;background:#0008;filter:blur(22px);z-index:-2;border-radius:50%;transform:scaleX(.9)}
.envelope-back{position:absolute;inset:0;background:linear-gradient(180deg,#6e1e26,#9d2630 50%,#3c1a20);border-radius:3px;box-shadow:0 18px 65px #0005,0 1px 2px #0008;z-index:0}
.flap{position:absolute;inset:0 0 auto;height:58%;z-index:5;pointer-events:none}
.flap-hinge{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d;transform:perspective(1800px) rotateX(0deg)}
.hinge-line{position:absolute;top:0;left:0;right:0;height:1px;background:#e25d6244;z-index:1;pointer-events:none}
.flap-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:polygon(0 0,100% 0,50% 100%)}
.flap-outside{background:linear-gradient(176deg,#303033,#252527 70%,#202022);filter:drop-shadow(0 2px 1px #0005)}
.flap-outside::after{content:"";position:absolute;inset:1px;background:linear-gradient(176deg,#303033,#252527 70%,#202022);clip-path:polygon(0 0,100% 0,50% 100%);border-top:1px solid #ffffff0b}
/* Обратная сторона зеркалится по X, сохраняя широкое основание на сгибе. */
.flap-inside{background:linear-gradient(10deg,#a52631,var(--red) 68%,#bb2934);transform:rotateY(180deg)}
.envelope-front{position:absolute;inset:0;z-index:4;pointer-events:none;filter:drop-shadow(0 0 1px #080809);border-radius:0 0 3px 3px;overflow:hidden}
.folds{display:block;width:100%;height:100%}
.folds path{pointer-events:visiblePainted}
.envelope-edge{position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#ffffff0d,transparent)}
.open-envelope{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:3px;background:transparent;cursor:pointer;z-index:8;outline-offset:12px}
.open-envelope:focus-visible{outline:1px solid #e4ddd2}
.seal-defs{position:absolute;pointer-events:none}
.seal{position:absolute;width:var(--seal-size);height:var(--seal-size);left:calc(50% - var(--seal-size) * .5);top:calc(58% - var(--seal-size) * .5);z-index:6;pointer-events:none;filter:drop-shadow(1px 4px 5px #0007);transition:filter .4s}
.seal-intact,.seal-base{position:absolute;inset:0}
.seal-base{clip-path:var(--seal-base-clip);opacity:0}
/* Этот фрагмент прикреплён к клапану и наследует его поворот. */
.seal-lid{position:absolute;width:var(--seal-size);height:var(--seal-size);left:calc(50% - var(--seal-size) * .5);bottom:calc(var(--seal-size) * -.5);clip-path:var(--seal-lid-clip);opacity:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(.5px);filter:drop-shadow(1px 3px 4px #0005)}
.wax{position:absolute;inset:0;border-radius:48% 52% 46% 54% / 51% 47% 53% 49%;background:radial-gradient(ellipse at 34% 21%,#d44b4b66,transparent 60%),var(--red-dark);box-shadow:inset 0 1px 2px #ec777a9c,inset 1px -3px 3px #4f101d,0 1px 1px #510f1b}
.wax::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid #e3686655;box-shadow:inset 1px 2px 3px #560c1488,0 1px 1px #e0676644}
.wax::after{content:"";position:absolute;inset:2px;opacity:.13;border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h80v80H0z'/%3E%3C/svg%3E")}
.seal-emblem{position:absolute;inset:0;width:100%;height:100%;fill:url(#lily-wax);stroke:#e3887e66;stroke-width:.65;stroke-linejoin:round;filter:drop-shadow(0 1px .6px #4d101b)}
.lily-detail{fill:none;stroke:#e7887a77;stroke-width:.65;stroke-linecap:round}
.crack,.fracture-edge{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linejoin:round;pointer-events:none}
.crack{stroke:#4f0d18;stroke-width:1;stroke-dasharray:110;stroke-dashoffset:110;opacity:0}
.fracture-edge{stroke:#d8797055;stroke-width:.9;filter:drop-shadow(0 -1px .3px #4d101b);transform:translateY(.5px)}
.seal-lid .fracture-edge{transform:translateY(-.5px);stroke:#590f1b99;filter:none}
.paper-slot{position:absolute;top:calc(var(--read-height) * -1);bottom:0;left:0;right:0;overflow:hidden;overflow:clip;z-index:2;pointer-events:none}
.paper{--paper-inset:22px;position:absolute;top:calc(var(--read-height) + 9px);left:var(--paper-inset);right:var(--paper-inset);height:calc(var(--read-height) + var(--envelope-height) - 18px);background:var(--paper);border-radius:2px 2px 0 0;box-shadow:0 0 0 1px #ffffff33,0 5px 28px #0003;color:var(--ink);color-scheme:light;visibility:hidden;opacity:0;pointer-events:auto;transform:translateY(0);transition:transform calc(var(--duration) * .45) var(--ease) calc(var(--duration) * .52),opacity calc(var(--duration) * .06) linear calc(var(--duration) * .34)}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#00000005,transparent 3%,transparent 97%,#00000005);border-top:1px solid #fff9}
.letter-scroll{height:calc(var(--read-height) + var(--pocket-depth) - 9px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#a49d90 transparent;outline:none;scroll-padding:24px 0 calc(var(--pocket-depth) + 24px)}
.letter-scroll:focus-visible{box-shadow:inset 0 0 0 2px #a32b3555}
.letter-scroll::-webkit-scrollbar{width:4px}
.letter-scroll::-webkit-scrollbar-thumb{background:#aaa295;border-radius:4px}
.letter-content{padding:34px 44px calc(var(--pocket-depth) + 8px);font-size:17px;line-height:1.65;overflow-wrap:break-word}
.paper-rule{width:28px;height:2px;background:var(--red);margin-bottom:22px}
h1{font-family:var(--font-display);font-size:26px;font-weight:500;line-height:1.3;letter-spacing:-.035em;margin:0 0 24px}
h2{font-size:19px;line-height:1.35;margin:32px 0 16px;font-weight:700}
p{margin:0 0 20px}
strong{font-weight:700}
.registration{color:#a71e2a;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:4px;line-height:1.9;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.registration:hover{color:#d02936}
.registration:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px}
.registration-status{font-size:15px;line-height:1.5;color:#8e2831;padding:12px 14px;border-left:2px solid var(--red);background:#b3203008}
.closing{margin-top:30px;margin-bottom:0}
.instruction{height:22px;position:relative;min-width:260px;margin-top:10px;text-align:center;font-size:12px;letter-spacing:.04em;color:#b5b1ab;line-height:22px}
.hint-closed,.hint-open{position:absolute;inset:0;transition:opacity .35s}
.hint-closed>span{display:inline-block;margin-left:9px;color:#d4cec5;font-size:15px;transition:transform .3s}
.hint-open{opacity:0;color:#a5a19a;font-size:11px;letter-spacing:.1em}
.hint-open>span{display:inline-block;margin-left:7px;color:inherit}
.screen-reader-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{position:fixed;bottom:20px;left:20px;right:20px;text-align:center;background:#232426;padding:20px;z-index:20}

.invitation:not([data-state="closed"]) .envelope{transform:translateY(0)}
.invitation:not([data-state="closed"]) .flap{animation:flap-layer var(--duration) steps(1) both}
.invitation:not([data-state="closed"]) .flap-hinge{animation:unfold-flap var(--duration) cubic-bezier(.45,0,.55,1) both}
.invitation:not([data-state="closed"]) .seal-intact{animation:intact-seal var(--duration) steps(1) both}
.invitation:not([data-state="closed"]) .seal-base,.invitation:not([data-state="closed"]) .seal-lid{animation:broken-seal var(--duration) steps(1) both}
.invitation:not([data-state="closed"]) .crack{animation:break-seal var(--duration) linear both}
.invitation:not([data-state="closed"]) .paper{visibility:visible;transform:translateY(calc(-1 * var(--read-height)));opacity:1}
.invitation:not([data-state="closed"]) .open-envelope{cursor:default;pointer-events:none}
.invitation:not([data-state="closed"]) .hint-closed{opacity:0}
.invitation[data-state="open"] .hint-open{opacity:1}
.invitation.has-scrolled .hint-open{opacity:0}
/* Смена слоя ровно в положении ребром к зрителю; сгиб не перемещается. */
@keyframes flap-layer{0%,33.99%{z-index:5}34%,100%{z-index:1}}
@keyframes unfold-flap{
  0%,18%{transform:perspective(1800px) rotateX(0deg)}
  34%{transform:perspective(1800px) rotateX(-90deg)}
  52%,100%{transform:perspective(1800px) rotateX(-175deg)}
}
@keyframes intact-seal{0%,15.99%{opacity:1}16%,100%{opacity:0}}
@keyframes broken-seal{0%,15.99%{opacity:0}16%,100%{opacity:1}}
@keyframes break-seal{0%,2%{opacity:0;stroke-dashoffset:110}4%{opacity:1;stroke-dashoffset:110}15%{opacity:1;stroke-dashoffset:0}18%,100%{opacity:0;stroke-dashoffset:0}}
@media(hover:hover){.invitation[data-state="closed"] .envelope:hover .seal{filter:drop-shadow(1px 4px 7px #0008) brightness(1.12)}.invitation[data-state="closed"]:has(.envelope:hover) .hint-closed>span{transform:translate(2px,-2px)}}
@media(max-width:600px){
  .invitation{--envelope-width:calc(100vw - 24px);--envelope-height:calc(var(--envelope-width) * .49);--read-height:clamp(210px,calc(100svh - var(--envelope-height) - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),780px);padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .masthead{margin-bottom:18px}
  .eyebrow{font-size:8px;letter-spacing:.19em;margin-bottom:9px}
  .event-title{font-size:21px;letter-spacing:.06em}
  .paper{--paper-inset:12px}
  .letter-content{font-size:16px;line-height:1.65;padding:25px 24px calc(var(--pocket-depth) + 8px)}
  h1{font-size:22px;line-height:1.32;margin-bottom:22px}
  h2{font-size:18px}
  .paper-rule{margin-bottom:18px;width:22px}
  .invitation{--seal-size:68px}
  .instruction{margin-top:8px;font-size:11px}
}
@media(max-height:570px) and (min-width:601px){
  .invitation{--envelope-width:min(560px,calc(100vw - 48px));--envelope-height:clamp(100px,28svh,160px);--read-height:clamp(140px,calc(100svh - var(--envelope-height) - 124px),350px);padding:12px 0}
  .masthead{margin-bottom:12px}
  .event-title{font-size:20px}
  .instruction{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .invitation:not([data-state="closed"]) .flap{z-index:1}
  .invitation:not([data-state="closed"]) .flap-hinge{transform:perspective(1800px) rotateX(-175deg)}
  .invitation:not([data-state="closed"]) .crack{opacity:0}
  .invitation:not([data-state="closed"]) .seal-intact{opacity:0}
  .invitation:not([data-state="closed"]) .seal-base,.invitation:not([data-state="closed"]) .seal-lid{opacity:1}
}