/* MEDVID WEB Christmas Card — фінальний конверт і листівка (з Прототип_5b, обмежено .finale) */
/* Шрифти листівки (SIL Open Font License, ліцензії в fonts/): Cormorant Garamond, Great Vibes — латиниця й кирилиця.
   Окремі назви сімейств, щоб вступний екран лишився на Georgia, як у затвердженому Прототип_3_Glow. */
@font-face{ font-family:'MW Card Serif'; font-weight:500; font-style:normal; font-display:block; src:url(../fonts/cormorant-500.woff) format('woff'); }
@font-face{ font-family:'MW Card Serif'; font-weight:600; font-style:normal; font-display:block; src:url(../fonts/cormorant-600.woff) format('woff'); }
@font-face{ font-family:'MW Card Serif'; font-weight:500; font-style:italic; font-display:block; src:url(../fonts/cormorant-500-italic.woff) format('woff'); }
@font-face{ font-family:'MW Card Script'; font-weight:400; font-style:normal; font-display:block; src:url(../fonts/greatvibes.woff) format('woff'); }

/* шар фіналу лежить над відео; поки він порожній, дотики проходять до вступу */
.finale{ position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.finale .seal-wrap{ height: auto; }
/* =========================================================
   MEDVID WEB · Прототип 5 · від останнього кадру V-04(1)
   до другого конверта і привітальної листівки.
   Відео і звук монтажу не змінюються; окремих медіафайлів немає:
   останній кадр береться з самого відео під час показу.
   ========================================================= */
:root{ --gold: #b08a3e; }
/* Шрифти (SIL Open Font License, файли ліцензій поруч): Cormorant Garamond, Great Vibes — латиниця + кирилиця */






/* відео — як у Прототип_3_Glow: на весь екран */



/* фон після відео: нерухомий кадр → розмитий кадр без конверта */
.finale .bg{ position: absolute; inset: 0; transform-origin: 50% 65%; will-change: transform; visibility: hidden; }
.finale .bg canvas{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.finale #bgBlur{ opacity: 0; }
.finale .bg .dim{ position: absolute; inset: -2%; opacity: 0;
  background: radial-gradient(90% 60% at 50% 55%, rgba(20,10,4,.35) 0%, rgba(14,7,3,.62) 60%, rgba(8,4,2,.82) 100%); }

/* «камера» для другого конверта */
.finale .cam{ position: absolute; inset: 0; pointer-events: none; }
.finale .env{
  position: absolute; left: 0; top: 0; width: 300px; height: 200px;   /* розміри ставить JS */
  transform-origin: 50% 50%; opacity: 0; visibility: hidden;
  perspective: 1200px; perspective-origin: 50% 30%;
}
.finale .env > *{ position: absolute; }
.finale .env .lay{ inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.finale .env-shadow{ inset: 0; border-radius: 2px; z-index: 0; opacity: .55;
  box-shadow: 0 2px 4px rgba(10,4,0,.45), 0 18px 40px -10px rgba(10,4,0,.6); }
.finale #envBack{ z-index: 1; }
.finale .in-glow{ inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: radial-gradient(65% 55% at 50% 12%, rgba(255,226,166,.95), rgba(255,196,116,.38) 45%, rgba(255,170,90,0) 78%); }
.finale #envPocket{ z-index: 4; }
.finale .flap-shadow, .finale .flap{ left: 0; top: 0; width: 100%; height: 52%; transform-origin: 50% 0%; }
.finale .flap-shadow{ z-index: 5; }
.finale .flap-shadow svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.finale .flap{ z-index: 6; transform-style: preserve-3d; will-change: transform; }
.finale .face{ position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.finale .face .shade, .finale .face .glow{ position: absolute; inset: 0; opacity: 0; }
.finale .face svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.finale .flap .outer{
  -webkit-clip-path: url(#clipFlapO); clip-path: url(#clipFlapO);
  background-image: var(--paper),
    linear-gradient(100deg, rgba(255,240,215,.30) 0%, rgba(255,240,215,0) 45%, rgba(60,30,10,.06) 100%),
    linear-gradient(180deg, #d9bb93 0%, #ead2ae 5%, #eed8b6 40%, #e8cfa9 80%, #dfc39c 100%);
  background-size: 128px 128px, 100% 100%, 100% 100%;
}
.finale .flap .outer .shade{ background: rgba(40,24,12,1); }
.finale .flap .inner{
  transform: rotateX(180deg);
  -webkit-clip-path: url(#clipFlapI); clip-path: url(#clipFlapI);
  background-image: var(--paper), linear-gradient(0deg, #dcc099 0%, #e9d1ad 45%, #e4c9a3 100%);
  background-size: 128px 128px, 100% 100%;
}
.finale .flap .inner .glow{ background: radial-gradient(95% 90% at 50% 100%, rgba(255,208,142,.6), rgba(255,196,122,.2) 50%, rgba(255,186,108,0) 90%); }
.finale .flap .inner .shade{ background: rgba(34,20,10,1); }
.finale .env-halo{ left: -35%; right: -35%; top: -95%; height: 150%; z-index: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 63%, rgba(255,218,146,.78) 0%, rgba(255,196,108,.32) 40%, rgba(255,180,90,0) 72%); }
.finale .flap-sheen{ position: absolute; top: 0; bottom: 0; left: 0; width: 42%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, rgba(255,242,210,0) 0%, rgba(255,238,196,.55) 44%, rgba(255,250,232,.75) 50%, rgba(255,238,196,.55) 56%, rgba(255,242,210,0) 100%);
  transform: translateX(-110%); }
.finale .sparks{ left: 0; top: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
.finale .spark{ position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff8e0 0%, #ffd986 38%, rgba(255,196,90,0) 72%); will-change: transform, opacity; }
.finale .spark.st{ width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 0;
  background: radial-gradient(circle, #fffbea 0 16%, #ffdc86 34%, rgba(255,200,90,0) 70%);
  -webkit-clip-path: polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); clip-path: polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); }
.finale .env-light{ inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: linear-gradient(98deg, rgba(255,214,160,.30) 0%, rgba(255,214,160,.06) 42%, rgba(70,35,10,.10) 78%, rgba(50,25,8,.22) 100%); }

/* печатка (як у затвердженому конверті, з тисненою гілочкою, як у кадрі) */
.finale .seal-wrap{ z-index: 8; left: 50%; top: 50%; width: 19%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.finale .seal-glow{ position: absolute; inset: -60%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,206,128,.55) 0%, rgba(240,176,92,.18) 34%, rgba(230,160,80,0) 62%); }
.finale .seal-btn{ position: absolute; inset: -22%; padding: 22%; border: 0; background: none; border-radius: 50%; cursor: pointer; outline: none; }
.finale .seal{ position: relative; display: block; width: 100%; height: 100%; }
.finale .seal svg{ position: absolute; inset: -8%; width: 116%; height: 116%; overflow: visible; }
.finale .sheen, .finale .gold{ position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.finale .sheen .band{ position: absolute; top: -25%; bottom: -25%; left: 15%; width: 70%;
  background: linear-gradient(100deg, rgba(255,226,170,0) 20%, rgba(255,230,180,.5) 50%, rgba(255,226,170,0) 80%);
  transform: translateX(-180%); }
.finale .gold{ opacity: 0; background: radial-gradient(circle at 42% 36%, rgba(255,226,168,.95) 0%, rgba(232,180,98,.80) 45%, rgba(196,136,62,.55) 70%, rgba(170,110,50,0) 80%); }
.finale.ready .sheen .band{ animation: fIdleSheen 6.5s 1.2s ease-in-out infinite; }
@keyframes fIdleSheen{ 0%,72%{ transform: translateX(-180%); opacity: 0; } 76%{ opacity: .45; } 92%{ transform: translateX(180%); opacity: .45; } 100%{ transform: translateX(180%); opacity: 0; } }

/* складена втроє листівка */
.finale .card{ z-index: 3; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; opacity: 0; visibility: hidden; pointer-events: none; }
.finale .panel{ position: absolute; left: 0; width: 100%; transform-style: preserve-3d; will-change: transform; }
.finale .p-top{ top: 0; transform-origin: 50% 100%; z-index: 3; }
.finale .p-mid{ z-index: 1; }
.finale .p-bot{ transform-origin: 50% 0%; z-index: 2; }
.finale .panel .face{ overflow: hidden; }
.finale .panel .out{ transform: rotateX(180deg);
  background-image: var(--paper), var(--paper), linear-gradient(172deg, #f9f2e3 0%, #f3e9d5 60%, #ede0c6 100%);
  background-size: 128px 128px, 311px 311px, 100% 100%; }
.finale .p-top .out::before{ content: ""; position: absolute; inset: 6%; border: 1px solid transparent;
  border-image: linear-gradient(135deg, #a3762b, #efd38b 28%, #b48638 52%, #e8c676 78%, #a3762b) 1; }
.finale .p-top .out::after{ content: ""; position: absolute; inset: calc(6% + 4px); border: .6px solid transparent; opacity: .75;
  border-image: linear-gradient(135deg, #a3762b, #efd38b 28%, #b48638 52%, #e8c676 78%, #a3762b) 1; }
.finale .p-top .out .orn{ position: absolute; left: 50%; top: 50%; height: 66%; width: auto; transform: translate(-50%,-50%);
  filter: drop-shadow(0 1px 1.2px rgba(70,45,15,.28)); }
.finale .p-top .out .warm{ position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 0%, rgba(255,214,150,.55), rgba(255,200,120,.15) 55%, rgba(255,190,110,0) 85%); }
.finale .panel .shade{ background: rgba(40,26,12,1); z-index: 2; }
.finale .p-mid .face, .finale .p-top .in, .finale .p-bot .in{ box-shadow: inset 0 0 0 .5px rgba(150,120,80,.25); }
.finale .card-shadow{ position: absolute; left: 4%; right: 4%; z-index: 0;
  box-shadow: 0 18px 40px -8px rgba(0,0,0,.55); }
/* сам лист */
.finale .letter{
  position: absolute; left: 0; top: 0; overflow: hidden;
  font-family: 'MW Card Serif', Georgia, 'Times New Roman', serif; font-weight: 500; color: #36271b;
  background-image:
    radial-gradient(120% 80% at 50% 38%, rgba(255,252,244,.55) 0%, rgba(255,250,238,0) 55%, rgba(150,110,55,.10) 100%),
    var(--paper), var(--paper),
    linear-gradient(172deg, #fbf5e8 0%, #f6eddb 45%, #f0e4cc 100%);
  background-size: 100% 100%, 128px 128px, 311px 311px, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(160,125,70,.18), inset 0 0 2.2em rgba(170,130,70,.10);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
}
.finale .letter .fr{ position: absolute; pointer-events: none; border: 1px solid transparent;
  border-image: linear-gradient(135deg, #a3762b, #efd38b 28%, #b48638 52%, #e8c676 78%, #a3762b) 1; }
.finale .letter .fr1{ inset: .9em; }
.finale .letter .fr2{ inset: calc(.9em + 5px); border-width: .6px; opacity: .7; }
.finale .letter .cn{ position: absolute; width: 1.5em; height: 1.5em; pointer-events: none; }
.finale .letter .cn.tl{ left: calc(.9em - .52em); top: calc(.9em - .52em); }
.finale .letter .cn.tr{ right: calc(.9em - .52em); top: calc(.9em - .52em); transform: scaleX(-1); }
.finale .letter .cn.bl{ left: calc(.9em - .52em); bottom: calc(.9em - .52em); transform: scaleY(-1); }
.finale .letter .cn.br{ right: calc(.9em - .52em); bottom: calc(.9em - .52em); transform: scale(-1,-1); }
.finale .letter .dec{ position: absolute; pointer-events: none; }
/* затверджена гірлянда (PNG → WebP, природні пропорції), лежить поверх рамки, під текстом */
.finale .letter .garland{ position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none;
  filter: drop-shadow(0 1px 1.2px rgba(70,45,15,.28)); }
/* вільне місце під гірляндою: у % від ширини листівки, бо гірлянда масштабується за шириною */
.finale .letter .gsp{ flex: none; width: 100%; padding-top: 17%; }
.finale .letter h1{ font-family: 'MW Card Script', 'Segoe Script', cursive; font-weight: 400; font-style: normal;
  color: #7a1a2a; font-size: 2.3em; line-height: 1.12; margin: .2em 1.25em 0; letter-spacing: .005em; }
.finale .letter .divider{ display: flex; align-items: center; gap: .55em; width: 44%; margin: .55em 0 0; flex: none; }
.finale .letter .divider i{ flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176,138,62,0), rgba(176,138,62,.85)); }
.finale .letter .divider i:last-child{ background: linear-gradient(270deg, rgba(176,138,62,0), rgba(176,138,62,.85)); }
.finale .letter .divider img{ width: .8em; height: .8em; }
.finale .letter p{ font-size: 1.07em; line-height: 1.5; margin: .85em 2.15em 0; }
.finale .letter p.wish{ font-style: italic; color: #553a26; margin-top: .7em; }
.finale .letter .sign{ margin-top: auto; padding-top: .9em; font-style: italic; font-size: 1.04em; color: #553a26; }
.finale .letter .company{ margin-top: .3em; font-weight: 600; font-size: .86em; letter-spacing: .2em; text-transform: uppercase; color: #8a6427; }
.finale .letter .logo{ margin: .9em 0 2.3em; width: 3.4em; height: 3.4em; flex: none; border-radius: 50%;
  border: 1px solid rgba(176,138,62,.75); box-shadow: inset 0 0 0 3px rgba(251,245,232,1), inset 0 0 0 3.6px rgba(176,138,62,.4);
  display: flex; align-items: center; justify-content: center;
  color: #9a7432; font-weight: 600; font-size: .95em; }
.finale .letter .logo span{ font-size: .58em; letter-spacing: .22em; margin-left: .22em; }
.finale .letter-flat{ z-index: 9; visibility: hidden; contain: paint; box-shadow: 0 22px 48px -10px rgba(0,0,0,.6); }

/* тестові елементи (лише в прототипі) */


.finale .t-debug{ position: fixed; z-index: 50; left: 8px; top: calc(env(safe-area-inset-top) + 48px); white-space: pre;
  font: 11px/1.4 ui-monospace, Menlo, monospace; color: #fff; background: rgba(0,0,0,.55); padding: 6px 8px; border-radius: 6px; display: none; }
.finale .t-debug.show{ display: block; }