html:has(.cinema:not(.hide)){overflow:hidden;overscroll-behavior:none}
#intro.cinema{display:block;overflow:hidden;background:#070510;isolation:isolate;text-align:center}
.cinema::before{display:none}
.cinema .film{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 37%,var(--nebula,#50296b),#1b102e 47%,#070510 79%)}
.cinema .orbit{position:absolute;inset:5% 0 9%;background:radial-gradient(ellipse at 20% 24%,#caa2ff46,transparent 34%),radial-gradient(ellipse at 83% 56%,#9976ed36,transparent 35%);opacity:.6}
.cinema.playing .orbit{animation:aurora 21s both}
@keyframes aurora{0%{opacity:0;transform:scale(.86)}15%,65%{opacity:.65}75%{opacity:1}100%{opacity:.65;transform:scale(1.15)}}
.cinema .cast,.cinema .duet{position:absolute;inset:9% 0 17%;pointer-events:none}
.cinema img{width:100%;height:100%;display:block;object-fit:contain;object-position:center 43%;mask-image:radial-gradient(ellipse 71% 67% at 50% 42%,#000 45%,#000d 63%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse 71% 67% at 50% 42%,#000 45%,#000d 63%,transparent 95%)}
.cinema .solo{position:absolute;inset:0;opacity:0}
.cinema.playing .solo{animation:solo 2.04s var(--solo) both}
@keyframes solo{0%{opacity:0;transform:translate3d(var(--entry),3%,0) scale(.87)}27%{opacity:1}69%{opacity:1;transform:translate3d(0,0,0) scale(1.04)}100%{opacity:0;transform:translate3d(var(--exit),-2%,0) scale(1.12)}}
.cinema .duet{inset:9% max(2%,calc((100% - 760px)/2)) 19%;display:flex;align-items:center}
.cinema .duet img{width:50%;height:90%;opacity:0}
.cinema.daily-cut.playing .duet img{animation:duet 3.65s var(--cue,7s) both}
@keyframes duet{0%{opacity:0;transform:translateY(7%) scale(.91)}32%,80%{opacity:1}100%{opacity:1;transform:scale(1.04)}}
.cinema .snow,.cinema .trails{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cinema .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#080511 0%,#0b0716c9 15%,transparent 42%,transparent 87%,#0a0612a1)}
.cinema .trails{height:57%;top:16%;overflow:visible}
.cinema .trails path,.cinema .solo svg path{fill:none;stroke:#ffe8ff;stroke-width:1.35;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 4px #e8a0ff)}
.cinema .solo svg{position:absolute;width:64%;height:46%;top:34%;left:18%;overflow:visible;pointer-events:none}
.cinema.playing .solo path{animation:light-kiss 1.35s var(--kiss) both}
.cinema.daily-cut.playing .trails path{animation:light-kiss 2.75s 7.55s both}
.cinema.daily-cut.playing .trails path+path{animation-delay:7.85s}
@keyframes light-kiss{0%{opacity:0;stroke-dashoffset:1}24%{opacity:1}64%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:-.55}}
.cinema .film-label{font:600 9px/1.5 system-ui,sans-serif;letter-spacing:.29em;text-transform:uppercase;color:#e5d7f2}
.cinema .film-label{position:absolute;top:max(20px,env(safe-area-inset-top));left:14px;right:14px}
.cinema .film-title{position:absolute;inset:35% 12px auto;margin:0;font:italic clamp(34px,10vw,87px)/1.03 Georgia,serif;color:#f0e6fa;background:linear-gradient(#fff,#bdaccb 44%,#fff 59%,#ba9cc9);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px 20px #d58cff61);opacity:0}
.cinema .film-title strong{display:block;font-weight:400;font-style:normal;font-size:1.25em;letter-spacing:.08em}
@keyframes chapter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cinema .film-controls{position:absolute;inset:auto 0 max(17px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:12px}
.cinema button,.film-replay{color:#ece0f5;background:#100a1ac9;border:1px solid #e6ccff60;border-radius:40px;padding:12px 15px;font-size:12px}
.cinema .skip-film{display:none}.cinema.playing .skip-film{display:block}.cinema.playing #openGift,.cinema.playing #filmSettings{display:none}
.cinema .daily-film-title{inset:auto 12px 13%;font-size:clamp(29px,8vw,68px)}
.cinema.daily-cut .daily-film-title{opacity:1}
.cinema.still .cast{display:none}
.modal{z-index:60}
.scene .photo.left,.scene .photo.right{height:100%;width:51%;top:0;object-fit:contain;object-position:center 38%;border:0;border-radius:0;box-shadow:none;background:none;transform:none;animation:none;mask-image:radial-gradient(ellipse 72% 66% at 50% 41%,#000 46%,#000b 69%,transparent 94%);-webkit-mask-image:radial-gradient(ellipse 72% 66% at 50% 41%,#000 46%,#000b 69%,transparent 94%)}
.scene .photo.left{left:0}.scene .photo.right{right:0}
.scene .halo,.scene::before{display:none}
.scene .center-seal{border:0;background:none;box-shadow:none;bottom:0;text-shadow:0 2px 25px #0c0418,0 0 12px #0c0418}
.little-caption{display:none}
.present{border:0;border-top:1px solid #e2ccf45c;border-radius:0;background:none;box-shadow:none}
.calendar{border-radius:5px;background:#0d081ab3}
.brand,.hero-title,.section-line h2{font-family:Georgia,serif}
.pick img{object-fit:contain!important;background:#150c24}
.cinema.playing .solo{animation-duration:1.58s}
.cinema.daily-cut.playing .solo{animation-duration:1.14s}
.cinema.daily-cut.playing .solo path{animation-duration:.78s}
.cinema .duet img{height:100%}
#replayFilm{margin:4px auto 12px}
.cinema .solo,.cinema .duet>div{display:grid;place-items:center;min-height:0;min-width:0}
.cinema .duet>div{width:50%;height:100%}
.cinema .solo img,.cinema .duet img{width:auto;height:auto;max-width:100%;max-height:100%;mask-image:radial-gradient(ellipse 58% 68% at 50% 42%,#000 46%,#000d 62%,transparent 95%),linear-gradient(transparent,#000 8%,#000 70%,transparent);mask-composite:intersect;-webkit-mask-image:radial-gradient(ellipse 58% 68% at 50% 42%,#000 46%,#000d 62%,transparent 95%),linear-gradient(transparent,#000 8%,#000 70%,transparent);-webkit-mask-composite:source-in}
.scene .photo.left,.scene .photo.right{width:auto;height:auto;max-width:50%;max-height:100%;top:50%;transform:translate(-50%,-50%)}
.scene .photo.left{left:25%}.scene .photo.right{left:75%;right:auto}
.scene .photo.left,.scene .photo.right{mask-image:radial-gradient(ellipse 58% 68% at 50% 42%,#000 46%,#000d 62%,transparent 95%),linear-gradient(transparent,#000 8%,#000 70%,transparent);mask-composite:intersect;-webkit-mask-image:radial-gradient(ellipse 58% 68% at 50% 42%,#000 46%,#000d 62%,transparent 95%),linear-gradient(transparent,#000 8%,#000 70%,transparent);-webkit-mask-composite:source-in}

.cinema:not(.daily-cut) .film{
  background:radial-gradient(ellipse at 50% 80%,#6f3a93 0%,transparent 48%),radial-gradient(ellipse at 52% 30%,#30184e,#0b071a 75%);
}
.cinema:not(.daily-cut) .orbit{
  inset:0;
  background:radial-gradient(circle at 9% 16%,#ffce8e 0,transparent 2.2%),radial-gradient(circle at 91% 25%,#d7a6ff 0,transparent 3%),radial-gradient(circle at 12% 79%,#edb275 0,transparent 4%),radial-gradient(circle at 88% 78%,#b782f2 0,transparent 6%),linear-gradient(145deg,transparent 53%,#9b63c826 65%,transparent 77%);
}
.cinema:not(.daily-cut) .cast{inset:6% 0 15%}
.cinema:not(.daily-cut) .solo{grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:0 14px}
.cinema:not(.daily-cut) .solo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;mask:none;-webkit-mask:none;opacity:1}
.cinema:not(.daily-cut).playing .solo{animation:holiday-portrait 1.94s var(--solo) both}
@keyframes holiday-portrait{0%,100%{opacity:0}18%,81%{opacity:1}}
.holiday-member{font:400 clamp(32px,9vw,62px)/1 Georgia,serif;color:#fff1e2;text-shadow:0 3px 14px #110a23}
.cinema .holiday-group{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;background:#10091d}
.cinema .holiday-group img{width:100%;height:100%;max-width:2000px;max-height:3000px;object-fit:cover;object-position:50% 50%;mask-image:none;-webkit-mask-image:none}
.cinema:not(.daily-cut).playing .holiday-group{animation:holiday-group-in 1.05s 14s both}
@keyframes holiday-group-in{from{opacity:0}to{opacity:1}}
.cinema:not(.daily-cut) .veil{background:linear-gradient(0deg,#090612b5,transparent 14%,transparent 93%,#0a061275)}
.cinema:not(.daily-cut) .snow{opacity:.63}
.cinema.daily-cut .holiday-group{display:none}
.cinema:not(.daily-cut).still .holiday-group{animation:none!important;opacity:1}




/* The same stage light surrounds the portraits and the group finale. */
.cinema:not(.daily-cut) .film{
  background:
    radial-gradient(ellipse at 50% 83%,#9f59c1 0%,#44235d 31%,transparent 66%),
    radial-gradient(ellipse at 52% 25%,#382459,#0b071a 76%);
}
.cinema:not(.daily-cut) .orbit{
  inset:0;
  background:
    conic-gradient(from 34deg at 3% 78%,transparent 0deg,#f5c28458 11deg,#e6a2fa4d 18deg,transparent 35deg),
    conic-gradient(from 296deg at 97% 78%,transparent 0deg,#c486ff68 10deg,#f8ca8d47 21deg,transparent 32deg),
    conic-gradient(from 133deg at 12% 8%,transparent 0deg,#c186e34a 12deg,transparent 29deg),
    conic-gradient(from 203deg at 89% 9%,transparent 0deg,#e9be8e40 14deg,transparent 29deg);
}
.cinema:not(.daily-cut) .orbit::before,
.cinema:not(.daily-cut) .orbit::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:29%;
  height:30%;
  background:url('assets/approved-cover.png') no-repeat left 69% / 410% auto;
  opacity:.82;
  mask-image:radial-gradient(ellipse 95% 73% at 1% 73%,#000 10%,transparent 98%);
  -webkit-mask-image:radial-gradient(ellipse 95% 73% at 1% 73%,#000 10%,transparent 98%);
}
.cinema:not(.daily-cut) .orbit::after{
  left:auto;
  right:0;
  background-position:right 68%;
  mask-image:radial-gradient(ellipse 95% 73% at 99% 73%,#000 10%,transparent 98%);
  -webkit-mask-image:radial-gradient(ellipse 95% 73% at 99% 73%,#000 10%,transparent 98%);
}
.cinema:not(.daily-cut) .solo img{
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(transparent,#000 11%,#000 72%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(transparent,#000 11%,#000 72%,transparent);
  -webkit-mask-composite:source-in;
}
@keyframes holiday-portrait{
  0%{opacity:0;translate:0 9px}
  27%,78%{opacity:1;translate:0 0}
  100%{opacity:0;translate:0 -5px}
}
.cinema:not(.daily-cut) .holiday-member{
  color:#ffedce;
  text-shadow:0 0 23px #db94ee80,0 3px 14px #110a23;
}
.cinema:not(.daily-cut) .veil{
  background:
    radial-gradient(ellipse at 0% 83%,#e6a76792,transparent 24%),
    radial-gradient(ellipse at 100% 85%,#a56be9aa,transparent 26%),
    radial-gradient(ellipse at 14% 94%,#f3bd5f37,transparent 26%),
    linear-gradient(0deg,#090612df,transparent 18%,transparent 90%,#0a0612ba);
}
.cinema:not(.daily-cut) .veil::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 5% 78%,#fff2cb 0 2px,#efaf745e 4px,transparent 24px),
    radial-gradient(circle at 94% 79%,#f4e1ff 0 2px,#ce85f167 4px,transparent 28px),
    radial-gradient(circle at 15% 91%,#f6bc79 0 2px,transparent 7px),
    radial-gradient(circle at 85% 92%,#ead0ff 0 2px,transparent 7px),
    radial-gradient(circle at 9% 57%,#f9d49b 0 1px,transparent 4px),
    radial-gradient(circle at 92% 53%,#d8a5ff 0 1px,transparent 4px),
    radial-gradient(circle at 5% 26%,#ffddb8 0 1px,transparent 4px),
    radial-gradient(circle at 94% 35%,#f5cfff 0 1px,transparent 4px);
}
.cinema:not(.daily-cut).playing .veil::after{animation:stage-lights 4s ease-in-out infinite alternate}
@keyframes stage-lights{from{opacity:.52}to{opacity:1}}
.cinema:not(.daily-cut) .snow{opacity:.88}
#intro.cinema:not(.daily-cut).hide{transform:none}