@font-face {
  font-family: 'Birthday Sans';
  src: url('../fonts/birthday-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Birthday Pixel';
  src: url('../fonts/birthday-pixel-zh.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.intro.birthday-intro {
  position: relative;
  z-index: 5100;
  height: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 54px 0 86px;
  margin-bottom: 20vh;
  background: #000;
  color: #fff;
  font-family: 'Birthday Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
.birthday-title { width: 100%; margin: 0; font-family:'Pixelify Sans','Birthday Pixel',sans-serif; font-size:clamp(72px,9.2vw,132px); font-weight:400; font-synthesis:none; line-height:1.45; letter-spacing:.06em; text-align:center; }
.birthday-title #name-row { letter-spacing:.10em; }
.birthday-title #birthday-row { font-size:.88em; letter-spacing:.035em; }
.birthday-kicker { margin:0 20px 26px; color:#999; font-size:12px; letter-spacing:.18em; }
.birthday-intro .words { display:flex; position:relative; align-items:center; justify-content:center; min-height:1.42em; touch-action:pan-y pinch-zoom; outline:none; }
.birthday-intro .words:focus-visible::after { content:''; position:absolute; left:calc(50% - 10px); bottom:-5px; width:20px; height:2px; background:#777; }
.birthday-intro .glyphs,.birthday-intro .hit-layer { display:flex; align-items:center; justify-content:center; }
.birthday-intro .glyphs { pointer-events:none; }
.birthday-intro .letter { display:inline-grid; position:relative; align-items:center; flex-shrink:0; height:1.1em; padding-inline:.025em; transition:padding-inline .3s cubic-bezier(.22,1,.36,1); }
.birthday-intro .character { grid-area:1/1; justify-self:center; line-height:1; }
.birthday-intro .letter[data-sticker] .character { visibility:hidden; }
.birthday-intro .hit-layer { position:absolute; inset:0; z-index:3; color:transparent; pointer-events:none; user-select:none; }
.birthday-intro .hit { display:inline-flex; align-items:center; flex-shrink:0; height:1.4em; padding-inline:.025em; line-height:1; pointer-events:auto; cursor:default; }
.birthday-intro .sticker-motion { position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:1; pointer-events:none; will-change:transform,opacity; }
.birthday-intro .sticker { display:block; width:auto; height:var(--asset-height,1.42em); max-width:1.64em; object-fit:contain; user-select:none; }
.birthday-note { margin:24px 20px 0; color:#929292; font-size:13px; line-height:1.8; letter-spacing:.04em; }
.birthday-instruction { margin:8px 20px 0; color:#757575; font-size:11px; line-height:1.8; }
.birthday-signoff { font-size:clamp(1rem,3.2vw,2rem); color:#aaa; }
.birthday-intro .touch-hint { display:none; }
.birthday-scroll { position:absolute; bottom:22px; color:#929292; font-size:12px; letter-spacing:.04em; }
.birthday-scroll:hover { color:#fff; }
.birthday-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:767px) {
  .intro.birthday-intro { min-height:100svh; padding:44px 0 84px; }
  .birthday-title { font-size:clamp(48px,14vw,84px); line-height:1.6; }
  .birthday-intro .words { min-height:1.6em; }
  .birthday-note { font-size:12px; }
}
@media(hover:none) { .birthday-intro .mouse-hint { display:none; } .birthday-intro .touch-hint { display:inline; } }
@media(prefers-reduced-motion:reduce) { .birthday-intro .letter { transition:none; } .birthday-intro .sticker-motion { will-change:auto; } }