/* ============================================================
   POMPUSHECHKA — portfolio
   Pink candy world. Baloo 2 + Nunito + Caveat.
   ============================================================ */

:root{
  /* pink palette — tweakable */
  --sky-top:    #ffe6f4;
  --sky-bottom: #ffc6e4;
  --bubblegum:  #ff3e9a;
  --hot:        #ff1f7a;
  --candy:      #ff7bc2;
  --glaze:      #ff5fb0;
  --cream:      #fff6fb;
  --plum:       #3c1230;
  --plum-soft:  #6a2b54;
  --gold:       #ffd76b;
  --lilac:      #b97bff;

  --ink: var(--plum);
  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:var(--sky-bottom);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:min(var(--maxw), 92vw); margin-inline:auto; }

/* ---------- type ---------- */
.display{ font-family:"Baloo 2",sans-serif; font-weight:700; line-height:.95; letter-spacing:-.01em; }
.hand{ font-family:"Caveat",cursive; }

/* eyebrow chip */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Baloo 2",sans-serif; font-weight:600;
  font-size:clamp(.8rem,1.4vw,1rem); letter-spacing:.14em; text-transform:uppercase;
  color:var(--hot);
  background:var(--cream);
  padding:.5em 1.1em; border-radius:999px;
  box-shadow:0 6px 0 rgba(255,31,122,.14), 0 10px 24px rgba(255,63,154,.18);
  border:2px solid #fff;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  padding:clamp(80px,11vh,140px) 0 0;
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-bottom) 60%, #ffb7dd 100%);
  overflow:hidden;
  isolation:isolate;
}

/* drifting clouds in hero sky */
.sky-cloud{ position:absolute; top:0; opacity:.9; pointer-events:none; z-index:0; filter:drop-shadow(0 16px 24px rgba(255,90,170,.18)); }

/* sparkles */
.spark{ position:absolute; z-index:1; pointer-events:none; animation:twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ transform:scale(.6) rotate(0); opacity:.35;} 50%{ transform:scale(1) rotate(20deg); opacity:1;} }

.hero-head{ position:relative; z-index:3; text-align:center; }
.hero-title{
  font-size:clamp(2.4rem, 10vw, 7.6rem);
  color:#fff;
  margin:.08em 0 0;
  white-space:nowrap;
  text-shadow:
     0 4px 0 var(--bubblegum),
     0 7px 0 #e21f78,
     0 12px 22px rgba(180,10,80,.32);
  -webkit-text-stroke:2px #fff;
  position:relative;
}
@media(max-width:520px){ .hero-title{ -webkit-text-stroke:1.5px #fff; } }
.hero-sub{
  font-family:"Baloo 2",sans-serif; font-weight:500;
  font-size:clamp(1rem,2.4vw,1.7rem);
  color:var(--plum); margin:.4em auto 0; max-width:30ch;
}
.hero-sub b{ color:var(--hot); }

/* doodle stars next to title */
.doodle-star{ position:absolute; z-index:4; pointer-events:none; }

/* candy stage at the bottom: donut + duo sticker */
.stage{
  position:relative; z-index:2;
  margin-top:clamp(10px,3vh,40px);
  height:clamp(380px,56vh,600px);
  display:flex; justify-content:center; align-items:center;
}
/* mini donuts scattered around the main picture */
.mini-donut{ position:absolute; z-index:2; pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(170,15,85,.25));
  animation:donutFloat 5s ease-in-out infinite; }
@keyframes donutFloat{ 0%,100%{ transform:translateY(0) rotate(-8deg);} 50%{ transform:translateY(-16px) rotate(8deg);} }
.donut{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:clamp(300px,42vw,520px); aspect-ratio:1/1;
  animation:bob 5s ease-in-out infinite;
}
.donut svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 30px 40px rgba(190,20,95,.28)); }
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-14px);} }

/* main cartoon picture, centered with mini donuts around */
.duo{
  position:relative; z-index:3;
  width:clamp(220px,31vw,380px);
  animation:floaty 6s ease-in-out infinite;
}
.duo img{ width:100%; height:auto; }
@keyframes floatyC{ 0%,100%{ transform:translateX(-50%) translateY(0) rotate(-1.5deg);} 50%{ transform:translateX(-50%) translateY(-14px) rotate(1.5deg);} }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-16px) rotate(1deg);} }

/* scroll hint */
.scroll-hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:5; text-align:center; color:var(--plum); font-family:"Baloo 2",sans-serif; font-weight:500;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  animation:hintBob 1.8s ease-in-out infinite;
}
@keyframes hintBob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(8px);} }

/* ============================================================
   CLOUD REVEAL — roles (full cloud cover, click to part)
   ============================================================ */
.reveal{
  position:relative;
  min-height:100vh;
  margin-top:-15vh;            /* clouds roll up onto the previous slide */
  z-index:3;
  background:linear-gradient(180deg,#ffb7dd 0%, #ff9fcf 45%, #ffd6ec 100%);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.reveal-inner{ position:relative; width:100%; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.roles{ text-align:center; z-index:2; padding:0 4vw; margin-top:6vh; }
.roles .role{
  display:block;
  font-family:"Baloo 2",sans-serif; font-weight:700;
  font-size:clamp(2rem,7vw,5.6rem); line-height:1.02;
  color:#fff; -webkit-text-stroke:2px var(--hot);
  text-shadow:0 5px 0 var(--bubblegum), 0 18px 30px rgba(170,15,85,.3);
  margin:.04em 0;
  opacity:0; transform:translateY(26px) scale(.82);
  transition:opacity .6s cubic-bezier(.2,1.4,.4,1), transform .6s cubic-bezier(.2,1.4,.4,1);
}
.roles .role span{ color:var(--hot); -webkit-text-stroke:0; text-shadow:none; }
.roles .role:nth-child(2){ color:var(--bubblegum); -webkit-text-stroke:2px #fff; }
.reveal.open .roles .role{ opacity:1; transform:none; }
.reveal.open .roles .role:nth-child(1){ transition-delay:.45s; }
.reveal.open .roles .role:nth-child(2){ transition-delay:.6s; }
.reveal.open .roles .role:nth-child(3){ transition-delay:.75s; }
.reveal.open .roles .role:hover{ transform:rotate(-2deg) scale(1.04); }

/* fluffy cloud cover, splits in the middle on click */
.cloud-curtain{ position:absolute; inset:0; z-index:5; cursor:pointer; }
.cloud-half{
  position:absolute; top:0; bottom:-4%; width:56%;
  filter:drop-shadow(0 16px 22px rgba(180,30,110,.16));
  transition:transform 1.2s cubic-bezier(.74,0,.26,1);
  will-change:transform;
}
.cloud-half.left{ left:0; }
.cloud-half.right{ right:0; }
.cloud-half .cloud-svg{ width:100%; height:100%; display:block; }
.reveal.open .cloud-half.left{  transform:translateX(-114%); }
.reveal.open .cloud-half.right{ transform:translateX(114%); }
.reveal.open .cloud-curtain{ pointer-events:none; }

/* decorative cartoon stickers scattered in sections */
.deco-sticker{ position:absolute; z-index:1; pointer-events:none;
  width:clamp(96px,12vw,168px); filter:drop-shadow(0 12px 18px rgba(170,15,85,.22));
  animation:floaty 7s ease-in-out infinite; }
@media(max-width:680px){ .deco-sticker{ width:84px; opacity:.9; } }

.cloud-hint{ position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  z-index:6; color:var(--hot); font-family:"Baloo 2",sans-serif; font-weight:600;
  font-size:clamp(1.2rem,2.6vw,1.9rem); text-align:center; pointer-events:none;
  background:#fff; padding:.5em 1.2em; border-radius:999px; box-shadow:0 10px 26px rgba(170,15,85,.28);
  animation:hintPulse 1.6s ease-in-out infinite; white-space:nowrap; border:2px solid var(--bubblegum);
}
@keyframes hintPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.07);} }
.reveal.open .cloud-hint{ opacity:0; transition:opacity .3s; }

.reclose{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:6; border:none; cursor:pointer; background:rgba(255,255,255,.9);
  color:var(--hot); font-family:"Caveat",cursive; font-weight:700; font-size:1.5rem;
  padding:.2em 1.1em; border-radius:999px; box-shadow:0 8px 18px rgba(170,15,85,.22);
  opacity:0; pointer-events:none; transition:opacity .4s ease .7s; }
.reveal.open .reclose{ opacity:1; pointer-events:auto; }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
section.block{ position:relative; padding:clamp(70px,10vh,130px) 0; }
.sec-head{ text-align:center; margin-bottom:clamp(36px,6vh,68px); }
.sec-title{ font-size:clamp(2.2rem,6vw,4.4rem); color:var(--plum); margin:.12em 0 .1em; }
.sec-title em{ font-style:normal; color:var(--hot); }
.sec-desc{ font-size:clamp(1rem,1.8vw,1.25rem); color:var(--plum-soft); max-width:54ch; margin:0 auto; }

/* reveal-on-scroll */
.fx{ opacity:0; transform:translateY(38px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.fx.in{ opacity:1; transform:none; }

/* ============================================================
   STATS
   ============================================================ */
.stats-sec{ background:
   radial-gradient(120% 80% at 50% 0,#fff0f8 0,transparent 60%),
   linear-gradient(180deg,#ffd6ec,#ffe8f4); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px); }
.stat{
  background:var(--cream); border:3px solid #fff; border-radius:30px;
  padding:clamp(22px,3vw,40px) 18px; text-align:center;
  box-shadow:0 10px 0 rgba(255,31,122,.12), 0 22px 40px rgba(255,63,154,.16);
  position:relative;
}
.stat .num{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:clamp(2.2rem,5vw,4rem); color:var(--hot); line-height:1; }
.stat .lbl{ font-weight:700; color:var(--plum-soft); margin-top:.5em; font-size:clamp(.85rem,1.4vw,1.05rem); }
@media(max-width:840px){ .stat-grid{ grid-template-columns:repeat(2,1fr);} }

/* ============================================================
   BLOG / SOCIAL
   ============================================================ */
.social-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(16px,2vw,26px); align-items:stretch; }
@media(max-width:900px){ .social-grid{ grid-template-columns:1fr 1fr;} .social-card.tall{ grid-column:1/-1;} }
@media(max-width:560px){ .social-grid{ grid-template-columns:1fr;} }
.social-card{
  position:relative; border-radius:34px; overflow:hidden; color:#fff;
  background:#ff89c6; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end;
  border:5px solid #fff;
  box-shadow:0 18px 40px rgba(170,15,85,.28);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.social-card:hover{ transform:translateY(-10px) rotate(-1deg) scale(1.01); box-shadow:0 30px 56px rgba(170,15,85,.36); }
.social-card .ph{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; z-index:0; filter:saturate(1.15); }
.social-card .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 30%, rgba(60,8,40,.72) 100%); }
.social-card .body{ position:relative; z-index:2; padding:clamp(18px,2.4vw,30px); }
.social-card .plat{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:clamp(1.4rem,2.6vw,2rem); display:flex; align-items:center; gap:.4em; }
.social-card .handle{ font-weight:700; opacity:.92; }
.social-card .meta{ margin-top:.3em; font-weight:700; color:var(--gold); }
.social-card.tall{ min-height:440px; }
.social-card .go{ position:absolute; top:18px; right:18px; z-index:2; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--hot); display:grid; place-items:center; font-size:1.3rem; box-shadow:0 8px 18px rgba(0,0,0,.18); transition:transform .3s; }
.social-card:hover .go{ transform:rotate(45deg) scale(1.08); }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ background:linear-gradient(180deg,#ffe8f4,#ffd0e8); }
.polaroids{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,28px); }
@media(max-width:980px){ .polaroids{ grid-template-columns:repeat(2,1fr);} }
.polaroid{
  background:#fff; padding:12px 12px 54px; border-radius:14px;
  box-shadow:0 16px 36px rgba(170,15,85,.22);
  transform:rotate(var(--rot,0deg));
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.polaroid:hover{ transform:rotate(0deg) translateY(-12px) scale(1.03); box-shadow:0 30px 60px rgba(170,15,85,.34); z-index:5; }
.polaroid .pic{ border-radius:6px; overflow:hidden; aspect-ratio:3/4; background:#ffd9ec; }
.polaroid .pic img{ width:100%; height:100%; object-fit:cover; }
.polaroid .cap{ font-family:"Caveat",cursive; font-size:1.5rem; text-align:center; color:var(--plum); margin-top:10px; line-height:1; }

/* ============================================================
   MOTION POS
   ============================================================ */
.motion-sec{ background:linear-gradient(180deg,#ffd0e8,#ffbfe0); }
.motion-card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0; align-items:stretch;
  background:var(--cream); border:5px solid #fff; border-radius:40px; overflow:hidden;
  box-shadow:0 26px 56px rgba(170,15,85,.26);
}
@media(max-width:860px){ .motion-card{ grid-template-columns:1fr;} }
.motion-card .copy{ padding:clamp(28px,4vw,56px); }
.motion-card .copy h3{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:clamp(1.8rem,4vw,3rem); margin:.1em 0 .3em; color:var(--plum); }
.motion-card .copy p{ font-size:clamp(1rem,1.6vw,1.18rem); color:var(--plum-soft); line-height:1.55; }
.btn{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.4em;
  font-family:"Baloo 2",sans-serif; font-weight:600; font-size:1.05rem;
  background:var(--hot); color:#fff; padding:.8em 1.6em; border-radius:999px;
  box-shadow:0 8px 0 #c01266, 0 16px 30px rgba(255,31,122,.3);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 11px 0 #c01266, 0 22px 36px rgba(255,31,122,.36); }
.btn:active{ transform:translateY(4px); box-shadow:0 4px 0 #c01266; }
.motion-card .visual{
  position:relative; min-height:320px; overflow:hidden;
  background:linear-gradient(135deg,#ff5fb0,#b97bff);
  display:grid; place-items:center; padding:24px;
}
/* faux phone POS mock */
.pos-phone{ width:min(78%,260px); aspect-ratio:9/19; background:#2a0a22; border-radius:34px; padding:12px; box-shadow:0 20px 50px rgba(0,0,0,.32); transform:rotate(-6deg); }
.pos-screen{ width:100%; height:100%; background:#fff; border-radius:24px; overflow:hidden; display:flex; flex-direction:column; }
.pos-screen .top{ background:var(--hot); color:#fff; padding:14px 14px 18px; font-family:"Baloo 2",sans-serif; font-weight:700; }
.pos-screen .top small{ display:block; font-weight:600; opacity:.85; font-size:.7rem; }
.pos-rows{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.pos-row{ display:flex; justify-content:space-between; align-items:center; background:#fff0f8; border-radius:12px; padding:9px 11px; font-size:.74rem; font-weight:700; color:var(--plum); }
.pos-row .price{ color:var(--hot); }
.pos-total{ margin-top:auto; background:#fff0f8; padding:12px; display:flex; justify-content:space-between; font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--plum); border-top:2px dashed #ffb7dd; }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{
  background:linear-gradient(180deg,#ffbfe0,#ff8ac6);
  text-align:center; color:#fff;
}
.contact .sec-title{ color:#fff; }
.contact .sec-title em{ color:var(--gold); }
.contact-links{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
.chip-link{
  display:inline-flex; align-items:center; gap:.55em;
  background:#fff; color:var(--hot); font-family:"Baloo 2",sans-serif; font-weight:600;
  padding:.85em 1.5em; border-radius:999px; font-size:1.05rem;
  box-shadow:0 10px 0 rgba(180,10,80,.18), 0 18px 30px rgba(170,15,85,.25);
  transition:transform .15s;
}
.chip-link:hover{ transform:translateY(-4px) scale(1.04); }
footer{ background:#3c1230; color:#ffd6ec; text-align:center; padding:34px 0; font-family:"Baloo 2",sans-serif; }
footer .big{ font-size:clamp(1.6rem,5vw,2.6rem); color:#fff; }
footer small{ display:block; margin-top:.6em; opacity:.7; font-family:"Nunito",sans-serif; }

/* floating candies */
.candy-float{ position:absolute; z-index:0; pointer-events:none; opacity:.85; animation:floaty 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .fx{ opacity:1; transform:none; }
}

/* nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px clamp(16px,4vw,40px);
  transition:background .3s, box-shadow .3s, padding .3s;
}
.nav.solid{ background:rgba(255,246,251,.86); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(170,15,85,.14); }
.nav .brand{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--hot); font-size:1.3rem; letter-spacing:.02em; }
.nav .links{ display:flex; gap:8px; }
.nav .links a{ font-family:"Baloo 2",sans-serif; font-weight:500; color:var(--plum); padding:.5em .9em; border-radius:999px; transition:background .2s,color .2s; font-size:.98rem; }
.nav .links a:hover{ background:var(--hot); color:#fff; }
@media(max-width:680px){ .nav .links{ display:none; } }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
#tweaks{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:268px; background:var(--cream); border:3px solid #fff; border-radius:24px;
  box-shadow:0 18px 50px rgba(120,10,60,.32); padding:18px;
  font-family:"Nunito",sans-serif; display:none;
}
#tweaks.show{ display:block; }
#tweaks h4{ font-family:"Baloo 2",sans-serif; margin:0 0 2px; color:var(--hot); font-size:1.15rem; }
#tweaks .tw-sub{ font-size:.78rem; color:var(--plum-soft); margin-bottom:14px; }
#tweaks .tw-close{ position:absolute; top:12px; right:14px; border:none; background:none; font-size:1.2rem; color:var(--plum-soft); cursor:pointer; line-height:1; }
#tweaks .tw-label{ font-family:"Baloo 2",sans-serif; font-weight:600; font-size:.82rem; color:var(--plum); margin:14px 0 7px; }
.tw-swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tw-sw{ aspect-ratio:1/1; border-radius:12px; border:3px solid #fff; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.12); transition:transform .15s; outline:0 solid transparent; }
.tw-sw:hover{ transform:scale(1.08); }
.tw-sw.active{ outline:3px solid var(--plum); outline-offset:2px; }
.tw-toggle{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.tw-switch{ width:44px; height:26px; border-radius:999px; background:#e7c4d8; position:relative; transition:background .2s; flex:none; }
.tw-switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.tw-toggle.on .tw-switch{ background:var(--hot); }
.tw-toggle.on .tw-switch::after{ transform:translateX(18px); }

/* ============================================================
   MASCOT — cartoon Basia + dog on a donut, follows on scroll
   ============================================================ */
.mascot{
  position:fixed; left:20px; bottom:16px; z-index:48;
  width:172px; cursor:pointer; user-select:none;
  opacity:0; transform:translateY(40px) scale(.85);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.mascot.show{ opacity:1; transform:none; }
.mascot:hover{ transform:translateY(-4px) scale(1.04); }
.mascot-stack{ position:relative; animation:mascotBob 3.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes mascotBob{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-9px) rotate(2deg);} }
.mascot.walking .mascot-stack{ animation-duration:.7s; }
.m-donut{ width:172px; height:auto; display:block; filter:drop-shadow(0 10px 14px rgba(170,15,85,.32)); }
.m-photo{
  position:absolute; left:50%; bottom:62px; transform:translateX(-50%);
  width:118px; z-index:2;
}
.m-photo img{ width:100%; height:auto; }
.m-bubble{
  position:absolute; bottom:152px; left:54%; transform:translateX(-50%) scale(.5);
  background:#fff; color:var(--hot); font-family:"Caveat",cursive; font-weight:700; font-size:1.25rem;
  padding:6px 14px; border-radius:16px; white-space:nowrap; opacity:0; pointer-events:none;
  box-shadow:0 8px 18px rgba(170,15,85,.25); border:2px solid var(--bubblegum);
  transition:opacity .3s, transform .3s; transform-origin:bottom center; z-index:3;
}
.m-bubble::after{ content:""; position:absolute; bottom:-9px; left:42%; width:14px; height:14px; background:#fff; border-right:2px solid var(--bubblegum); border-bottom:2px solid var(--bubblegum); transform:rotate(45deg); }
.mascot.talk .m-bubble{ opacity:1; transform:translateX(-50%) scale(1); }
@media(max-width:640px){ .mascot{ width:128px; left:12px; bottom:10px; } .m-donut{ width:128px; } .m-photo{ width:88px; bottom:46px; } .m-bubble{ bottom:112px; font-size:1.05rem; } }
@media(prefers-reduced-motion: reduce){ .mascot-stack{ animation:none; } }