/* One palette for the logo, accent lettering and coloured actions. */
@property --brand-light{syntax:'<number>';inherits:true;initial-value:0}
:root{--colour-blue:#78aaff;--colour-purple:#ab83f5;--colour-middle:#969fff;--colour-x1:20%;--colour-y1:30%;--colour-x2:80%;--colour-y2:65%;--colour-x3:50%;--colour-y3:40%;--brand-white:rgb(255 255 255)}
:root[data-theme=dark]{--colour-blue:#9ac7ff;--colour-purple:#c3a7ff;--colour-middle:#a8bbff}
:is(.brand,.vm-logo,html:not([data-vm-app=post-manager]) em,.gradient-text,.cinema-title,.cinema-title h1 em,.service-row>span,.approach-grid span,:where(#form-status),.button,.chat-launcher,[data-slot=button][data-variant=default]:not(:where(.approval-approve,.approval-revise,.approval-await,.bulk-actions *)),.signin,.liquid-button){--colour-field:radial-gradient(ellipse at var(--colour-x1) var(--colour-y1),var(--colour-blue) 0%,transparent 62%),radial-gradient(ellipse at var(--colour-x2) var(--colour-y2),var(--colour-purple) 0%,transparent 66%),radial-gradient(ellipse at var(--colour-x3) var(--colour-y3),var(--colour-middle) 0%,transparent 60%),linear-gradient(130deg,var(--colour-purple),var(--colour-blue))}
:is(.brand,.vm-logo,html:not([data-vm-app=post-manager]) em,.gradient-text,.service-row>span,.approach-grid span,:where(#form-status)){--brand-light:0;transition:--brand-light .35s ease,filter .35s ease}
:is(.brand,.vm-logo,html:not([data-vm-app=post-manager]) em,.gradient-text,.service-row>span,.approach-grid span,:where(#form-status))[data-brand-active=true]{--brand-light:1;filter:brightness(1.12) drop-shadow(0 0 8px color-mix(in srgb,var(--colour-blue) 28%,transparent))}
:is(html:not([data-vm-app=post-manager]) em,.gradient-text,.service-row>span,.approach-grid span,:where(#form-status)){background-image:radial-gradient(ellipse 85px 65px at var(--shine-x,50%) var(--shine-y,50%),color-mix(in srgb,var(--brand-white) calc(var(--brand-light)*62%),transparent),transparent),var(--colour-field);background-size:100% 100%;animation:none!important}
.brand-art::after,.vm-logo::after{background-image:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,50%),color-mix(in srgb,var(--brand-white) calc(var(--brand-light)*65%),transparent),transparent 72%),var(--colour-field)}
/* Soft transitions with distinct blue and lavender pools on actions. */
:is(.button,.chat-launcher,[data-slot=button][data-variant=default]:not(:where(.approval-approve,.approval-revise,.approval-await,.bulk-actions *)),.signin,.liquid-button){--colour-field:radial-gradient(ellipse 90% 145% at var(--colour-x1) var(--colour-y1),var(--colour-blue) 12%,transparent 80%),radial-gradient(ellipse 95% 145% at var(--colour-x2) var(--colour-y2),var(--colour-purple) 12%,transparent 82%),radial-gradient(ellipse 80% 135% at var(--colour-x3) var(--colour-y3),var(--colour-middle) 0%,transparent 80%),linear-gradient(130deg,var(--colour-purple),var(--colour-blue));background-image:var(--colour-field);background-size:100% 100%;color:#151523}
:is(.button,.chat-launcher,[data-slot=button][data-variant=default]:not(:where(.approval-approve,.approval-revise,.approval-await,.bulk-actions *)),.signin,.liquid-button)::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 110px 80px at var(--shine-x,50%) var(--shine-y,50%),color-mix(in srgb,var(--brand-white) 75%,transparent),transparent 90%);opacity:0;pointer-events:none;mix-blend-mode:screen;animation:none!important;transform:none;transition:opacity .35s ease;z-index:-1;filter:blur(5px);mask:none;-webkit-mask:none;padding:0}
:is(.button,.chat-launcher,[data-slot=button][data-variant=default]:not(:where(.approval-approve,.approval-revise,.approval-await,.bulk-actions *)),.signin,.liquid-button)[data-brand-active=true]{box-shadow:0 0 24px color-mix(in srgb,var(--colour-purple) 38%,transparent),0 8px 24px color-mix(in srgb,var(--colour-blue) 24%,transparent),inset 0 2px 3px #fffd;filter:none}
:is(.button,.chat-launcher,[data-slot=button][data-variant=default]:not(:where(.approval-approve,.approval-revise,.approval-await,.bulk-actions *)),.signin,.liquid-button)[data-brand-active=true]::after{opacity:.7}
@media(dynamic-range:high){@supports(color:color(display-p3-linear 2 2 2)){:root{--brand-white:color(display-p3-linear 2 2 2)}}}
@media(prefers-reduced-motion:reduce){:is(.brand,.vm-logo,html:not([data-vm-app=post-manager]) em,.gradient-text,.button,.chat-launcher,[data-slot=button][data-variant=default]:not(:where(.approval-approve,.approval-revise,.approval-await,.bulk-actions *)),.signin,.liquid-button){transition:none}}
@media(forced-colors:active){.brand-art>img,.vm-logo>img{opacity:1!important}.brand-art::after,.vm-logo::after{display:none}:is(html:not([data-vm-app=post-manager]) em,.gradient-text,.service-row>span,.approach-grid span,:where(#form-status)){background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}:is(.button,.chat-launcher,[data-slot=button][data-variant=default]:not(:where(.approval-approve,.approval-revise,.approval-await,.bulk-actions *)),.signin,.liquid-button){background:ButtonFace;color:ButtonText}}

:is(.cinema-title,.cinema-heading,.button,.chat-launcher,.signin,.liquid-button){--colour-blue:#9ac7ff;--colour-purple:#c3a7ff;--colour-middle:#a8bbff}
/* These brand effects intentionally continue with the site's requested motion preference. */
@media(prefers-reduced-motion:reduce){
 :is(.brand,html:not([data-vm-app=post-manager]) em,.gradient-text,.service-row>span,.approach-grid span,#form-status){transition:--brand-light .35s ease,filter .35s ease!important}
 :is(.button,.chat-launcher,.signin,.liquid-button)::after{transition:opacity .35s ease!important}
 .ambient::before{animation:ambient-flow 30s ease-in-out infinite alternate!important}
 .ambient::after{animation:ambient-flow 36s ease-in-out infinite alternate!important}
}

/* Reveal the original artwork first, then blend into the live colour field. */
html[data-brand-opening] :is(.brand-art,.vm-logo)>img{transition:opacity .7s ease}
html[data-brand-opening] :is(.brand-art,.vm-logo)::after{transition:opacity .7s ease}
html[data-brand-opening="true"] :is(.brand-art,.vm-logo)>img{opacity:1}
html[data-brand-opening="true"] :is(.brand-art,.vm-logo)::after{opacity:0}
html[data-brand-opening="complete"] :is(.brand-art,.vm-logo)>img{opacity:0}
html[data-brand-opening="complete"] :is(.brand-art,.vm-logo)::after{opacity:1}