:root{
  --cream: #f7f0e7;
  --cream-deep: #efe2d0;
  --coral: #f2a182;
  --coral-deep: #ec8a63;
  --ink: #1c1712;
  --paper: #fbf5ec;

  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-text: "Manrope", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100svh;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-text);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:9vh 20px 10vh;
  position:relative;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: no-preference){
  body{ background-image: radial-gradient(circle at 18% 12%, var(--cream-deep) 0%, transparent 42%); }
}

/* film-grain texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---- card ---- */
.card{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:1;
}

.mascot-wrap{
  width:min(78vw, 300px);
  margin-bottom:28px;
}

.about-text{
  width:100%;
  max-width:460px;
  margin-bottom:32px;
}
.about-text p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  text-align:center;
}
.about-text p:last-child{ margin-bottom:0; }
.mascot{
  display:block;
  width:100%;
  height:auto;
}
@media (prefers-reduced-motion: no-preference){
  .mascot-wrap{ animation: bob 3.2s ease-in-out infinite; transform-origin:50% 85%; }
}
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-4px) rotate(-1.4deg); }
  50%{ transform: translateY(-10px) rotate(0deg); }
  75%{ transform: translateY(-4px) rotate(1.4deg); }
}
.mascot-wrap.pulse{ animation: squash .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes squash{
  0%{ transform: scale(1,1); }
  35%{ transform: scale(1.08,.88) translateY(6px); }
  65%{ transform: scale(.95,1.06) translateY(-4px); }
  100%{ transform: scale(1,1); }
}

/* ---- icon links ---- */
.icon-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-bottom:32px;
}

.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  flex:none;
  background:var(--coral);
  border:2.5px solid var(--ink);
  border-radius:16px;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.icon-btn svg{
  width:24px;
  height:24px;
}
.icon-btn[aria-label="Telegram"] svg{
  transform: translate(-1.5px, -1px);
}

@media (hover:hover){
  .icon-btn:hover{
    transform: translate(-2px,-2px) rotate(-6deg);
    box-shadow: 3px 4px 0 var(--ink);
  }
}
.record-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:316px;
  max-width:100%;
  padding:15px 0;
  background:var(--coral);
  border:2.5px solid var(--ink);
  border-radius:16px;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  letter-spacing:.02em;
  cursor:pointer;
  overflow:hidden;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
@media (hover:hover){
  .record-btn:hover{
    transform: translate(-2px,-2px);
    box-shadow: 3px 4px 0 var(--ink);
  }
}
.record-btn:active{
  transform: translate(0,1px);
  box-shadow:none;
}
.record-btn:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}

/* periodic shine sweep */
.record-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:40%;
  height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.75), transparent);
  pointer-events:none;
}
.record-btn::after{
  animation: shine 2.6s ease-in-out infinite;
}
@keyframes shine{
  0%, 40%{ left:-60%; }
  75%, 100%{ left:130%; }
}

.icon-btn:active{
  transform: translate(0,1px) rotate(0deg);
  box-shadow:none;
}
.icon-btn:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}

.foot{
  margin-top:40px;
  font-size:13px;
  color:var(--ink);
  opacity:.45;
  font-family:var(--font-text);
  font-weight:700;
  letter-spacing:.02em;
}