/* Chapter visuals are separate from the holiday film. */
#main{--chapter-glow:#b9a5ed;--chapter-mist:#62478e;--chapter-spark:#f5edff}
#main[data-season=spring]{--chapter-glow:#ebb3d8;--chapter-mist:#76476d;--chapter-spark:#ffe0f2}
#main[data-season=summer]{--chapter-glow:#b1caff;--chapter-mist:#494b8c;--chapter-spark:#e4efff}
#main[data-season=autumn]{--chapter-glow:#e5b2ab;--chapter-mist:#815366;--chapter-spark:#ffe9d3}
#main .hero{isolation:isolate}
#main .hero-title{margin-top:12px;font-size:clamp(46px,13vw,80px);letter-spacing:-.065em}
#main .hero-subtitle{color:#e4d8f1}
#main .chapter-sky{height:clamp(230px,37svh,370px);min-height:0;overflow:hidden;margin:2px auto 4px}
.chapter-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 56%,var(--chapter-mist),transparent 65%);animation:chapter-breath 11s ease-in-out infinite alternate}
.chapter-light::before,.chapter-light::after{content:'';position:absolute;inset:15% 11% 22%;border-radius:50%;transform:rotate(-17deg);border-top:1px solid var(--chapter-glow);border-bottom:1px solid #e1caff27;box-shadow:0 -13px 42px -18px var(--chapter-glow)}
.chapter-light::after{inset:21% 16% 26%;transform:rotate(12deg);opacity:.44}
#chapterGroup{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;mask-image:radial-gradient(ellipse at center,#000 42%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 74%)}
.chapter-flakes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chapter-flakes::before,.chapter-flakes::after{content:'';position:absolute;inset:-50% 0 0;background:radial-gradient(1.3px 1.3px at 15% 23%,var(--chapter-spark) 60%,transparent),radial-gradient(1px 1px at 72% 72%,var(--chapter-spark) 65%,transparent),radial-gradient(1.7px 1.7px at 48% 46%,var(--chapter-spark) 48%,transparent),radial-gradient(1px 1px at 93% 19%,var(--chapter-spark) 62%,transparent);background-size:136px 126px;animation:chapter-drift 16s linear infinite;opacity:.49}
.chapter-flakes::after{background-size:211px 176px;animation-duration:29s;opacity:.24}
@keyframes chapter-drift{to{transform:translateY(126px)}}
@keyframes chapter-breath{to{transform:scale(1.08);opacity:.77}}
#main .center-seal{width:auto;height:auto;bottom:17%;color:#f5edff}
#main .seal-day{font-size:clamp(69px,21vw,112px);font-weight:normal}
#main .seal-month{letter-spacing:.32em}
#main .present,#main .calendar{border:1px solid #dbc7f03a;border-radius:12px;background:linear-gradient(125deg,#211433b0,#0d0818d9)}
#main .calendar .wk{color:#c5b7d4}
#main .calendar .day.today{background:#e9dcfa;color:#20112e;box-shadow:0 0 20px #c79deb66}
#main .calendar .day:focus-visible{outline-offset:-2px}
#main .foot .small-btn{display:inline-block;margin:4px 0}
#intro.daily-cut .film{background:radial-gradient(ellipse at 50% 37%,var(--nebula,#50296b),#1b102e 47%,#070510 79%)}
#intro.daily-cut .solo:has(img[src$="p155.webp"]){animation-name:suga-fade}
#intro.daily-cut .duet img[src$="p155.webp"]{animation-name:suga-fade;animation-fill-mode:both}
#intro.daily-cut img[src$="p155.webp"]{object-fit:scale-down;mask-image:none;-webkit-mask-image:none}
@keyframes suga-fade{0%{opacity:0}25%,75%{opacity:1}100%{opacity:0}}
#intro.daily-cut .duet img[src$="p155.webp"]{animation-name:suga-finale}
@keyframes suga-finale{0%{opacity:0}35%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.chapter-light,.chapter-flakes::before,.chapter-flakes::after{animation:none}}


.january-cover{display:none}
#main.january-chapter .hero{padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
#main.january-chapter #replayFilm{grid-row:1;justify-self:center;z-index:3}

#main.january-chapter .chapter-sky {
  grid-area:2 / 1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  width:min(calc(100% - 20px),580px);
  height:auto;
  min-height:0;
  max-height:none;
  margin:10px auto 0;
  padding:0 8px 96px;
  isolation:isolate;
  background:radial-gradient(ellipse at bottom,#43285d,#120c22 65%);
}
#main.january-chapter .chapter-light{display:none}
#main.january-chapter .january-cover {
  display:block;
  grid-column:1/-1;
  width:100%;
  height:auto;
  max-height:640px;
  object-fit:contain;
}
#main.january-chapter #chapterGroup{display:none}
#main.january-chapter .hero-heading {
  grid-area:3 / 1;
  align-self:end;
  justify-self:center;
  width:min(calc(100% - 20px),580px);
  text-align:left;
  padding:0 16px 20px;
}
#main.january-chapter .hero-heading .micro{color:#f3e6ff;font-size:9px;letter-spacing:.17em}
#main.january-chapter .hero-title{font-size:clamp(36px,10vw,67px);margin:4px 0}
#main.january-chapter .hero-subtitle{font-size:14px;margin-bottom:0}
#main.january-chapter .center-seal{left:auto;right:15px;bottom:19px;transform:none}
#main.january-chapter .center-seal::before,#main.january-chapter .center-seal::after{display:none}
#main.january-chapter .seal-day{font-size:clamp(34px,10vw,52px)}
#main.january-chapter .seal-month{font-size:7px;letter-spacing:.16em}
#main.january-chapter .chapter-flakes{top:auto;height:116px;opacity:.75}
#main.january-chapter .present{margin-top:10px}
#intro.daily-cut .cast,#intro.daily-cut .duet{inset:4% 0 8%}
#intro.daily-cut .solo{overflow:hidden}
#intro.daily-cut.playing .solo{animation-duration:.99s}
#intro.daily-cut.playing .solo:not(:has(img[src$="p155.webp"])){animation-name:daily-portrait}
@keyframes daily-portrait{0%{opacity:0;transform:translateX(var(--entry)) scale(.98)}24%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateX(var(--exit)) scale(1.015)}}
#intro.daily-cut .duet>div{position:absolute;inset:0;width:100%;height:100%;opacity:0}
#intro.daily-cut.playing .duet>div:first-child{animation:closeup-first 2.2s 6.85s both}
#intro.daily-cut.playing .duet>div:nth-child(2){animation:closeup-second 2.45s 8.75s both}
#intro.daily-cut.playing .duet img{animation:none;opacity:1}
#intro.daily-cut .duet img:not([src$="p155.webp"]){max-height:100%;max-width:100%}
@keyframes closeup-first{0%{opacity:0;transform:scale(.96)}25%,76%{opacity:1}100%{opacity:0;transform:scale(1.035)}}
@keyframes closeup-second{0%{opacity:0;transform:scale(.96)}24%,100%{opacity:1}100%{transform:scale(1.035)}}
#intro.daily-cut .duet>div:has(img[src$="p155.webp"]){animation-timing-function:linear;scale:.95}
#intro.daily-cut .trails{top:35%;height:46%}
#intro.daily-cut.playing .trails path{transform-box:fill-box;transform-origin:50% 55%;animation:heart-forward 1.5s 7.35s both}
#intro.daily-cut.playing .trails path+path{animation-delay:9.15s;animation-duration:1.75s}
@keyframes heart-forward{0%{opacity:0;stroke-dashoffset:1;transform:translateY(-10%) scale(.43)}28%{opacity:1}66%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:-.2;transform:translateY(20%) scale(1.65)}}
#intro.daily-cut .daily-film-title{bottom:12%;font-size:clamp(25px,7.6vw,60px)}
#intro.daily-cut.still .duet>div:first-child{opacity:1;animation:none!important}
#intro.daily-cut.still .duet>div:nth-child(2){animation:none!important}
#intro.january-video-day .duet,#intro.january-video-day .trails{display:none}
#intro.january-video-day:has(#januaryFinale:not([hidden])) .daily-film-title{visibility:hidden}
#januaryFinale:not([hidden]){position:absolute;inset:5% 0 8%;display:grid;place-items:center;background:radial-gradient(ellipse at center,#57367977,transparent 73%);animation:chapter .55s both}
#januaryFinale video{width:100%;height:100%;max-width:540px;object-fit:contain;min-height:0;grid-area:1/1;mask-image:linear-gradient(transparent,#000 8%,#000 85%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 85%,transparent)}
#januaryFinale svg{position:absolute;width:17%;max-width:100px;bottom:13%;right:8%;pointer-events:none;fill:none;stroke:#f7d7ff;stroke-width:1.2;filter:drop-shadow(0 0 8px #dc9aff);animation:january-heart 2.8s ease-in-out infinite}
#januaryFinale video[hidden]+svg{display:none}
#januaryFinale p{padding:0 25px;max-width:30ch;font:italic 23px/1.45 Georgia,serif;color:#f5eaff}
#januaryFinale button{position:absolute;bottom:8%}
@keyframes january-heart{0%,100%{opacity:.16;transform:scale(.8)}50%{opacity:.72;transform:scale(1.13)}}
.no-effects #januaryFinale svg{display:none}
@media(prefers-reduced-motion:reduce){#januaryFinale svg{display:none}}


#main:has(#chapterGroup:not([hidden])) .chapter-sky{
  height:auto;max-height:none;padding:8px 8px 106px;
}
#chapterGroup:not([hidden]){
  position:relative;inset:auto;display:block;width:100%;max-height:58svh;
  height:auto;object-fit:contain;mask:none;-webkit-mask:none;z-index:2;
}
#main:has(#chapterGroup:not([hidden])) .center-seal{bottom:12px}