@font-face { font-family:OpeningHand; src:url('/fonts/caveat.ttf') format('truetype'); font-style:normal; font-weight:400 700; font-display:swap; }
.opening-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.opening-picker button { font:inherit; text-align:left; padding:14px; border:1px solid #dbcbd3; border-radius:17px; background:#fff; color:#493541; cursor:pointer; min-width:0; }
.opening-picker button > span { display:block; font-size:26px; color:#cb4779; margin-bottom:8px; }
.opening-picker b,.opening-picker small { display:block; overflow-wrap:anywhere; }
.opening-picker b { font-size:14px; line-height:1.4; }
.opening-picker small { font-size:12px; margin-top:4px; color:#756570; }
.opening-picker button[aria-pressed="true"] { border-color:#c54371; background:#fff0f5; box-shadow:inset 0 0 0 1px #c54371; }
.opening-picker .opening-scheduled { grid-column:1 / -1; }
.opening-picker .opening-none { grid-column:1 / -1; text-align:center; padding:10px; font-size:13px; }
.opening-copy-fields { margin:-10px 0 22px; padding:16px; border:1px solid #e7d8de; border-radius:18px; background:linear-gradient(145deg,#fff,#fff9fb); }
.opening-copy-fields[hidden] { display:none; }
.opening-copy-head { display:grid; grid-template-columns:30px 1fr; align-items:center; column-gap:9px; margin-bottom:13px; color:#59434f; }
.opening-copy-head > span { grid-row:1 / 3; width:30px; height:30px; display:grid; place-items:center; border-radius:11px; background:#fce9f0; color:#b53b68; font-size:15px; }
.opening-copy-head b { font-size:13px; line-height:1.2; }
.opening-copy-head small { color:#8a747f; font-size:11px; line-height:1.25; }
.opening-copy-fields .field { margin-bottom:10px; }
.opening-copy-fields .field:last-child { margin-bottom:0; }
.scheduled-opening-fields { margin:-10px 0 22px; padding:16px; border:1px solid #ead5de; border-radius:18px; background:#fff8fb; }
.scheduled-opening-fields .row2 { margin-bottom:8px; }
.scheduled-opening-fields .hint { margin:0; }
.scheduled-opening-fields .scheduled-sticker-hint { margin:4px 0 10px; }
.opening-sticker-pick { margin-bottom:15px; }
.opening-sticker-pick .img-gallery { margin-top:0; }
.opening-sticker-pick .img-actions { display:none; }
.scheduled-preview-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:14px; padding:4px; border-radius:14px; background:#f3e7ec; }
.scheduled-preview-switch button { min-height:38px; padding:7px 10px; border:0; border-radius:11px; background:transparent; color:#715d68; font:700 12px/1.25 Manrope,sans-serif; cursor:pointer; }
.scheduled-preview-switch button[aria-pressed="true"] { background:#fff; color:#9c365e; box-shadow:0 3px 10px #7e3e5a17; }
.scheduled-preview-switch button:focus-visible { outline:2px solid #9c365e; outline-offset:2px; }
.opening-replay { display:block; margin:10px auto 0; }
.opening-replay[hidden] { display:none; }
.opening-picker button:focus-visible { outline:3px solid #503074; outline-offset:5px; }
.invite-opening button:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.opening-host { isolation:isolate; }
.invite-opening {
  --opening-progress:0;
  --silk-dark:color-mix(in srgb,var(--opening-accent) 52%,#271523);
  --silk-mid:color-mix(in srgb,var(--opening-accent) 62%,#f8c4bb);
  --silk-light:color-mix(in srgb,var(--opening-accent) 24%,#ffe0cc);
  position:absolute; inset:0; z-index:8; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  gap:20px; padding:clamp(44px,10vh,90px) 24px clamp(36px,7vh,65px); text-align:center; color:#fff;
  overflow:hidden; font-family:Manrope,sans-serif; perspective:1200px;
}
/* На странице получателя распаковка принадлежит окну браузера, а не высоте
   лежащей под ней карточки. Иначе высокая карточка растягивала overlay за
   нижний край мобильного экрана. В конструкторе более специфичное правило
   .phone .screen оставляет распаковку внутри макета телефона. */
.stage > .invite-opening { position:fixed; width:100%; height:100vh; height:100svh; height:100dvh; }
.opening-backdrop { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 35% 35%,#ffffff13,transparent 65%),linear-gradient(145deg,color-mix(in srgb,var(--opening-accent) 50%,#422837) 0%,color-mix(in srgb,var(--opening-accent) 85%,#f7b49b) 100%); }
.opening-backdrop::after { content:''; position:absolute; inset:0; opacity:.13; background-image:url('/img/opening-grain.svg'); pointer-events:none; }
.opening-heading { position:relative; z-index:3; align-self:start; pointer-events:none; }
.opening-title { font-family:Manrope,sans-serif; font-size:clamp(26px,4.8vw,38px); font-weight:600; letter-spacing:-.045em; line-height:1.2; margin:0 auto; max-width:520px; text-wrap:balance; }
.opening-hint { font-size:13px; font-weight:400; line-height:1.6; color:#ffffffb8; margin:16px 0 0; }
.opening-touch { position:relative; z-index:2; align-self:center; justify-self:center; display:block; width:min(100%,440px); max-height:100%; aspect-ratio:4/3; margin:0; padding:0; border:0; background:none; color:var(--opening-accent); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; container-type:inline-size; }
.opening-touch > * { pointer-events:none; }
.opening-active .opening-touch { cursor:grabbing; }
.opening-skip { position:relative; z-index:4; justify-self:center; font:500 12px/1.5 Manrope,sans-serif; color:#ffffffe0; background:transparent; border:0; border-bottom:1px solid #ffffff45; border-radius:0; padding:12px 0; cursor:pointer; min-height:44px; }
.opening-skip span { display:inline-block; padding-left:10px; }
.opening-skip:hover { color:#fff; border-color:#fff; }
.opening-direction { position:absolute; bottom:-28px; left:0; right:0; color:#fff9; font:400 13px/1.4 OpeningHand,cursive; }
.opening-direction > span { display:inline-block; margin-left:7px; font:18px Manrope,sans-serif; }

/* A continuous strip wraps the screen; the knot contains folds, not outlines. */
.opening-wrap { position:absolute; pointer-events:none; box-shadow:0 10px 15px #20071436; }
.opening-wrap-horizontal { left:-10%; right:-10%; height:44px; top:53%; transform:rotate(-5deg); background:linear-gradient(180deg,var(--silk-dark),var(--silk-mid) 9%,var(--opening-accent) 28%,var(--silk-light) 62%,var(--silk-mid) 85%,var(--silk-dark)); }
.opening-wrap-vertical { top:-10%; bottom:-10%; width:40px; left:calc(50% - 20px); transform:rotate(4deg); background:linear-gradient(90deg,var(--silk-dark),var(--opening-accent) 15%,var(--silk-light) 57%,var(--silk-mid) 80%,var(--silk-dark)); }
.opening-mode-ribbon .opening-heading { text-shadow:0 2px 24px #45233180; }
.opening-bow { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 12px 9px #290e304a); }
.opening-ribbon-grab {
  position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%);
  border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 7px #ffffff24,0 3px 12px #35132673;
  animation:opening-grab-pulse 1.8s ease-in-out infinite;
}
.opening-ribbon-grab::before {
  content:'зажми здесь'; position:absolute; left:50%; top:41px; transform:translateX(-50%); white-space:nowrap;
  padding:4px 8px; border-radius:20px; color:#fff; background:#402231a8; font:600 10px/1.2 Manrope,sans-serif;
}
html[lang="en"] .opening-ribbon-grab::before { content:'hold here'; }
.opening-ribbon-grab::after { content:'→'; position:absolute; left:43px; top:1px; color:#fff; font:700 24px/1 Manrope,sans-serif; text-shadow:0 2px 8px #351326; }
@keyframes opening-grab-pulse { 50% { box-shadow:0 0 0 12px #ffffff08,0 3px 12px #35132673; transform:translate(-50%,-50%) scale(1.08); } }
.opening-loop-left,.opening-loop-right,.opening-tail-left,.opening-tail-right,.opening-knot { transform-box:view-box; transform-origin:50% 50%; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.opening-loop-left { transform:rotate(calc(var(--opening-progress) * -13deg)) scaleX(calc(1 - var(--opening-progress) * .15)); }
.opening-loop-right { transform:scaleX(calc(1 - var(--opening-progress) * .8)) rotate(calc(var(--opening-progress) * 18deg)); }
.opening-tail-right { transform:translate(calc(var(--opening-progress) * 82px),calc(var(--opening-progress) * -17px)) rotate(calc(var(--opening-progress) * -12deg)); }
.opening-tail-left { transform:rotate(calc(var(--opening-progress) * 12deg)); }
.opening-done .opening-loop-left { animation:opening-unloop-left .65s cubic-bezier(.4,0,.5,1) both; }
.opening-done .opening-loop-right,.opening-done .opening-tail-right { animation:opening-unloop-right .65s cubic-bezier(.4,0,.5,1) both; }
.opening-done .opening-tail-left { animation:opening-tail-fall .7s ease-in both; }
.opening-done .opening-knot { animation:opening-knot-release .45s ease-in both; }
.opening-done .opening-wrap-horizontal { animation:opening-strip-right .75s cubic-bezier(.5,0,.6,1) .05s both; }
.opening-done .opening-wrap-vertical { animation:opening-strip-up .75s cubic-bezier(.5,0,.6,1) .1s both; }
@keyframes opening-unloop-left { 40% { transform:translateX(-40px) scaleY(.3) rotate(-20deg); } to { transform:translate(-500px,-100px) scaleY(.08) rotate(-40deg); opacity:0; } }
@keyframes opening-unloop-right { 40% { transform:translateX(70px) scaleY(.35) rotate(12deg); } to { transform:translate(500px,80px) scaleY(.08) rotate(32deg); opacity:0; } }
@keyframes opening-tail-fall { to { transform:translate(-150px,500px) rotate(65deg); opacity:0; } }
@keyframes opening-knot-release { to { transform:translate(180px,-70px) scale(.2) rotate(80deg); opacity:0; } }
@keyframes opening-strip-right { to { transform:translateX(120%) rotate(-16deg) scaleY(.6); opacity:0; } }
@keyframes opening-strip-up { to { transform:translateY(-120%) rotate(12deg) scaleX(.7); opacity:0; } }

/* A warm, translucent heart responds continuously to the held touch. */
.opening-heart { position:absolute; width:72%; height:100%; left:14%; top:0; overflow:visible; filter:drop-shadow(0 18px 18px #3b11293a); transform:scale(calc(.88 + var(--opening-progress) * .16)); }
.opening-heart-base { fill:#fff3; stroke:#ffffff90; stroke-width:.65; }
.opening-heart-fill { clip-path:inset(calc((1 - var(--opening-progress)) * 100%) 0 0); }
.opening-heart-halo { position:absolute; inset:-5%; background:radial-gradient(ellipse,#ffe6bdd0,transparent 65%); opacity:var(--opening-progress); transform:scale(calc(.7 + var(--opening-progress) * .7)); }
.opening-done .opening-heart { animation:opening-heartbeat .7s ease-in-out both; }
.opening-done .opening-heart-halo { animation:opening-warmth .95s ease-out both; }
@keyframes opening-heartbeat { 0% { transform:scale(1.04); } 18% { transform:scale(.93); } 38% { transform:scale(1.18); opacity:1; } to { transform:scale(2.1); opacity:0; filter:blur(5px); } }
@keyframes opening-warmth { 20% { opacity:1; } to { transform:scale(3); opacity:0; } }

/* Opaque cotton paper, a folded sleeve and blind embossing. */
.opening-mode-note .opening-touch { width:min(80%,320px); aspect-ratio:.9; }
.opening-mode-note .opening-backdrop { background:radial-gradient(ellipse at 38% 25%,#ffffff29,transparent 70%),linear-gradient(130deg,color-mix(in srgb,var(--opening-accent) 80%,#c99787),color-mix(in srgb,var(--opening-accent) 65%,#392530)); }
.opening-letter-shadow { position:absolute; bottom:-6%; left:4%; right:4%; height:18%; border-radius:50%; background:#21131c5c; filter:blur(18px); transform:scaleX(calc(1 + var(--opening-progress) * .3)); }
.opening-sleeve-back { position:absolute; inset:27% -3% -1%; border-radius:5px; background:var(--silk-dark); transform:rotate(-4deg); box-shadow:0 20px 28px #28151f40; }
.opening-letter { position:absolute; left:1%; top:0; width:98%; height:95%; display:block; border-radius:3px; background:#fbf6ee url('/img/opening-grain.svg'); box-shadow:1px 2px 2px #ffffffb0 inset,0 calc(5px + var(--opening-progress) * 20px) calc(14px + var(--opening-progress) * 18px) #29131f38; color:#56363e; transform:translateY(calc(var(--opening-progress) * -75px)) rotate(calc(-4deg + var(--opening-progress) * 4deg)); transition:transform .18s ease-out; }
.opening-letter-rule { position:absolute; inset:6%; border:1px solid #ba9a8038; }
.opening-handwriting { display:block; padding:10% 9% 0; font:500 clamp(28px,13cqw,44px)/1.04 OpeningHand,'Segoe Print',cursive; text-align:left; transform:rotate(-3deg); }
.opening-ink-heart { display:block; margin:6% 0 0 13%; width:18%; height:auto; fill:none; stroke:#a95c6c; stroke-width:1.8; stroke-linecap:round; }
.opening-letter-sign { position:absolute; bottom:10%; right:10%; font:16px OpeningHand,cursive; color:#9a7780; }
.opening-sleeve { position:absolute; inset:49% -3% -1%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(90deg,#0002,transparent 3%,transparent 97%,#0002),var(--silk-mid) url('/img/opening-grain.svg'); border-radius:0 0 4px 4px; box-shadow:0 -1px 0 #ffe9d48c inset; clip-path:polygon(0 0,34% 0,37% 4%,40% 7%,60% 7%,63% 4%,66% 0,100% 0,100% 100%,0 100%); transform:rotate(-4deg); }
.opening-sleeve::before,.opening-sleeve::after { content:''; position:absolute; top:0; bottom:0; width:1px; background:#6b3c4b40; box-shadow:1px 0 #ffe9d44f; }
.opening-sleeve::before { left:6%; } .opening-sleeve::after { right:6%; }
.opening-emboss { font:500 clamp(24px,11cqw,37px)/1 OpeningHand,cursive; color:color-mix(in srgb,var(--silk-dark) 72%,var(--silk-mid)); text-shadow:0 1px 0 #ffe6c482,0 -1px 1px #35182952; }
.opening-sleeve-line { width:25px; height:1px; margin:12px 0 10px; background:#4e283e4f; box-shadow:0 1px #ffe6c465; }
.opening-sleeve-caption { font:400 8px/1.4 Manrope,sans-serif; color:var(--silk-dark); letter-spacing:.04em; }
.opening-done .opening-sleeve,.opening-done .opening-sleeve-back { animation:opening-sleeve-away .8s cubic-bezier(.35,0,.6,1) both; }
.opening-done .opening-letter-shadow { animation:opening-fade .5s both; }
.opening-done .opening-handwriting,.opening-done .opening-ink-heart,.opening-done .opening-letter-sign,.opening-done .opening-letter-rule { animation:opening-fade .4s .1s both; }
@keyframes opening-sleeve-away { to { transform:translateY(125%) rotate(8deg); opacity:0; } }

/* Erasing condensation exposes the actual, inert invitation underneath. */
.opening-mode-fog .opening-backdrop { background:linear-gradient(#3e5d726b,transparent 38%,transparent 64%,#3e5d7259); }
.opening-mode-fog .opening-touch { width:min(100%,480px); height:100%; max-height:440px; aspect-ratio:auto; }
.opening-mode-fog .opening-heading { text-shadow:0 2px 20px #18384f70; }
.opening-fog { position:absolute; inset:0; width:100%; height:100%; border-radius:30px; mask-image:radial-gradient(ellipse,#000 45%,#000b 70%,transparent 100%); }
.opening-glass-edge { position:absolute; inset:0; background:linear-gradient(125deg,#ffffff18,transparent 35%,#ffffff0c 65%,transparent); border-radius:30px; }
.opening-done .opening-fog { animation:opening-fog-clear 1s cubic-bezier(.2,.6,.2,1) both; }
.opening-done .opening-glass-edge { animation:opening-fade .65s both; }
@keyframes opening-fog-clear { to { opacity:0; filter:blur(8px); transform:scale(1.04); } }

/* A brief release of light sits above the live first screen. */
.opening-effects { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.opening-light-ring { position:absolute; width:160px; height:160px; border-radius:50%; left:calc(50% - 80px); top:calc(52% - 80px); border:1px solid #ffeac5b3; box-shadow:0 0 45px 18px #ffe5b86b,inset 0 0 30px #ffe8c866; opacity:0; }
.opening-light-sweep { position:absolute; width:34%; height:180%; top:-40%; left:-45%; transform:rotate(28deg); background:linear-gradient(90deg,transparent,#ffead369,transparent); filter:blur(10px); opacity:0; }
.opening-flash { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 52%,#fff5dc8f,transparent 65%); opacity:0; }
.opening-done .opening-light-ring { animation:opening-light-wave 1.1s .2s cubic-bezier(.15,.6,.3,1) both; }
.opening-done .opening-light-sweep { animation:opening-sweep 1.1s .15s ease-in-out both; }
.opening-done .opening-flash { animation:opening-light-flash 1s .15s both; }
.opening-mode-note .opening-light-ring,.opening-mode-note .opening-flash,.opening-mode-fog .opening-light-ring,.opening-mode-fog .opening-flash { display:none; }
.opening-particle { position:absolute; left:50%; top:52%; aspect-ratio:1; border-radius:50%; background:#ffe7b2; box-shadow:0 0 8px #fff1dc; opacity:0; }
.opening-particle:nth-child(3n) { background:#fff; }
.opening-particle-heart { border-radius:0; background:none !important; box-shadow:none; }
.opening-particle-heart svg { display:block; width:100%; height:100%; fill:#ffd1d5; filter:drop-shadow(0 0 3px #fff5); }
.opening-droplet { aspect-ratio:.3; background:#e2f6ff8c; border:1px solid #fff8; border-radius:60% 40% 50% 50%; box-shadow:1px 2px 3px #25495a20; }
.opening-done .opening-heading,.opening-done .opening-skip,.opening-done .opening-direction,.opening-done .opening-ribbon-grab { animation:opening-fade .3s both; }
.opening-done .opening-backdrop { animation:opening-fade .85s .15s both; }
@keyframes opening-fade { to { opacity:0; } }
@keyframes opening-light-wave { 0% { opacity:0; transform:scale(.25); } 20% { opacity:.8; } to { opacity:0; transform:scale(5); } }
@keyframes opening-sweep { 0% { opacity:0; left:-45%; } 25% { opacity:1; } to { opacity:0; left:140%; } }
@keyframes opening-light-flash { 0%,100% { opacity:0; } 30% { opacity:.9; } }
.phone .screen > .invite-opening { position:absolute; inset:0; width:auto; height:auto; z-index:8; padding:54px 18px 27px; gap:14px; }
.phone .invite-opening .opening-title { font-size:23px; max-width:270px; }
.phone .invite-opening .opening-hint { font-size:10px; margin-top:11px; }
.phone .invite-opening .opening-skip { font-size:10px; padding:10px 0; }
.phone .opening-wrap-horizontal { height:32px; } .phone .opening-wrap-vertical { width:28px; left:calc(50% - 14px); }
.phone .opening-direction { font-size:12px; bottom:-22px; }
.phone .opening-direction > span { font-size:14px; }
.phone .opening-mode-note .opening-title { font-size:21px; }
.phone .opening-mode-note .opening-touch { width:83%; }
.phone .opening-sleeve-caption { font-size:6px; }
.phone .opening-ink-heart { margin-top:5%; }
/* Настоящий мобильный экран. Ширина объекта ограничена и шириной телефона, и
   его высотой: поэтому композиция остаётся цельной при открытой адресной
   строке, в Telegram WebView и в альбомной ориентации. */
@media (max-width:640px) {
  .stage > .invite-opening {
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:clamp(8px,2dvh,16px);
    padding:max(clamp(18px,5dvh,44px),env(safe-area-inset-top)) 16px
      max(clamp(12px,3dvh,28px),env(safe-area-inset-bottom));
  }
  .stage .opening-heading { align-self:center; }
  .stage .opening-title { max-width:350px; font-size:clamp(22px,7vw,28px); line-height:1.14; }
  .stage .opening-hint { margin-top:9px; font-size:clamp(11px,3.2vw,13px); line-height:1.45; }
  .stage .opening-touch {
    width:min(calc(100vw - 32px),48dvh,360px); max-width:none; max-height:none;
    aspect-ratio:4/3; -webkit-appearance:none; appearance:none;
  }
  .stage .opening-mode-note .opening-touch { width:min(78vw,40dvh,280px); aspect-ratio:.9; }
  .stage .opening-mode-fog .opening-touch { width:min(calc(100vw - 32px),46dvh,400px); height:auto; aspect-ratio:.86; }
  .stage .opening-skip { min-height:44px; padding:9px 0; font-size:12px; }
  .stage .opening-direction { bottom:-19px; font-size:12px; }
  .stage .opening-direction > span { font-size:15px; }
  .stage .opening-wrap-horizontal { height:clamp(32px,10vw,42px); }
  .stage .opening-wrap-vertical { width:clamp(28px,9vw,38px); left:calc(50% - clamp(14px,4.5vw,19px)); }
}
@media (max-width:360px) {
  .opening-picker { gap:8px; }
  .opening-picker button { padding:11px; }
  .opening-picker b { font-size:13px; }
}
@media (max-width:640px) and (max-height:500px) {
  .stage > .invite-opening { gap:6px; padding-top:max(12px,env(safe-area-inset-top)); padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  .stage .opening-title { font-size:21px; }
  .stage .opening-hint { margin-top:4px; font-size:10px; }
  .stage .opening-direction { display:none; }
}
@media (prefers-reduced-motion:reduce) { .invite-opening *, .invite-opening *::before, .invite-opening *::after { transition:none !important; animation:none !important; } }