/* One opaque day scene fades over the night scene; portraits are never filtered. */
#title { isolation:isolate; background:none; transition:color 700ms ease; }
#title .title-cover-art { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; user-select:none; background:#272744; }
#title .title-cover-night,#title .title-cover-day { position:absolute; inset:0; }
#title .title-cover-background { position:absolute; inset:0; display:block; width:1920px; height:1080px; max-width:none; }
#title .title-cover-portrait { position:absolute; left:var(--sprite-x,380px); top:130px; display:block; width:633px; height:950px; max-width:none; transform:scale(.9518716577540107); transform-origin:50% 100%; filter:none; }
#title .title-cover-night::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,11,20,0) 35%,rgba(11,11,20,.55) 70%); }
#title .title-cover-day { background:#fbf5ef; opacity:0; transition:opacity 700ms ease; }
#title[data-preview-day="true"] .title-cover-day { opacity:1; }
#title h1,#title .sub,#title .btn,#title .foot { transition:color 700ms ease; }
#title[data-preview-day="true"],#title[data-preview-day="true"] h1,#title[data-preview-day="true"] .sub { color:#272744; }
#title.title-cover-resetting,#title.title-cover-resetting .title-cover-day,#title.title-cover-resetting h1,#title.title-cover-resetting .sub,#title.title-cover-resetting .btn,#title.title-cover-resetting .foot { transition:none!important; }
@media (prefers-reduced-motion:reduce) {
  #title,#title .title-cover-day,#title h1,#title .sub,#title .btn,#title .foot { transition-duration:1ms!important; }
}

#title[data-preview-day="true"] .sub {color:#6c687a;}