.wish-scene {
  --scene:#bd7865;
  --scene-light:#efd8c7;
  background:linear-gradient(145deg,var(--scene-light),var(--scene));
  color:#2f2928;
  isolation:isolate;
  overflow:hidden;
  justify-content:flex-start;
  padding-top:clamp(14vh,18vh,22vh);
  padding-bottom:calc(var(--pad-y,28px) + var(--safe-bottom,0px) + 8px);
}
.wish-scene::before,.wish-scene::after { content:""; position:absolute; border:1px solid #fff7; border-radius:50%; z-index:-1; }
.wish-scene::before { width:min(540px,130vw); height:min(540px,130vw); top:-30%; right:-45%; }
.wish-scene::after { width:min(310px,75vw); height:min(310px,75vw); bottom:-18%; left:-28%; background:#fff2; }

.daniil { --scene:#607c70; --scene-light:#dbe6dc; }
.sasha { --scene:#777080; --scene-light:#e4dce7; }
.inna { --scene:#c6816c; --scene-light:#f2d8cb; }
.yulia { --scene:#b8889a; --scene-light:#f0dce4; }
.katya { --scene:#c9a06a; --scene-light:#f5e6d0; }

.scene-kicker {
  position:absolute;
  z-index:2;
  top:calc(10vh + var(--safe-top,0px));
  left:calc(var(--pad-x,22px) + var(--safe-left,0px));
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  font-weight:700;
}
.wish-scene .section-no { color:#2f292855; z-index:2; }
.speaker {
  position:absolute;
  z-index:2;
  width:min(58vw,320px);
  left:50%;
  bottom:calc(3% + var(--safe-bottom,0px));
  opacity:0;
  filter:blur(12px);
  transform:translateX(-65%) translateY(34px) rotate(-7deg);
}
.portrait-placeholder {
  aspect-ratio:3/4;
  display:grid;
  place-content:center;
  text-align:center;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10px;
  line-height:1.8;
  background:linear-gradient(135deg,#493f3e88,#fff5), var(--scene);
  clip-path:polygon(50% 0,78% 8%,94% 34%,89% 63%,100% 100%,0 100%,11% 63%,6% 34%,22% 8%);
  box-shadow:0 25px 40px #3a252533;
}
.portrait-placeholder.baby {
  aspect-ratio:1;
  border-radius:50%;
  clip-path:none;
  width:78%;
  margin-inline:auto;
  font-size:11px;
  letter-spacing:.08em;
}
.speaker-name {
  display:inline-block;
  margin:-4px 0 0 12px;
  padding:7px 12px;
  background:#2f2928;
  color:#fff;
  font-family:"DM Serif Display";
  font-size:clamp(17px,4.8vw,20px);
  transform:rotate(-4deg);
}
.katya .speaker-name { background:#5c4634; }
.speech-bubble {
  width:min(86vw,490px);
  min-height:140px;
  margin:0 auto;
  padding:clamp(18px,4.5vw,25px) clamp(16px,4vw,24px);
  position:relative;
  z-index:2;
  background:#fff9f2;
  border-radius:26px 26px 26px 4px;
  box-shadow:0 19px 35px #3a25252b;
  opacity:0;
  transform:translateX(70px) translateY(16px) scale(.96);
}
.speech-bubble::before {
  content:"";
  position:absolute;
  width:25px;
  height:25px;
  background:#fff9f2;
  left:31%;
  bottom:-12px;
  transform:rotate(45deg);
}
.speech-bubble p {
  margin:0;
  position:relative;
  font-family:"DM Serif Display";
  font-size:clamp(18px,5.2vw,28px);
  line-height:1.15;
}
.baby-bubble { text-align:center; min-height:120px; }
.baby-bubble p { font-size:clamp(26px,7vw,36px); }
.bubble-note {
  display:block;
  margin-top:14px;
  font-family:Manrope,system-ui,sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a7468;
  opacity:0;
}
.wish-scene.active .bubble-note { animation:note-in .5s .9s ease both; }

.wish-scene.active .speaker { animation:speaker-in 1s .28s cubic-bezier(.16,.8,.2,1) forwards; }
.wish-scene.active .speech-bubble { animation:bubble-in .72s .06s cubic-bezier(.16,.8,.2,1) forwards; }
.wish-scene.active .portrait-placeholder { animation:portrait-float 4s 1.3s ease-in-out infinite; }

@keyframes speaker-in { to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) rotate(-2deg); } }
@keyframes bubble-in { to { opacity:1; transform:none; } }
@keyframes portrait-float { 50% { transform:translateY(-9px) rotate(1deg); } }
@keyframes note-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.ruslan .speaker { transform:translateX(-120%) translateY(34px) rotate(-11deg); }
.ruslan.active .speaker { animation:ruslan-in 1s .28s cubic-bezier(.16,.8,.2,1) forwards; }

.daniil .speaker { filter:blur(9px); transform:translateX(22%) translateY(100px) scale(.76); }
.daniil.active .speaker { animation:daniil-in .95s .28s cubic-bezier(.16,.8,.2,1) forwards; }
.daniil.active .portrait-placeholder { animation:daniil-float 3.5s 1.2s ease-in-out infinite; }

.sasha .speaker { transform:translateX(-112%) translateY(12px) rotate(11deg); }
.sasha.active .speaker { animation:sasha-in 1.05s .28s cubic-bezier(.16,.8,.2,1) forwards; }
.sasha.active .portrait-placeholder { animation:sasha-float 4.4s 1.3s ease-in-out infinite; }

.inna .speaker { filter:blur(10px); transform:translateX(20%) translateY(40px) scale(.78); }
.inna.active .speaker { animation:inna-in 1s .28s cubic-bezier(.16,.8,.2,1) forwards; }
.inna.active .portrait-placeholder { animation:inna-float 3.8s 1.3s ease-in-out infinite; }

.yulia .speaker { filter:blur(12px); transform:translateX(-118%) translateY(20px) rotate(-8deg); }
.yulia.active .speaker { animation:yulia-in 1.05s .28s cubic-bezier(.16,.8,.2,1) forwards; }
.yulia.active .portrait-placeholder { animation:yulia-float 4s 1.35s ease-in-out infinite; }

.katya .speaker { filter:blur(8px); transform:translateX(-50%) translateY(80px) scale(.7); width:min(48vw,240px); }
.katya.active .speaker { animation:katya-in .9s .2s cubic-bezier(.16,.8,.2,1) forwards; }
.katya.active .portrait-placeholder { animation:katya-float 3.2s 1.1s ease-in-out infinite; }
.katya .speech-bubble { transform:translateY(20px) scale(.94); }
.katya.active .speech-bubble { animation:katya-bubble .7s .05s cubic-bezier(.16,.8,.2,1) forwards; }

@keyframes ruslan-in { to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) rotate(-2deg); } }
@keyframes daniil-in { 70% { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(-10px) scale(1.03); } to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes sasha-in { to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) rotate(1deg); } }
@keyframes inna-in { to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes yulia-in { to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) rotate(-2deg); } }
@keyframes katya-in { to { opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes katya-bubble { to { opacity:1; transform:none; } }
@keyframes daniil-float { 50% { transform:translateY(-12px) rotate(-1deg); } }
@keyframes sasha-float { 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes inna-float { 50% { transform:translateY(-8px) scale(1.015); } }
@keyframes yulia-float { 50% { transform:translateY(-7px) rotate(-1deg); } }
@keyframes katya-float { 50% { transform:translateY(-10px) scale(1.03); } }

@media (max-width:480px) {
  .wish-scene { padding-top:16vh; }
  .speaker { width:min(62vw,260px); bottom:calc(2% + var(--safe-bottom,0px)); }
  .katya .speaker { width:min(42vw,180px); }
  .speech-bubble { width:min(90vw,400px); min-height:124px; }
  .speech-bubble p { font-size:clamp(17px,4.8vw,22px); }
  .baby-bubble p { font-size:clamp(22px,6.5vw,30px); }
}

@media (min-width:430px) and (max-width:440px) and (min-height:900px) {
  .wish-scene { padding-top:18vh; }
  .speaker { width:min(56vw,270px); bottom:calc(4% + var(--safe-bottom,0px)); }
  .speech-bubble { width:min(84vw,360px); min-height:150px; }
  .speech-bubble p { font-size:22px; }
}

@media (max-height:760px) {
  .wish-scene { padding-top:14vh; }
  .speaker { bottom:calc(-2% + var(--safe-bottom,0px)); width:min(52vw,240px); }
  .katya .speaker { width:min(40vw,170px); bottom:calc(1% + var(--safe-bottom,0px)); }
  .speech-bubble { min-height:120px; padding:18px 16px; }
  .speech-bubble p { font-size:clamp(17px,4.6vw,19px); }
}

@media (max-height:700px) and (orientation:landscape) {
  .wish-scene { min-height:auto; padding-top:12vh; padding-bottom:24px; }
  .speaker { width:min(34vw,220px); bottom:4%; }
  .speech-bubble { width:min(70vw,420px); }
}

@media (prefers-reduced-motion:reduce) {
  .speaker,.speech-bubble,.bubble-note { opacity:1; filter:none; transform:none; animation:none!important; }
}