body[data-page="anniversary"] { --gold: #f6dfab; --veil: .15; --pointer-x: 0px; --pointer-y: 0px; --art-shift: 0px; --reading-progress: 0; background: #211332; color: #fff7ef; }
body[data-page="anniversary"] > .sample-bar, body[data-page="anniversary"] > .site-header, body[data-page="anniversary"] > .site-footer { display: none; }
body[data-page="anniversary"] #main { position: relative; isolation: isolate; }
body[data-page="anniversary"] .skip-link { z-index: 60; }
.celebration-background { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #39244e; }
.celebration-background > img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 35%; max-width: none; transform: translate3d(var(--pointer-x), calc(var(--pointer-y) + var(--art-shift)), 0) scale(1.06); }
.celebration-background::after { content: ""; position: absolute; inset: 0; background: #211232; opacity: var(--veil); }
.celebration-light { position: absolute; inset: -30%; background: conic-gradient(from 210deg at 70% 25%, transparent 0 32deg, #fff5e91f 36deg, transparent 40deg 67deg, #f0d8ff24 72deg, transparent 77deg); transform-origin: 70% 25%; mix-blend-mode: screen; }
#celebration-effects { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.celebration-canvas { display: block; width: 100%; height: 100%; }
.celebration-ribbons { position: absolute; inset: 0; }
.celebration-ribbons i { position: absolute; width: 72vw; height: 24vw; border: 1px solid #fff0c659; border-left: 0; border-right: 0; border-radius: 50%; rotate: -24deg; left: -35%; top: -20%; box-shadow: 0 0 25px #e6d4ff22; }
.celebration-ribbons i:nth-child(2) { left: 70%; top: 76%; rotate: 35deg; border-color: #efb8e95c; }
.celebration-ribbons i:nth-child(3) { left: -48%; top: 90%; rotate: 20deg; width: 90vw; }
.celebration-orbit { position: absolute; border: 1px solid #fff6; border-radius: 50%; width: 35vw; height: 35vw; box-shadow: 0 0 35px #d9baff22, inset 0 0 40px #d9baff22; }
.orbit-a { right: -20vw; top: 25%; }
.orbit-b { left: -25vw; bottom: -10vw; width: 55vw; height: 55vw; }
.celebration-nav { position: absolute; inset: 26px 3.5vw auto; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.celebration-brand { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border: 1px solid #f6dfab85; background: #2918319c; backdrop-filter: blur(12px); box-shadow: 0 0 25px #fff1c916; }
.celebration-brand > svg { width: 28px; height: 28px; color: #e8caed; }
.celebration-brand > span { font: 14px/1.5 Georgia, serif; letter-spacing: .17em; color: var(--gold); }
.celebration-brand small { display: block; font: 7px/1.6 "Yu Gothic", sans-serif; letter-spacing: .17em; }
.celebration-back { padding: 12px 17px; background: #291831b5; border: 1px solid #fff5; font-size: 11px; backdrop-filter: blur(12px); }
.celebration-back span { margin-left: 15px; color: var(--gold); }
.celebration-scroll-progress { position: fixed; z-index: 14; left: 0; top: 0; width: 3px; height: 100svh; background: linear-gradient(#fffae0, #e9b3e6, #c9b4fb); transform-origin: top; transform: scaleY(var(--reading-progress)); box-shadow: 0 0 15px #f9d5fa; }
.celebration-hero { position: relative; min-height: 860px; height: 100svh; display: flex; align-items: flex-end; padding: 140px 5vw 135px; background: linear-gradient(180deg, #24132910 35%, #2d164355 55%, #1b102dcc 100%); }
.celebration-hero-copy { width: min(750px, 66%); position: relative; z-index: 2; }
.celebration-kicker { font-size: 10px; font-weight: 500; letter-spacing: .2em; color: var(--gold); margin-bottom: 22px; line-height: 1.8; }
.celebration-kicker > span { display: inline-block; margin-inline: 12px; }
.celebration-hero h1 { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(46px, 5.5vw, 78px); font-weight: 500; line-height: 1.5; letter-spacing: .04em; text-shadow: 0 3px 25px #342245a6; }
.celebration-hero h1 > span, .celebration-hero h1 > em { display: block; }
.celebration-hero h1 > em { font-style: normal; color: #ffebbd; text-shadow: 0 0 28px #ffe5aa66, 0 3px 25px #2a183ad9; }
.celebration-lead { font-size: 13px; line-height: 2; letter-spacing: .08em; text-shadow: 0 2px 15px #210b37; }
.celebration-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.celebration-link { display: inline-flex; align-items: center; gap: 28px; padding: 14px 22px; background: linear-gradient(115deg, #fbe7bd, #ecd3fa 60%, #f9dded); color: #503361; border: 1px solid #fff7dc; box-shadow: 0 0 28px #e4b9f63b; font-size: 12px; }
.celebration-link svg { width: 21px; height: 21px; }
.birthday-keyvisual { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; padding-block: 10px; border-bottom: 1px solid #f7dfc599; }
.birthday-keyvisual svg { width: 16px; height: 16px; }
.celebration-date { position: absolute; z-index: 2; right: 5vw; bottom: 145px; width: 215px; height: 215px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #ffebbd8f; border-radius: 50%; background: #51356178; backdrop-filter: blur(12px); box-shadow: 0 0 65px #e5b8f52b, inset 0 0 35px #fbebc213; }
.celebration-date::before, .celebration-date::after { content: ""; position: absolute; inset: -10px; border: 1px dashed #f6dfab78; border-radius: 50%; }
.celebration-date::after { inset: 8px; border-style: solid; border-color: #f7dfab38; }
.celebration-date > span { font-size: 8px; letter-spacing: .2em; color: var(--gold); }
.celebration-date strong { font: 57px/1.4 Georgia, serif; color: #fff1cc; }
.celebration-date strong > span { color: #e7b6ed; }
.celebration-date small { font: italic 16px/1.6 Georgia, serif; }
.celebration-date > svg { position: absolute; right: 2px; bottom: 18px; width: 40px; height: 40px; color: #e4c9f0; filter: drop-shadow(0 0 12px #f4d2fa); }
.celebration-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.celebration-scroll > span { font-size: 7px; letter-spacing: .22em; white-space: nowrap; }
.celebration-scroll > i { display: block; width: 1px; height: 35px; background: linear-gradient(#ffeac0, transparent); transform-origin: top; }
.celebration-sample { position: absolute; left: 5vw; bottom: 35px; font-size: 9px; color: #e9d6f2; letter-spacing: .06em; }
.celebration-letter-section { position: relative; padding: 150px 24px 100px; min-height: 1050px; display: flex; align-items: center; flex-direction: column; background: linear-gradient(#21132f00, #2e183580 30%, #24113445); scroll-margin-top: 25px; }
.celebration-letter-section, .celebration-finale { overflow: clip; }
.celebration-script { position: relative; z-index: 2; font: italic clamp(42px, 6vw, 80px)/1.5 Georgia, serif; color: #ffebc2; text-shadow: 0 0 30px #d5b0ed, 0 3px 25px #3b224f; margin-bottom: 30px; }
.celebration-letter-halo { position: absolute; width: min(920px, 90vw); aspect-ratio: 1; top: 60px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.celebration-letter-halo > span { position: absolute; inset: 0; border: 1px solid #ebc4fb5c; border-radius: 50%; box-shadow: 0 0 45px #ebc7fc30, inset 0 0 50px #ebc7fc22; }
.celebration-letter-halo > span:nth-child(2) { inset: 30px; border: 1px dashed #f3d8a67a; }
.celebration-letter-halo > svg { position: absolute; width: 100px; height: 100px; top: 60px; left: 22px; color: #dcc0e5b0; }
.celebration-letter { position: relative; width: min(760px, 100%); padding: 65px 75px 55px; background: linear-gradient(135deg, #392443e8, #251932eb 60%, #4c2d54e8); border: 1px solid #eddbb68f; box-shadow: 0 0 75px #e8c5fc24, 0 30px 80px #0e061e80; text-align: center; backdrop-filter: blur(18px); transform: perspective(1000px) rotateX(var(--letter-x, 0deg)) rotateY(var(--letter-y, 0deg)); }
.celebration-letter::before, .celebration-letter::after { content: "✦"; position: absolute; top: -17px; left: -13px; color: #ffe3a4; font: 32px/1 Georgia, serif; text-shadow: 0 0 15px #ffe3a4; }
.celebration-letter::after { inset: auto -13px -17px auto; }
.celebration-letter-border { position: absolute; inset: 12px; border: 1px solid #dfc69347; pointer-events: none; }
.celebration-letter h2 { position: relative; font-family: var(--serif); font-size: 30px; line-height: 1.8; letter-spacing: .06em; font-weight: 500; color: #fff0cb; margin-bottom: 26px; }
.celebration-dear { font: italic 17px/1.7 Georgia, var(--serif); color: #dcbde7; margin-bottom: 28px; }
.celebration-letter-body { font-family: var(--serif); font-size: 14px; line-height: 2.2; letter-spacing: .03em; }
.celebration-letter-body p { margin-bottom: 22px; }
.celebration-signature { font: italic 37px/1.6 Georgia, serif; color: #efd3e9; margin: 28px 0 0; }
.celebration-signature small { display: block; font: 9px/1.8 "Yu Gothic", sans-serif; letter-spacing: .12em; }
.celebration-letter-flower { position: absolute; width: 42px; height: 42px; bottom: 38px; right: 38px; color: #c5a1d2; rotate: -18deg; }
.celebration-finale { position: relative; min-height: 900px; padding: 110px 24px 130px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(#27163855, #321c3ed0); }
.celebration-finale-ring { position: absolute; width: min(660px, 88vw); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.celebration-finale-ring span { position: absolute; inset: 0; border: 1px solid #ffe4b85e; border-radius: 50%; box-shadow: 0 0 65px #d8b2ee33; }
.celebration-finale-ring span:nth-child(2) { inset: -24px; border-style: dashed; border-color: #e8c8ed52; }
.celebration-finale-ring svg { position: absolute; width: 58px; height: 58px; top: 70px; right: 0; color: #eed2e8; }
.celebration-finale > *:not(.celebration-finale-ring) { position: relative; z-index: 1; }
.celebration-finale-word { font: clamp(86px, 11vw, 158px)/1.08 Georgia, serif; letter-spacing: -.06em; margin: 5px 0 40px; color: #fff3cd; text-shadow: 0 0 55px #f1c4f370; }
.celebration-finale-word em { color: #eac7f2; }
.celebration-finale h2 { color: #fff0cb; font-family: var(--serif); font-size: 29px; font-weight: 500; margin-bottom: 15px; line-height: 1.9; }
.celebration-finale > p:not(.celebration-kicker):not(.celebration-finale-word):not(.celebration-burst-status) { font-size: 12px; }
.celebration-burst-button { display: flex; align-items: center; justify-content: center; gap: 17px; margin-top: 15px; min-height: 63px; padding: 15px 28px; border: 1px solid #fff3cd; color: #563060; background: linear-gradient(110deg, #ffe8b8, #f5d7ec 50%, #ddd0fb); box-shadow: 0 0 35px #e8b2f545; font-size: 13px; letter-spacing: .03em; transition: scale .25s, box-shadow .25s; }
.celebration-burst-button:hover { scale: 1.04; box-shadow: 0 0 50px #f4d1f386; }
.celebration-burst-button > svg { color: #a378b9; width: 26px; height: 26px; }
.celebration-burst-button > span:last-child { font-size: 20px; color: #9160a8; }
.celebration-burst-status { min-height: 23px; font-size: 10px; color: #ffe7bd; margin: 16px 0; }
.celebration-bouquet { display: flex; align-items: center; justify-content: center; gap: 7px; height: 0; overflow: hidden; }
.celebration-bouquet.is-delivered { height: 50px; margin-top: 20px; }
.celebration-bouquet svg { width: 32px; height: 32px; color: #e9cdf8; rotate: -15deg; }
.celebration-bouquet svg:nth-child(2) { color: #f4ddb3; width: 40px; height: 40px; rotate: 10deg; }
.celebration-bouquet svg:nth-child(3) { color: #f5c5df; rotate: 25deg; }
.celebration-home-link { display: inline-flex; align-items: center; gap: 25px; padding-block: 8px; font-size: 11px; border-bottom: 1px solid #d2b6da; }
.celebration-home-link svg { width: 20px; height: 20px; }
.celebration-footer { position: relative; padding: 32px 6vw 75px; background: #201127eb; border-top: 1px solid #d5abd32b; color: #ccb8d4; font-size: 9px; }
.celebration-footer > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.celebration-footer > div > span { font: 9px/1.7 Georgia, serif; letter-spacing: .15em; color: #f0d7b2; }
.celebration-footer p { margin-block: 20px; max-width: 630px; font-size: 9px; }
.celebration-footer a { text-decoration: underline; text-underline-offset: 4px; padding-block: 6px; }
.celebration-motion-toggle { position: fixed; bottom: 22px; right: 22px; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid #edd6ee8f; background: #2c173ad9; color: #fff5de; backdrop-filter: blur(15px); border-radius: 30px; font-size: 10px; box-shadow: 0 0 22px #dab7f330; }
.celebration-motion-toggle > span:first-child { font: 17px/1 Georgia, serif; color: #f4d2f2; }
.celebration-ready[data-celebration-motion="running"] .celebration-light { animation: celebration-rays 20s ease-in-out infinite alternate; }
.celebration-ready[data-celebration-motion="running"] .celebration-ribbons i { animation: celebration-ribbon 12s ease-in-out infinite alternate; }
.celebration-ready[data-celebration-motion="running"] .celebration-ribbons i:nth-child(2) { animation-delay: -6s; }
.celebration-ready[data-celebration-motion="running"] .celebration-date::before, .celebration-ready[data-celebration-motion="running"] .celebration-letter-halo > span:nth-child(2), .celebration-ready[data-celebration-motion="running"] .celebration-finale-ring span:nth-child(2) { animation: celebration-orbit 45s linear infinite; }
.celebration-ready[data-celebration-motion="running"] .celebration-hero-copy > * { animation: celebration-entrance 1.1s cubic-bezier(.16,1,.3,1) both; }
.celebration-ready[data-celebration-motion="running"] .celebration-hero-copy h1 { animation-delay: .12s; }
.celebration-ready[data-celebration-motion="running"] .celebration-lead { animation-delay: .25s; }
.celebration-ready[data-celebration-motion="running"] .celebration-hero-actions { animation-delay: .4s; }
.celebration-ready[data-celebration-motion="running"] .celebration-date { animation: celebration-seal 1.4s cubic-bezier(.16,1,.3,1) both; }
.celebration-ready[data-celebration-motion="running"] .celebration-scroll > i { animation: celebration-scroll 2.2s ease-in-out infinite; }
.celebration-ready[data-celebration-motion="running"] .celebration-letter.is-revealed { animation: celebration-letter 1.3s cubic-bezier(.16,1,.3,1) both; }
.celebration-ready[data-celebration-motion="running"] .celebration-finale.is-revealed .celebration-finale-word { animation: celebration-entrance 1.4s cubic-bezier(.16,1,.3,1) both; }
.celebration-ready[data-celebration-motion="running"] .celebration-bouquet.is-delivered svg { animation: celebration-seal .7s cubic-bezier(.16,1,.3,1) both; }
body[data-celebration-motion="paused"] *, body[data-celebration-motion="paused"] *::before, body[data-celebration-motion="paused"] *::after { animation: none !important; transition: none !important; }
@keyframes celebration-rays { to { rotate: 15deg; scale: 1.1; } }
@keyframes celebration-ribbon { to { translate: 5vw 5vh; rotate: 5deg; } }
@keyframes celebration-orbit { to { rotate: 360deg; } }
@keyframes celebration-entrance { from { opacity: 0; translate: 0 35px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes celebration-seal { from { opacity: 0; scale: .72; rotate: -20deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes celebration-scroll { 0%, 100% { scale: 1 .4; opacity: .5; } 50% { scale: 1 1; opacity: 1; } }
@keyframes celebration-letter { from { opacity: 0; translate: 0 65px; scale: .95; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 1100px) {
  .celebration-hero { padding-inline: 5vw; }
  .celebration-hero-copy { width: 74%; }
  .celebration-hero h1 { font-size: clamp(39px, 6.2vw, 65px); }
  .celebration-date { width: 160px; height: 160px; right: 4vw; bottom: 230px; }
  .celebration-date strong { font-size: 42px; }
  .celebration-date > svg { width: 30px; height: 30px; }
  .celebration-letter { padding-inline: 45px; }
}
@media (max-width: 760px) {
  .celebration-background > img { object-position: 36% 35%; }
  .celebration-nav { inset: 16px 16px auto; gap: 12px; }
  .celebration-brand { gap: 7px; padding: 9px 10px; }
  .celebration-brand > svg { width: 22px; height: 22px; }
  .celebration-brand > span { font-size: 11px; letter-spacing: .12em; }
  .celebration-brand small { font-size: 5px; }
  .celebration-back { font-size: 9px; padding: 11px 10px; }
  .celebration-back span { margin-left: 5px; }
  .celebration-hero { height: 100svh; min-height: 780px; padding: 210px 24px 115px; background: linear-gradient(180deg, #2b1b3410 30%, #321e4160 53%, #1d102fe8 100%); }
  .celebration-hero-copy { width: 100%; }
  .celebration-kicker { font-size: 7px; letter-spacing: .16em; margin-bottom: 16px; }
  .celebration-kicker > span { margin-inline: 6px; }
  .celebration-hero h1 { font-size: clamp(31px, 8.8vw, 52px); letter-spacing: .02em; line-height: 1.65; margin-bottom: 17px; }
  .celebration-lead { font-size: 10px; line-height: 2; letter-spacing: .03em; }
  .celebration-hero-actions { gap: 14px; }
  .celebration-link { font-size: 10px; padding: 13px 17px; gap: 17px; }
  .celebration-link svg { width: 18px; height: 18px; }
  .birthday-keyvisual { font-size: 9px; gap: 8px; }
  .celebration-date { width: 94px; height: 94px; right: 26px; top: 103px; bottom: auto; }
  .celebration-date > span { font-size: 5px; }
  .celebration-date strong { font-size: 27px; }
  .celebration-date small { font-size: 10px; }
  .celebration-date::before { inset: -6px; }
  .celebration-date::after { inset: 5px; }
  .celebration-date > svg { width: 21px; height: 21px; bottom: 4px; right: -2px; }
  .celebration-scroll { left: 24px; transform: none; align-items: flex-start; bottom: 18px; gap: 10px; }
  .celebration-scroll > span { font-size: 6px; }
  .celebration-scroll > i { height: 25px; }
  .celebration-sample { left: 24px; bottom: 72px; font-size: 8px; }
  .celebration-letter-section { padding: 95px 18px 70px; min-height: 0; }
  .celebration-script { font-size: 36px; margin-bottom: 27px; }
  .celebration-letter-halo { width: 105vw; top: 135px; }
  .celebration-letter-halo > span:nth-child(2) { inset: 15px; }
  .celebration-letter-halo > svg { width: 58px; height: 58px; top: 30px; left: 10px; }
  .celebration-letter { padding: 38px 26px 40px; }
  .celebration-letter h2 { font-size: 21px; letter-spacing: 0; line-height: 1.8; margin-bottom: 20px; }
  .celebration-dear { font-size: 15px; }
  .celebration-letter-body { font-size: 12px; line-height: 2.1; }
  .celebration-letter-body br { display: none; }
  .celebration-letter-border { inset: 8px; }
  .celebration-signature { font-size: 31px; }
  .celebration-letter-flower { width: 29px; height: 29px; right: 19px; bottom: 18px; }
  .celebration-finale { min-height: 750px; padding: 90px 20px 105px; }
  .celebration-finale-word { font-size: clamp(73px, 20vw, 128px); margin-bottom: 35px; }
  .celebration-finale h2 { font-size: 22px; line-height: 1.9; }
  .celebration-finale > p:not(.celebration-kicker):not(.celebration-finale-word):not(.celebration-burst-status) { font-size: 10px; }
  .celebration-burst-button { min-height: 59px; font-size: 11px; gap: 12px; padding-inline: 22px; }
  .celebration-burst-button > svg { width: 23px; height: 23px; }
  .celebration-finale-ring svg { width: 38px; height: 38px; top: 35px; }
  .celebration-footer { padding: 28px 24px 95px; }
  .celebration-footer > div:first-child { align-items: flex-start; }
  .celebration-footer > div > span { font-size: 7px; max-width: 155px; }
  .celebration-footer p { font-size: 8px; }
  .celebration-motion-toggle { bottom: 16px; right: 16px; font-size: 9px; padding: 10px 13px; }
  .celebration-ribbons i { width: 150vw; height: 60vw; left: -100%; }
}
@media (max-width: 360px) {
  .celebration-hero { padding-inline: 20px; }
  .celebration-hero h1 { font-size: 30px; }
  .celebration-hero-actions { gap: 7px; }
  .celebration-letter { padding-inline: 22px; }
  .celebration-letter h2 { font-size: 19px; }
  .celebration-script { font-size: 31px; }
  .celebration-finale h2 { font-size: 20px; }
  .celebration-back { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .celebration-background > img { transform: scale(1.06); } }