/* Monochrome cinema with a soft irregular window into its colour master. */
.cinema-scene:not(.cinema-colour){filter:grayscale(1)}
.cinema-colour{filter:saturate(1.22) brightness(1.06);opacity:0;pointer-events:none;transition:opacity .28s ease;--cloud-width:clamp(640px,66vw,1400px);--cloud-height:clamp(460px,70vh,900px);mask-image:url('assets/colour-cloud.svg');mask-repeat:no-repeat;mask-size:var(--cloud-width) var(--cloud-height);mask-position:calc(var(--colour-x,0px) - var(--cloud-width)/2) calc(var(--colour-y,0px) - var(--cloud-height)/2)}
.cinema-statement.colour-active .cinema-colour{opacity:1}
.cinema-colour{transition:opacity .65s ease}
.cinema-statement.colour-active .cinema-colour{transition-duration:.18s}
.cinema-touch-surface{position:absolute;inset:0;z-index:0;touch-action:none;user-select:none;-webkit-user-select:none}
.cinema-copy{position:relative;z-index:1}
.cinema-statement:after{pointer-events:none}
.colour-hint{position:absolute;bottom:24px;left:7%;z-index:2;color:#eee9;letter-spacing:.04em;font-size:11px;pointer-events:none;transition:opacity .35s}
.colour-hint:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:9px;background:#b9ccca;box-shadow:0 0 9px #b9ccca66}
.colour-active .colour-hint{opacity:.25}.touch-hint{display:none}
.social-link .social-icon{width:21px;height:21px;flex:none;transition:color .25s,transform .3s;transform:none}
.social-telegram .social-icon{fill:currentColor;stroke:none}
.social-instagram .social-icon{stroke:currentColor;fill:none}
.social-link:is(:hover,:focus-visible,:active,.is-glinting) .social-icon{transform:translateY(-2px)}
.social-telegram:is(:hover,:focus-visible,:active,.is-glinting){color:#39b4ec;border-color:#39b4ec;background-color:#229ed911}
.social-telegram.button-gold:is(:hover,:focus-visible,:active,.is-glinting){color:white;background:#229ed9;border-color:#229ed9}
.social-instagram:is(:hover,:focus-visible,:active,.is-glinting){color:#ed79b0;border-color:#d85bab}
.social-instagram:is(:hover,:focus-visible,:active,.is-glinting) .social-icon{stroke:url(#instagram-spectrum)}
@media(max-width:700px){.cinema-colour{--cloud-width:90vw;--cloud-height:70vw}.cinema-touch-surface{top:28px;bottom:auto;aspect-ratio:1923/818;width:100%}}
@media(hover:none){.pointer-hint{display:none}.touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.cinema-colour,.social-link .social-icon{transition:none}.social-link:is(:hover,:focus-visible,:active,.is-glinting) .social-icon{transform:none}}