/* A dark translucent blur, revealed radially. No opaque screen or duplicate logo. */
@property --gridly-reveal-radius{syntax:'<percentage>';inherits:false;initial-value:0%}
html.gridly-home-intro::after{
 content:"";position:fixed;inset:0;z-index:10000;pointer-events:none;
 background:rgba(0,0,0,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 --gridly-reveal-radius:0%;
 mask-image:radial-gradient(circle at 50% 50%,transparent var(--gridly-reveal-radius),#000 calc(var(--gridly-reveal-radius) + 22%));
 -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--gridly-reveal-radius),#000 calc(var(--gridly-reveal-radius) + 22%));
 animation:gridly-center-reveal 1.7s cubic-bezier(.4,0,.2,1) both;
}
@keyframes gridly-center-reveal{
 0%{--gridly-reveal-radius:0%;opacity:1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 25%{opacity:1}
 100%{--gridly-reveal-radius:110%;opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
}
html.gridly-home-intro .page-home.is-active{animation:none}
@media(prefers-reduced-motion:reduce){html.gridly-home-intro::after{display:none!important}}
html.reduce-motion.gridly-home-intro::after{display:none!important}
/* The original brand fades in first while the translucent blur clears. */
@keyframes gridly-brand-arrive{from{opacity:0}to{opacity:1}}
@keyframes gridly-home-content-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 html.gridly-home-intro:not(.reduce-motion) .page-home .hero>:is(.logo-wrap,h1),
 html.gridly-home-intro:not(.reduce-motion) .page-home .gm-brand{animation:gridly-brand-arrive 1.25s ease-in-out both}
 html.gridly-home-intro:not(.reduce-motion) .page-home :is(.hero-tagline,.utility-row,.hero-rule,.gm-header-actions){animation:gridly-home-content-arrive .65s ease .95s both}
 html.gridly-home-intro:not(.reduce-motion) .page-home :is(.home-menu,.gm-groups),
 html.gridly-home-intro:not(.reduce-motion) .gchat-launch{animation:gridly-home-content-arrive .75s ease 1.2s both}
}