html[data-profile-theme="birthday"] {
  --sky-50: #fff9fc;
  --sky-100: #fff0f6;
  --sky-200: #ffdfec;
  --sky-300: #ffc6dc;
  --sky-400: #ff9ec3;
  --sky-500: #f678a9;
  --sky-600: #d94f88;
  --ink: #63364b;
  --ink-soft: #8d6174;
  --line: rgba(225, 111, 157, 0.3);
  --paper: rgba(255, 251, 253, 0.84);
  --paper-strong: rgba(255, 255, 255, 0.96);
  --shadow: 0 24px 70px rgba(196, 77, 127, 0.16);
}

html[data-profile-theme="birthday"] body {
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.98), transparent 24rem),
    radial-gradient(circle at 88% 16%, rgba(255, 183, 214, 0.42), transparent 30rem),
    radial-gradient(circle at 48% 72%, rgba(255, 226, 154, 0.23), transparent 27rem),
    linear-gradient(155deg, #fffdfd 0%, #fff0f6 48%, #ffdcea 100%);
}

html[data-profile-theme="birthday"] body::before {
  background-image:
    radial-gradient(circle, rgba(242, 113, 166, 0.14) 1.3px, transparent 1.5px),
    linear-gradient(rgba(231, 113, 161, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 113, 161, 0.045) 1px, transparent 1px);
  background-position: 0 0, 0 0, 0 0;
  background-size: 26px 26px, 52px 52px, 52px 52px;
}

html[data-profile-theme="birthday"] .profile-header {
  border-bottom-color: rgba(228, 116, 161, 0.28);
  background: rgba(255, 249, 252, 0.8);
  box-shadow: 0 8px 32px rgba(190, 74, 122, 0.09);
}

html[data-profile-theme="birthday"] .profile-brand small,
html[data-profile-theme="birthday"] .scene-label,
html[data-profile-theme="birthday"] .section-label,
html[data-profile-theme="birthday"] .page-title em {
  color: #e45f97;
}

html[data-profile-theme="birthday"] .page-title {
  color: #75374f;
}

html[data-profile-theme="birthday"] .profile-nav a span,
html[data-profile-theme="birthday"] .profile-footer {
  color: #c987a2;
}

html[data-profile-theme="birthday"] .profile-nav a::after {
  background: linear-gradient(90deg, #f36f9f, #f4c25d);
}

html[data-profile-theme="birthday"] .hero-photo {
  border-color: rgba(225, 103, 151, 0.34);
  background: #ffe3ed;
}

html[data-profile-theme="birthday"] .hero-photo::after {
  background: linear-gradient(180deg, transparent 42%, rgba(106, 39, 67, 0.32));
}

html[data-profile-theme="birthday"] .hero-quote {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 247, 251, 0.84);
  box-shadow: 0 16px 40px rgba(158, 51, 96, 0.2);
  color: #7b3451;
  max-width: calc(100% - 28px);
  padding: 14px 18px;
  font-size: clamp(9px, 1.55vw, 21px);
  white-space: nowrap;
  overflow-wrap: normal;
}

html[data-profile-theme="birthday"] .paper-card,
html[data-profile-theme="birthday"] .external-link,
html[data-profile-theme="birthday"] .week-day,
html[data-profile-theme="birthday"] .lookbook-card,
html[data-profile-theme="birthday"] .signature-card {
  box-shadow: 0 20px 54px rgba(190, 75, 122, 0.11);
}

html[data-profile-theme="birthday"] .tag,
html[data-profile-theme="birthday"] .category-tab,
html[data-profile-theme="birthday"] .filter-tab,
html[data-profile-theme="birthday"] .search-input,
html[data-profile-theme="birthday"] .toolbar button {
  border-color: rgba(226, 111, 157, 0.31);
}

html[data-profile-theme="birthday"] .site-loader {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.98), rgba(255, 226, 239, 0.98));
}

html[data-profile-theme="birthday"] .site-loader__heart {
  color: #ed6e9f;
  filter: drop-shadow(0 5px 12px rgba(211, 70, 128, 0.2));
}

html[data-profile-theme="birthday"] .site-loader__text {
  color: #b2567c;
}

html[data-profile-theme="birthday"] .profile-music {
  border-color: rgba(224, 104, 152, 0.38);
  background: rgba(255, 248, 251, 0.92);
  box-shadow: 0 14px 38px rgba(182, 62, 110, 0.18);
}

html[data-profile-theme="birthday"] .profile-music__disc {
  background: linear-gradient(145deg, #f676aa, #ffd4e5 70%, #f4c65f);
}

html[data-profile-theme="birthday"] .profile-music__copy strong {
  color: #ac476f;
}

html[data-profile-theme="birthday"] .profile-music__copy span {
  color: #c2819b;
}

html[data-profile-theme="birthday"] .profile-music__button {
  background: #ffebf3;
  color: #c84f7e;
}

html[data-profile-theme="birthday"] .profile-music__button:hover {
  background: #ffdae9;
}

html[data-profile-theme="birthday"] .profile-music.is-playing .profile-music__toggle {
  background: #e96598;
  color: #fff;
}

/* Recolor the shared profile surfaces without changing their layout or category meaning. */
html[data-profile-theme="birthday"] .page-intro::after,
html[data-profile-theme="birthday"] .menu-tile::before {
  color: rgba(230, 91, 148, 0.1);
}

html[data-profile-theme="birthday"] .archive-home,
html[data-profile-theme="birthday"] .text-link,
html[data-profile-theme="birthday"] .soft-button,
html[data-profile-theme="birthday"] .upcoming-date,
html[data-profile-theme="birthday"] .event-detail__date,
html[data-profile-theme="birthday"] .collab-event-item__date,
html[data-profile-theme="birthday"] .signature-list-count {
  color: #b84e79;
}

html[data-profile-theme="birthday"] .archive-home:hover,
html[data-profile-theme="birthday"] .menu-tile:hover,
html[data-profile-theme="birthday"] .external-link:hover,
html[data-profile-theme="birthday"] .lookbook-item:hover,
html[data-profile-theme="birthday"] .karma-shortcut:hover,
html[data-profile-theme="birthday"] .signature-card:hover {
  box-shadow: 0 22px 52px rgba(185, 63, 112, 0.17);
}

html[data-profile-theme="birthday"] .cast-avatar {
  box-shadow: 0 16px 36px rgba(188, 64, 114, 0.18);
}

html[data-profile-theme="birthday"] .cast-avatar::after {
  color: #e7689b;
  content: "🎁";
  font-size: 23px;
}

html[data-profile-theme="birthday"] .cast-name-en,
html[data-profile-theme="birthday"] .fact-row dt,
html[data-profile-theme="birthday"] .showtime-day strong,
html[data-profile-theme="birthday"] .weekly-schedule-range,
html[data-profile-theme="birthday"] .week-event span,
html[data-profile-theme="birthday"] .week-day__empty,
html[data-profile-theme="birthday"] .closet-category-bar > p,
html[data-profile-theme="birthday"] .lookbook-copy p,
html[data-profile-theme="birthday"] .karma-hint,
html[data-profile-theme="birthday"] .updated-label {
  color: #a9778b;
}

html[data-profile-theme="birthday"] .fact-row dd,
html[data-profile-theme="birthday"] .story-card h2,
html[data-profile-theme="birthday"] .content-card h2,
html[data-profile-theme="birthday"] .section-heading h2,
html[data-profile-theme="birthday"] .showtime-day span,
html[data-profile-theme="birthday"] .week-day__head strong,
html[data-profile-theme="birthday"] .week-event strong,
html[data-profile-theme="birthday"] .upcoming-title,
html[data-profile-theme="birthday"] .karma-shortcut__copy strong,
html[data-profile-theme="birthday"] .karma-item strong,
html[data-profile-theme="birthday"] .signature-list-count strong,
html[data-profile-theme="birthday"] .signature-card__amount {
  color: #704056;
}

html[data-profile-theme="birthday"] .tag,
html[data-profile-theme="birthday"] .lookbook-badge,
html[data-profile-theme="birthday"] .schedule-chip {
  border-color: rgba(226, 111, 157, 0.3);
  background: rgba(255, 236, 244, 0.9);
  color: #a94b72;
}

html[data-profile-theme="birthday"] .anniversary-card {
  background:
    radial-gradient(circle at 87% 10%, rgba(255, 255, 255, 0.96) 0 58px, transparent 59px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 222, 235, 0.9) 58%, rgba(255, 240, 201, 0.84));
}

html[data-profile-theme="birthday"] .anniversary-card::before {
  border-color: rgba(222, 93, 145, 0.2);
}

html[data-profile-theme="birthday"] .anniversary-kicker,
html[data-profile-theme="birthday"] .anniversary-progress-meta,
html[data-profile-theme="birthday"] .anniversary-card__count > span,
html[data-profile-theme="birthday"] .anniversary-card__count time,
html[data-profile-theme="birthday"] .anniversary-message,
html[data-profile-theme="birthday"] .anniversary-milestone time {
  color: #a56f84;
}

html[data-profile-theme="birthday"] .anniversary-card h2,
html[data-profile-theme="birthday"] .anniversary-milestone strong {
  color: #744056;
}

html[data-profile-theme="birthday"] .anniversary-progress span {
  background: linear-gradient(90deg, #f471a4, #f698ba 64%, #f3c463);
  box-shadow: 0 0 14px rgba(226, 95, 150, 0.38);
}

html[data-profile-theme="birthday"] .anniversary-card__count {
  border-left-color: rgba(208, 84, 135, 0.22);
}

html[data-profile-theme="birthday"] .anniversary-card__count strong,
html[data-profile-theme="birthday"] .anniversary-card__count em {
  color: #c34f7d;
}

html[data-profile-theme="birthday"] .anniversary-milestone[data-state="selected"] {
  border-color: rgba(222, 93, 145, 0.48);
  background: linear-gradient(135deg, rgba(255, 229, 239, 0.96), rgba(255, 246, 217, 0.94));
  box-shadow: 0 11px 24px rgba(185, 65, 113, 0.13);
}

html[data-profile-theme="birthday"] .anniversary-milestone[data-state="selected"]::after {
  color: #d35888;
}

html[data-profile-theme="birthday"] .week-day,
html[data-profile-theme="birthday"] .calendar-scroll,
html[data-profile-theme="birthday"] .calendar-day,
html[data-profile-theme="birthday"] .closet-category-tabs,
html[data-profile-theme="birthday"] .closet-toolbar {
  border-color: rgba(223, 104, 153, 0.25);
  background: rgba(255, 250, 252, 0.76);
}

html[data-profile-theme="birthday"] .week-day.is-today {
  border-color: rgba(220, 83, 138, 0.54);
  background: linear-gradient(165deg, rgba(255, 216, 232, 0.94), rgba(255, 255, 255, 0.94));
}

html[data-profile-theme="birthday"] .week-day.is-today .week-day__head span,
html[data-profile-theme="birthday"] .is-today .calendar-date,
html[data-profile-theme="birthday"] .closet-category-tab.is-active strong {
  background: #e9699b;
}

html[data-profile-theme="birthday"] .primary-button {
  background: linear-gradient(135deg, #ef78a6, #d95489);
  box-shadow: 0 12px 28px rgba(204, 74, 126, 0.24);
}

html[data-profile-theme="birthday"] .search-field::placeholder,
html[data-profile-theme="birthday"] .calendar-weekday,
html[data-profile-theme="birthday"] .calendar-month span,
html[data-profile-theme="birthday"] .calendar-date,
html[data-profile-theme="birthday"] .schedule-search-control__icon,
html[data-profile-theme="birthday"] .closet-search-control > span {
  color: #b27b91;
}

html[data-profile-theme="birthday"] .collab-members-button {
  border-color: rgba(220, 99, 149, 0.36);
  background: linear-gradient(135deg, rgba(255, 229, 239, 0.95), rgba(255, 244, 210, 0.9));
  color: #a54d72;
  box-shadow: 0 10px 24px rgba(182, 64, 111, 0.11);
}

html[data-profile-theme="birthday"] .collab-members-button span {
  color: #df6797;
}

html[data-profile-theme="birthday"] .calendar-day.is-other {
  background: rgba(255, 232, 241, 0.45);
}

html[data-profile-theme="birthday"] .calendar-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(222, 91, 144, 0.48);
}

html[data-profile-theme="birthday"] .closet-category-tab {
  color: #a06e83;
}

html[data-profile-theme="birthday"] .closet-category-tab strong {
  background: rgba(255, 221, 234, 0.88);
  color: #bf527d;
}

html[data-profile-theme="birthday"] .closet-category-tab:hover,
html[data-profile-theme="birthday"] .closet-category-tab.is-active {
  color: #a3446b;
}

html[data-profile-theme="birthday"] .closet-category-tab.is-active {
  border-color: rgba(221, 96, 146, 0.38);
  background: linear-gradient(135deg, rgba(255, 226, 237, 0.98), rgba(255, 245, 212, 0.94));
  box-shadow: 0 8px 20px rgba(184, 65, 112, 0.12);
}

html[data-profile-theme="birthday"] .lookbook-media,
html[data-profile-theme="birthday"] .modal-dialog__image {
  background: linear-gradient(145deg, #ffe8f1, #fffdfd);
}

html[data-profile-theme="birthday"] .lookbook-category-mark,
html[data-profile-theme="birthday"] .lookbook-badge--outfit {
  background: rgba(255, 226, 237, 0.93);
  color: #ab4770;
}

html[data-profile-theme="birthday"] .modal-dialog,
html[data-profile-theme="birthday"] .event-detail-dialog {
  border-color: rgba(222, 101, 150, 0.34);
  background: #fffafd;
  box-shadow: 0 32px 90px rgba(122, 44, 76, 0.28);
}

html[data-profile-theme="birthday"] .modal-dialog::backdrop,
html[data-profile-theme="birthday"] .event-detail-layer {
  background: rgba(105, 39, 66, 0.26);
}

html[data-profile-theme="birthday"] .lookbook-detail-description,
html[data-profile-theme="birthday"] .collab-member-summary {
  border-color: rgba(222, 101, 150, 0.25);
  background: linear-gradient(135deg, rgba(255, 231, 240, 0.82), rgba(255, 246, 215, 0.72));
  color: #86566a !important;
}

html[data-profile-theme="birthday"] .lookbook-gallery__nav,
html[data-profile-theme="birthday"] .lookbook-gallery__thumb {
  border-color: rgba(222, 101, 150, 0.3);
  color: #b64b76;
}

html[data-profile-theme="birthday"] .lookbook-gallery__thumb:hover,
html[data-profile-theme="birthday"] .lookbook-gallery__thumb.is-active {
  border-color: #e66a9b;
  box-shadow: 0 0 0 2px rgba(226, 97, 150, 0.18);
}

html[data-profile-theme="birthday"] .event-detail__section h3,
html[data-profile-theme="birthday"] .collab-member-summary > strong,
html[data-profile-theme="birthday"] .lookbook-detail-label,
html[data-profile-theme="birthday"] .lookbook-detail-note h3 {
  color: #9f647b !important;
}

html[data-profile-theme="birthday"] .event-detail__section p,
html[data-profile-theme="birthday"] .collab-event-item__body > strong,
html[data-profile-theme="birthday"] .lookbook-detail-note p {
  color: #754b5d;
}

html[data-profile-theme="birthday"] .karma-shortcut__icon {
  border-color: rgba(221, 96, 146, 0.31);
  background: linear-gradient(145deg, #ffeaf2, #ffd3e3);
  color: #ba4c78;
}

html[data-profile-theme="birthday"] .karma-shortcut--roulette .karma-shortcut__icon {
  border-color: rgba(225, 170, 72, 0.32);
  background: linear-gradient(145deg, #fff8df, #ffe7a9);
  color: #b17b25;
}

html[data-profile-theme="birthday"] .karma-item {
  border-color: rgba(221, 101, 150, 0.24);
  background: rgba(255, 232, 241, 0.64);
}

html[data-profile-theme="birthday"] .signature-card {
  --signature-accent: #e66d9e;
  --signature-soft: #ffe2ed;
}

html[data-profile-theme="birthday"] .signature-card[data-tone="aqua"] {
  --signature-accent: #e2779f;
  --signature-soft: #ffe4ed;
}

html[data-profile-theme="birthday"] .signature-card[data-tone="blue"] {
  --signature-accent: #ee87ac;
  --signature-soft: #ffe8f0;
}

html[data-profile-theme="birthday"] .signature-card[data-tone="lilac"] {
  --signature-accent: #c983ca;
  --signature-soft: #f9e6fa;
}

html[data-profile-theme="birthday"] .signature-card[data-tone="star"] {
  --signature-accent: #dea847;
  --signature-soft: #fff1cf;
}

html[data-profile-theme="birthday"] .signature-card[data-tone="moon"] {
  --signature-accent: #d66f9d;
  --signature-soft: #fbe1ed;
}

/* Birthday gift rain */
.falling-gift {
  --gift-main: #ff8fba;
  --gift-dark: #dd5b8f;
  --gift-ribbon: #ffe28a;
  position: absolute;
  top: -16vh;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * 0.82);
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 4px 4px 6px 6px;
  background:
    linear-gradient(90deg, transparent 39%, var(--gift-ribbon) 40% 60%, transparent 61%),
    linear-gradient(145deg, var(--gift-main), var(--gift-dark));
  box-shadow: 0 5px 12px rgba(165, 57, 104, 0.2);
  opacity: var(--opacity);
  animation: birthday-gift-fall var(--duration) linear var(--delay) infinite;
}

.falling-gift::before {
  position: absolute;
  top: -20%;
  right: -8%;
  left: -8%;
  height: 25%;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(90deg, transparent 40%, var(--gift-ribbon) 41% 59%, transparent 60%),
    var(--gift-main);
  content: "";
}

.falling-gift::after {
  position: absolute;
  top: -48%;
  left: 50%;
  width: 52%;
  height: 36%;
  transform: translateX(-50%);
  border: calc(var(--size) * 0.09) solid var(--gift-ribbon);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  content: "";
}

.falling-gift:nth-child(3n + 2) {
  --gift-main: #ffd36f;
  --gift-dark: #edae43;
  --gift-ribbon: #ff7eae;
}

.falling-gift:nth-child(4n) {
  --gift-main: #fff7fb;
  --gift-dark: #ffd2e3;
  --gift-ribbon: #ee6b9e;
}

@keyframes birthday-gift-fall {
  from {
    transform: translate3d(0, -16vh, 0) rotate(-16deg);
  }

  50% {
    transform: translate3d(calc(var(--drift) * 0.45), 54vh, 0) rotate(360deg);
  }

  to {
    transform: translate3d(var(--drift), 120vh, 0) rotate(735deg);
  }
}

/* Birthday pointer */
html[data-profile-theme="birthday"] .mumu-pointer {
  width: 62px;
  height: 62px;
}

html[data-profile-theme="birthday"] .mumu-pointer__arrow {
  background: linear-gradient(135deg, #ffe3ee 0 42%, #f47ba9 43% 68%, #f4c457 69% 100%);
  filter: drop-shadow(0 0 1px #a93e69) drop-shadow(0 2px 2px rgba(123, 51, 82, 0.25));
}

.mumu-pointer__birthday-avatar {
  position: absolute;
  top: 9px;
  left: 8px;
  z-index: 2;
  width: 46px;
  height: 46px;
  transition: transform 150ms ease;
}

.mumu-pointer__portrait {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 46%;
  box-shadow: 0 0 0 2px #f17ca9, 0 5px 12px rgba(150, 52, 92, 0.26);
}

.mumu-pointer__party-hat {
  position: absolute;
  top: -18px;
  left: 17px;
  z-index: 4;
  width: 30px;
  height: 32px;
  transform: rotate(13deg);
  filter: drop-shadow(0 2px 1px rgba(119, 42, 73, 0.18));
}

.mumu-pointer__party-hat::before {
  position: absolute;
  inset: 0 1px 5px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(90deg, #f2649d 0 6px, #ffd970 6px 12px);
  content: "";
}

.mumu-pointer__party-hat::after {
  position: absolute;
  top: -4px;
  left: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #f38ab1;
  content: "";
}

.mumu-pointer__party-hat i {
  position: absolute;
  right: -1px;
  bottom: 2px;
  left: -1px;
  z-index: 2;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd66b, #fff0a9, #f7bd48);
}

html[data-profile-theme="birthday"] .mumu-pointer.is-active .mumu-pointer__birthday-avatar {
  transform: translate(1px, -1px) rotate(-6deg) scale(1.08);
}

.birthday-preview-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.birthday-replay-button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(225, 103, 151, 0.34);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 236, 244, 0.96), rgba(255, 247, 218, 0.92));
  box-shadow: 0 9px 22px rgba(180, 62, 109, 0.11);
  color: #a94a70;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.birthday-replay-button:hover {
  transform: translateY(-2px);
  background: #fff4f8;
  box-shadow: 0 12px 26px rgba(180, 62, 109, 0.16);
}

.profile-nav .profile-nav__birthday-replay {
  display: none;
}

html[data-profile-theme="birthday"] .profile-nav__birthday-letters {
  color: #bd4f7c;
}

html[data-profile-theme="birthday"] .profile-nav__birthday-letters span {
  color: #e46d9d;
}

.click-celebration {
  color: var(--particle-color, #f06b9f);
  text-shadow: 0 1px 0 #fff;
}

/* Full-screen birthday greeting */
.birthday-intro {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.76), transparent 21rem),
    linear-gradient(145deg, rgba(255, 238, 246, 0.98), rgba(255, 193, 218, 0.98));
  opacity: 1;
  visibility: visible;
  transition: opacity 480ms ease, visibility 480ms ease;
}

.birthday-intro.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.birthday-intro__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.birthday-intro__content {
  position: relative;
  z-index: 2;
  width: min(820px, calc(100% - 28px));
  padding: 58px 22px 34px;
  transform: translateY(24px);
  text-align: center;
}

.birthday-intro__gift {
  position: relative;
  width: 210px;
  height: 165px;
  margin: 0 auto 44px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 14px 14px 24px 24px;
  background:
    radial-gradient(circle at 14% 17%, rgba(255, 255, 255, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 30%, rgba(255, 244, 194, 0.56) 0 4px, transparent 5px),
    linear-gradient(112deg, rgba(255, 255, 255, 0.42), transparent 22% 72%, rgba(153, 37, 86, 0.12)),
    linear-gradient(145deg, #ff9fc4, #ed659c 58%, #d94984);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset -14px -14px 22px rgba(135, 37, 77, 0.1),
    0 30px 54px rgba(151, 42, 88, 0.3),
    0 0 0 8px rgba(255, 255, 255, 0.12);
  animation: birthday-gift-arrive 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.birthday-intro__gift::before {
  position: absolute;
  top: 13px;
  right: -19px;
  z-index: -1;
  width: 28px;
  height: 138px;
  transform: skewY(-18deg);
  border-radius: 0 12px 16px 0;
  background: linear-gradient(180deg, #e85a92, #c83b74);
  box-shadow: 8px 12px 20px rgba(122, 31, 68, 0.16);
  content: "";
}

.birthday-intro__gift::after {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 1;
  height: 22px;
  border-radius: 50%;
  background: rgba(133, 34, 76, 0.14);
  filter: blur(11px);
  content: "";
}

.birthday-intro__gift-glow {
  position: absolute;
  top: -114px;
  left: 50%;
  z-index: -1;
  width: 320px;
  height: 230px;
  transform: translateX(-50%) scale(0.45);
  background: radial-gradient(ellipse at center, rgba(255, 255, 235, 0.96), rgba(255, 221, 126, 0.48) 34%, transparent 70%);
  opacity: 0;
  filter: blur(2px);
  animation: birthday-gift-glow 1.2s 760ms ease-out forwards;
}

.birthday-intro__gift-shine {
  position: absolute;
  inset: 13px 15px 16px;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9px 9px 18px 18px;
  pointer-events: none;
}

.birthday-intro__gift-shine::before {
  position: absolute;
  top: -42px;
  left: -52px;
  width: 62px;
  height: 250px;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  content: "";
  animation: birthday-gift-shimmer 1.5s 220ms ease-out forwards;
}

.birthday-intro__gift-ribbon {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 41.5%;
  z-index: 3;
  width: 17%;
  border-right: 2px solid rgba(181, 117, 21, 0.18);
  border-left: 2px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(90deg, #efad31, #ffe783 36%, #fff2ac 54%, #e9a82f);
  box-shadow: 0 0 14px rgba(174, 103, 7, 0.16);
}

.birthday-intro__gift-lid {
  position: absolute;
  top: -30px;
  left: -14px;
  z-index: 5;
  width: 238px;
  height: 48px;
  transform-origin: 25px 42px;
  border: 2px solid rgba(255, 255, 255, 0.84);
  border-radius: 13px 13px 9px 9px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.44), transparent 28%),
    linear-gradient(180deg, #ffb2cf, #f178a7);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.54),
    0 11px 20px rgba(143, 39, 82, 0.22);
  animation: birthday-lid-open 900ms 720ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.birthday-intro__gift-lid::before {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 42%;
  width: 16%;
  border-right: 2px solid rgba(178, 111, 13, 0.14);
  border-left: 2px solid rgba(255, 255, 255, 0.44);
  background: linear-gradient(90deg, #efad31, #ffe783 42%, #e9a82f);
  content: "";
}

.birthday-intro__gift-lid::after {
  position: absolute;
  right: 4px;
  bottom: -9px;
  left: 4px;
  height: 9px;
  border-radius: 0 0 8px 8px;
  background: #dc538a;
  content: "";
}

.birthday-intro__gift-bow {
  position: absolute;
  top: -55px;
  left: 50%;
  width: 82px;
  height: 58px;
  transform: translateX(-50%);
}

.birthday-intro__gift-bow i {
  position: absolute;
  top: 9px;
  width: 48px;
  height: 36px;
  border: 11px solid #ffd65d;
  background: rgba(255, 250, 215, 0.52);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 5px 10px rgba(145, 87, 5, 0.16);
}

.birthday-intro__gift-bow i:first-child {
  left: -3px;
  transform: rotate(-27deg);
  border-radius: 58% 42% 48% 52%;
}

.birthday-intro__gift-bow i:nth-child(2) {
  right: -3px;
  transform: rotate(27deg);
  border-radius: 42% 58% 52% 48%;
}

.birthday-intro__gift-bow b {
  position: absolute;
  top: 19px;
  left: 50%;
  z-index: 2;
  width: 27px;
  height: 27px;
  transform: translateX(-50%) rotate(45deg);
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  background: linear-gradient(145deg, #fff09a, #eeb33e);
  box-shadow: 0 5px 11px rgba(140, 81, 4, 0.2);
}

.birthday-intro__gift-sparkles {
  position: absolute;
  inset: -100px -70px auto;
  z-index: 7;
  height: 150px;
  pointer-events: none;
}

.birthday-intro__gift-sparkles i {
  --spark-x: 0px;
  --spark-y: -74px;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, 0) rotate(45deg) scale(0.2);
  border-radius: 3px;
  background: #fff8c9;
  box-shadow: 0 0 16px #ffd663;
  opacity: 0;
  animation: birthday-gift-sparkle 1.15s 860ms ease-out forwards;
}

.birthday-intro__gift-sparkles i:nth-child(1) { --spark-x: -102px; --spark-y: -64px; }
.birthday-intro__gift-sparkles i:nth-child(2) { --spark-x: -62px; --spark-y: -118px; animation-delay: 940ms; }
.birthday-intro__gift-sparkles i:nth-child(3) { --spark-x: -18px; --spark-y: -142px; animation-delay: 820ms; }
.birthday-intro__gift-sparkles i:nth-child(4) { --spark-x: 38px; --spark-y: -132px; animation-delay: 900ms; }
.birthday-intro__gift-sparkles i:nth-child(5) { --spark-x: 78px; --spark-y: -94px; animation-delay: 980ms; }
.birthday-intro__gift-sparkles i:nth-child(6) { --spark-x: 112px; --spark-y: -52px; animation-delay: 860ms; }

.birthday-intro__gift-sparkles i:nth-child(even) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.birthday-intro__copy {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  animation: birthday-copy-show 820ms 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.birthday-intro__eyebrow {
  margin: 0 0 10px;
  color: #cc4d7f;
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.birthday-intro__eyebrow span {
  display: block;
}

.birthday-intro__eyebrow span + span {
  margin-top: 4px;
}

.birthday-intro h2 {
  margin: 0;
  color: #74334d;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: clamp(26px, 6.2vw, 64px);
  letter-spacing: -0.06em;
  line-height: 1.25;
  white-space: nowrap;
  text-shadow: 0 5px 0 rgba(255, 255, 255, 0.68);
}

.birthday-intro p:last-child {
  margin: 18px 0 0;
  color: #9e5874;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 700;
}

.birthday-intro__skip {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  padding: 10px 16px;
  border: 1px solid rgba(187, 71, 117, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #a64b70;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

body.has-birthday-intro {
  overflow: hidden;
}

@keyframes birthday-gift-arrive {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.55) rotate(-8deg);
  }

  70% {
    transform: translateY(-8px) scale(1.04) rotate(3deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes birthday-lid-open {
  from {
    transform: translate(0, 0) rotate(0);
  }

  to {
    transform: translate(-34px, -76px) rotate(-28deg);
  }
}

@keyframes birthday-gift-glow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.45);
  }

  42% {
    opacity: 1;
  }

  100% {
    opacity: 0.72;
    transform: translateX(-50%) scale(1.12);
  }
}

@keyframes birthday-gift-shimmer {
  from {
    transform: translateX(0) rotate(24deg);
  }

  to {
    transform: translateX(330px) rotate(24deg);
  }
}

@keyframes birthday-gift-sparkle {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) rotate(45deg) scale(0.2);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), var(--spark-y)) rotate(225deg) scale(1.15);
  }
}

@keyframes birthday-copy-show {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html[data-profile-theme="birthday"] .profile-header__inner {
    width: calc(100% - 24px);
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 8px;
  }

  html[data-profile-theme="birthday"] .profile-brand {
    font-size: 20px;
  }

  html[data-profile-theme="birthday"] .profile-brand small {
    font-size: 9px;
  }

  html[data-profile-theme="birthday"] .profile-nav {
    gap: clamp(7px, 1.15vw, 12px);
  }

  html[data-profile-theme="birthday"] .profile-nav a {
    font-size: 11px;
  }

  .profile-header__inner:has(.birthday-preview-actions) {
    grid-template-columns: 138px minmax(0, 1fr) auto;
  }

  .profile-header__inner:has(.birthday-preview-actions) .profile-brand {
    font-size: 20px;
  }

  .profile-header__inner:has(.birthday-preview-actions) .profile-nav {
    gap: clamp(8px, 1.35vw, 14px);
  }

  .profile-header__inner:has(.birthday-preview-actions) .profile-nav__mobile-home {
    display: none;
  }

  .birthday-preview-actions .archive-home {
    display: inline-flex;
  }

  .birthday-replay-button,
  .birthday-preview-actions .archive-home {
    min-height: 38px;
    padding: 0 9px;
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  .birthday-preview-actions {
    display: none;
  }

  .profile-nav .profile-nav__birthday-replay {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 10px 13px;
    border: 1px solid rgba(225, 103, 151, 0.32);
    border-radius: 999px;
    background: rgba(255, 235, 243, 0.94);
    color: #a94a70;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .birthday-intro__content {
    padding-right: 8px;
    padding-left: 8px;
  }

  .profile-nav .profile-nav__birthday-replay {
    padding: 9px 11px;
    font-size: 11px;
  }

  .birthday-intro__gift {
    width: 150px;
    height: 118px;
    margin-bottom: 36px;
    border-radius: 11px 11px 19px 19px;
  }

  .birthday-intro__gift::before {
    right: -14px;
    width: 21px;
    height: 96px;
  }

  .birthday-intro__gift-glow {
    top: -92px;
    width: 240px;
    height: 190px;
  }

  .birthday-intro__gift-lid {
    top: -24px;
    left: -11px;
    width: 172px;
    height: 38px;
    transform-origin: 20px 34px;
  }

  .birthday-intro__gift-bow {
    top: -49px;
    transform: translateX(-50%) scale(0.78);
  }

  .birthday-intro__gift-sparkles {
    transform: scale(0.78);
  }

  .birthday-intro__skip {
    top: 12px;
    right: 12px;
  }
}

@media (max-width: 480px) {
  html[data-profile-theme="birthday"] .hero-quote {
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 10px 7px;
    font-size: clamp(8px, 2.25vw, 9px);
    letter-spacing: -0.055em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .falling-gift,
  .birthday-intro__canvas,
  .birthday-intro__gift-glow,
  .birthday-intro__gift-sparkles {
    display: none !important;
  }

  .birthday-intro__gift,
  .birthday-intro__gift-lid,
  .birthday-intro__copy,
  .birthday-intro__gift-shine::before {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}