/* The phone app opens on the same white canvas as the existing logo film. */
html.app-intro-pending body::before{content:'';position:fixed;inset:0;background:#fff;z-index:1000;pointer-events:none}
html.app-intro-transferring body::before{display:none}
.app-intro{position:fixed;inset:0;width:100vw;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:var(--wine);overflow:hidden}
.app-intro[open]{display:grid;place-items:center}
.app-intro::backdrop{background:transparent}
.app-intro-logo{position:relative;width:min(72vw,310px);aspect-ratio:1462/1078;transform-origin:center}
.app-intro-logo video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.app-intro-logo video{opacity:0;pointer-events:none}
.app-intro.is-playing video{opacity:1}
html.app-intro-transferring .header-animated-brand{opacity:0}
/* Hold the homepage on its first animation frame until the intro has gone. */
html.app-intro-pending .hp-page,html.app-intro-pending .hp-page *{animation-play-state:paused!important}

.app-intro-shade{position:absolute;inset:0;background:#fff;z-index:-1}

/* The source film has an outer gold frame; keep only the logo drawing. */
.app-intro-logo video,.header-animated-brand .animated-brand-logo{clip-path:inset(1.2% .4% .8% .4%)}