/* Экран «С днём рождения»: три шаблона. Фото именинника по центру, надпись сбоку, логотип — по шаблону. */
.pg-bday{overflow:hidden}
.bd-bg{position:absolute;inset:0}
.bd-bg::after{content:"";position:absolute;inset:-20%;opacity:.55;animation:bdSweep 14s ease-in-out infinite alternate}
@keyframes bdSweep{from{translate:-8% -4%}to{translate:8% 4%}}
.bd-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* фото: размер рамки подстраивается под каждое фото, фото плавно сменяют друг друга */
.bd-photo{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;box-sizing:content-box;width:560px;height:760px;
  opacity:0;scale:.86;transition:width .9s ease,height .9s ease}
.bd-imgs{position:relative;width:100%;height:100%;overflow:hidden}
.bd-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;opacity:0;transition:opacity 1.4s ease}
.bd-img.on{opacity:1;animation:bdKb 9s ease-out forwards}
@keyframes bdKb{from{scale:1.12}to{scale:1}}
.bd-orn{position:absolute;width:120px;height:120px;fill:none;stroke-width:3;stroke-linecap:round;display:none}
.bd-orn.tl{left:-46px;top:-46px}
.bd-orn.tr{right:-46px;top:-46px;rotate:90deg}
.bd-orn.br{right:-46px;bottom:-46px;rotate:180deg}
.bd-orn.bl{left:-46px;bottom:-46px;rotate:270deg}

/* надпись, имя, поздравление, ник */
.bd-txt{position:absolute;top:0;bottom:0;width:560px;display:flex;flex-direction:column;justify-content:center;gap:24px;z-index:5}
.bd-head{margin:0;font-weight:400;line-height:1.04}
.bd-head .w{display:inline-block;clip-path:inset(-25% 100% -35% -12%);padding:0 .06em}
.bd-name{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;font-size:88px;line-height:1.05;color:#fff}
.bd-msg{font-family:Manrope,sans-serif;font-weight:500;font-size:34px;line-height:1.38;color:rgba(255,255,255,.92);white-space:pre-line}
.bd-soc{display:inline-flex;align-items:center;gap:16px;padding:12px 28px 12px 12px;border-radius:999px;align-self:flex-start;
  background:rgba(0,0,0,.28);border:1.5px solid rgba(255,255,255,.28);font-family:Manrope,sans-serif;font-weight:700;font-size:38px;color:#fff}
.bd-soc svg{width:64px;height:64px;flex:none}
.bd-rise{opacity:0;translate:0 34px}

/* вступление: фото появляется, надпись «пишется» слово за словом, дальше имя, текст и ник */
.pg-bday.play .bd-photo{animation:bdPop 1.4s cubic-bezier(.2,.9,.25,1.12) .2s forwards}
@keyframes bdPop{to{opacity:1;scale:1}}
.pg-bday.play .bd-head .w{animation:bdWrite var(--t,.8s) cubic-bezier(.45,.1,.35,1) var(--d,0s) forwards}
@keyframes bdWrite{to{clip-path:inset(-25% -12% -35% -12%)}}
.pg-bday.play .bd-rise{animation:bdRise 1.1s ease var(--d,0s) forwards}
@keyframes bdRise{to{opacity:1;translate:0 0}}

/* --- 1. Конфетти: малиново-оранжевый фон, неоновая надпись слева, логотип справа --- */
.tpl-confetti .bd-bg{background:radial-gradient(ellipse 70% 80% at 42% 48%,#ff8a3a 0%,#f0393d 30%,#b3124c 60%,#55093f 88%,#2e0631 100%)}
.tpl-confetti .bd-bg::after{background:radial-gradient(circle at 30% 40%,rgba(255,200,120,.45),transparent 40%)}
.tpl-confetti .bd-fx{z-index:4}
.tpl-confetti .bd-txt{left:70px}
.tpl-confetti .bd-head{font-family:"Great Vibes",cursive;font-size:150px;color:#fff6e8;
  text-shadow:0 0 6px #fff,0 0 18px #ffb45c,0 0 40px #ff7a2f,0 0 80px #ff2d55;animation:bdNeon 4s ease-in-out infinite}
@keyframes bdNeon{50%{filter:brightness(1.18)}}
.tpl-confetti .bd-name{text-shadow:0 0 26px rgba(255,170,90,.85)}
.tpl-confetti .bd-photo{box-shadow:0 0 0 6px #fff4dc,0 0 0 10px #c99a4a,0 0 0 24px rgba(255,236,200,.16),0 0 70px 24px rgba(255,110,60,.5),0 34px 90px rgba(0,0,0,.55)}
.tpl-confetti .bd-orn{display:block;stroke:#ffe6b0;color:#ffe6b0;filter:drop-shadow(0 0 8px rgba(255,170,80,.9))}

/* --- 2. Золотой вечер: тёмный фон, золото, фото в арке, логотип слева, надпись справа --- */
.tpl-gold .bd-bg{background:radial-gradient(ellipse 60% 70% at 50% 45%,#2b2115 0%,#120d08 60%,#070504 100%)}
.tpl-gold .bd-bg::after{background:radial-gradient(circle at 60% 35%,rgba(217,199,146,.14),transparent 45%)}
.tpl-gold .bd-txt{right:70px;text-align:right;align-items:flex-end}
.tpl-gold .bd-head{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:100px;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.tpl-gold .bd-head .w{background:linear-gradient(180deg,#fbf3d8 0%,#e3cf98 40%,#a88d55 75%,#e9dbab 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tpl-gold .bd-name{font-family:"Great Vibes",cursive;font-style:normal;font-weight:400;font-size:112px;color:#f1e5bd;text-shadow:0 0 30px rgba(217,199,146,.45)}
.tpl-gold .bd-msg{color:#e9dcb5}
.tpl-gold .bd-soc{align-self:flex-end;background:rgba(217,199,146,.08);border-color:rgba(217,199,146,.45);color:#f1e5bd}
.tpl-gold .bd-photo,.tpl-gold .bd-imgs{border-radius:300px 300px 18px 18px}
.tpl-gold .bd-photo{box-shadow:0 0 0 5px #e8d29c,0 0 0 16px #0c0906,0 0 0 18px #bfa96f,0 0 90px rgba(217,199,146,.35),0 34px 90px rgba(0,0,0,.6)}

/* --- 3. Шары: фиолетовый вечер, шары летят вверх, фото-полароид, надпись справа, логотип в углу --- */
.tpl-balloons .bd-bg{background:linear-gradient(160deg,#170f3d 0%,#33186a 45%,#6b2489 80%,#8e2f8f 100%)}
.tpl-balloons .bd-bg::after{background:radial-gradient(circle at 50% 30%,rgba(255,170,230,.18),transparent 45%)}
.tpl-balloons .bd-txt{right:70px;text-align:right;align-items:flex-end}
.tpl-balloons .bd-head{font-family:Lobster,cursive;font-size:126px;color:#fff;text-shadow:5px 5px 0 #ff6fae,10px 10px 0 rgba(90,200,250,.85)}
.tpl-balloons .bd-name{font-family:Comfortaa,sans-serif;font-style:normal;font-weight:700;font-size:70px;color:#ffe066}
.tpl-balloons .bd-soc{align-self:flex-end;background:rgba(255,255,255,.12)}
.tpl-balloons .bd-photo{padding:20px 20px 84px;background:#fffdf8;border-radius:6px;rotate:-3deg;box-shadow:0 36px 80px rgba(0,0,0,.55)}