/* Chapter 01: a personal letter, blue silk countdown, and a little joy. */
#welcome {
  padding: 86px max(7vw, 24px) 105px;
  background: radial-gradient(ellipse at 12% 25%, #c5dcf9 0, transparent 43%),
    radial-gradient(ellipse at 95% 80%, #bdd5f5 0, transparent 45%), #eaf2fd;
}
#welcome::before { display: none; }
#welcome > .chapter-label { margin-bottom: 76px; color: #34568e; font-size: 10px; letter-spacing: .19em; }
#welcome .welcome-letter {
  position: relative; max-width: 940px; margin: auto; padding: 90px 58px 37px;
  border: 1px solid #a8bfdc; border-radius: 5px;
  background: linear-gradient(115deg, #fffefd 0%, #f8fbff 49%, #fffefd 100%);
  box-shadow: 0 22px 65px #2c508a17, 0 2px 4px #2c508a0a;
}
.welcome-letter::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid #c4d5e9;
  border-radius: 2px; pointer-events: none;
}
#welcome .letter-topper {
  position: absolute; top: -67px; left: 50%; width: min(530px, 90%); height: 145px;
  margin-left: calc(min(530px, 90%) / -2); pointer-events: none;
}
.letter-bloom { position: absolute; width: 100%; height: auto; inset: -25px 0 auto; filter: drop-shadow(0 5px 5px #244b7920); animation: letter-bloom-sway 9s ease-in-out infinite alternate; }
.letter-monogram {
  position: absolute; top: 37px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; justify-content: center; width: 86px; height: 86px;
  border: 1px solid #f2f7ff; border-radius: 50%; color: #f6f9ff;
  background: radial-gradient(circle at 32% 25%, #5783c2, #234d96 62%, #143777);
  box-shadow: 0 4px 11px #173b7355, inset 0 0 0 5px #3762a3, inset 0 0 0 6px #bbd6f0;
  font: 38px/1 var(--serif); letter-spacing: -.07em;
}
.letter-monogram small { font: 25px var(--script); margin: 10px 2px 0 0; }
#welcome .salutation { margin: 21px 0 22px; font: italic 500 26px/1.35 var(--serif); color: #5a749b; }
#welcome .section-title { margin: 0; color: #203e79; font: 500 clamp(40px, 4.9vw, 62px)/1.08 var(--serif); letter-spacing: -.035em; }
#welcome .section-title > span { display: block; }
#welcome .section-title em { display: block; padding: 7px 0 3px; color: #315ca4; font: 400 clamp(64px, 7.5vw, 94px)/1.05 var(--script); letter-spacing: -.025em; }
.letter-flourish { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 24px auto 22px; color: #7297c5; }
.letter-flourish > i { height: 1px; width: 86px; background: linear-gradient(90deg, transparent, #95b3d8); }
.letter-flourish > i:last-child { rotate: 180deg; }
.letter-flourish .icon { width: 18px; height: 18px; stroke-width: 1; }
#welcome .welcome-copy { max-width: 600px; margin: 0 auto; font: 500 23px/1.5 var(--serif); color: #425c80; text-wrap: pretty; }
.welcome-copy > span { display: block; margin-top: 12px; }
.welcome-copy em { color: #315a96; }
.letter-signoff { margin: 26px auto 0; color: #365d94; }
.letter-signoff > span { font: italic 20px/1.2 var(--serif); }
.letter-signoff > p { margin: 6px 0 0; font: 46px/1.1 var(--script); }
.letter-signoff i { font: italic 28px var(--serif); color: #7b9ac0; }
#welcome .welcome-countdown {
  position: relative; width: min(100%, 680px); margin: 32px auto 0; padding: 24px 25px 20px;
  background: radial-gradient(ellipse at 50% 0, #3b63aa, #214583 65%, #193971);
  border: 1px solid #6a91c8; border-radius: 3px; box-shadow: 0 8px 20px #1e43751f;
}
.welcome-countdown::before { content: ''; position: absolute; inset: 6px; border: 1px solid #a8c6ed59; pointer-events: none; }
.countdown-prelude { margin: 0; color: #e3edfb; font: 500 9px/1.5 var(--sans); letter-spacing: .19em; }
#welcome .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 530px; gap: 0; margin: 16px auto 0; }
#welcome .countdown > div { width: auto; min-width: 0; min-height: 0; padding: 0 14px; background: none; border: 0; border-radius: 0; box-shadow: none; }
#welcome .countdown > div + div { border-left: 1px solid #b0c9eb4d; }
#welcome .countdown strong { font: 500 55px/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; }
#welcome .countdown span { color: #d6e5fa; font: 500 10px/1.4 var(--sans); letter-spacing: .15em; margin-top: 8px; }
#welcome .countdown-note { margin: 17px 0 0; color: #e0ecff; font: italic 25px/1.2 var(--serif); }
.letter-star { position: absolute; display: block; width: 17px; aspect-ratio: 1; background: #7fa7d6; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: letter-twinkle 5s ease-in-out infinite; pointer-events: none; }
.letter-star-one { top: 24%; left: 25px; }.letter-star-two { top: 42%; right: 26px; width: 12px; animation-delay: -2.8s; }
#welcome .welcome-flutter { margin: 31px auto 0; }
.flutter-prelude { margin: 0 0 14px; font: italic 26px/1.3 var(--serif); color: #3b6099; }
#welcome .garden-invitation {
  position: relative; overflow: hidden; min-height: 74px; padding: 13px 26px 13px 18px; gap: 16px;
  border: 1px solid #d6e8ff; border-radius: 50px;
  background: linear-gradient(110deg, #3564b1, #23458c); color: #fff;
  box-shadow: 0 4px 0 #17356b, 0 12px 27px #315a9c30, inset 0 0 0 4px #ffffff0a;
  font: 600 16px/1.3 var(--sans);
}
#welcome .garden-invitation::before {
  content: ''; position: absolute; width: 26%; inset: -40% auto -40% -40%; rotate: 20deg;
  background: linear-gradient(90deg, transparent, #e4f1ff35, transparent); pointer-events: none;
  animation: letter-button-sheen 7s ease-in-out infinite;
}
#welcome .garden-invitation > * { position: relative; }
#welcome .garden-invitation:hover { background: linear-gradient(110deg, #4576c4, #2b529c); box-shadow: 0 4px 0 #17356b, 0 14px 30px #315a9c44; }
#welcome .garden-invitation:focus-visible { outline: 3px solid #234c91; outline-offset: 6px; }
#welcome .little-butterfly { width: 43px; height: 43px; flex: 0 0 43px; filter: drop-shadow(0 2px 4px #08255e66); animation: letter-button-flutter 2.8s ease-in-out infinite alternate; }
#welcome .flutter-arrow { font: 27px var(--serif); color: #d3e5ff; }
#welcome .garden-hint { margin: 18px 0 0; font: italic 20px/1.35 var(--serif); color: #506f9a; }
#welcome .chapter-florals { width: 400px; bottom: -70px; }
#welcome:not(.scene-active) :is(.letter-bloom, .letter-star, .little-butterfly),
#welcome:not(.scene-active) .garden-invitation::before,
body.motion-paused #welcome :is(.letter-bloom, .letter-star, .little-butterfly),
body.motion-paused #welcome .garden-invitation::before { animation-play-state: paused; }
@keyframes letter-bloom-sway { from { transform: translateY(0) rotate(-.65deg); } to { transform: translateY(3px) rotate(.65deg); } }
@keyframes letter-twinkle { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: .85; scale: 1; } }
@keyframes letter-button-sheen { 0%, 66% { translate: 0; opacity: 0; } 70% { opacity: 1; } 88%, 100% { translate: 580% 0; opacity: 0; } }
@keyframes letter-button-flutter { from { transform: rotate(-10deg) scaleX(.85); } to { transform: rotate(5deg) scaleX(1); } }
@media (max-width: 650px) {
  #welcome { padding: 58px 16px 76px; }
  #welcome > .chapter-label { font-size: 9px; letter-spacing: .12em; margin-bottom: 60px; }
  #welcome .welcome-letter { padding: 62px 20px 23px; }
  .welcome-letter::before { inset: 7px; }
  #welcome .letter-topper { top: -48px; height: 115px; width: 94%; margin-left: -47%; }
  .letter-bloom { top: -9px; }
  .letter-monogram { top: 21px; width: 66px; height: 66px; font-size: 30px; }
  .letter-monogram small { font-size: 21px; margin-top: 8px; }
  #welcome .salutation { font-size: 21px; margin: 17px -5px 19px; }
  #welcome .section-title { font-size: clamp(32px, 8.3vw, 46px); line-height: 1.1; letter-spacing: -.035em; }
  #welcome .section-title em { font-size: clamp(45px, 12vw, 69px); line-height: 1.03; padding: 8px 0 0; max-width: 350px; margin: auto; }
  .letter-flourish { margin: 23px 0 20px; gap: 10px; }.letter-flourish > i { width: 62px; }
  #welcome .welcome-copy { font-size: 20px; line-height: 1.45; max-width: 390px; }
  .welcome-copy > span { margin-top: 14px; }
  .letter-signoff { margin-top: 24px; }.letter-signoff > span { font-size: 18px; }.letter-signoff > p { font-size: 42px; }
  #welcome .welcome-countdown { width: calc(100% + 12px); max-width: none; margin: 27px -6px 0; padding: 21px 8px 18px; }
  .countdown-prelude { font-size: 8px; letter-spacing: .1em; }
  #welcome .countdown { margin-top: 16px; }
  #welcome .countdown > div { padding: 0 4px; }
  #welcome .countdown strong { font-size: 38px; }
  #welcome .countdown span { font-size: 9px; letter-spacing: .04em; margin-top: 7px; }
  #welcome .countdown-note { font-size: 23px; margin-top: 18px; }
  .letter-star-one { left: 12px; top: 17%; width: 11px; }.letter-star-two { right: 12px; top: 44%; width: 8px; }
  #welcome .welcome-flutter { margin-top: 28px; }
  .flutter-prelude { font-size: 24px; }
  #welcome .garden-invitation { min-height: 70px; max-width: 100%; padding: 13px 18px 13px 14px; gap: 10px; font-size: 14px; }
  #welcome .little-butterfly { width: 37px; height: 37px; flex-basis: 37px; }
  #welcome .garden-hint { font-size: 18px; max-width: 260px; margin: 18px auto 0; }
  #welcome .chapter-florals { width: 240px; bottom: -54px; }
}
@media (max-width: 360px) {
  #welcome .welcome-letter { padding-inline: 17px; }
  #welcome .salutation { font-size: 20px; }
  #welcome .section-title { font-size: 30px; }
  #welcome .section-title em { max-width: 240px; font-size: 47px; }
  #welcome .welcome-copy { font-size: 19px; }
  #welcome .countdown strong { font-size: 35px; }
  .countdown-prelude { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  #welcome :is(.letter-bloom, .letter-star, .little-butterfly), #welcome .garden-invitation::before { animation: none; }
}